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

60
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,41 +383,46 @@
.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;*/
flex: 0 1 auto;
}
button.extra {
background: none;
border: none;
color: #000;
font-family: 'ProximaNova';
font-size: 14px;
line-height: normal; line-height: normal;
min-height: auto;
min-width: auto;
padding: 0;
}
.button .icon:before { .button {
font-size: 14px; background: none;
line-height: normal; border: none;
} border-radius: 0;
color: #000;
font-family: 'ProximaNova';
font-size: 14px;
line-height: normal;
min-height: auto;
min-width: auto;
padding: 0;
}
.button { .button .icon:before {
span { font-size: 14px;
display: flex; line-height: normal;
align-items: center; }
justify-content: center;
.button {
span {
display: flex;
align-items: center;
justify-content: center;
}
} }
} }
} }

27
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,17 +34,20 @@
</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">
<span> <button class="button" ng-click="vm.openPopup()">
<img src="img/icon-alternative-currency-black.svg"/> <span>
<pre> </pre> <img src="img/icon-alternative-currency-black.svg"/>
<span translate>Change Currency</span> <pre> </pre>
</span> <span translate>Change Currency</span>
</button> </span>
<div class="extra available-funds" </button>
</div>
<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>
<span>Available Funds: </span><span><formatted-amount value="{{vm.availableFunds}}" size-equal="true"></formatted-amount></span> <span>Available Funds: </span><span><formatted-amount value="{{vm.availableFunds}}" size-equal="true"></formatted-amount></span>
</div>
</div> </div>
</div> </div>
</div> </div>