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

fix onboarding layout errors

Browse source
This commit is contained in:
Javier 2016-12-29 16:48:05 -03:00
commit 574a216e4b
7 changed files with 160 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/js/routes.js
View file

@ -33,6 +33,9 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr
$ionicConfigProvider.backButton.icon('icon ion-ios-arrow-thin-left').text(''); $ionicConfigProvider.backButton.icon('icon ion-ios-arrow-thin-left').text('');
$ionicConfigProvider.backButton.previousTitleText(false); $ionicConfigProvider.backButton.previousTitleText(false);
// CHECKBOX CIRCLE
$ionicConfigProvider.form.checkbox('circle');
$logProvider.debugEnabled(true); $logProvider.debugEnabled(true);
$provide.decorator('$log', ['$delegate', 'platformInfo', $provide.decorator('$log', ['$delegate', 'platformInfo',
function($delegate, platformInfo) { function($delegate, platformInfo) {

4
src/sass/views/includes/modals/modals.scss
View file

@ -17,7 +17,7 @@
&-warning { &-warning {
background: $warning-orange; background: $warning-orange;
} }
padding: 2rem; padding: 1rem;
border-radius: $unmistakable-radius $unmistakable-radius 0 0; border-radius: $unmistakable-radius $unmistakable-radius 0 0;
min-height: 120px; min-height: 120px;
&-img{ &-img{
@ -41,7 +41,7 @@
} }
} }
&-content { &-content {
padding: 1rem 2rem; padding: 0rem 1rem;
} }
&-heading { &-heading {
margin:0 0 1rem; margin:0 0 1rem;

26
src/sass/views/onboarding/onboard-backup-request.scss
View file

@ -10,13 +10,6 @@
margin: 20px auto 5px; margin: 20px auto 5px;
height: 10vh; height: 10vh;
} }
@media (min-width: 570px){
#backup-description {
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
}
#arrow-down { #arrow-down {
font-size: 4.2rem; font-size: 4.2rem;
color: $soft-blue; color: $soft-blue;
@ -24,8 +17,27 @@
#backup-tldr { #backup-tldr {
font-size: 16px; font-size: 16px;
} }
#backup-description {
max-width: 500px;
margin-left: 1rem;
margin-right: 1rem;
}
.cta-buttons { .cta-buttons {
@extend %cta-buttons; @extend %cta-buttons;
padding-bottom: 4vw; padding-bottom: 4vw;
} }
@media (max-height: 480px) {
#warning {
display: block;
}
#backup-description {
font-size: 14px;
}
#backup-tldr {
font-size: 14px;
}
#arrow-down {
display: none;
}
}
} }

40
src/sass/views/onboarding/onboard-disclaimer.scss
View file

@ -1,4 +1,14 @@
#onboarding-disclaimer { #onboarding-disclaimer {
.checkbox input, .checkbox-icon {
position: relative;
width: 50px;
height: 50px;
display: block;
border: 0;
background: transparent;
cursor: pointer;
-webkit-appearance: none;
}
color: #fff; color: #fff;
height: 100%; height: 100%;
transition: transform 2.5s ease; transition: transform 2.5s ease;
@ -7,12 +17,13 @@
} }
&-container { &-container {
max-width: 450px; max-width: 450px;
display: flex;
flex-direction: column;
justify-content: center; justify-content: center;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
height: calc(100vh - 160px); padding-top: 3rem;
@media(max-height: 480px) {
padding-top: 1.5rem;
}
} }
.has-header > &-container { .has-header > &-container {
height: calc(100vh - 210px); height: calc(100vh - 210px);
@ -22,6 +33,9 @@
} }
#disclaimer-description { #disclaimer-description {
margin: 1rem 1rem 2rem; margin: 1rem 1rem 2rem;
@media(max-height: 480px) {
font-size: 14px;
}
} }
ion-content { ion-content {
height: 101%; height: 101%;
@ -45,6 +59,9 @@
&:first-child{ &:first-child{
padding-top: 0; padding-top: 0;
} }
@media(max-height: 480px) {
font-size: 14px;
}
} }
} }
.item { .item {
@ -162,14 +179,17 @@
.checkbox input:checked + .checkbox-icon:before { .checkbox input:checked + .checkbox-icon:before {
border-color: rgb(19, 229, 182); border-color: rgb(19, 229, 182);
} }
button{ button {
margin-top:1.5rem; margin-top: 1.5rem;
position: relative; position: relative;
} }
@media (max-height:480px) {
padding: 0.5rem;
}
} }
@media (max-height:460px){ @media (max-height:460px) {
#agree-to-terms{ #agree-to-terms{
position: relative; position: relative;
float:left; float:left;
} }
} }

3
src/sass/views/onboarding/onboard-tour.scss
View file

@ -9,9 +9,6 @@
padding-bottom: 12vh; padding-bottom: 12vh;
} }
#onboarding-illustration-currency-exchange-rate { #onboarding-illustration-currency-exchange-rate {
background-color: $soft-blue;
border-radius: $button-border-radius;
box-shadow: $subtle-box-shadow;
font-size: 14px; font-size: 14px;
font-weight: normal; font-weight: normal;
height: 40px; height: 40px;

30
src/sass/views/onboarding/onboarding.scss
View file

@ -34,6 +34,9 @@
@media(max-width: 350px) { @media(max-width: 350px) {
line-height: 1.3; line-height: 1.3;
} }
@media(max-height: 480px) {
font-size: 16px;
}
} }
.onboarding-tldr { .onboarding-tldr {
font-size: 18px; font-size: 18px;
@ -43,6 +46,9 @@
@media(max-width: 350px) { @media(max-width: 350px) {
font-size: 16px; font-size: 16px;
} }
@media(max-height: 480px) {
font-size: 14px;
}
} }
} }
@ -67,16 +73,32 @@
@import "onboard-push-notifications"; @import "onboard-push-notifications";
%onboarding-illustration { %onboarding-illustration {
position: absolute;
width: 100%; width: 100%;
height: 45%; margin-top: 1rem;
margin-top: 25vh;
top: 0;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
z-index: -1; z-index: -1;
} }
@media(max-height: 600px) {
%onboarding-illustration {
height: 35%;
}
}
@media(max-height: 480px) {
%onboarding-illustration {
height: 23%;
}
}
@media(min-height: 600px) {
%onboarding-illustration {
height: 40%;
}
}
.onboarding-illustration { .onboarding-illustration {
&-secure { &-secure {
@extend %onboarding-illustration; @extend %onboarding-illustration;

135
src/sass/views/wallet-backup-phrase.scss
View file

@ -33,14 +33,13 @@
text-align: center; text-align: center;
.backup-phrase { .backup-phrase {
background-color: $subtle-gray; background-color: $subtle-gray;
padding: 12px; margin: 0 1rem 0 1rem;
border: 2px dashed darken($subtle-gray, 10%); border: 2px dashed darken($subtle-gray, 10%);
border-radius: $subtle-radius; border-radius: $subtle-radius;
color: #2b2b2b; color: #2b2b2b;
text-align: center; text-align: center;
max-width: 500px; max-width: 500px;
min-height: 10rem; min-height: 9rem;
width: 85%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -61,70 +60,96 @@
} }
} }
} }
&-step-1, &-step-1 {
height: 70%;
color: $dark-gray;
.initial-prompt {
padding: 3rem;
@media(max-height: 480px) {
padding: 2rem;
}
}
.tldr-prompt {
padding-bottom: 3rem;
@media(max-height: 480px) {
height: 30%;
padding-bottom: 1rem;
font-size: 14px;
}
}
}
&-step-2 { &-step-2 {
display: flex; display: block;
flex-direction: column;
height: 70%; height: 70%;
width: 100%; width: 100%;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} .confirmation-prompt {
&-step-1 { padding: 3rem;
height: 70%; @media(max-height: 480px) {
} padding: 1rem;
&-step-2 { }
height: 60% }
#select-phrase {
background: $subtle-gray;
.select-word {
&.button[disabled] {
background: transparent !important;
box-shadow: none !important;
color: transparent;
border: 1px solid rgb(211, 211, 211);
}
}
&-content {
max-width: 500px;
margin-left: auto;
margin-right: auto;
.tldr-prompt {
font-weight: bold;
padding: 1rem;
@media(max-height: 480px) {
padding: 0.5rem;
font-size: 14px;
}
}
}
.cta-buttons {
padding-bottom: 0;
}
}
.select-word {
background: #fff;
box-shadow: $subtle-box-shadow;
display: inline-block;
margin: 3px 0;
min-height: 35px;
line-height: 33px;
padding: 0 8px;
@media (min-width: 400px) {
margin: 4px 3px;
padding: 0 16px;
}
@media(max-height: 480px) {
font-size: 14px;
}
}
.tldr-prompt {
padding-bottom: 3rem;
@media(max-height: 480px) {
height: 30%;
padding-bottom: 1rem;
font-size: 14px;
}
}
} }
&-step-3 { &-step-3 {
}
.initial-prompt,
.confirmation-prompt,
.tldr-prompt {
color: $dark-gray;
padding-bottom: 1.5rem;
}
.initial-prompt,
.confirmation-prompt {
padding-top: 1.5rem;
}
.tldr-prompt {
font-weight: bold;
} }
.cta-buttons { .cta-buttons {
@extend %cta-buttons; @extend %cta-buttons;
padding-bottom: 5vh; padding-bottom: 5vh;
} @media(max-height: 480px) {
.select-word { padding-bottom: 3vh;
background: #fff;
box-shadow: $subtle-box-shadow;
display: inline-block;
margin: 3px 0;
min-height: 38px;
line-height: 33px;
padding: 0 8px;
@media (min-width: 400px) {
margin: 4px 3px;
padding: 0 16px;
}
}
#select-phrase {
background: $subtle-gray;
padding: 5% 0;
.select-word {
&.button[disabled] {
background: transparent !important;
box-shadow: none !important;
color: transparent;
border: 1px solid rgb(211, 211, 211);
}
}
&-content {
max-width: 500px;
width: 90%;
margin-left: auto;
margin-right: auto;
} }
} }
ion-content.has-tabs{ ion-content.has-tabs{