From e46b5b25c35bad5c27476b369942f42f394caab8 Mon Sep 17 00:00:00 2001 From: Jamal Jackson Date: Tue, 15 Nov 2016 08:45:26 -0500 Subject: [PATCH 1/6] iphone5 and desktop fixes for receive tab --- src/sass/views/tab-receive.scss | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/src/sass/views/tab-receive.scss b/src/sass/views/tab-receive.scss index 99bc97ea5..6e11911ad 100644 --- a/src/sass/views/tab-receive.scss +++ b/src/sass/views/tab-receive.scss @@ -99,7 +99,7 @@ padding-top: 5px; padding-bottom: 5px; display: inline-block; - font-size: .7rem; + font-size: .8rem; } } .qr { @@ -236,6 +236,7 @@ .wallets{ position: relative; height: calc(100vh - 83vh); + z-index: 5; .slides { .swiper-container{ position: absolute; @@ -244,6 +245,9 @@ -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); max-width: 450px; + .swiper-wrapper{ + @media(max-height: 600px){padding-top:.2rem} + } .swiper-slide{ text-align: center; .card{ @@ -302,12 +306,15 @@ display: flex; flex-direction: column; overflow: visible; + @media(max-height: 600px){ + padding-top:.55rem; + } #sidebar-wallet{display: block;} .list{height: 100%;overflow: visible;} #wallet-list{ position: absolute; - width: 100%; - overflow-y: scroll; + width: 110%; + overflow-y: auto; height: 100%; left: -6%; } @@ -331,7 +338,7 @@ } .card { max-width: 350px; - box-shadow:$subtle-box-shadow; + box-shadow: 0 1px 36px rgba(0, 0, 0, 0.07); padding:0; border-radius: 6px; padding:2px; From e94484b1f3835c76c232eebd3283a5dd7efac082 Mon Sep 17 00:00:00 2001 From: Jamal Jackson Date: Tue, 15 Nov 2016 09:48:39 -0500 Subject: [PATCH 2/6] final fixes for in between viewport sizes --- src/sass/views/tab-receive.scss | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/sass/views/tab-receive.scss b/src/sass/views/tab-receive.scss index 6e11911ad..ffdb13be9 100644 --- a/src/sass/views/tab-receive.scss +++ b/src/sass/views/tab-receive.scss @@ -72,7 +72,7 @@ font-size: .8rem; // left:10%; position: absolute; - transition: all .4s ease; + transition: all .15s ease; width:100%; height: 100%; z-index: 0; @@ -255,8 +255,10 @@ display: inline-block; width:80%; } - &-next{left:-25%;} - &-prev{left:25%;} + @media(max-width: 500px){ + &-next{left:-25%;} + &-prev{left:25%;} + } } @media (max-height: 600px){ &{ From 6719983ef7a2fd1b70683f3715b71b28a4a7ff41 Mon Sep 17 00:00:00 2001 From: Jamal Jackson Date: Tue, 15 Nov 2016 10:47:31 -0500 Subject: [PATCH 3/6] update to handle difference between iPhone 5 and browser window when viewed at same size --- src/sass/views/tab-receive.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/sass/views/tab-receive.scss b/src/sass/views/tab-receive.scss index ffdb13be9..ce142b3e5 100644 --- a/src/sass/views/tab-receive.scss +++ b/src/sass/views/tab-receive.scss @@ -20,6 +20,9 @@ position: relative; flex-flow: column; @media(max-height: 600px){ + height: calc(100vh - 32vh); + } + @media(max-height: 600px) and (-webkit-device-pixel-ratio: 2){ height: calc(100vh - 36vh); } &-info{ From 33fcfddf1aa16f37dcaade5fb460fee36a3cce90 Mon Sep 17 00:00:00 2001 From: Jamal Jackson Date: Tue, 15 Nov 2016 15:15:40 -0500 Subject: [PATCH 4/6] tweaks for mobile and desktop --- src/sass/views/includes/wallets.scss | 12 +++--- src/sass/views/tab-receive.scss | 61 +++++++++++++++++++++------- 2 files changed, 54 insertions(+), 19 deletions(-) diff --git a/src/sass/views/includes/wallets.scss b/src/sass/views/includes/wallets.scss index 7bb22c807..5c73d70c7 100644 --- a/src/sass/views/includes/wallets.scss +++ b/src/sass/views/includes/wallets.scss @@ -18,16 +18,18 @@ } } .item{ - padding: calc(100vh - 99vh) calc(100vw - 93vw) calc(100vh - 97vh) calc(100vw - 95vw); - i{left:auto;} + padding: 3vh 3vw 3vh 3vw; span{ clear:both; width: 100%; display: inline-block; &.wallet-name{ - margin-top:10px; - margin-bottom:5px; - font-size:13px; + font-size:16px; + width: 70%; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + font-weight: 600; } &.wallet-number{ visibility: hidden; diff --git a/src/sass/views/tab-receive.scss b/src/sass/views/tab-receive.scss index ce142b3e5..3e3320211 100644 --- a/src/sass/views/tab-receive.scss +++ b/src/sass/views/tab-receive.scss @@ -13,17 +13,17 @@ .scroll{height:100%;} #address { background: #fff; - height: calc(100vh - 34vh); + height: 66vh; display: flex; align-items: center; justify-content: center; position: relative; flex-flow: column; @media(max-height: 600px){ - height: calc(100vh - 32vh); + height: 68vh; } @media(max-height: 600px) and (-webkit-device-pixel-ratio: 2){ - height: calc(100vh - 36vh); + height: 64vh; } &-info{ height: 100%; @@ -67,6 +67,7 @@ .item { border: none; font-size: .8rem; + z-index: 0; i { font-size: 1.3rem; } @@ -103,16 +104,18 @@ padding-bottom: 5px; display: inline-block; font-size: .8rem; + color:$mid-gray; } } .qr { - padding: calc(100vh - 85vh) 0 calc(100vh - 96vh); + padding: 15vh 0 4vh; align-self: center; margin-top: auto; height: 220px; position: relative; justify-content: center; flex: 1; + z-index: 1; div{ transition: all .4s ease; &.current, &.prev, &.next{ @@ -134,7 +137,7 @@ } } @media(max-height: 700px){ - padding: calc(100vh - 90vh) 0 calc(100vh - 96vh); + padding: 10vh 0 4vh; } div{ display: flex; @@ -238,7 +241,7 @@ } .wallets{ position: relative; - height: calc(100vh - 83vh); + height: calc(27vh - 62px); z-index: 5; .slides { .swiper-container{ @@ -249,7 +252,11 @@ transform: translate(-50%, -50%); max-width: 450px; .swiper-wrapper{ + height: auto; + top: 10%; + position:relative; @media(max-height: 600px){padding-top:.2rem} + @media(min-height: 900px){top:30%;} } .swiper-slide{ text-align: center; @@ -257,6 +264,9 @@ margin-top:2vh; display: inline-block; width:80%; + @media(min-height: 1000px) and (max-width: 699px){ + padding: 2vh 3vw 2vh 3vw; + } } @media(max-width: 500px){ &-next{left:-25%;} @@ -276,8 +286,11 @@ .wallets{display: none;} #address{ float:left; - height:90vh; - width:65%; + height:100%; + width:calc(100% - 410px); + @media(max-width: 1000px){ + width:65%; + } &-info{ height: 100%; } @@ -301,7 +314,13 @@ .backup, #bit-address{left:0;} #bit-address{ height: 10%; - padding: calc(100vh - 99vh); + padding: 1vh; + .bit-address{ + .item{ + top: 40%; + transform: translateY(-40%); + } + } } } #wallets{ @@ -311,9 +330,13 @@ display: flex; flex-direction: column; overflow: visible; + max-width: 410px; @media(max-height: 600px){ padding-top:.55rem; } + @media(max-width: 1000px){ + max-width: none; + } #sidebar-wallet{display: block;} .list{height: 100%;overflow: visible;} #wallet-list{ @@ -324,8 +347,12 @@ left: -6%; } .wallet{ - position: relative; &.current{ + position: relative; + .card{ + opacity: 1; + transform: scale(1); + } &:before { right: 93%; top: 50%; @@ -350,17 +377,23 @@ width: 80%; position: relative; margin: 1.5rem auto 0; + position: relative; + opacity: .5; + transform:scale(.85); + transition:transform .2s ease; .item{ padding: 6% 10% 6% 8%; - i{left:auto;} span{ clear:both; width: 100%; display: inline-block; &.wallet-name{ - margin-top:10px; - margin-bottom:5px; - font-size:13px; + font-size:16px; + width: 70%; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + font-weight: 600; } &.wallet-number{ visibility: hidden; From 116bc7fde65d3ce7b888ec4ae1812e2e2dc090a4 Mon Sep 17 00:00:00 2001 From: Jamal Jackson Date: Tue, 15 Nov 2016 15:20:59 -0500 Subject: [PATCH 5/6] fix declaration on card to item --- src/sass/views/tab-receive.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/sass/views/tab-receive.scss b/src/sass/views/tab-receive.scss index 3e3320211..82a15e3c8 100644 --- a/src/sass/views/tab-receive.scss +++ b/src/sass/views/tab-receive.scss @@ -265,7 +265,9 @@ display: inline-block; width:80%; @media(min-height: 1000px) and (max-width: 699px){ - padding: 2vh 3vw 2vh 3vw; + .item{ + padding: 2vh 3vw 2vh 3vw; + } } } @media(max-width: 500px){ From 58c9a054d9d22309dca5e5bf2670ff682603151e Mon Sep 17 00:00:00 2001 From: Jamal Jackson Date: Tue, 15 Nov 2016 15:37:40 -0500 Subject: [PATCH 6/6] updating font size by viewport for next address and share, and current bit address --- src/sass/views/tab-receive.scss | 25 +++++++++++++++++++++++-- 1 file changed, 23 insertions(+), 2 deletions(-) diff --git a/src/sass/views/tab-receive.scss b/src/sass/views/tab-receive.scss index 82a15e3c8..6743b1363 100644 --- a/src/sass/views/tab-receive.scss +++ b/src/sass/views/tab-receive.scss @@ -72,6 +72,17 @@ font-size: 1.3rem; } } + #qr-options{ + .item{ + font-size:.7rem; + @media(min-width:350px){ + font-size:.9rem; + } + @media(min-width:450px){ + font-size:1rem; + } + } + } .bit-address { font-size: .8rem; // left:10%; @@ -103,8 +114,14 @@ padding-top: 5px; padding-bottom: 5px; display: inline-block; - font-size: .8rem; - color:$mid-gray; + font-size: .7rem; + @media(min-width:350px){ + font-size:.9rem; + } + @media(min-width:450px){ + font-size:1rem; + } + color:$light-gray; } } .qr { @@ -296,6 +313,9 @@ &-info{ height: 100%; } + #qr-options{ + .item{font-size:1rem;} + } .qr{ height: 70%; div{ @@ -321,6 +341,7 @@ .item{ top: 40%; transform: translateY(-40%); + font-size:1rem; } } }