From 062bf0cd8752d7a7492a481f49c925ffe72edee0 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Tue, 18 Sep 2018 21:45:13 +0100 Subject: [PATCH 1/7] Add brand assets for login and register. --- services/web/public/img/other-brands/logo_google.svg | 1 + services/web/public/img/other-brands/logo_ieee.svg | 1 + services/web/public/img/other-brands/logo_orcid.svg | 1 + services/web/public/img/other-brands/logo_sharelatex.svg | 1 + services/web/public/img/other-brands/logo_twitter.svg | 1 + 5 files changed, 5 insertions(+) create mode 100644 services/web/public/img/other-brands/logo_google.svg create mode 100644 services/web/public/img/other-brands/logo_ieee.svg create mode 100644 services/web/public/img/other-brands/logo_orcid.svg create mode 100644 services/web/public/img/other-brands/logo_sharelatex.svg create mode 100644 services/web/public/img/other-brands/logo_twitter.svg diff --git a/services/web/public/img/other-brands/logo_google.svg b/services/web/public/img/other-brands/logo_google.svg new file mode 100644 index 0000000000..728b6fa185 --- /dev/null +++ b/services/web/public/img/other-brands/logo_google.svg @@ -0,0 +1 @@ +Shape-Copy \ No newline at end of file diff --git a/services/web/public/img/other-brands/logo_ieee.svg b/services/web/public/img/other-brands/logo_ieee.svg new file mode 100644 index 0000000000..29fc90e1a7 --- /dev/null +++ b/services/web/public/img/other-brands/logo_ieee.svg @@ -0,0 +1 @@ +Asset 2 \ No newline at end of file diff --git a/services/web/public/img/other-brands/logo_orcid.svg b/services/web/public/img/other-brands/logo_orcid.svg new file mode 100644 index 0000000000..98107f2e5e --- /dev/null +++ b/services/web/public/img/other-brands/logo_orcid.svg @@ -0,0 +1 @@ +Asset 1 \ No newline at end of file diff --git a/services/web/public/img/other-brands/logo_sharelatex.svg b/services/web/public/img/other-brands/logo_sharelatex.svg new file mode 100644 index 0000000000..e59e2db80d --- /dev/null +++ b/services/web/public/img/other-brands/logo_sharelatex.svg @@ -0,0 +1 @@ +Asset 4 \ No newline at end of file diff --git a/services/web/public/img/other-brands/logo_twitter.svg b/services/web/public/img/other-brands/logo_twitter.svg new file mode 100644 index 0000000000..6a00726c0c --- /dev/null +++ b/services/web/public/img/other-brands/logo_twitter.svg @@ -0,0 +1 @@ +Asset 3 \ No newline at end of file From b008d163e7832109de9c006f6ede16f7d798f9cb Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Tue, 18 Sep 2018 21:45:30 +0100 Subject: [PATCH 2/7] Add login and register styles. --- .../stylesheets/_ol_style_includes.less | 1 + .../stylesheets/app/login-register.less | 152 ++++++++++++++++++ .../stylesheets/core/_common-variables.less | 1 - .../public/stylesheets/core/ol-variables.less | 1 + 4 files changed, 154 insertions(+), 1 deletion(-) create mode 100644 services/web/public/stylesheets/app/login-register.less diff --git a/services/web/public/stylesheets/_ol_style_includes.less b/services/web/public/stylesheets/_ol_style_includes.less index c55729976d..a96bc34d95 100644 --- a/services/web/public/stylesheets/_ol_style_includes.less +++ b/services/web/public/stylesheets/_ol_style_includes.less @@ -2,3 +2,4 @@ @import "app/front-chat-widget.less"; @import "app/ol-chat.less"; @import "app/templates-v2.less"; +@import "app/login-register.less"; diff --git a/services/web/public/stylesheets/app/login-register.less b/services/web/public/stylesheets/app/login-register.less new file mode 100644 index 0000000000..be37bf3724 --- /dev/null +++ b/services/web/public/stylesheets/app/login-register.less @@ -0,0 +1,152 @@ +@brand-ieee-color : #00629B; +@brand-google-color : #4885ED; +@brand-twitter-color : #1DA1F2; +@brand-orcid-color : #A6CE39; +@brand-sharelatex-color : #A93529; + +.make-login-register-brand-btn(@color) { + background-color: @color; + text-indent: -10px; + &:focus, + &:hover { + background-color: darken(@color, 8%); + } + &:active { + background-color: darken(@color, 16%); + } +} + +.login-register-container { + max-width: 400px; + margin: 0 auto; +} + .login-register-header { + padding-top: @line-height-computed; + padding-bottom: @line-height-computed - 5; + border-bottom: solid 1px @hr-border; + } + .login-register-header-heading { + margin: 0; + color: @text-color; + } + + .login-register-card { + padding-top: 0; + padding-bottom: 0; + text-align: center; + } + + .login-register-form, + .login-register-sharelatex { + padding: @line-height-computed (@line-height-computed * 2); + border-bottom: solid 1px @hr-border; + &:last-child { + border-bottom-width: 0; + } + } + .login-register-other-links { + padding: @line-height-computed (@line-height-computed * 2); + } + + .login-register-text, + .login-register-hr-text-container { + margin: 0; + line-height: 1; + font-size: 90%; + } + + .login-register-text { + padding-bottom: 25px; + &:last-child { + padding-bottom: 0; + } + } + + .login-register-hr-text-container { + position: relative; + padding: @line-height-computed 0; + + &::before { + content: ''; + position: absolute; + height: 1px; + background-color: @hr-border; + top: 50%; + left: 0; + right: 0; + } + } + .login-register-hr-text { + position: relative; + background-color: #FFF; + padding: 0 (@line-height-computed / 2); + } + .login-register-sharelatex-tooltip { + display: inline-block; + font-size: 135%; + position: relative; + top: 2px; + margin-left: 3px; + color: @link-color; + cursor: pointer; + } + + .login-btn-ieee { + .make-login-register-brand-btn(@brand-ieee-color); + } + + .login-btn-google { + .make-login-register-brand-btn(@brand-google-color); + } + + .login-btn-twitter { + .make-login-register-brand-btn(@brand-twitter-color); + } + + .login-btn-orcid { + .make-login-register-brand-btn(@brand-orcid-color); + } + + .login-btn-sharelatex { + .make-login-register-brand-btn(@brand-sharelatex-color); + } + .login-btn-icon { + display: inline-block; + float: left; + margin-left: 5px; + background: url(/img/brand/lion.svg) center/contain no-repeat; + width: 24px; + + &::before { + content: '\00a0'; // Non-breakable space. A non-breakable character here makes this icon work like font-awesome. + } + } + .login-btn-icon-ieee { + background-image: url(/img/other-brands/logo_ieee.svg); + } + .login-btn-icon-google { + background-image: url(/img/other-brands/logo_google.svg); + } + .login-btn-icon-twitter { + background-image: url(/img/other-brands/logo_twitter.svg); + } + .login-btn-icon-orcid { + background-image: url(/img/other-brands/logo_orcid.svg); + } + .login-btn-icon-sharelatex { + background-image: url(/img/other-brands/logo_sharelatex.svg); + } + + .login-register-header-heading { + margin: 0; + color: @text-color; + } + +.registration-message-heading { + color: @text-color; +} + +.registration-message-details { + font-size: 90%; +} + diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less index 3a6c08516e..f33b62456f 100644 --- a/services/web/public/stylesheets/core/_common-variables.less +++ b/services/web/public/stylesheets/core/_common-variables.less @@ -17,7 +17,6 @@ //** Link hover color set via `darken()` function. @link-hover-color: darken(@link-color, 15%); - //== Typography // //## Font, line-height, and color for body text, headings, and more. diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less index 2890c55976..6bf5284ad5 100644 --- a/services/web/public/stylesheets/core/ol-variables.less +++ b/services/web/public/stylesheets/core/ol-variables.less @@ -52,6 +52,7 @@ @link-color-alt : @ol-green; @link-active-color : @ol-dark-green; @link-hover-color : @ol-dark-blue; +@hr-border : @ol-blue-gray-1; // Button colors and sizing @btn-border-width : 0; From 70e99d4001c3ca2bdb7635ae96070b8c7d80b7d5 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Thu, 20 Sep 2018 15:18:27 +0100 Subject: [PATCH 3/7] Add styles for the newsletter checkbox. --- .../web/public/stylesheets/app/login-register.less | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/services/web/public/stylesheets/app/login-register.less b/services/web/public/stylesheets/app/login-register.less index be37bf3724..411e8d44ba 100644 --- a/services/web/public/stylesheets/app/login-register.less +++ b/services/web/public/stylesheets/app/login-register.less @@ -91,6 +91,16 @@ cursor: pointer; } + .login-register-newsletter { + font-size: 90%; + margin: @line-height-computed -(2 * @line-height-computed) 0; + text-align: left; + + & > .checkbox { + margin-bottom: 0; + } + } + .login-btn-ieee { .make-login-register-brand-btn(@brand-ieee-color); } From be9045c7edc3181468bf2be2b102d83f2c962236 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Thu, 20 Sep 2018 17:17:24 +0100 Subject: [PATCH 4/7] Add styles for homepage too; add alternative versions of the register buttons. --- .../img/other-brands/logo_google_alt.svg | 1 + .../img/other-brands/logo_orcid_alt.svg | 1 + .../web/public/stylesheets/app/homepage.less | 43 ++++++++++++++++++- .../stylesheets/app/login-register.less | 41 ++++++++++++++++-- 4 files changed, 80 insertions(+), 6 deletions(-) create mode 100644 services/web/public/img/other-brands/logo_google_alt.svg create mode 100644 services/web/public/img/other-brands/logo_orcid_alt.svg diff --git a/services/web/public/img/other-brands/logo_google_alt.svg b/services/web/public/img/other-brands/logo_google_alt.svg new file mode 100644 index 0000000000..3c7a7228ae --- /dev/null +++ b/services/web/public/img/other-brands/logo_google_alt.svg @@ -0,0 +1 @@ +Shape-Copy \ No newline at end of file diff --git a/services/web/public/img/other-brands/logo_orcid_alt.svg b/services/web/public/img/other-brands/logo_orcid_alt.svg new file mode 100644 index 0000000000..82affd04de --- /dev/null +++ b/services/web/public/img/other-brands/logo_orcid_alt.svg @@ -0,0 +1 @@ +Asset 1 \ No newline at end of file diff --git a/services/web/public/stylesheets/app/homepage.less b/services/web/public/stylesheets/app/homepage.less index 784eb1d6d0..f1e943de31 100644 --- a/services/web/public/stylesheets/app/homepage.less +++ b/services/web/public/stylesheets/app/homepage.less @@ -1,3 +1,5 @@ +@register-v-spacing: 20px; + .deprecated-sl-masthead { display: inline-block; margin-top: @header-height; @@ -73,7 +75,7 @@ .register-banner { background-image: -webkit-linear-gradient(top,rgba(0,0,0,0.7),rgba(0,0,0,0.9)); background-image: linear-gradient(to bottom,rgba(0,0,0,0.7),rgba(0,0,0,0.9)); - padding: @line-height-computed 0; + padding: @register-v-spacing 0; position: absolute; bottom: 0; width: 100%; @@ -83,13 +85,17 @@ font-family: @font-family-sans-serif; font-weight: 500; letter-spacing: 1px; + margin-bottom: @register-v-spacing; } .form-group { margin-left: @line-height-computed / 2; } + .input-lg { + border-radius: 9999px; + } } .screenshot { - height: 550px; + height: 600px; margin: auto; margin-bottom: -50px; overflow-y: hidden; @@ -119,6 +125,39 @@ float: left; } } + +.hp-register-external-separator { + margin: 0 0 (@register-v-spacing / 2); + color: #FFF; +} + + .hp-register-external-separator-or { + vertical-align: middle; + &::before, + &::after { + content: ""; + display: inline-block; + vertical-align: middle; + width: 5em; + height: 1px; + background-color: rgba(255, 255, 255, .3); + } + &::before { + margin-right: 1.25em; + } + &::after { + margin-left: 1.25em; + } + } + +.hp-register-newsletter-checkbox { + font-size: 90%; +} + +.hp-login-btn { + min-width: 220px; +} + @media only screen and (max-width: @screen-sm-max) { .masthead { .btn-hero { diff --git a/services/web/public/stylesheets/app/login-register.less b/services/web/public/stylesheets/app/login-register.less index 411e8d44ba..95b762e31c 100644 --- a/services/web/public/stylesheets/app/login-register.less +++ b/services/web/public/stylesheets/app/login-register.less @@ -4,15 +4,34 @@ @brand-orcid-color : #A6CE39; @brand-sharelatex-color : #A93529; -.make-login-register-brand-btn(@color) { - background-color: @color; +.make-login-register-brand-btn(@bg-color) { + background-color: @bg-color; text-indent: -10px; + padding-left: 0; + padding-right: 0; &:focus, &:hover { - background-color: darken(@color, 8%); + background-color: darken(@bg-color, 8%); } &:active { - background-color: darken(@color, 16%); + background-color: darken(@bg-color, 16%); + } +} + +.make-login-register-brand-btn-alt(@color) { + background-color: #FFF; + color: @color; + text-indent: -10px; + padding-left: 0; + padding-right: 0; + &:focus, + &:hover { + background-color: #FFF; + color: darken(@color, 8%); + } + &:active { + background-color: #FFF; + color: darken(@color, 16%); } } @@ -109,6 +128,10 @@ .make-login-register-brand-btn(@brand-google-color); } + .login-btn-google-alt { + .make-login-register-brand-btn-alt(@brand-google-color); + } + .login-btn-twitter { .make-login-register-brand-btn(@brand-twitter-color); } @@ -117,6 +140,10 @@ .make-login-register-brand-btn(@brand-orcid-color); } + .login-btn-orcid-alt { + .make-login-register-brand-btn-alt(darken(@brand-orcid-color, 6%)); + } + .login-btn-sharelatex { .make-login-register-brand-btn(@brand-sharelatex-color); } @@ -137,12 +164,18 @@ .login-btn-icon-google { background-image: url(/img/other-brands/logo_google.svg); } + .login-btn-icon-google-alt { + background-image: url(/img/other-brands/logo_google_alt.svg); + } .login-btn-icon-twitter { background-image: url(/img/other-brands/logo_twitter.svg); } .login-btn-icon-orcid { background-image: url(/img/other-brands/logo_orcid.svg); } + .login-btn-icon-orcid-alt { + background-image: url(/img/other-brands/logo_orcid_alt.svg); + } .login-btn-icon-sharelatex { background-image: url(/img/other-brands/logo_sharelatex.svg); } From 1e4e22c4727025cfadbad839dc56e254abe6b007 Mon Sep 17 00:00:00 2001 From: Jessica Lawshe Date: Thu, 20 Sep 2018 16:48:47 -0500 Subject: [PATCH 5/7] Add margin to register button --- services/web/public/stylesheets/app/homepage.less | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/services/web/public/stylesheets/app/homepage.less b/services/web/public/stylesheets/app/homepage.less index f1e943de31..aa82671568 100644 --- a/services/web/public/stylesheets/app/homepage.less +++ b/services/web/public/stylesheets/app/homepage.less @@ -165,6 +165,14 @@ } } } +@media only screen and (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { + .masthead { + .btn-hero { + margin-top: @margin-md; + } + } +} + .universities { border-bottom: 1px solid @gray-lighter; From 7d5bd74c4360b9982ff3827839ab6c9a80bad0d7 Mon Sep 17 00:00:00 2001 From: Shane Kilkelly Date: Fri, 21 Sep 2018 11:28:44 +0100 Subject: [PATCH 6/7] Enable legacy login for tests --- services/web/test/acceptance/coffee/helpers/User.coffee | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/services/web/test/acceptance/coffee/helpers/User.coffee b/services/web/test/acceptance/coffee/helpers/User.coffee index 691a214c8b..80846240d7 100644 --- a/services/web/test/acceptance/coffee/helpers/User.coffee +++ b/services/web/test/acceptance/coffee/helpers/User.coffee @@ -58,7 +58,7 @@ class User @getCsrfToken (error) => return callback(error) if error? @request.post { - url: "/login" + url: if settings.enableLegacyLogin then "/login/legacy" else "/login" json: { email, @password } }, callback From 69771257ffbabd58e5cf62bc47453cf7cfbff7c9 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Fri, 21 Sep 2018 16:34:24 +0100 Subject: [PATCH 7/7] Adapt styles to get a nicer responsive behaviour. --- .../web/public/stylesheets/app/homepage.less | 37 +++++++++++-------- 1 file changed, 21 insertions(+), 16 deletions(-) diff --git a/services/web/public/stylesheets/app/homepage.less b/services/web/public/stylesheets/app/homepage.less index aa82671568..795d04488f 100644 --- a/services/web/public/stylesheets/app/homepage.less +++ b/services/web/public/stylesheets/app/homepage.less @@ -121,9 +121,6 @@ } } } - .btn-hero { - float: left; - } } .hp-register-external-separator { @@ -152,27 +149,35 @@ .hp-register-newsletter-checkbox { font-size: 90%; + & > .checkbox-newsletter { + text-align: left; + @media only screen and (min-width: @screen-sm-min) { + text-align: center; + } + } } .hp-login-btn { min-width: 220px; } -@media only screen and (max-width: @screen-sm-max) { - .masthead { - .btn-hero { - float: none; - } - } -} -@media only screen and (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { - .masthead { - .btn-hero { - margin-top: @margin-md; - } - } +.hp-register-form-email-pwd { + position: relative; } + .hp-register-form-email-pwd-btn-container.form-group { + display: block; + margin-top: (@register-v-spacing / 2); + @media only screen and (min-width: @screen-md-min) { + position: absolute; + display: inline-block; + height: 100%; + top: -(@register-v-spacing / 2); + & > .btn-hero { + height: 100%; + } + } + } .universities { border-bottom: 1px solid @gray-lighter;