finished receive view styling for phone sizes

This commit is contained in:
Jamal Jackson 2016-10-14 09:42:46 -04:00
commit 207f5db0eb
4 changed files with 51 additions and 8 deletions

View file

@ -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%;

View file

@ -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 {

View file

@ -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>

View file

@ -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>