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

Fix for long amounts on iPhone 5 / SE. Fix for buttons below amounts on iPhone 5 / SE.

Browse source
This commit is contained in:
Brendon Duncan 2018-08-10 19:09:55 +12:00
commit d88d3365ad
2 changed files with 48 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/sass/views/amount.scss
View file

@ -305,7 +305,8 @@
&.very-long { &.very-long {
input, .unit, .primary-amount-display { input, .unit, .primary-amount-display {
font-size: 0.9em; font-size: 1.2em; // OK for iPhone 5 / SE with BCH to 8dp
@media (min-width: 375px) { @media (min-width: 375px) {
font-size: 1.3em; font-size: 1.3em;
@ -382,21 +383,25 @@
.available-funds { .available-funds {
color: #6F6F70; color: #6F6F70;
text-align: left;
}
.change-currency {
text-align: right;
} }
.warning { .warning {
color: $v-warning-color-2; color: $v-warning-color-2;
} }
.extra, .extra {
button.extra { flex: 1;
/*display: flex;*/ line-height: normal;
flex: 0 1 auto;
}
button.extra { .button {
background: none; background: none;
border: none; border: none;
border-radius: 0;
color: #000; color: #000;
font-family: 'ProximaNova'; font-family: 'ProximaNova';
font-size: 14px; font-size: 14px;
@ -420,6 +425,7 @@
} }
} }
} }
}
.button { .button {
&.no-margin { &.no-margin {

11
www/views/amount.html
View file

@ -14,14 +14,14 @@
<div class="send-amount-tool"> <div class="send-amount-tool">
<div class="send-amount-tool-input amount"> <div class="send-amount-tool-input amount">
<div class="primary-amount" <div class="primary-amount"
ng-class="{long: vm.amount.length > 5, 'very-long': vm.amount.length > 10}"> ng-class="{long: vm.amount.length > 5, 'very-long': vm.amount.length > 8}">
<span class="primary-amount-display text-selectable"> <span class="primary-amount-display text-selectable">
<formatted-amount value="{{vm.amount || '0'}}" currency="{{vm.unit}}"></formatted-amount> {{vm.amount || '0'}} {{vm.unit}}
</span> </span>
</div> </div>
<span ng-show="vm.globalResult"><formatted-amount value="{{vm.globalResult}}" currency="{{vm.unit}}"></formatted-amount></span> <span ng-show="vm.globalResult"><formatted-amount value="{{vm.globalResult}}" currency="{{vm.unit}}"></formatted-amount></span>
<div class="alternative-amount"> <div class="alternative-amount">
<span class="text-selectable"><formatted-amount value="{{vm.alternativeAmount || '0.00'}}" currency="{{vm.alternativeUnit}}"></formatted-amount></span> <span class="text-selectable">{{vm.alternativeAmount || '0.00'}} {{vm.alternativeUnit}}</span>
</div> </div>
<div class="switch-currencies" ng-click="vm.changeUnit()"><img src="img/icon-convert.svg"></div> <div class="switch-currencies" ng-click="vm.changeUnit()"><img src="img/icon-convert.svg"></div>
</div> </div>
@ -34,13 +34,15 @@
</div> </div>
<div class="send-amount-extras text-center"> <div class="send-amount-extras text-center">
<button class="extra button" ng-click="vm.openPopup()"> <div class="extra change-currency">
<button class="button" ng-click="vm.openPopup()">
<span> <span>
<img src="img/icon-alternative-currency-black.svg"/> <img src="img/icon-alternative-currency-black.svg"/>
<pre> </pre> <pre> </pre>
<span translate>Change Currency</span> <span translate>Change Currency</span>
</span> </span>
</button> </button>
</div>
<div class="extra available-funds" <div class="extra available-funds"
ng-class="{warning: vm.fundsAreInsufficient}" ng-class="{warning: vm.fundsAreInsufficient}"
ng-if="!vm.isRequestingSpecificAmount" translate> ng-if="!vm.isRequestingSpecificAmount" translate>
@ -48,6 +50,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="keypad-container" style="background: #fff; position: absolute; bottom: 0; margin-bottom: 57px; width: 100%;"> <div class="keypad-container" style="background: #fff; position: absolute; bottom: 0; margin-bottom: 57px; width: 100%;">
<div class="sendmax" ng-if="vm.availableFunds && !vm.isRequestingSpecificAmount"> <div class="sendmax" ng-if="vm.availableFunds && !vm.isRequestingSpecificAmount">