From 42d147a462b49cf3e3072db2e4ff7eace27292df Mon Sep 17 00:00:00 2001 From: Alberto Garcia Cabeza Date: Mon, 9 Jan 2017 18:07:04 +0100 Subject: [PATCH 1/4] changes general styles for devise layout --- app/assets/stylesheets/layout.scss | 26 +++++++++++++------- app/views/layouts/devise.html.erb | 38 +++++++++++++++--------------- 2 files changed, 37 insertions(+), 27 deletions(-) diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index 0ef13f01a..0af34b334 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -600,12 +600,23 @@ h2.sidebar-title { // -------------- .auth-page { + + .wrapper { + margin: 0 auto (-$line-height)*14; + } +} + +.auth-image { background: $brand image-url("auth_bg.jpg"); background-repeat: no-repeat; background-size: cover; - h1:not(.logo) { - @include logo; + @include breakpoint(medium) { + min-height: $line-height*42; + } + + h1 { + margin-top: $line-height; a { color: white; @@ -621,16 +632,15 @@ h2.sidebar-title { } } -.auth { +.auth-form { + + @include breakpoint(medium) { + padding-top: $line-height*4; + } p, a, .checkbox { font-size: $small-font-size; } - - .panel { - background: white; - border: 0; - } } // 06. Forms diff --git a/app/views/layouts/devise.html.erb b/app/views/layouts/devise.html.erb index 9704795a7..e8dc2a99e 100644 --- a/app/views/layouts/devise.html.erb +++ b/app/views/layouts/devise.html.erb @@ -13,28 +13,28 @@ -
-
-
-

- <%= link_to root_path do %> - <%= image_tag('logo_header.png', class: 'show-for-medium float-left', size: '96x96', alt: t("layouts.header.logo")) %> - <%= t("layouts.header.open_gov", open: "#{t('layouts.header.open')}").html_safe %> - <% end %> -

+
+
+

+ <%= link_to root_path do %> + <%= image_tag('logo_header.png', class: 'float-left', alt: t("layouts.header.logo")) %> + <%= setting['org_name'] %> + <% end %> +

+
+ +
+
+
+
+ <%= render 'layouts/flash' %> + + <%= yield %> +
+
-
-
-
- - <%= render 'layouts/flash' %> - - <%= yield %> -
-
-
From 201a222cd318901b346e2b3845365a8291f58819 Mon Sep 17 00:00:00 2001 From: Alberto Garcia Cabeza Date: Mon, 9 Jan 2017 18:49:29 +0100 Subject: [PATCH 2/4] improves styles for omniauth buttons --- app/assets/stylesheets/layout.scss | 18 ++++++ app/views/devise/_omniauth_form.html.erb | 77 ++++++++++++++++++------ app/views/layouts/devise.html.erb | 2 +- config/locales/en.yml | 9 +++ config/locales/es.yml | 9 +++ 5 files changed, 95 insertions(+), 20 deletions(-) diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index 0af34b334..2d0be592b 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -618,6 +618,11 @@ h2.sidebar-title { h1 { margin-top: $line-height; + img { + height: rem-calc(80); + width: rem-calc(80); + } + a { color: white; display: block; @@ -643,6 +648,19 @@ h2.sidebar-title { } } +.auth-divider { + border-bottom: 1px solid $border; + height: $line-height/2; + margin: $line-height 0; + text-align: center; + + span { + background: white; + font-weight: bold; + padding: 0 $line-height/2; + } +} + // 06. Forms // --------- diff --git a/app/views/devise/_omniauth_form.html.erb b/app/views/devise/_omniauth_form.html.erb index 52ca029be..5a9cca608 100644 --- a/app/views/devise/_omniauth_form.html.erb +++ b/app/views/devise/_omniauth_form.html.erb @@ -1,33 +1,72 @@ <% if feature?(:twitter_login) || feature?(:facebook_login) || feature?(:google_login) %> <% if current_page?(new_user_session_path) %> +
+
+
+ <%= t("omniauth.info_sign_in") %> +
+
- <% if feature? :twitter_login %> - <%= link_to t("omniauth.twitter.sign_in"), user_omniauth_authorize_path(:twitter), class: "button-twitter button expanded" %> - <% end %> + <% if feature? :twitter_login %> +
+ <%= link_to t("omniauth.twitter.name"), user_omniauth_authorize_path(:twitter), + title: t("omniauth.twitter.sign_in"), + class: "button-twitter button expanded" %> +
+ <% end %> - <% if feature? :facebook_login %> - <%= link_to t("omniauth.facebook.sign_in"), user_omniauth_authorize_path(:facebook), class: "button-facebook button expanded" %> - <% end %> + <% if feature? :facebook_login %> +
+ <%= link_to t("omniauth.facebook.name"), user_omniauth_authorize_path(:facebook), + title: t("omniauth.facebook.sign_in"), + class: "button-facebook button expanded" %> +
+ <% end %> - <% if feature? :google_login %> - <%= link_to t("omniauth.google_oauth2.sign_in"), user_omniauth_authorize_path(:google_oauth2), class: "button-google button expanded" %> - <% end %> + <% if feature? :google_login %> +
+ <%= link_to t("omniauth.google_oauth2.name"), user_omniauth_authorize_path(:google_oauth2), + title: t("omniauth.google_oauth2.sign_in"), + class: "button-google button expanded" %> +
+ <% end %> + +
+ <%= t("omniauth.or_fill") %> +
+
-
<% elsif current_page?(new_user_registration_path) %> +
+
+

<%= t("omniauth.info_sign_up") %>

+
- <% if feature? :twitter_login %> - <%= link_to t("omniauth.twitter.sign_up"), user_omniauth_authorize_path(:twitter), class: "button-twitter button expanded" %> - <% end %> + <% if feature? :twitter_login %> +
+ <%= link_to t("omniauth.twitter.name"), user_omniauth_authorize_path(:twitter), + title: t("omniauth.twitter.sign_up"), + class: "button-twitter button expanded" %> +
+ <% end %> - <% if feature? :facebook_login %> - <%= link_to t("omniauth.facebook.sign_up"), user_omniauth_authorize_path(:facebook), class: "button-facebook button expanded" %> - <% end %> + <% if feature? :facebook_login %> +
+ <%= link_to t("omniauth.facebook.name"), user_omniauth_authorize_path(:facebook), + title: t("omniauth.facebook.sign_up"), + class: "button-facebook button expanded" %> +
+ <% end %> - <% if feature? :google_login %> - <%= link_to t("omniauth.google_oauth2.sign_up"), user_omniauth_authorize_path(:google_oauth2), class: "button-google button expanded" %> - <% end %> + <% if feature? :google_login %> +
+ <%= link_to t("omniauth.google_oauth2.name"), user_omniauth_authorize_path(:google_oauth2), + title: t("omniauth.google_oauth2.sign_up"), + class: "button-google button expanded" %> +
+ <% end %> +
<% end %> diff --git a/app/views/layouts/devise.html.erb b/app/views/layouts/devise.html.erb index e8dc2a99e..f7e1a820e 100644 --- a/app/views/layouts/devise.html.erb +++ b/app/views/layouts/devise.html.erb @@ -26,7 +26,7 @@
-
+
<%= render 'layouts/flash' %> <%= yield %> diff --git a/config/locales/en.yml b/config/locales/en.yml index 44aee4730..8f941c133 100755 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -245,14 +245,23 @@ en: facebook: sign_in: Sign in with Facebook sign_up: Sign up with Facebook + name: Facebook finish_signup: title: Add your email address google_oauth2: sign_in: Sign in with Google sign_up: Sign up with Google + name: Google twitter: sign_in: Sign in with Twitter sign_up: Sign up with Twitter + name: Twitter + info_sign_in: "Sign in with:" + info_sign_up: "Sign up with:" + or_fill: "Or fill the following form:" + finish_signup: + title: "Additional details" + username_warning: "Due to a change in the way we interact with social networks, it is possible that your username now appears as 'already in use'. If that is your case, please choose a different username." proposals: create: form: diff --git a/config/locales/es.yml b/config/locales/es.yml index ce508a4a6..e30c5744a 100755 --- a/config/locales/es.yml +++ b/config/locales/es.yml @@ -245,14 +245,23 @@ es: facebook: sign_in: Entra con Facebook sign_up: Regístrate con Facebook + name: Facebook finish_signup: title: Añade tu email google_oauth2: sign_in: Entra con Google sign_up: Regístrate con Google + name: Google twitter: sign_in: Entra con Twitter sign_up: Regístrate con Twitter + name: Twitter + info_sign_in: "Entra con:" + info_sign_up: "Regístrate con:" + or_fill: "O rellena el siguiente formulario:" + finish_signup: + title: "Detalles adicionales de tu cuenta" + username_warning: "Debido a que hemos cambiado la forma en la que nos conectamos con redes sociales y es posible que tu nombre de usuario aparezca como 'ya en uso', incluso si antes podías acceder con él. Si es tu caso, por favor elige un nombre de usuario distinto." proposals: create: form: From ea70e0a5dbb537d9474be777e89844500e1de755 Mon Sep 17 00:00:00 2001 From: Alberto Garcia Cabeza Date: Mon, 9 Jan 2017 18:49:45 +0100 Subject: [PATCH 3/4] removes duplicated i18n keys --- config/locales/en.yml | 13 ------------- config/locales/es.yml | 13 ------------- 2 files changed, 26 deletions(-) diff --git a/config/locales/en.yml b/config/locales/en.yml index 8f941c133..747c855a5 100755 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -625,19 +625,6 @@ en: user_permission_verify_info: "* Only for users on Census." user_permission_verify_my_account: Verify my account user_permission_votes: Participate on final voting - omniauth: - finish_signup: - title: "Additional details" - username_warning: "Due to a change in the way we interact with social networks, it is possible that your username now appears as 'already in use'. If that is your case, please choose a different username." - twitter: - sign_in: "Sign in with Twitter" - sign_up: "Sign up with Twitter" - facebook: - sign_in: "Sign in with Facebook" - sign_up: "Sign up with Facebook" - google_oauth2: - sign_in: "Sign in with Google" - sign_up: "Sign up with Google" legislation: help: title: "How I can comment this document?" diff --git a/config/locales/es.yml b/config/locales/es.yml index e30c5744a..5299293f4 100755 --- a/config/locales/es.yml +++ b/config/locales/es.yml @@ -625,19 +625,6 @@ es: user_permission_verify_info: "* Sólo usuarios empadronados." user_permission_verify_my_account: Verificar mi cuenta user_permission_votes: Participar en las votaciones finales* - omniauth: - finish_signup: - title: "Detalles adicionales de tu cuenta" - username_warning: "Debido a que hemos cambiado la forma en la que nos conectamos con redes sociales y es posible que tu nombre de usuario aparezca como 'ya en uso', incluso si antes podías acceder con él. Si es tu caso, por favor elige un nombre de usuario distinto." - twitter: - sign_in: "Entra con Twitter" - sign_up: "Regístrate con Twitter" - facebook: - sign_in: "Entra con Facebook" - sign_up: "Regístrate con Facebook" - google_oauth2: - sign_in: "Entra con Google" - sign_up: "Regístrate con Google" legislation: help: title: "¿Cómo puedo comentar este documento?" From 508de353208bd3dfe3e7a71b991e831a117c7057 Mon Sep 17 00:00:00 2001 From: Alberto Garcia Cabeza Date: Mon, 9 Jan 2017 19:10:15 +0100 Subject: [PATCH 4/4] polishes forms styles on devise views --- app/views/devise/_omniauth_form.html.erb | 24 +++++++++++-------- app/views/devise/confirmations/new.html.erb | 4 +++- app/views/devise/passwords/new.html.erb | 4 +++- app/views/devise/sessions/new.html.erb | 8 +++---- app/views/layouts/devise.html.erb | 2 +- .../organizations/registrations/new.html.erb | 5 ++-- app/views/users/registrations/new.html.erb | 5 ++-- 7 files changed, 31 insertions(+), 21 deletions(-) diff --git a/app/views/devise/_omniauth_form.html.erb b/app/views/devise/_omniauth_form.html.erb index 5a9cca608..328a1ef1e 100644 --- a/app/views/devise/_omniauth_form.html.erb +++ b/app/views/devise/_omniauth_form.html.erb @@ -3,13 +3,13 @@ <% if current_page?(new_user_session_path) %>
-
+
<%= t("omniauth.info_sign_in") %>
<% if feature? :twitter_login %> -
+
<%= link_to t("omniauth.twitter.name"), user_omniauth_authorize_path(:twitter), title: t("omniauth.twitter.sign_in"), class: "button-twitter button expanded" %> @@ -17,7 +17,7 @@ <% end %> <% if feature? :facebook_login %> -
+
<%= link_to t("omniauth.facebook.name"), user_omniauth_authorize_path(:facebook), title: t("omniauth.facebook.sign_in"), class: "button-facebook button expanded" %> @@ -25,7 +25,7 @@ <% end %> <% if feature? :google_login %> -
+
<%= link_to t("omniauth.google_oauth2.name"), user_omniauth_authorize_path(:google_oauth2), title: t("omniauth.google_oauth2.sign_in"), class: "button-google button expanded" %> @@ -40,11 +40,13 @@ <% elsif current_page?(new_user_registration_path) %>
-

<%= t("omniauth.info_sign_up") %>

+
+ <%= t("omniauth.info_sign_up") %> +
<% if feature? :twitter_login %> -
+
<%= link_to t("omniauth.twitter.name"), user_omniauth_authorize_path(:twitter), title: t("omniauth.twitter.sign_up"), class: "button-twitter button expanded" %> @@ -52,7 +54,7 @@ <% end %> <% if feature? :facebook_login %> -
+
<%= link_to t("omniauth.facebook.name"), user_omniauth_authorize_path(:facebook), title: t("omniauth.facebook.sign_up"), class: "button-facebook button expanded" %> @@ -60,15 +62,17 @@ <% end %> <% if feature? :google_login %> -
+
<%= link_to t("omniauth.google_oauth2.name"), user_omniauth_authorize_path(:google_oauth2), title: t("omniauth.google_oauth2.sign_up"), class: "button-google button expanded" %>
<% end %> -
-
+
+ <%= t("omniauth.or_fill") %> +
+
<% end %> <% end %> diff --git a/app/views/devise/confirmations/new.html.erb b/app/views/devise/confirmations/new.html.erb index 88016f5ce..fe2cf0dc5 100644 --- a/app/views/devise/confirmations/new.html.erb +++ b/app/views/devise/confirmations/new.html.erb @@ -15,7 +15,9 @@ <%= hidden_field_tag :confirmation_token,@confirmation_token %> - <%= f.submit(t("devise_views.confirmations.new.submit"), class: "button expanded") %> +
+ <%= f.submit(t("devise_views.confirmations.new.submit"), class: "button expanded") %> +
<% end %> diff --git a/app/views/devise/passwords/new.html.erb b/app/views/devise/passwords/new.html.erb index 59608c148..72dd70fb9 100644 --- a/app/views/devise/passwords/new.html.erb +++ b/app/views/devise/passwords/new.html.erb @@ -7,7 +7,9 @@
<%= f.email_field :email, autofocus: true, placeholder: t("devise_views.passwords.new.email_label") %> - <%= f.submit t("devise_views.passwords.new.send_submit"), class: "button expanded" %> +
+ <%= f.submit t("devise_views.passwords.new.send_submit"), class: "button expanded" %> +
<% end %> diff --git a/app/views/devise/sessions/new.html.erb b/app/views/devise/sessions/new.html.erb index 2abd9aebd..ad375e772 100644 --- a/app/views/devise/sessions/new.html.erb +++ b/app/views/devise/sessions/new.html.erb @@ -10,17 +10,17 @@ <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
-
+
<%= f.email_field :email, autofocus: true, placeholder: t("devise_views.sessions.new.email_label"), tabindex: "1" %>
-
+
<%= link_to t("devise_views.shared.links.new_password"), new_password_path(resource_name), class: "float-right", tabindex: "3" %> <%= f.password_field :password, autocomplete: "off", placeholder: t("devise_views.sessions.new.password_label"), tabindex: "2" %>
<% if devise_mapping.rememberable? -%> -
+
<%= f.label :remember_me do %> <%= f.check_box :remember_me, title: t('devise_views.sessions.new.remember_me'), label: false, tabindex: "4" %> <%= t("devise_views.sessions.new.remember_me") %> @@ -28,7 +28,7 @@
<% end -%> -
+
<%= f.submit(t("devise_views.sessions.new.submit"), class: "button expanded") %>
diff --git a/app/views/layouts/devise.html.erb b/app/views/layouts/devise.html.erb index f7e1a820e..a0e9eaaff 100644 --- a/app/views/layouts/devise.html.erb +++ b/app/views/layouts/devise.html.erb @@ -25,7 +25,7 @@
-
+
<%= render 'layouts/flash' %> diff --git a/app/views/organizations/registrations/new.html.erb b/app/views/organizations/registrations/new.html.erb index 3b1763e83..e85bb5408 100644 --- a/app/views/organizations/registrations/new.html.erb +++ b/app/views/organizations/registrations/new.html.erb @@ -33,8 +33,9 @@ terms: link_to(t("devise_views.users.registrations.new.terms_link"), "/conditions", title: t('shared.target_blank_html'), target: "_blank")).html_safe %> <% end %> - - <%= f.submit t("devise_views.organizations.registrations.new.submit"), class: "button expanded" %> +
+ <%= f.submit t("devise_views.organizations.registrations.new.submit"), class: "button expanded" %> +
<% end %> diff --git a/app/views/users/registrations/new.html.erb b/app/views/users/registrations/new.html.erb index f2f1827ba..1c6f81455 100644 --- a/app/views/users/registrations/new.html.erb +++ b/app/views/users/registrations/new.html.erb @@ -46,8 +46,9 @@ target: "_blank")).html_safe %> <% end %> - - <%= f.submit t("devise_views.users.registrations.new.submit"), class: "button expanded" %> +
+ <%= f.submit t("devise_views.users.registrations.new.submit"), class: "button expanded" %> +
<% end %>