fix(home): correct subtle item divider details on home tab

fixes #428
This commit is contained in:
Jason Dreyzehner 2016-10-12 21:17:30 -04:00
commit 41c01250a0
2 changed files with 63 additions and 72 deletions

View file

@ -22,6 +22,18 @@
border-top:none;
padding-bottom: 1.5rem;
padding-top:1.5rem;
&.wallet{
.big-icon-svg{
& > .bg{
padding: .25rem
}
}
}
}
.item-sub {
&:first-child:before {
width: 100%
}
&:before {
display: block;
position: absolute;
@ -37,29 +49,6 @@
}
}
}
&.item-heading{
&:before{
width:100% !important;
top:99%
}
}
&:nth-child(1){
&:before{
width:0;
}
}
&:nth-child(2):last-child{
&:before{
width:0;
}
}
&.wallet{
.big-icon-svg{
& > .bg{
padding: .25rem
}
}
}
}
}
.next-step.item {

View file

@ -34,7 +34,7 @@
<span class="badge badge-assertive m5t m10r" ng-show="txpsN>3"> {{txpsN}}</span>
</a>
<a ng-repeat="tx in txps" class="item" ng-click="openTxpModal(tx)">
<a ng-repeat="tx in txps" class="item item-sub" ng-click="openTxpModal(tx)">
<span ng-include="'views/includes/txp.html'"></span>
</a>
</div>
@ -48,7 +48,7 @@
<ion-spinner icon="lines"></ion-spinner>
<div translate>Updating activity...</div>
</span>
<a class="item activity" ng-repeat="notification in notifications" ng-click="openNotificationModal(notification)">
<a class="item item-sub activity" ng-repeat="notification in notifications" ng-click="openNotificationModal(notification)">
<span ng-include="'views/includes/walletActivity.html'"></span>
</a>
</div>
@ -58,57 +58,59 @@
<span translate>Wallets</span>
<a ui-sref="tabs.add" ng-if="wallets[0]"><i class="icon ion-ios-plus-empty list-add-button"></i></a>
</div>
<a ng-hide="wallets[0]" ui-sref="tabs.add" class="item item-icon-left item-big-icon-left item-icon-right next-step ng-hide">
<i class="icon big-icon-svg">
<div class="bg icon-create-wallet"></div>
</i>
<span translate>Create a bitcoin wallet</span>
<i class="icon bp-arrow-right"></i>
</a>
<a ng-repeat="wallet in wallets track by $index"
class="item item-icon-left item-big-icon-left item-icon-right wallet"
ng-click="openWallet(wallet)">
<i class="icon big-icon-svg">
<img src="img/icon-wallet.svg" ng-style="{'background-color': wallet.color}" class="bg"/>
</i>
<span>
{{wallet.name || wallet.id}}
<span class="size-12 text-light" ng-if="wallet.n > 1">
{{wallet.m}}-of-{{wallet.n}}
<div>
<a ng-if="!wallets[0]" ui-sref="tabs.add" class="item item-icon-left item-big-icon-left item-icon-right next-step ng-hide">
<i class="icon big-icon-svg">
<div class="bg icon-create-wallet"></div>
</i>
<span translate>Create a bitcoin wallet</span>
<i class="icon bp-arrow-right"></i>
</a>
<a ng-repeat="wallet in wallets track by $index"
class="item item-sub item-icon-left item-big-icon-left item-icon-right wallet"
ng-click="openWallet(wallet)">
<i class="icon big-icon-svg">
<img src="img/icon-wallet.svg" ng-style="{'background-color': wallet.color}" class="bg"/>
</i>
<span>
{{wallet.name || wallet.id}}
<span class="size-12 text-light" ng-if="wallet.n > 1">
{{wallet.m}}-of-{{wallet.n}}
</span>
</span>
</span>
<p>
<span ng-if="!wallet.isComplete()" class="assertive" translate>
Incomplete
</span>
<span ng-if="wallet.isComplete()">
<span ng-if="!wallet.balanceHidden">{{wallet.status.availableBalanceStr}}</span>
<span ng-if="wallet.balanceHidden" translate>[Balance Hidden]</span>
</span>
&nbsp;
</p>
<i class="icon bp-arrow-right"></i>
</a>
<a ui-sref="tabs.bitpayCard"
ng-if="wallets[0] && externalServices.BitpayCard && bitpayCardEnabled"
class="item item-icon-left item-big-icon-left item-icon-right">
<i class="icon big-icon-svg">
<div class="bg icon-bitpay-card"></div>
</i>
<h2>BitPay Card</h2>
<p ng-if="!bitpayCard" translate>Add funds to get started</p>
<span ng-if="bitpayCard">${{bitpayCard.balance}}</span>
<i class="icon bp-arrow-right"></i>
</a>
<p>
<span ng-if="!wallet.isComplete()" class="assertive" translate>
Incomplete
</span>
<span ng-if="wallet.isComplete()">
<span ng-if="!wallet.balanceHidden">{{wallet.status.availableBalanceStr}}</span>
<span ng-if="wallet.balanceHidden" translate>[Balance Hidden]</span>
</span>
&nbsp;
</p>
<i class="icon bp-arrow-right"></i>
</a>
<a ui-sref="tabs.bitpayCard"
ng-if="wallets[0] && externalServices.BitpayCard && bitpayCardEnabled"
class="item item-sub item-icon-left item-big-icon-left item-icon-right">
<i class="icon big-icon-svg">
<div class="bg icon-bitpay-card"></div>
</i>
<h2>BitPay Card</h2>
<p ng-if="!bitpayCard" translate>Add funds to get started</p>
<span ng-if="bitpayCard">${{bitpayCard.balance}}</span>
<i class="icon bp-arrow-right"></i>
</a>
</div>
</div>
<div class="list card" ng-if="wallets[0] && externalServices.BuyAndSell && (glideraEnabled || coinbaseEnabled)">
<div class="item item-icon-right item-heading" translate>
<div class="item item-sub item-icon-right item-heading" translate>
Buy &amp; Sell Bitcoin
<a ui-sref="tabs.buyandsell"><i class="icon ion-ios-plus-empty list-add-button"></i></a>
</div>
<a ng-if="glideraEnabled" ui-sref="tabs.buyandsell.glidera" class="item item-icon-right">
<a ng-if="glideraEnabled" ui-sref="tabs.buyandsell.glidera" class="item item-sub item-icon-right">
<img src="img/glidera-logo.png" width="90"/>
<i class="icon bp-arrow-right"></i>
</a>
@ -119,7 +121,7 @@
</div>
<div class="list card" ng-if="wallets[0] && externalServices.AmazonGiftCards && amazonEnabled">
<a class="item item-icon-left item-icon-right item-big-icon-left" ui-sref="tabs.giftcards.amazon">
<a class="item item-sub item-icon-left item-icon-right item-big-icon-left" ui-sref="tabs.giftcards.amazon">
<i class="icon big-icon-svg">
<div class="bg icon-amazon"></div>
</i>
@ -136,21 +138,21 @@
<i class="icon bp-arrow-down" ng-show="hideNextSteps"></i>
</div>
<div ng-show="!hideNextSteps">
<a ui-sref="tabs.bitpayCard" ng-show="!externalServices.BitpayCard && bitpayCardEnabled" class="item item-icon-left item-big-icon-left item-icon-right next-step">
<a ui-sref="tabs.bitpayCard" ng-if="!externalServices.BitpayCard && bitpayCardEnabled" class="item item-sub item-icon-left item-big-icon-left item-icon-right next-step">
<i class="icon big-icon-svg">
<div class="bg icon-bitpay-card"></div>
</i>
<span translate>Add BitPay Visa&reg; Card</span>
<i class="icon bp-arrow-right"></i>
</a>
<a ng-show="!externalServices.BuyAndSell && (coinbaseEnabled || glideraEnabled)" ui-sref="tabs.buyandsell.glidera" class="item item-icon-left item-big-icon-left item-icon-right next-step">
<a ng-if="!externalServices.BuyAndSell && (coinbaseEnabled || glideraEnabled)" ui-sref="tabs.buyandsell.glidera" class="item item-sub item-icon-left item-big-icon-left item-icon-right next-step">
<i class="icon big-icon-svg">
<div class="bg icon-buy-bitcoin"></div>
</i>
<span translate>Buy or Sell Bitcoin</span>
<i class="icon bp-arrow-right"></i>
</a>
<a ui-sref="tabs.giftcards.amazon" ng-show="!externalServices.AmazonGiftCards && amazonEnabled" class="item item-icon-left item-big-icon-left item-icon-right next-step">
<a ui-sref="tabs.giftcards.amazon" ng-if="!externalServices.AmazonGiftCards && amazonEnabled" class="item item-sub item-icon-left item-big-icon-left item-icon-right next-step">
<i class="icon big-icon-svg">
<div class="bg icon-amazon"></div>
</i>