finished receive view styling for phone sizes
This commit is contained in:
parent
9e5debc1b6
commit
207f5db0eb
4 changed files with 51 additions and 8 deletions
|
|
@ -3,6 +3,15 @@
|
|||
.swiper-container {
|
||||
width: 85% !important;
|
||||
overflow: visible;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
@media (max-height: 600px){
|
||||
&{
|
||||
transform: translate(-50%, -58%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.card {
|
||||
max-width: 350px;
|
||||
|
|
@ -17,6 +26,9 @@
|
|||
}
|
||||
.item{
|
||||
padding:.6rem;
|
||||
&.noBalance{
|
||||
padding:.6rem 1rem 1.7rem;
|
||||
}
|
||||
span{
|
||||
clear:both;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -13,8 +13,19 @@
|
|||
.scroll{height:100%;}
|
||||
#address {
|
||||
background: #fff;
|
||||
height:80%;
|
||||
article{height: 100%;position: relative;}
|
||||
height: calc(100vh - 33vh);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
flex-flow: column;
|
||||
@media(max-height: 600px){
|
||||
height: calc(100vh - 36vh);
|
||||
}
|
||||
article{
|
||||
flex:1;
|
||||
width: 100%;
|
||||
}
|
||||
#bit-address{
|
||||
position: absolute;
|
||||
bottom:0;
|
||||
|
|
@ -52,26 +63,41 @@
|
|||
}
|
||||
}
|
||||
.qr {
|
||||
padding: 13vh 0 5vh 0;
|
||||
padding: calc(100vh - 85vh) 0 calc(100vh - 96vh);
|
||||
@media(max-height: 700px){
|
||||
padding: calc(100vh - 90vh) 0 calc(100vh - 96vh);
|
||||
}
|
||||
div{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.share{
|
||||
flex:1;
|
||||
max-width: 120px;
|
||||
.item{
|
||||
i{left:25px;}
|
||||
}
|
||||
}
|
||||
.backup {
|
||||
background-color: orange;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
top: 0;
|
||||
i {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
@media (max-height: 600px){
|
||||
&{
|
||||
height: 77%;
|
||||
.qr{
|
||||
padding:6.5vh 0 2vh;
|
||||
padding:6vh 0 0;
|
||||
div{
|
||||
transform: scale(.7);
|
||||
}
|
||||
}
|
||||
#bit-address{position: realtive;}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -89,6 +115,7 @@
|
|||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
#first-time-tip {
|
||||
|
|
@ -131,6 +158,10 @@
|
|||
border-right: 1px solid rgb(228, 228, 228);
|
||||
padding-right: 10px;
|
||||
}
|
||||
.wallets{
|
||||
position: relative;
|
||||
height: calc(100vh - 83vh);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<ion-slides class="slides" slider="data.slider" options="sliderOptions">
|
||||
<ion-slide-page ng-repeat="wallet in wallets track by $index">
|
||||
<div class="card" ng-click="slider.slideTo($index)">
|
||||
<div class="item item-icon-left text-right">
|
||||
<div class="item item-icon-left text-right" ng-class="{'noBalance': !wallet.status.availableBalanceStr}">
|
||||
<i class="icon big-icon-svg">
|
||||
<img src="img/icon-wallet.svg" ng-style="{'background-color': wallet.color}" class="bg"/>
|
||||
</i>
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col col-50 center-block text-center" ng-show="isCordova && addr">
|
||||
<div class="col col-50 center-block text-center share" ng-show="isCordova && addr">
|
||||
<div class="item item-icon-left" ng-click="shareAddress(addr)">
|
||||
<i class="icon ion-ios-upload-outline"></i>
|
||||
<span translate>Share</span>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue