Fix wallet selector to bottom. Add scroll for small screens

This commit is contained in:
Gustavo Maximiliano Cortez 2017-05-08 16:43:49 -03:00
commit 6a090e95f0
No known key found for this signature in database
GPG key ID: 15EDAD8D9F2EB1AF
2 changed files with 36 additions and 32 deletions

View file

@ -1,17 +1,11 @@
#tab-receive { #tab-receive {
@extend .deflash-blue;
.address { .address {
background: #fff; background: #fff;
height: 65vh; overflow: scroll;
@media(max-height: 600px) and (max-width: 320px) { height: 100%;
height: 70vh;
.button {
min-height: 50px;
}
}
&-info { &-info {
height: 100%; padding: 10% 0 18% 0;
display: flex;
flex-direction: column;
.address-label { .address-label {
margin-top: 5%; margin-top: 5%;
font-size: 13px; font-size: 13px;
@ -20,15 +14,6 @@
position: relative; position: relative;
top: 15%; top: 15%;
} }
.backup {
background-color: orange;
color: #fff;
position: absolute;
z-index: 2;
i {
padding: 10px;
}
}
.request-button { .request-button {
padding-top: 20px; padding-top: 20px;
} }
@ -36,7 +21,7 @@
.incomplete { .incomplete {
height: 100%; height: 100%;
.title { .title {
margin-top: 10%; padding-top: 10%;
font-size: 25px; font-size: 25px;
color: #444; color: #444;
text-align: center; text-align: center;
@ -44,12 +29,28 @@
.subtitle { .subtitle {
padding: 20px; padding: 20px;
color: #444; color: #444;
margin-top: 20%; margin-top: 10%;
text-align: center; text-align: center;
} }
.button { .button {
margin-top: 20%; margin: 10%;
} }
} }
} }
.backup {
position: absolute;
top: 0;
width: 100%;
cursor: pointer;
background-color: orange;
color: #fff;
i {
padding: 10px;
}
}
.wallet-selector {
position: absolute;
bottom: 0;
width: 100%;
}
} }

View file

@ -19,11 +19,6 @@
</div> </div>
</div> </div>
<div class="address-info" ng-if="wallet && wallet.isComplete()"> <div class="address-info" ng-if="wallet && wallet.isComplete()">
<div class="row backup" ng-show="wallet.needsBackup" ng-click="openBackupNeededModal()">
<div class="text-center col center-block">
<i class="icon ion-alert"></i><span translate>Wallet not backed up</span><i class="icon ion-ios-arrow-thin-right"></i>
</div>
</div>
<div class="row qr"> <div class="row qr">
<div class="text-center col"> <div class="text-center col">
<div copy-to-clipboard="copyToClipboard()"> <div copy-to-clipboard="copyToClipboard()">
@ -39,13 +34,20 @@
</div> </div>
</div> </div>
<div ng-show="addr" class="request-button"> <div ng-show="addr" class="request-button">
<button class="button button-standard button-primary button-outline" ng-click="requestSpecificAmount()" translate>Request Specific amount</button> <button class="button button-standard button-primary button-outline button-small" ng-click="requestSpecificAmount()" translate>Request Specific amount</button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</article> </article>
<div ng-click="showWalletSelector()" ng-if="wallets[0]">
<div class="backup" ng-if="wallets[0] && wallet && wallet.isComplete() && wallet.needsBackup" ng-click="openBackupNeededModal()">
<div class="text-center col center-block">
<i class="icon ion-alert"></i><span translate>Wallet not backed up</span><i class="icon ion-ios-arrow-thin-right"></i>
</div>
</div>
<div class="wallet-selector" ng-click="showWalletSelector()" ng-if="wallets[0] && wallet">
<a ng-if="wallet" class="item item-sub item-icon-left item-big-icon-left item-icon-right"> <a ng-if="wallet" class="item item-sub item-icon-left item-big-icon-left item-icon-right">
<i class="icon big-icon-svg"> <i class="icon big-icon-svg">
<img src="img/icon-wallet.svg" ng-class="{'wallet-background-color-default': !wallet.color}" ng-style="{'background-color': wallet.color}" class="bg wallet"/> <img src="img/icon-wallet.svg" ng-class="{'wallet-background-color-default': !wallet.color}" ng-style="{'background-color': wallet.color}" class="bg wallet"/>
@ -66,6 +68,7 @@
<i ng-if="!singleWallet" class="icon bp-arrow-right"></i> <i ng-if="!singleWallet" class="icon bp-arrow-right"></i>
</a> </a>
</div> </div>
</ion-content> </ion-content>
<wallet-selector <wallet-selector
wallet-selector-title="walletSelectorTitle" wallet-selector-title="walletSelectorTitle"