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 {
.item {
color: #444;
color: $dark-gray;
border-color: rgba(221, 221, 221, 0.3);
}
}
#tab-settings {
&-explaination {
padding: 0 1rem;
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 {
display: block;
overflow: hidden;
@ -16,9 +27,12 @@
color: $light-gray;
font-size: 14px;
}
}
#tab-settings {
.list {
.item {
color: #444;
color: $dark-gray;
border-top: none;
padding-top: 1.3rem;
padding-bottom: 1.3rem;
@ -70,3 +84,20 @@
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-title>
{{'Bitcoin Network Fee Policy'|translate}}
@ -6,19 +6,21 @@
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-content>
<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 class="padding text-center positive" ng-repeat="fee in feeLevels.livenet" ng-if="fee.level == currentFeeLevel">
<div ng-show="fee.nbBlocks">
<span translate>Average confirmation time: {{fee.nbBlocks * 10}} minutes</span>.
<div class="settings-explaination">
<div class="settings-heading" translate>Bitcoin transactions include a fee collected by miners on the network.</div>
<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="estimates" ng-repeat="fee in feeLevels.livenet" ng-if="fee.level == currentFeeLevel">
<div ng-show="fee.nbBlocks">
<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>
<span translate>Current fee rate for this policy: {{fee.feePerKBUnit}}/kiB</span>
</div>
<div class="padding" translate>
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.
<div class="fee-policies">
<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>
</ion-content>
</ion-view>