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

feat(design): improve design of bitcoin network fee policy view

Browse source
This commit is contained in:
Jason Dreyzehner 2016-10-12 18:59:45 -04:00
commit 779205c7ad
2 changed files with 49 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,11 +1,22 @@
.settings { .settings {
.item { .item {
color: #444; color: $dark-gray;
border-color: rgba(221, 221, 221, 0.3); border-color: rgba(221, 221, 221, 0.3);
} }
} &-explaination {
padding: 0 1rem;
#tab-settings { margin: 1rem 0;
}
&-heading {
font-size: 17px;
color: $dark-gray;
margin: 1rem 0;
}
&-description {
font-size: 15px;
color: $mid-gray;
margin: 1rem 0;
}
.setting-title, .setting-value { .setting-title, .setting-value {
display: block; display: block;
overflow: hidden; overflow: hidden;
@ -16,9 +27,12 @@
color: $light-gray; color: $light-gray;
font-size: 14px; font-size: 14px;
} }
}
#tab-settings {
.list { .list {
.item { .item {
color: #444; color: $dark-gray;
border-top: none; border-top: none;
padding-top: 1.3rem; padding-top: 1.3rem;
padding-bottom: 1.3rem; padding-bottom: 1.3rem;
@ -70,3 +84,20 @@
font-size: 18px; font-size: 18px;
} }
} }
#settings-fee {
.estimates {
font-size: 15px;
color: $dark-gray;
}
.fee-minutes, .fee-rate {
font-weight: bold;
display: block;
margin-bottom: .5rem;
}
.fee-policies {
border-color: #fff;
border-width: 2px 0;
border-style: solid;
}
}

24
www/views/preferencesFee.html
View file

@ -1,4 +1,4 @@
<ion-view class="settings"> <ion-view id="settings-fee" class="settings">
<ion-nav-bar class="bar-royal"> <ion-nav-bar class="bar-royal">
<ion-nav-title> <ion-nav-title>
{{'Bitcoin Network Fee Policy'|translate}} {{'Bitcoin Network Fee Policy'|translate}}
@ -6,19 +6,21 @@
<ion-nav-back-button> <ion-nav-back-button>
</ion-nav-back-button> </ion-nav-back-button>
</ion-nav-bar> </ion-nav-bar>
<ion-content> <ion-content>
<ion-radio ng-repeat="fee in feeLevels.livenet" ng-value="fee.level" ng-model="currentFeeLevel" ng-click="save(fee)"> <div class="settings-explaination">
{{feeOpts[fee.level]|translate}} <div class="settings-heading" translate>Bitcoin transactions include a fee collected by miners on the network.</div>
</ion-radio> <div class="settings-description" translate>The higher the fee, the greater the incentive a miner has to include that transaction in a block. Current fees are determined based on network load and the selected policy.</div>
<div class="padding text-center positive" ng-repeat="fee in feeLevels.livenet" ng-if="fee.level == currentFeeLevel"> <div class="estimates" ng-repeat="fee in feeLevels.livenet" ng-if="fee.level == currentFeeLevel">
<div ng-show="fee.nbBlocks"> <div ng-show="fee.nbBlocks">
<span translate>Average confirmation time: {{fee.nbBlocks * 10}} minutes</span>. <span translate>Average confirmation time: <span class="fee-minutes">{{fee.nbBlocks * 10}} minutes</span></span>
</div>
<span translate>Current fee rate for this policy: <span class="fee-rate">{{fee.feePerKBUnit}}/kiB</span></span>
</div> </div>
<span translate>Current fee rate for this policy: {{fee.feePerKBUnit}}/kiB</span>
</div> </div>
<div class="padding" translate> <div class="fee-policies">
Bitcoin transactions may include a fee collected by miners on the network. The higher the fee, the greater the incentive a miner has to include that transaction in a block. Current fees are determined based on network load and the selected policy. <ion-radio ng-repeat="fee in feeLevels.livenet" ng-value="fee.level" ng-model="currentFeeLevel" ng-click="save(fee)">
{{feeOpts[fee.level]|translate}}
</ion-radio>
</div> </div>
</ion-content> </ion-content>
</ion-view> </ion-view>