anders/Wallet
1
0
Fork 0
Code Issues Projects Releases Packages Wiki Activity

tweaks for mobile and desktop

Browse source
This commit is contained in:
Jamal Jackson 2016-11-15 15:15:40 -05:00
commit 33fcfddf1a
2 changed files with 54 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/sass/views/includes/wallets.scss
View file

@ -18,16 +18,18 @@
} }
} }
.item{ .item{
padding: calc(100vh - 99vh) calc(100vw - 93vw) calc(100vh - 97vh) calc(100vw - 95vw); padding: 3vh 3vw 3vh 3vw;
i{left:auto;}
span{ span{
clear:both; clear:both;
width: 100%; width: 100%;
display: inline-block; display: inline-block;
&.wallet-name{ &.wallet-name{
margin-top:10px; font-size:16px;
margin-bottom:5px; width: 70%;
font-size:13px; white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
font-weight: 600;
} }
&.wallet-number{ &.wallet-number{
visibility: hidden; visibility: hidden;

61
src/sass/views/tab-receive.scss
View file

@ -13,17 +13,17 @@
.scroll{height:100%;} .scroll{height:100%;}
#address { #address {
background: #fff; background: #fff;
height: calc(100vh - 34vh); height: 66vh;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
position: relative; position: relative;
flex-flow: column; flex-flow: column;
@media(max-height: 600px){ @media(max-height: 600px){
height: calc(100vh - 32vh); height: 68vh;
} }
@media(max-height: 600px) and (-webkit-device-pixel-ratio: 2){ @media(max-height: 600px) and (-webkit-device-pixel-ratio: 2){
height: calc(100vh - 36vh); height: 64vh;
} }
&-info{ &-info{
height: 100%; height: 100%;
@ -67,6 +67,7 @@
.item { .item {
border: none; border: none;
font-size: .8rem; font-size: .8rem;
z-index: 0;
i { i {
font-size: 1.3rem; font-size: 1.3rem;
} }
@ -103,16 +104,18 @@
padding-bottom: 5px; padding-bottom: 5px;
display: inline-block; display: inline-block;
font-size: .8rem; font-size: .8rem;
color:$mid-gray;
} }
} }
.qr { .qr {
padding: calc(100vh - 85vh) 0 calc(100vh - 96vh); padding: 15vh 0 4vh;
align-self: center; align-self: center;
margin-top: auto; margin-top: auto;
height: 220px; height: 220px;
position: relative; position: relative;
justify-content: center; justify-content: center;
flex: 1; flex: 1;
z-index: 1;
div{ div{
transition: all .4s ease; transition: all .4s ease;
&.current, &.prev, &.next{ &.current, &.prev, &.next{
@ -134,7 +137,7 @@
} }
} }
@media(max-height: 700px){ @media(max-height: 700px){
padding: calc(100vh - 90vh) 0 calc(100vh - 96vh); padding: 10vh 0 4vh;
} }
div{ div{
display: flex; display: flex;
@ -238,7 +241,7 @@
} }
.wallets{ .wallets{
position: relative; position: relative;
height: calc(100vh - 83vh); height: calc(27vh - 62px);
z-index: 5; z-index: 5;
.slides { .slides {
.swiper-container{ .swiper-container{
@ -249,7 +252,11 @@
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
max-width: 450px; max-width: 450px;
.swiper-wrapper{ .swiper-wrapper{
height: auto;
top: 10%;
position:relative;
@media(max-height: 600px){padding-top:.2rem} @media(max-height: 600px){padding-top:.2rem}
@media(min-height: 900px){top:30%;}
} }
.swiper-slide{ .swiper-slide{
text-align: center; text-align: center;
@ -257,6 +264,9 @@
margin-top:2vh; margin-top:2vh;
display: inline-block; display: inline-block;
width:80%; width:80%;
@media(min-height: 1000px) and (max-width: 699px){
padding: 2vh 3vw 2vh 3vw;
}
} }
@media(max-width: 500px){ @media(max-width: 500px){
&-next{left:-25%;} &-next{left:-25%;}
@ -276,8 +286,11 @@
.wallets{display: none;} .wallets{display: none;}
#address{ #address{
float:left; float:left;
height:90vh; height:100%;
width:65%; width:calc(100% - 410px);
@media(max-width: 1000px){
width:65%;
}
&-info{ &-info{
height: 100%; height: 100%;
} }
@ -301,7 +314,13 @@
.backup, #bit-address{left:0;} .backup, #bit-address{left:0;}
#bit-address{ #bit-address{
height: 10%; height: 10%;
padding: calc(100vh - 99vh); padding: 1vh;
.bit-address{
.item{
top: 40%;
transform: translateY(-40%);
}
}
} }
} }
#wallets{ #wallets{
@ -311,9 +330,13 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: visible; overflow: visible;
max-width: 410px;
@media(max-height: 600px){ @media(max-height: 600px){
padding-top:.55rem; padding-top:.55rem;
} }
@media(max-width: 1000px){
max-width: none;
}
#sidebar-wallet{display: block;} #sidebar-wallet{display: block;}
.list{height: 100%;overflow: visible;} .list{height: 100%;overflow: visible;}
#wallet-list{ #wallet-list{
@ -324,8 +347,12 @@
left: -6%; left: -6%;
} }
.wallet{ .wallet{
position: relative;
&.current{ &.current{
position: relative;
.card{
opacity: 1;
transform: scale(1);
}
&:before { &:before {
right: 93%; right: 93%;
top: 50%; top: 50%;
@ -350,17 +377,23 @@
width: 80%; width: 80%;
position: relative; position: relative;
margin: 1.5rem auto 0; margin: 1.5rem auto 0;
position: relative;
opacity: .5;
transform:scale(.85);
transition:transform .2s ease;
.item{ .item{
padding: 6% 10% 6% 8%; padding: 6% 10% 6% 8%;
i{left:auto;}
span{ span{
clear:both; clear:both;
width: 100%; width: 100%;
display: inline-block; display: inline-block;
&.wallet-name{ &.wallet-name{
margin-top:10px; font-size:16px;
margin-bottom:5px; width: 70%;
font-size:13px; white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
font-weight: 600;
} }
&.wallet-number{ &.wallet-number{
visibility: hidden; visibility: hidden;