BTCPrivate
/
copay
mirror of https://github.com/BTCPrivate/copay.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #5380 from JDonadio/fix/onboarding-ui 

Fix onboarding layout errors
This commit is contained in:
Gabriel Edgardo Bazán 2017-01-04 15:42:27 -03:00 committed by GitHub
parent d42104a9d5 5cc79be2f3
commit 0a8f1acbe2
7 changed files with 163 additions and 81 deletions
Show Stats 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.previousTitleText(false);
// CHECKBOX CIRCLE
$ionicConfigProvider.form.checkbox('circle');
$logProvider.debugEnabled(true);
$provide.decorator('$log', ['$delegate', 'platformInfo',
function($delegate, platformInfo) {

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

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

29
src/sass/views/onboarding/onboard-backup-request.scss
View File

@ -10,13 +10,6 @@
margin: 20px auto 5px;
height: 10vh;
}
@media (min-width: 570px){
#backup-description {
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
}
#arrow-down {
font-size: 4.2rem;
color: $soft-blue;
@ -24,8 +17,30 @@
#backup-tldr {
font-size: 16px;
}
#backup-description {
max-width: 500px;
margin: auto;
padding: 1rem 0.5rem 0 1rem;
@media (max-height: 480px) {
padding-top: 40px;
}
}
.cta-buttons {
@extend %cta-buttons;
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 {
.checkbox input, .checkbox-icon {
position: relative;
width: 50px;
height: 50px;
display: block;
border: 0;
background: transparent;
cursor: pointer;
-webkit-appearance: none;
}
color: #fff;
height: 100%;
transition: transform 2.5s ease;
@ -7,12 +17,13 @@
}
&-container {
max-width: 450px;
display: flex;
flex-direction: column;
justify-content: center;
margin-left: auto;
margin-right: auto;
height: calc(100vh - 160px);
padding-top: 3rem;
@media(max-height: 480px) {
padding-top: 1.5rem;
}
}
.has-header > &-container {
height: calc(100vh - 210px);
@ -22,6 +33,9 @@
}
#disclaimer-description {
margin: 1rem 1rem 2rem;
@media(max-height: 480px) {
font-size: 14px;
}
}
ion-content {
height: 101%;
@ -45,6 +59,9 @@
&:first-child{
padding-top: 0;
}
@media(max-height: 480px) {
font-size: 14px;
}
}
}
.item {
@ -162,14 +179,17 @@
.checkbox input:checked + .checkbox-icon:before {
border-color: rgb(19, 229, 182);
}
button{
margin-top:1.5rem;
button {
margin-top: 1.5rem;
position: relative;
}
@media (max-height:480px) {
padding: 0.5rem;
}
}
@media (max-height:460px){
#agree-to-terms{
position: relative;
float:left;
}
@media (max-height:460px) {
#agree-to-terms{
position: relative;
float:left;
}
}

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

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

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

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

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

@ -33,14 +33,13 @@
text-align: center;
.backup-phrase {
background-color: $subtle-gray;
padding: 12px;
margin: auto;
border: 2px dashed darken($subtle-gray, 10%);
border-radius: $subtle-radius;
color: #2b2b2b;
text-align: center;
max-width: 500px;
min-height: 10rem;
width: 85%;
min-height: 9rem;
display: flex;
justify-content: 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 {
display: flex;
flex-direction: column;
display: block;
height: 70%;
width: 100%;
justify-content: center;
align-items: center;
}
&-step-1 {
height: 70%;
}
&-step-2 {
height: 60%
.confirmation-prompt {
padding: 3rem;
@media(max-height: 480px) {
padding: 1rem;
}
}
#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 {
}
.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 {
@extend %cta-buttons;
padding-bottom: 5vh;
}
.select-word {
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;
@media(max-height: 480px) {
padding-bottom: 3vh;
}
}
ion-content.has-tabs{