From 8ff4b540e21b9718503b91d4c644f6fdae437857 Mon Sep 17 00:00:00 2001 From: aignatov-bio Date: Fri, 27 Mar 2020 09:43:49 +0100 Subject: [PATCH 01/18] Update css for login screen --- app/assets/stylesheets/forgot_password.scss | 33 +++++++ .../shared_styles/elements/input_fields.scss | 5 +- app/assets/stylesheets/sign_up.scss | 53 +++++++++++ app/assets/stylesheets/sing_in.scss | 67 +++++++++++++ app/helpers/form_tag_helper.rb | 5 +- app/views/users/passwords/new.html.erb | 42 ++++---- app/views/users/registrations/new.html.erb | 95 +++++++++++-------- app/views/users/sessions/new.html.erb | 74 ++++++++------- .../shared/_linkedin_sign_in_links.html.erb | 10 ++ app/views/users/shared/_links.html.erb | 21 ++-- config/locales/en.yml | 15 ++- 11 files changed, 306 insertions(+), 114 deletions(-) create mode 100644 app/assets/stylesheets/forgot_password.scss create mode 100644 app/assets/stylesheets/sign_up.scss create mode 100644 app/assets/stylesheets/sing_in.scss create mode 100644 app/views/users/shared/_linkedin_sign_in_links.html.erb diff --git a/app/assets/stylesheets/forgot_password.scss b/app/assets/stylesheets/forgot_password.scss new file mode 100644 index 000000000..321ba6be5 --- /dev/null +++ b/app/assets/stylesheets/forgot_password.scss @@ -0,0 +1,33 @@ +// scss-lint:disable SelectorDepth NestingDepth IdSelector + +.forgot-password-layout { + #content-wrapper { + margin-left: 0; + + .container:first-child { + padding: 0; + } + } + + .forgot-password-container { + display: flex; + + .forgot-password-form-wrapper { + flex-basis: 50%; + flex-grow: 1; + + .center-block-narrow { + margin-top: 72px; + padding: 0 50px; + } + + .forgot-password-title { + margin-bottom: 24px; + } + + .sci-input-container { + margin-bottom: 24px; + } + } + } +} diff --git a/app/assets/stylesheets/shared_styles/elements/input_fields.scss b/app/assets/stylesheets/shared_styles/elements/input_fields.scss index 368883d14..12f121c36 100644 --- a/app/assets/stylesheets/shared_styles/elements/input_fields.scss +++ b/app/assets/stylesheets/shared_styles/elements/input_fields.scss @@ -3,6 +3,7 @@ .sci-input-container { display: inline-block; position: relative; + width: 100%; label { @include font-small; @@ -14,8 +15,8 @@ .sci-input-field { @include font-button; animation-timing-function: $timing-function-sharp; - border: $border-default; - border-radius: $border-radius-default; + border: $border-secondary; + border-radius: $border-radius-default !important; box-shadow: none; height: 36px; outline: 0; diff --git a/app/assets/stylesheets/sign_up.scss b/app/assets/stylesheets/sign_up.scss new file mode 100644 index 000000000..5e227f9eb --- /dev/null +++ b/app/assets/stylesheets/sign_up.scss @@ -0,0 +1,53 @@ +// scss-lint:disable SelectorDepth NestingDepth IdSelector + +.sign-up-layout { + #content-wrapper { + margin-left: 0; + + .container:first-child { + padding: 0; + } + } + + .sign-up-container { + display: flex; + + .sign-up-form-wrapper { + flex-basis: 50%; + flex-grow: 1; + + .center-block-narrow { + margin-top: 72px; + padding: 0 50px; + } + + .sign-up-title { + margin-bottom: 24px; + } + + .sci-input-container { + margin-bottom: 24px; + } + + .sign-up-button { + padding: 7px 32px; + } + + .linkedin-container { + margin-bottom: 24px; + + .linkedin-link { + margin-right: 15px; + } + + .linkedin-signin-button { + margin: 0; + } + + span { + font-weight: bold; + } + } + } + } +} diff --git a/app/assets/stylesheets/sing_in.scss b/app/assets/stylesheets/sing_in.scss new file mode 100644 index 000000000..d9d72996f --- /dev/null +++ b/app/assets/stylesheets/sing_in.scss @@ -0,0 +1,67 @@ +.sign-in-layout { + #content-wrapper { + margin-left: 0; + + .container:first-child { + padding: 0; + } + } + + .sign-in-container { + display: flex; + + .sign-in-form-wrapper { + flex-grow: 1; + flex-basis: 50%; + + .center-block-narrow { + margin-top: 72px; + padding: 0 50px; + } + + .log-in-title { + margin-bottom: 24px; + } + + .remember-me { + align-items: center; + display: flex; + margin-bottom: 24px; + + label { + margin-left: 8px; + margin-bottom: 0; + } + } + + .sci-input-container { + margin-bottom: 24px; + } + + .linkedin-container { + margin-bottom: 24px; + + .linkedin-link { + margin-right: 15px; + } + + .linkedin-signin-button { + margin: 0; + } + + span { + font-weight: bold; + } + } + + .log-in-button { + padding: 7px 32px; + } + + .forgot-password-link { + display: inline-block; + margin-bottom: 16px; + } + } + } +} diff --git a/app/helpers/form_tag_helper.rb b/app/helpers/form_tag_helper.rb index 0d16834cf..8352395ef 100644 --- a/app/helpers/form_tag_helper.rb +++ b/app/helpers/form_tag_helper.rb @@ -1,9 +1,12 @@ +# frozen_string_literal: true + module FormTagHelper def recaptcha_input_tag if Rails.configuration.x.enable_recaptcha - res = "
" + res << label_tag(:recaptcha_label, 'Let us know you’re human. Enter the captcha below.') res << recaptcha_tags if flash[:recaptcha_error] res << "" diff --git a/app/views/users/passwords/new.html.erb b/app/views/users/passwords/new.html.erb index 4598aa0e4..b79cc615f 100644 --- a/app/views/users/passwords/new.html.erb +++ b/app/views/users/passwords/new.html.erb @@ -1,25 +1,29 @@ <% provide(:head_title, t("devise.passwords.new.head_title")) %> +<% content_for(:body_class, 'forgot-password-layout') %> +
+
+
+

<%=t "devise.passwords.new.title" %>

-
-

<%=t "devise.passwords.new.title" %>

+ <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %> - <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %> + <% if not resource.errors.empty? %> +
+ <%= devise_error_messages! %> +
+ <% end %> - <% if not resource.errors.empty? %> -
- <%= devise_error_messages! %> +
+ <%= f.label :email %>
+ <%= f.email_field :email, autofocus: true, class: "form-control sci-input-field" %> +
+ +
+ <%= f.submit t("devise.passwords.new.submit"), class: "btn btn-primary" %> +
+ <% end %> + + <%= render partial: 'users/shared/links', locals: {linkedin_skip: true} %>
- <% end %> - -
- <%= f.label :email %>
- <%= f.email_field :email, autofocus: true, class: "form-control" %> -
- -
- <%= f.submit t("devise.passwords.new.submit"), class: "btn btn-primary" %> -
- <% end %> - - <%= render "users/shared/links" %> +
diff --git a/app/views/users/registrations/new.html.erb b/app/views/users/registrations/new.html.erb index afe7eabcc..4db26ff70 100644 --- a/app/views/users/registrations/new.html.erb +++ b/app/views/users/registrations/new.html.erb @@ -1,53 +1,64 @@ <% provide(:head_title, t('users.registrations.new.head_title')) %> +<% content_for(:body_class, 'sign-up-layout') %> +