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

height space in the bottom (wallet selection & review)

Browse source
This commit is contained in:
Jean-Baptiste Dominguez 2018-08-08 16:24:47 +09:00
commit 644b3e6113
5 changed files with 153 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/sass/shame.scss
View file

@ -468,3 +468,7 @@ input[type=file] {
.white-space-initial { .white-space-initial {
white-space: initial; white-space: initial;
} }
.height-spacer {
height: 15px;
}

4
src/sass/views/review.scss
View file

@ -11,10 +11,6 @@
bottom: 92px; bottom: 92px;
} }
.fee-summary-spacer {
height: 15px;
}
.shapeshift-banner, .bitpay-banner, .egifter-banner { .shapeshift-banner, .bitpay-banner, .egifter-banner {
box-shadow: none; box-shadow: none;
} }

174
www/css/main.css
View file

@ -10253,6 +10253,46 @@ ion-view.deflash-blue:before, ion-view#view-amount:before, ion-view#view-confirm
color: #fff; } color: #fff; }
.button-white.activated { .button-white.activated {
color: #FFF; } color: #FFF; }
.button-white-outline {
border-color: #FFFFFF;
background-color: transparent;
color: #FFFFFF;
background: none;
box-shadow: none; }
.button-white-outline:hover {
color: #FFFFFF;
text-decoration: none; }
.button-white-outline.active, .button-white-outline.activated {
border-color: #FFF;
background-color: #FAFAFA; }
.button-white-outline.button-outline {
border-color: #FFFFFF;
background: transparent;
color: #FFFFFF; }
.button-white-outline.button-outline.active, .button-white-outline.button-outline.activated {
background-color: #FFFFFF;
box-shadow: none;
color: #fff; }
.button-grey-outline {
border-color: #727272;
background-color: transparent;
color: #727272;
background: none;
box-shadow: none; }
.button-grey-outline:hover {
color: #727272;
text-decoration: none; }
.button-grey-outline.active, .button-grey-outline.activated {
border-color: #727272;
background-color: #FAFAFA; }
.button-grey-outline.button-outline {
border-color: #727272;
background: transparent;
color: #727272; }
.button-grey-outline.button-outline.active, .button-grey-outline.button-outline.activated {
background-color: #727272;
box-shadow: none;
color: #fff; }
.button-clear { .button-clear {
background: none !important; } background: none !important; }
@ -10271,8 +10311,8 @@ qrcode {
content: ""; content: "";
background-size: 100% 100%; background-size: 100% 100%;
display: block; display: block;
left: 88px; left: calc(50% - 22px);
margin-top: 88px; margin-top: calc(50% - 22px);
width: 44px; width: 44px;
height: 44px; height: 44px;
position: absolute; } position: absolute; }
@ -10886,6 +10926,28 @@ qrcode {
width: 100%; width: 100%;
display: block; } display: block; }
#tab-home .buttons {
display: flex;
flex-direction: row;
justify-content: space-evenly;
margin: 6px auto -12px;
text-align: center;
width: 100%; }
#tab-home .buttons > .col {
padding: 5px 10px;
margin-bottom: 0; }
#tab-home .buttons .button {
border: 2px solid;
border-radius: 47px;
padding: 0 15px 0 15px;
text-align: center;
width: 100%;
max-width: 300px;
font-size: 19px;
font-weight: bolder;
min-height: auto;
line-height: 36px; }
#tab-home .wallet-coin-logo { #tab-home .wallet-coin-logo {
vertical-align: middle; vertical-align: middle;
margin-right: 5px; } margin-right: 5px; }
@ -11871,10 +11933,11 @@ qrcode {
height: 100%; height: 100%;
height: calc(100% - env(safe-area-inset-bottom) * 2); } height: calc(100% - env(safe-area-inset-bottom) * 2); }
#walletDetails .bp-content.status-bar { #walletDetails .bp-content.status-bar {
margin-top: 20px; } margin-top: 20px;
margin-top: env(safe-area-inset-top); }
#walletDetails .bar-header { #walletDetails .bar-header {
border: 0; border: 0;
background: none; } background: #eeb640; }
#walletDetails .bar-header .title, #walletDetails .bar-header .button { #walletDetails .bar-header .title, #walletDetails .bar-header .button {
color: #fff; } color: #fff; }
#walletDetails .bar-header .button { #walletDetails .bar-header .button {
@ -11886,7 +11949,7 @@ qrcode {
top: 0; top: 0;
margin-bottom: 16px; } margin-bottom: 16px; }
#walletDetails ion-content.collapsible { #walletDetails ion-content.collapsible {
margin-top: 210px; } margin-top: 230px; }
#walletDetails ion-content .scroll { #walletDetails ion-content .scroll {
background: #f8f8f9; background: #f8f8f9;
min-height: 300px; } min-height: 300px; }
@ -11911,11 +11974,32 @@ qrcode {
height: 200px; height: 200px;
-webkit-transform: translateY(100px); -webkit-transform: translateY(100px);
transform: translateY(100px); } transform: translateY(100px); }
#walletDetails .amount-wrapper .send-receive-buttons {
display: flex;
flex-direction: row;
justify-content: space-evenly;
width: 100%;
position: absolute;
bottom: 20px; }
#walletDetails .amount-wrapper .send-receive-buttons > .col {
padding: 5px 10px;
margin-bottom: 0; }
#walletDetails .amount-wrapper .send-receive-buttons .button {
border: 2px solid;
border-radius: 47px;
padding: 0 15px 0 15px;
text-align: center;
width: 100%;
max-width: 300px;
font-size: 19px;
font-weight: bolder;
min-height: auto;
line-height: 36px; }
#walletDetails .amount { #walletDetails .amount {
width: 100%; width: 100%;
text-align: center; text-align: center;
color: #fff; color: #fff;
height: 210px; height: 230px;
padding-top: 40px; padding-top: 40px;
display: block; display: block;
align-items: center; align-items: center;
@ -13975,11 +14059,6 @@ slide-to-accept-success {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; } justify-content: center; }
slide-to-accept-success .slide-success__windows-background {
background: #11D1A6;
height: 100%;
width: 100%;
position: fixed; }
slide-to-accept-success .slide-success__background { slide-to-accept-success .slide-success__background {
height: 10vmax; height: 10vmax;
width: 10vmax; width: 10vmax;
@ -13996,8 +14075,10 @@ slide-to-accept-success {
slide-to-accept-success .slide-success__content { slide-to-accept-success .slide-success__content {
position: relative; position: relative;
z-index: 1; z-index: 1;
margin-top: -20vh; } margin-top: -10vh; }
slide-to-accept-success .slide-success__content > img { slide-to-accept-success .slide-success__content > img {
width: 45vw;
max-width: 166px;
margin-bottom: 1.8rem; margin-bottom: 1.8rem;
-webkit-transform: translateY(5rem); -webkit-transform: translateY(5rem);
transform: translateY(5rem); transform: translateY(5rem);
@ -14010,7 +14091,7 @@ slide-to-accept-success {
opacity: 1; } opacity: 1; }
slide-to-accept-success .slide-success__content__header { slide-to-accept-success .slide-success__content__header {
color: #FFFFFF; color: #FFFFFF;
font-size: 26px; font-size: 29px;
-webkit-transform: translateY(5rem); -webkit-transform: translateY(5rem);
transform: translateY(5rem); transform: translateY(5rem);
opacity: 0; opacity: 0;
@ -14020,6 +14101,22 @@ slide-to-accept-success {
-webkit-transform: translateY(0); -webkit-transform: translateY(0);
transform: translateY(0); transform: translateY(0);
opacity: 1; } opacity: 1; }
slide-to-accept-success .slide-success__content__share {
transition: transform 400ms ease, opacity 400ms ease;
transition-delay: 600ms;
opacity: 0;
margin-top: 15vh; }
slide-to-accept-success .slide-success__content__share span {
color: #FFF;
font-size: 22px;
height: 28px; }
slide-to-accept-success .slide-success__content__share img {
height: 28px;
width: auto;
vertical-align: bottom;
margin-right: 4px; }
slide-to-accept-success .slide-success__content__share.reveal {
opacity: 0.79; }
slide-to-accept-success .slide-success__footer { slide-to-accept-success .slide-success__footer {
position: absolute; position: absolute;
left: 0; left: 0;
@ -14042,11 +14139,11 @@ slide-to-accept-success {
slide-to-accept-success .slide-success__footer__btn { slide-to-accept-success .slide-success__footer__btn {
display: block; display: block;
color: #FFFFFF; color: #FFFFFF;
font-size: 18px; font-size: 22px;
font-weight: 600; font-weight: 600;
letter-spacing: 2.86px; letter-spacing: 2.86px;
padding: 1rem 0 1.1rem; padding: 2rem 0 2.1rem;
border-top: 1px solid rgba(255, 255, 255, 0.45); border-top: 1px solid rgba(255, 255, 255, 0.25);
cursor: pointer; } cursor: pointer; }
#tx-details .action-created.action-accepted { #tx-details .action-created.action-accepted {
@ -14988,17 +15085,10 @@ account-selector {
height: 100%; } height: 100%; }
#custom-amount .address .qr-code { #custom-amount .address .qr-code {
text-align: center; text-align: center;
margin-top: 24vh; margin-top: 6px; }
margin-bottom: 7vh; } #custom-amount .address .qr-code qrcode canvas {
@media (max-height: 800px) { height: 30vh;
#custom-amount .address .qr-code { max-height: 220px; }
margin-top: 18vh; } }
@media (max-height: 700px) {
#custom-amount .address .qr-code {
margin-top: 14vh; } }
@media (max-height: 600px) {
#custom-amount .address .qr-code {
margin-top: 8vh; } }
#custom-amount .address .info { #custom-amount .address .info {
position: absolute; position: absolute;
width: 100%; width: 100%;
@ -15038,6 +15128,28 @@ account-selector {
margin-left: 10px; } margin-left: 10px; }
#custom-amount .address .address-types { #custom-amount .address .address-types {
text-align: center; } text-align: center; }
#custom-amount .address .amount {
margin-top: 20vh;
margin-bottom: 4vh;
width: 100%;
text-align: center;
display: block;
align-items: center;
justify-content: center; }
@media (max-height: 800px) {
#custom-amount .address .amount {
margin-top: 12vh;
margin-bottom: 6vh; } }
@media (max-height: 700px) {
#custom-amount .address .amount {
margin-top: 10vh;
margin-bottom: 4vh; } }
@media (max-height: 600px) {
#custom-amount .address .amount {
margin-top: 6vh;
margin-bottom: 2vh; } }
#custom-amount .address .amount-alternative {
line-height: 36px; }
#pin { #pin {
background-color: #FAFAFA; background-color: #FAFAFA;
@ -15262,6 +15374,8 @@ log-options #check-bar .checkbox-icon {
#view-review .fee-summary { #view-review .fee-summary {
position: absolute; position: absolute;
bottom: 92px; } bottom: 92px; }
#view-review .fee-summary-spacer {
height: 15px; }
#view-review .shapeshift-banner, #view-review .bitpay-banner, #view-review .egifter-banner { #view-review .shapeshift-banner, #view-review .bitpay-banner, #view-review .egifter-banner {
box-shadow: none; } box-shadow: none; }
#view-review .warning { #view-review .warning {
@ -15644,6 +15758,9 @@ input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer
.size-24 { .size-24 {
font-size: 24px; } font-size: 24px; }
.size-25 {
font-size: 25px; }
.size-28 { .size-28 {
font-size: 28px; } font-size: 28px; }
@ -15818,3 +15935,6 @@ input[type=file] {
.white-space-initial { .white-space-initial {
white-space: initial; } white-space: initial; }
.height-spacer {
height: 15px; }

2
www/views/review.html
View file

@ -80,7 +80,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="fee-summary-spacer"></div> <div class="height-spacer"></div>
</div> </div>
</ion-content> </ion-content>

1
www/views/walletSelector.html
View file

@ -55,5 +55,6 @@
</a> </a>
</div> </div>
</div> </div>
<div class="height-spacer"></div>
</ion-content> </ion-content>
</ion-view> </ion-view>