Improves styles for auth pages

This commit is contained in:
Alberto Garcia Cabeza
2015-08-12 14:07:34 +02:00
parent e880cb4f1a
commit 00af11396d
7 changed files with 111 additions and 117 deletions

View File

@@ -350,8 +350,24 @@ footer {
.auth {
min-height: $line-height*20;
h2 {
clear: both;
font-size: rem-calc(30);
font-weight: bold;
line-height: $line-height*2;
}
.back, .icon-angle-left {
@include back;
}
.simple_captcha {
margin-bottom: $line-height/2;
}
.panel {
background: white;
border: 0;
h1 {
font-size: rem-calc(30);
@@ -436,17 +452,12 @@ form {
.account {
background: white;
min-height: $line-height*23;
padding-top: $line-height;
input[type="checkbox"], .checkbox {
margin-top: -(rem-calc(12));
}
.back, .icon-angle-left {
@include back;
}
h1 {
clear: both;
font-size: rem-calc(36);
@@ -467,6 +478,15 @@ form {
}
h2 {
clear: both;
font-size: rem-calc(30);
font-weight: bold;
line-height: $line-height;
margin: 0;
margin-bottom: $line-height/2;
}
h3 {
clear: both;
font-size: rem-calc(20);
font-weight: bold;

View File

@@ -2,7 +2,7 @@
<div class="small-12 column">
<%= link_to t("account.show.change_credentials_link"), edit_user_registration_path, class: 'button radius small secondary right' %>
<h1 class="inline-block"><%= t("account.show.title") %></h1>
<h2 class="inline-block"><%= t("account.show.title") %></h2>
<%= form_for @account, as: :account, url: account_path do |f| %>
@@ -19,7 +19,7 @@
<div class="row">
<div class="small-12 medium-6 column">
<h2><%= t("account.show.personal")%></h2>
<h3><%= t("account.show.personal")%></h3>
<%= f.label :first_name, t("account.show.first_name_label") %>
<%= f.text_field :first_name, placeholder: t("account.show.first_name_label") %>
@@ -35,10 +35,10 @@
</div>
<div class="small-12 medium-6 column">
<h2><%= t("account.show.avatar")%></h2>
<h3><%= t("account.show.avatar")%></h3>
<%= image_tag('user_default_big.jpg', class: "avatar", size: "100x100") %>
<h2><%= t("account.show.notifications")%></h2>
<h3><%= t("account.show.notifications")%></h3>
<%= f.label :email_on_debate_comment do %>
<%= f.check_box :email_on_debate_comment %>
<span class="checkbox"><%= t("account.show.email_on_debate_comment_label") %></span>

View File

@@ -1,45 +1,46 @@
<div class="row">
<div class="account small-12 medium-5 column small-centered">
<div class="auth row">
<div class="small-12 medium-8 large-5 column small-centered">
<div class="panel">
<i class="icon-angle-left left"></i>&nbsp;<%= link_to t("devise_views.registrations.edit.back_link"), :back, class: "left back" %>
<i class="icon-angle-left left"></i>&nbsp;<%= link_to t("devise_views.registrations.edit.back_link"), :back, class: "left back" %>
<h2><%= t("devise_views.registrations.edit.edit") %> <%= resource_name.to_s.humanize %></h2>
<h1><%= t("devise_views.registrations.edit.edit") %> <%= resource_name.to_s.humanize %></h1>
<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %>
<%= devise_error_messages! %>
<div class="row">
<div class="small-12 column">
<%= f.label :email, t("devise_views.registrations.edit.email_label") %>
<%= f.email_field :email, autofocus: true, placeholder: t("devise_views.registrations.edit.email_label") %>
</div>
<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %>
<%= devise_error_messages! %>
<div class="row">
<div class="small-12 column">
<%= f.label :email, t("devise_views.registrations.edit.email_label") %>
<%= f.email_field :email, autofocus: true, placeholder: t("devise_views.registrations.edit.email_label") %>
<div class="small-12 column">
<% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
<div><%= t("devise_views.registrations.edit.waiting_for") %> <%= resource.unconfirmed_email %></div>
<% end %>
</div>
<div class="small-12 column">
<%= f.label :password, t("devise_views.registrations.edit.password_label") %>
<span class="note"><%= t("devise_views.registrations.edit.leave_blank") %></span>
<%= f.password_field :password, autocomplete: "off", placeholder: t("devise_views.registrations.edit.password_label") %>
</div>
<div class="small-12 column">
<%= f.label :password_confirmation, t("devise_views.registrations.edit.password_confirmation_label") %>
<%= f.password_field :password_confirmation, autocomplete: "off", placeholder: t("devise_views.registrations.edit.password_confirmation_label") %>
</div>
<div class="small-12 column">
<%= f.label :current_password, t("devise_views.registrations.edit.current_password_label") %>
<span class="note"><%= t("devise_views.registrations.edit.need_current") %></span>
<%= f.password_field :current_password, autocomplete: "off", placeholder: t("devise_views.registrations.edit.current_password_label") %>
</div>
<div class="small-12 column">
<%= f.submit t("devise_views.registrations.edit.update_submit"), class: "button radius" %>
</div>
</div>
<div class="small-12 column">
<% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
<div><%= t("devise_views.registrations.edit.waiting_for") %> <%= resource.unconfirmed_email %></div>
<% end %>
</div>
<div class="small-12 column">
<%= f.label :password, t("devise_views.registrations.edit.password_label") %>
<span class="note"><%= t("devise_views.registrations.edit.leave_blank") %></span>
<%= f.password_field :password, autocomplete: "off", placeholder: t("devise_views.registrations.edit.password_label") %>
</div>
<div class="small-12 column">
<%= f.label :password_confirmation, t("devise_views.registrations.edit.password_confirmation_label") %>
<%= f.password_field :password_confirmation, autocomplete: "off", placeholder: t("devise_views.registrations.edit.password_confirmation_label") %>
</div>
<div class="small-12 column">
<%= f.label :current_password, t("devise_views.registrations.edit.current_password_label") %>
<span class="note"><%= t("devise_views.registrations.edit.need_current") %></span>
<%= f.password_field :current_password, autocomplete: "off", placeholder: t("devise_views.registrations.edit.current_password_label") %>
</div>
<div class="small-12 column">
<%= f.submit t("devise_views.registrations.edit.update_submit"), class: "button radius" %>
</div>
</div>
<% end %>
<% end %>
</div>
</div>
</div>

View File

@@ -1,75 +1,46 @@
<div class="row-full auth">
<div class="row">
<div class="small-12 medium-8 large-5 column small-centered">
<div class="panel">
<h1 class="text-center"><%= t("devise_views.registrations.new.title") %></h1>
<div class="auth row">
<div class="small-12 medium-8 large-5 column small-centered">
<div class="panel">
<h2><%= t("devise_views.registrations.new.title") %></h2>
<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<%= devise_error_messages! %>
<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<%= devise_error_messages! %>
<div class="row">
<div class="small-12 columns">
<%= f.label :first_name, t("devise_views.registrations.new.first_name_label") %>
<%= f.text_field :first_name, autofocus: true, placeholder: t("devise_views.registrations.new.first_name_label") %>
</div>
</div>
<div class="row">
<div class="small-12 column">
<%= f.label :first_name, t("devise_views.registrations.new.first_name_label") %>
<%= f.text_field :first_name, autofocus: true, placeholder: t("devise_views.registrations.new.first_name_label") %>
<div class="row">
<div class="small-12 columns">
<%= f.label :last_name, t("devise_views.registrations.new.last_name_label") %>
<%= f.text_field :last_name, placeholder: t("devise_views.registrations.new.last_name_label") %>
</div>
</div>
<%= f.label :last_name, t("devise_views.registrations.new.last_name_label") %>
<%= f.text_field :last_name, placeholder: t("devise_views.registrations.new.last_name_label") %>
<div class="row">
<div class="small-12 columns">
<%= f.check_box :use_nickname %>
<%= t("devise_views.registrations.new.use_nickname_label") %>
</div>
</div>
<%= f.label :email, t("devise_views.registrations.new.email_label") %>
<%= f.email_field :email, placeholder: t("devise_views.registrations.new.email_label") %>
<div class="row">
<div class="small-12 columns">
<%= f.label :nickname, t("devise_views.registrations.new.nickname_label") %>
<%= f.text_field :nickname, placeholder: t("devise_views.registrations.new.nickname_label") %>
</div>
</div>
<%= f.label :nickname, t("devise_views.registrations.new.nickname_label") %>
<%= f.text_field :nickname, placeholder: t("devise_views.registrations.new.nickname_label") %>
<div class="row">
<div class="small-12 columns">
<%= f.label :email, t("devise_views.registrations.new.email_label") %>
<%= f.email_field :email, placeholder: t("devise_views.registrations.new.email_label") %>
</div>
</div>
<%= f.label :use_nickname do %>
<%= f.check_box :use_nickname %>
<span class="checkbox"><%= t("devise_views.registrations.new.use_nickname_label") %></span>
<% end %>
<div class="row">
<div class="small-12 columns">
<%= f.label :password, t("devise_views.registrations.new.password_label"), class: "inline-block" %>
<% if @minimum_password_length %>
<span class="inline-block"><i><%= t("devise_views.registrations.new.min_length", min: @minimum_password_length) %></i></span>
<% end %>
<%= f.password_field :password, autocomplete: "off", placeholder: t("devise_views.registrations.new.password_label") %>
</div>
</div>
<%= f.label :password, t("devise_views.registrations.new.password_label"), class: "inline-block" %>
<% if @minimum_password_length %>
<span class="inline-block"><%= t("devise_views.registrations.new.min_length", min: @minimum_password_length) %></span>
<% end %>
<%= f.password_field :password, autocomplete: "off", placeholder: t("devise_views.registrations.new.password_label") %>
<div class="row">
<div class="small-12 columns">
<%= f.label :password_confirmation, t("devise_views.registrations.new.password_confirmation_label") %>
<%= f.password_field :password_confirmation, autocomplete: "off", placeholder: t("devise_views.registrations.new.password_confirmation_label") %>
</div>
</div>
<%= f.label :password_confirmation, t("devise_views.registrations.new.password_confirmation_label") %>
<%= f.password_field :password_confirmation, autocomplete: "off", placeholder: t("devise_views.registrations.new.password_confirmation_label") %>
<%= f.simple_captcha %>
<%= f.simple_captcha %>
<div class="row">
<div class="small-12 columns">
<%= f.submit t("devise_views.registrations.new.submit"), class: "button radius expand" %>
</div>
</div>
<% end %>
<%= render "devise/shared/links" %>
</div>
<%= f.submit t("devise_views.registrations.new.submit"), class: "button radius expand" %>
</div>
</div>
<% end %>
<%= render "devise/shared/links" %>
</div>
</div>
</div>
</div>

View File

@@ -1,7 +1,7 @@
<div class="auth row">
<div class="small-12 medium-8 large-5 column small-centered">
<div class="panel">
<h1 class="text-center"><%= t("devise_views.sessions.new.title") %></h1>
<h2><%= t("devise_views.sessions.new.title") %></h2>
<%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
<div class="row">
@@ -17,8 +17,10 @@
<% if devise_mapping.rememberable? -%>
<div class="small-12 columns">
<%= f.check_box :remember_me %>
<%= f.label :remember_me, t("devise_views.sessions.new.remember_me") %>
<%= f.label :remember_me do %>
<%= f.check_box :remember_me %>
<span class="checkbox"><%= t("devise_views.sessions.new.remember_me") %>
<% end %>
</div>
<% end -%>

View File

@@ -29,7 +29,7 @@ en:
edit:
title: "Change your password"
password_label: "New password"
min_length: "(%{min} characters minimum)"
min_length: "%{min} characters minimum"
password_confirmation_label: "Confirm new password"
change_submit: "Change my password"
new:

View File

@@ -29,7 +29,7 @@ es:
edit:
title: "Cambia tu contraseña"
password_label: "Contraseña nueva"
min_length: "(mínimo %{min} caracteres)"
min_length: "Mínimo %{min} caracteres"
password_confirmation_label: "Confirmar contraseña nueva"
change_submit: "Cambiar mi contraseña"
new: