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 {
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) {
font-size: 1.3em;
@ -382,41 +383,46 @@
.available-funds {
color: #6F6F70;
text-align: left;
}
.change-currency {
text-align: right;
}
.warning {
color: $v-warning-color-2;
}
.extra,
button.extra {
/*display: flex;*/
flex: 0 1 auto;
}
button.extra {
background: none;
border: none;
color: #000;
font-family: 'ProximaNova';
font-size: 14px;
.extra {
flex: 1;
line-height: normal;
min-height: auto;
min-width: auto;
padding: 0;
}
.button .icon:before {
font-size: 14px;
line-height: normal;
}
.button {
background: none;
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 {
span {
display: flex;
align-items: center;
justify-content: center;
.button .icon:before {
font-size: 14px;
line-height: normal;
}
.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-input 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">
<formatted-amount value="{{vm.amount || '0'}}" currency="{{vm.unit}}"></formatted-amount>
{{vm.amount || '0'}} {{vm.unit}}
</span>
</div>
<span ng-show="vm.globalResult"><formatted-amount value="{{vm.globalResult}}" currency="{{vm.unit}}"></formatted-amount></span>
<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 class="switch-currencies" ng-click="vm.changeUnit()"><img src="img/icon-convert.svg"></div>
</div>
@ -34,17 +34,20 @@
</div>
<div class="send-amount-extras text-center">
<button class="extra button" ng-click="vm.openPopup()">
<span>
<img src="img/icon-alternative-currency-black.svg"/>
<pre> </pre>
<span translate>Change Currency</span>
</span>
</button>
<div class="extra available-funds"
<div class="extra change-currency">
<button class="button" ng-click="vm.openPopup()">
<span>
<img src="img/icon-alternative-currency-black.svg"/>
<pre> </pre>
<span translate>Change Currency</span>
</span>
</button>
</div>
<div class="extra available-funds"
ng-class="{warning: vm.fundsAreInsufficient}"
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>