anders/Wallet
1
0
Fork 0
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #149 from jamal-jackson/feature/home_views_polish

Browse source 
Polishing up styling on home tab
This commit is contained in:
Gustavo Maximiliano Cortez 2016-09-21 14:41:51 -03:00 • committed by GitHub
commit 580a837805
4 changed files with 60 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

18
public/img/check-white.svg Normal file
View file

@ -0,0 +1,18 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="13px" height="12px" viewBox="0 0 13 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 3.7.2 (28276) - http://www.bohemiancoding.com/sketch -->
<title>DF90EF75-F651-4B5A-9143-4512A3D52EC8</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Dashboard---Activity" transform="translate(-1149.000000, -268.000000)" fill="#ffffff">
<g id="Body" transform="translate(-3.000000, 108.000000)">
<g id="Main-Container" transform="translate(332.000000, 0.000000)">
<g id="Transactions" transform="translate(-2.000000, 62.000000)">
<path d="M823.142857,104.25 C822.822545,104.25 822.533482,104.398438 822.345982,104.648438 C822.18192,104.867188 822.111607,105.125 822.15067,105.390625 C822.189732,105.65625 822.330357,105.890625 822.541295,106.054688 L826.541295,109.054688 C826.752232,109.210938 827.033482,109.28125 827.299107,109.242188 C827.564732,109.195313 827.80692,109.046875 827.96317,108.828125 L833.955357,100.328125 C834.27567,99.875 834.166295,99.25 833.720982,98.9296875 C833.283482,98.625 832.627232,98.7421875 832.322545,99.171875 L826.916295,106.828125 L823.74442,104.453125 C823.564732,104.320313 823.361607,104.25 823.142857,104.25 L823.142857,104.25 Z" id="check"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.6 KiB

13
public/views/tab-home.html
View file

@ -4,14 +4,13 @@
</ion-nav-bar>
<ion-content class="padding" ng-controller="tabHomeController" ng-init="updateAllWallets(); nextStep()">
<div class="list card homeTip" ng-show="homeTip">
<div class="item item-icon-right item-heading">
<a ng-click="hideHomeTip()"><i class="icon ion-ios-close-empty close-home-tip"></i></a>
</div>
<div>
<i class="icon big-icon-svg">
<img src="img/icon-wallet.svg" class="bg"/>
<img src="img/check-white.svg" class="bg green"/>
</i>
</div>
<div class="title" translate>
@ -44,7 +43,7 @@
<ion-spinner icon="lines"></ion-spinner>
<div translate>Updating activity. Please stand by</div>
</span>
<a class="item" ng-repeat="notification in notifications" ng-click="openNotificationModal(notification)">
<a class="item activity" ng-repeat="notification in notifications" ng-click="openNotificationModal(notification)">
<span ng-include="'views/includes/walletActivity.html'"></span>
</a>
</div>
@ -120,28 +119,28 @@
<div class="item item-heading" translate>
Next steps
</div>
<a ng-show="!wallets[0]" ui-sref="tabs.add" class="item item-icon-left item-big-icon-left item-icon-right next-step">
<a ng-if="!wallets[0]" ui-sref="tabs.add" class="item item-icon-left item-big-icon-left item-icon-right next-step">
<i class="icon big-icon-svg">
<div class="bg icon-create-wallet"></div>
</i>
<span translate>Create a bitcoin wallet</span>
<i class="icon nav-item-arrow-right"></i>
</a>
<a ui-sref="bitpayCard.main" ng-show="!externalServices.BitpayCard" class="item item-icon-left item-big-icon-left item-icon-right next-step">
<a ui-sref="bitpayCard.main" ng-if="!externalServices.BitpayCard" class="item 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 Card</span>
<i class="icon nav-item-arrow-right"></i>
</a>
<a ng-show="!externalServices.BuyAndSell" ui-sref="tabs.buyandsell" class="item item-icon-left item-big-icon-left item-icon-right next-step">
<a ng-if="!externalServices.BuyAndSell" ui-sref="tabs.buyandsell" class="item 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 nav-item-arrow-right"></i>
</a>
<a ui-sref="tabs.giftcards.amazon" ng-show="!externalServices.AmazonGiftCards" class="item item-icon-left item-big-icon-left item-icon-right next-step">
<a ui-sref="tabs.giftcards.amazon" ng-if="!externalServices.AmazonGiftCards" class="item item-icon-left item-big-icon-left item-icon-right next-step">
<i class="icon big-icon-svg">
<div class="bg icon-gift"></div>
</i>

3
src/sass/common.scss
View file

@ -40,6 +40,9 @@
background-repeat:no-repeat;
background-clip: padding-box;
background-size: 103%;
&.green{
background: rgb(1, 209, 162);
}
}
}
.overlay {

36
src/sass/views/tab-home.scss
View file

@ -11,9 +11,34 @@
.icon-gift {
background-image: url("../img/icon-gift.svg");
}
a.item {
color: #444;
.card{
.item {
color: #444;
border-top:none;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
&:before {
display: block;
position: absolute;
width: 86%;
height: 1px;
background: rgba(221, 221, 221, 0.3);
top:0;
right:0;
content:'';
}
&.item-heading{
&:before{
width:100%;
top:99%
}
}
&:nth-child(2){
&:before{
width:0;
}
}
}
}
.next-step {
@ -39,5 +64,10 @@
font-size: 18px;
font-weight: 100;
}
.big-icon-svg{
.bg.green{
padding: 0 10px;
}
}
}
}