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

feat(design): improve layout and design of tab-settings

Browse source 
closes #378
This commit is contained in:
Jason Dreyzehner 2016-10-12 18:05:28 -04:00
commit 535d2e0a08
2 changed files with 20 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/sass/views/tab-settings.scss
View file

@ -6,6 +6,16 @@
} }
#tab-settings { #tab-settings {
.setting-title, .setting-value {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.setting-value {
color: $light-gray;
font-size: 14px;
}
.list { .list {
.item { .item {
color: #444; color: #444;
@ -23,8 +33,8 @@
left:8px; left:8px;
.bg { .bg {
border-radius: 50%; border-radius: 50%;
width:30px; width: 25px;
height:30px; height: 25px;
padding:.1rem; padding:.1rem;
} }
} }
@ -54,9 +64,6 @@
width: 0; width: 0;
} }
} }
.item-note {
color: $light-gray;
}
} }
} }
.item-radio .radio-icon { .item-radio .radio-icon {

16
www/views/tab-settings.html
View file

@ -6,7 +6,7 @@
<ion-content> <ion-content>
<div class="list"> <div class="list">
<div class="item item-divider"></div> <div class="item item-divider"></div>
<a class="item item-icon-left item-icon-right" ng-hide="true"> <a class="ng-hide item item-icon-left item-icon-right" ng-hide="true">
<i class="icon big-icon-svg"> <i class="icon big-icon-svg">
<img src="img/icon-exchange.svg" class="bg"/> <img src="img/icon-exchange.svg" class="bg"/>
</i> </i>
@ -20,7 +20,7 @@
<span translate>Address Book</span> <span translate>Address Book</span>
<i class="icon bp-arrow-right"></i> <i class="icon bp-arrow-right"></i>
</a> </a>
<a class="item item-icon-left item-icon-right" ng-hide="true"> <a class="ng-hide item item-icon-left item-icon-right" ng-hide="true">
<i class="icon big-icon-svg"> <i class="icon big-icon-svg">
<img src="img/icon-send-feedback.svg" class="bg"/> <img src="img/icon-send-feedback.svg" class="bg"/>
</i> </i>
@ -53,8 +53,8 @@
<i class="icon big-icon-svg"> <i class="icon big-icon-svg">
<img src="img/icon-unit.svg" class="bg"/> <img src="img/icon-unit.svg" class="bg"/>
</i> </i>
<span translate>Unit</span> <span class="setting-title" translate>Unit</span>
<span class="item-note"> <span class="setting-value">
{{unitName}} {{unitName}}
</span> </span>
<i class="icon bp-arrow-right"></i> <i class="icon bp-arrow-right"></i>
@ -64,8 +64,8 @@
<i class="icon big-icon-svg"> <i class="icon big-icon-svg">
<img src="img/icon-alternative-currency.svg" class="bg"/> <img src="img/icon-alternative-currency.svg" class="bg"/>
</i> </i>
<span translate>Alternative Currency</span> <span class="setting-title" translate>Alternative Currency</span>
<span class="item-note"> <span class="setting-value">
{{selectedAlternative.name}} {{selectedAlternative.name}}
</span> </span>
<i class="icon bp-arrow-right"></i> <i class="icon bp-arrow-right"></i>
@ -75,8 +75,8 @@
<i class="icon big-icon-svg"> <i class="icon big-icon-svg">
<img src="img/icon-network.svg" class="bg"/> <img src="img/icon-network.svg" class="bg"/>
</i> </i>
<span translate>Bitcoin Network Fee Policy</span> <span class="setting-title" translate>Bitcoin Network Fee Policy</span>
<span class="item-note"> <span class="setting-value">
{{feeOpts[currentFeeLevel]|translate}} {{feeOpts[currentFeeLevel]|translate}}
</span> </span>
<i class="icon bp-arrow-right"></i> <i class="icon bp-arrow-right"></i>