From 41c01250a0ea37fe9b777797efdeb21156b67758 Mon Sep 17 00:00:00 2001
From: Jason Dreyzehner <jason@dreyzehner.com>
Date: Wed, 12 Oct 2016 21:17:30 -0400
Subject: [PATCH] fix(home): correct subtle item divider details on home tab

fixes #428
---
 src/sass/views/tab-home.scss |  35 +++++-------
 www/views/tab-home.html      | 100 ++++++++++++++++++-----------------
 2 files changed, 63 insertions(+), 72 deletions(-)

diff --git a/src/sass/views/tab-home.scss b/src/sass/views/tab-home.scss
index 7a1f5c6a6..2956d8ea3 100644
--- a/src/sass/views/tab-home.scss
+++ b/src/sass/views/tab-home.scss
@@ -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 {
diff --git a/www/views/tab-home.html b/www/views/tab-home.html
index 0cc933f8a..9b9cbdb14 100644
--- a/www/views/tab-home.html
+++ b/www/views/tab-home.html
@@ -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>