From bdbbc1808e62ede126f4cc2ee43cfec44c889a04 Mon Sep 17 00:00:00 2001 From: Jason Dreyzehner Date: Tue, 4 Oct 2016 19:36:55 -0400 Subject: [PATCH] design(welcome): improve welcome responsiveness, better scss organization --- ...ng24.png => onboarding-welcome-qrcode.png} | Bin public/views/onboarding/welcome.html | 28 ++---- src/sass/main.scss | 2 +- src/sass/shame.scss | 6 -- src/sass/variables.scss | 6 ++ .../views/onboarding/onboard-welcome.scss | 94 ++++++------------ .../views/onboarding/onboarding-buttons.scss | 32 ++++++ src/sass/views/onboarding/onboarding.scss | 49 ++------- 8 files changed, 89 insertions(+), 128 deletions(-) rename public/img/{onboarding-welcome-shopping24.png => onboarding-welcome-qrcode.png} (100%) create mode 100644 src/sass/views/onboarding/onboarding-buttons.scss diff --git a/public/img/onboarding-welcome-shopping24.png b/public/img/onboarding-welcome-qrcode.png similarity index 100% rename from public/img/onboarding-welcome-shopping24.png rename to public/img/onboarding-welcome-qrcode.png diff --git a/public/views/onboarding/welcome.html b/public/views/onboarding/welcome.html index e753a8d65..8faf99bb5 100644 --- a/public/views/onboarding/welcome.html +++ b/public/views/onboarding/welcome.html @@ -1,23 +1,13 @@ - -
-
- -
-
-

- Take control of your money,
get started with bitcoin. -

-
-
-
-
- -
-
- -
-
+ +
+ +

Take control of your money,
get started with bitcoin.

+
+
+ + +
diff --git a/src/sass/main.scss b/src/sass/main.scss index acb64a176..937471ad7 100644 --- a/src/sass/main.scss +++ b/src/sass/main.scss @@ -1,7 +1,7 @@ @import "fonts"; @import "variables"; -@import "icons"; @import "ionic"; +@import "icons"; @import "forms"; @import "mixins/mixins"; @import "views/views"; diff --git a/src/sass/shame.scss b/src/sass/shame.scss index 62f0ae8ad..6216e4cb4 100644 --- a/src/sass/shame.scss +++ b/src/sass/shame.scss @@ -92,12 +92,6 @@ input[type=number] { } } -.button-block { - width: 90% !important; - margin-left: auto; - margin-right: auto; -} - .name-wallet { font-size: 14px; font-weight: 400; diff --git a/src/sass/variables.scss b/src/sass/variables.scss index e66b39f1d..628b340ec 100644 --- a/src/sass/variables.scss +++ b/src/sass/variables.scss @@ -13,9 +13,15 @@ $light-gray: #9b9bab; $positive: $soft-blue; +$font-size-base: 16px; +$font-size-small: 12px; $font-family-sans-serif: $roboto; $font-family-light-sans-serif: $roboto-light; +$button-border-radius: 6px; +$button-height: 52px; +$button-padding: 16px; + $base-background-color: $subtle-gray; $item-default-active-bg: $subtle-gray; diff --git a/src/sass/views/onboarding/onboard-welcome.scss b/src/sass/views/onboarding/onboard-welcome.scss index 42cfe0826..214f8a245 100644 --- a/src/sass/views/onboarding/onboard-welcome.scss +++ b/src/sass/views/onboarding/onboard-welcome.scss @@ -1,73 +1,39 @@ #onboard-welcome { - ion-content { + & > ion-content { background: url(../img/onboarding-welcome-bg.png); background-position: top center; background-size: contain; background-repeat: repeat-x; - #shopping-24 { - content: url("../img/onboarding-welcome-shopping24.png"); - position: absolute; - top: 5%; - right: 5%; - width: 35px; - height: auto; - } - .logo, - p { - @include center-block(); - } - .logo { - margin-top: 20rem; - } + } + #qrcode { + content: url("../img/onboarding-welcome-qrcode.png"); + position: absolute; + top: 5%; + right: 5%; + width: 20px; + height: auto; + } + #logo-tagline { + width: 100%; + height: 70%; + display: flex; + flex-direction: column; + justify-content: space-around; + } + #logo { + width: 40%; + max-width: 200px; + margin: 5rem auto 0; + } + .lead { + line-height: 1.6; + } + #cta-buttons { + position: absolute; + bottom: 0; + width: 100%; button { - @include center-block(1rem); - color: #fff; - &.get-started { - background: rgb(100, 124, 232); - margin-top: 4rem; - } - &.restore { - background: none; - } - } - #cta-buttons { - position: absolute; - bottom: 0; - width: 100%; - button { - max-width: 400px; - min-width: 300px; - } - } - } -} - -@media (max-width:500px), -(max-height:800px) { - #onboard-welcome { - ion-content { - .logo { - margin-top: 12rem; - } - } - } -} - -@media (max-width:420px) { - #onboard-welcome { - ion-content { - .logo { - margin-top: 8rem; - } - } - } -} - -@media (max-height:550px) { - #onboard-welcome { - #cta-buttons { - position: relative !important; - float: left; + max-width: 400px; } } } diff --git a/src/sass/views/onboarding/onboarding-buttons.scss b/src/sass/views/onboarding/onboarding-buttons.scss new file mode 100644 index 000000000..f347b5859 --- /dev/null +++ b/src/sass/views/onboarding/onboarding-buttons.scss @@ -0,0 +1,32 @@ +$button-primary-bg: $positive; +$button-primary-text: #fff; +$button-primary-border: transparent; +$button-primary-active-bg: darken($positive, 5%); +$button-primary-active-border: transparent; + +$button-secondary-bg: rgba(215, 215, 215, 0.1); +$button-secondary-text: #fff; +$button-secondary-border: transparent; +$button-secondary-active-bg: rgba(215, 215, 215, 0.2); +$button-secondary-active-border: transparent; + +.onboarding .button { + &.button-primary { + @include button-style($button-primary-bg, $button-primary-border, $button-primary-active-bg, $button-primary-active-border, $button-primary-text); + @include button-clear($button-primary-bg); + @include button-outline($button-primary-bg); + } + &.button-secondary { + @include button-style($button-secondary-bg, $button-secondary-border, $button-secondary-active-bg, $button-secondary-active-border, $button-secondary-text); + @include button-clear($button-secondary-text); + @include button-outline($button-secondary-text); + } + &.button-primary, + &.button-secondary { + &.button-block { + width: 85%; + margin-left: auto; + margin-right: auto; + } + } +} diff --git a/src/sass/views/onboarding/onboarding.scss b/src/sass/views/onboarding/onboarding.scss index da762022a..a92873297 100644 --- a/src/sass/views/onboarding/onboarding.scss +++ b/src/sass/views/onboarding/onboarding.scss @@ -1,15 +1,10 @@ .onboarding { - background: rgba(30, 49, 134, 1); - background: -moz-linear-gradient(top, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%); - background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(30, 49, 134, 1)), color-stop(100%, rgba(17, 27, 73, 1))); - background: -webkit-linear-gradient(top, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%); - background: -o-linear-gradient(top, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%); - background: -ms-linear-gradient(top, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%); - background: linear-gradient(to bottom, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%); - color: #fff; + background: #1e3186; + background-image: linear-gradient(to bottom, #1e3186 0%, #111b49 100%); height: 100%; + text-align: center; .bar.bar-header { - background: rgb(30, 49, 134); + background: none; color: #fff; button { color: #fff; @@ -20,9 +15,8 @@ } } } - .bar.bar-stable{ - border-color: transparent; - border:none; + .bar.bar-stable { + border: 0 none transparent; } ion-content { height: 100%; @@ -57,34 +51,18 @@ @media (min-width: 450px){ p{ font-size: 1.1rem; - line-height: 1.5rem; + line-height: 1.6; } } } - .col { - @include center-block(.5rem); - } .swiper-pagination { &-bullet { - background: rgb(100, 124, 232); + background: $soft-blue; &-active { - background: rgb(100, 124, 232); + background: $soft-blue; } } } - .button-transparent{ - background: none !important; - } - .button-translucent{ - background: rgba(215, 215, 215, 0.1) - } - .button-primary{ - background: rgb(100, 124, 232) !important; - color:#fff; - } - .light-blue{ - color:rgb(100, 124, 232); - } } @media (min-width: 415px){ @@ -95,19 +73,14 @@ } p{ font-size: 1.4rem; - line-height: 1.9rem; - } - p,h2,h3{ - max-width: 600px !important; - } - button{ - max-width: 400px !important; + line-height: 1.6; } } } } @import "terms-of-use"; +@import "onboarding-buttons"; @import "onboard-welcome"; @import "onboard-tour"; @import "onboard-collect-email";