Adds styles for authentication pages

This commit is contained in:
Alberto Garcia Cabeza
2015-07-30 19:51:33 +02:00
parent 58b43a9dc4
commit 851aefbaa6
6 changed files with 219 additions and 102 deletions

View File

@@ -9,6 +9,9 @@
// 05.2. Debates Show // 05.2. Debates Show
// 06. Comments // 06. Comments
// 07. Tags // 07. Tags
// 08. Login and Sign Up
// 08.1. Login
// 08.2. Sign Up
// //
// 01. Variables // 01. Variables
@@ -17,7 +20,7 @@
$font-family-sans-serif: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; $font-family-sans-serif: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
$line-height: rem-calc(24); $line-height: rem-calc(24);
$background: #F9F9F9; $background: #E9E9E9;
$border: #DEE0E3; $border: #DEE0E3;
$brand: #0077B9; $brand: #0077B9;
@@ -81,6 +84,16 @@ body {
display: inline-block; display: inline-block;
} }
::selection {
background: $brand;
color: white;
}
::-moz-selection {
background: $brand;
color: white;
}
// 03. Header // 03. Header
// - - - - - - - - - - - - - - - - - - - - - - - - - // - - - - - - - - - - - - - - - - - - - - - - - - -
@@ -493,10 +506,66 @@ header {
background: #e5f1f8; background: #e5f1f8;
border: 1px solid $brand; border: 1px solid $brand;
} }
}
// 08. Login and Sign Up
// - - - - - - - - - - - - - - - - - - - - - - - - -
// 08.1. Login
// - - - - - - - - - - - -
.auth {
background: $background;
box-shadow: 0px -4px 5px $background;
min-height: $line-height*20;
.panel {
background: white;
margin-top: $line-height*2;
h1 {
font-size: rem-calc(30);
font-weight: bolder;
}
}
} }

View File

@@ -1,19 +1,18 @@
<%= form_for(@debate) do |f| %> <%= form_for(@debate) do |f| %>
<% if @debate.errors.any? %> <% if @debate.errors.any? %>
<div id="error_explanation"> <div id="error_explanation" class="alert-box alert radius">
<h2><%= pluralize(@debate.errors.count, t("debates.form.one_error"), t("debates.form.multiple_errors")) %> <%= t("debates.form.not_saved") %>:</h2> <p><%= pluralize(@debate.errors.count, t("debates.form.one_error"), t("debates.form.multiple_errors")) %> <%= t("debates.form.not_saved") %>:</p>
<ul>
<% @debate.errors.full_messages.each do |message| %>
<li><%= message %></li>
<% end %>
</ul>
</div>
<% end %>
<ul> <p><strong><%= t("debates.form.debate_title") %></strong></p>
<% @debate.errors.full_messages.each do |message| %> <p><%= t("debates.form.title_instructions") %></p>
<li><%= message %></li> <%= f.text_field :title %>
<% end %>
</ul>
</div>
<% end %>
<p><strong><%= t("debates.form.debate_title") %></strong></p>
<p><%= t("debates.form.title_instructions") %></p>
<%= f.text_field :title %>
<br/> <br/>
<p><strong><%= t("debates.form.debate_text") %></strong></p> <p><strong><%= t("debates.form.debate_text") %></strong></p>

View File

@@ -1,16 +1,28 @@
<h2><%= t("devise_views.passwords.new.title") %></h2> <div class="row-full auth">
<div class="row">
<div class="small-12 medium-8 large-8 column small-centered">
<div class="panel">
<h1 class="text-center"><%= t("devise_views.passwords.new.title") %></h1>
<%= 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| %>
<%= devise_error_messages! %> <%= devise_error_messages! %>
<div class="field"> <div class="row">
<%= f.label :email, t("devise_views.passwords.new.email_label") %><br /> <div class="small-12 column">
<%= f.email_field :email, autofocus: true %> <%= f.label :email, t("devise_views.passwords.new.email_label") %>
</div> <%= f.email_field :email, autofocus: true, placeholder: t("devise_views.passwords.new.email_label") %>
</div>
</div>
<div class="actions"> <div class="row">
<%= f.submit t("devise_views.passwords.new.send_submit") %> <div class="small-12 column text-center">
</div> <%= f.submit t("devise_views.passwords.new.send_submit"), class: "button radius" %>
<% end %> </div>
</div>
<% end %>
<%= render "devise/shared/links" %> <%= render "devise/shared/links" %>
</div>
</div>
</div>
</div>

View File

@@ -1,42 +1,61 @@
<h2><%= t("devise_views.registrations.new.title") %></h2> <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>
<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %> <%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<%= devise_error_messages! %> <%= 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="field"> <div class="row">
<%= f.label :first_name, t("devise_views.registrations.new.first_name_label") %><br /> <div class="small-12 columns">
<%= f.text_field :first_name, autofocus: true %> <%= f.label :last_name, t("devise_views.registrations.new.last_name_label") %>
</div> <%= f.text_field :last_name, placeholder: t("devise_views.registrations.new.last_name_label") %>
</div>
</div>
<div class="field"> <div class="row">
<%= f.label :last_name, t("devise_views.registrations.new.last_name_label") %><br /> <div class="small-12 columns">
<%= f.text_field :last_name %> <%= f.label :email, t("devise_views.registrations.new.email_label") %>
</div> <%= f.email_field :email, placeholder: t("devise_views.registrations.new.email_label") %>
</div>
</div>
<div class="field"> <div class="row">
<%= f.label :email, t("devise_views.registrations.new.email_label") %><br /> <div class="small-12 columns">
<%= f.email_field :email %> <%= f.label :password, t("devise_views.registrations.new.password_label"), class: "inline-block" %>
</div> <% 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>
<div class="field"> <div class="row">
<%= f.label :password, t("devise_views.registrations.new.password_label") %> <div class="small-12 columns">
<% if @minimum_password_length %> <%= f.label :password_confirmation, t("devise_views.registrations.new.password_confirmation_label") %>
<em><%= t("devise_views.registrations.new.min_length", min: @minimum_password_length) %></em> <%= f.password_field :password_confirmation, autocomplete: "off", placeholder: t("devise_views.registrations.new.password_confirmation_label") %>
<% end %><br /> </div>
<%= f.password_field :password, autocomplete: "off" %> </div>
</div>
<div class="field"> <%= render 'shared/captcha', resource: resource %>
<%= f.label :password_confirmation, t("devise_views.registrations.new.password_confirmation_label") %><br />
<%= f.password_field :password_confirmation, autocomplete: "off" %>
</div>
<%= render 'shared/captcha', resource: resource %> <div class="row">
<div class="small-12 columns">
<%= f.submit t("devise_views.registrations.new.submit"), class: "button radius expand" %>
</div>
</div>
<% end %>
<div class="actions" style="padding-top:20px"> <%= render "devise/shared/links" %>
<%= f.submit t("devise_views.registrations.new.submit"), class: 'button radius' %> </div>
</div> </div>
<% end %> </div>
</div>
<%= render "devise/shared/links" %>

View File

@@ -1,26 +1,42 @@
<h2><%= t("devise_views.sessions.new.title") %></h2> <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.sessions.new.title") %></h1>
<%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %> <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
<div class="field"> <div class="row">
<%= f.label :email, t("devise_views.sessions.new.email_label") %><br /> <div class="small-12 columns">
<%= f.email_field :email, autofocus: true %> <%= f.label :email, t("devise_views.sessions.new.email_label") %>
</div> <%= f.email_field :email, autofocus: true, placeholder: t("devise_views.sessions.new.email_label") %>
</div>
</div>
<div class="field"> <div class="row">
<%= f.label :password, t("devise_views.sessions.new.password_label") %><br /> <div class="small-12 columns">
<%= f.password_field :password, autocomplete: "off" %> <%= f.label :password, t("devise_views.sessions.new.password_label") %>
</div> <%= f.password_field :password, autocomplete: "off", placeholder: t("devise_views.sessions.new.password_label") %>
</div>
</div>
<% if devise_mapping.rememberable? -%> <% if devise_mapping.rememberable? -%>
<div class="field"> <div class="row">
<%= f.check_box :remember_me %> <div class="small-12 columns">
<%= f.label :remember_me, t("devise_views.sessions.new.remember_me") %> <%= f.check_box :remember_me %>
<%= f.label :remember_me, t("devise_views.sessions.new.remember_me") %>
</div>
</div>
<% end -%>
<div class="row">
<div class="small-12 columns">
<%= f.submit(t("devise_views.sessions.new.submit"), class: "button radius expand") %>
</div>
</div>
<% end %>
<%= render "devise/shared/links" %>
</div>
</div>
</div> </div>
<% end -%> </div>
<div class="actions">
<%= f.submit(t("devise_views.sessions.new.submit"), class: "button radius") %>
</div>
<% end %>
<%= render "devise/shared/links" %>

View File

@@ -1,25 +1,27 @@
<%- if controller_name != 'sessions' %> <div class="text-center">
<%= link_to t("devise_views.shared.links.login"), new_session_path(resource_name) %><br /> <%- if controller_name != 'sessions' %>
<% end -%> <%= link_to t("devise_views.shared.links.login"), new_session_path(resource_name) %><br>
<% end -%>
<%- if devise_mapping.registerable? && controller_name != 'registrations' %> <%- if devise_mapping.registerable? && controller_name != 'registrations' %>
<%= link_to t("devise_views.shared.links.signup"), new_registration_path(resource_name) %><br /> <%= link_to t("devise_views.shared.links.signup"), new_registration_path(resource_name) %><br>
<% end -%> <% end -%>
<%- if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations' %> <%- if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations' %>
<%= link_to t("devise_views.shared.links.new_password"), new_password_path(resource_name) %><br /> <%= link_to t("devise_views.shared.links.new_password"), new_password_path(resource_name) %><br>
<% end -%> <% end -%>
<%- if devise_mapping.confirmable? && controller_name != 'confirmations' %> <%- if devise_mapping.confirmable? && controller_name != 'confirmations' %>
<%= link_to t("devise_views.shared.links.new_confirmation"), new_confirmation_path(resource_name) %><br /> <%= link_to t("devise_views.shared.links.new_confirmation"), new_confirmation_path(resource_name) %><br>
<% end -%> <% end -%>
<%- if devise_mapping.lockable? && resource_class.unlock_strategy_enabled?(:email) && controller_name != 'unlocks' %> <%- if devise_mapping.lockable? && resource_class.unlock_strategy_enabled?(:email) && controller_name != 'unlocks' %>
<%= link_to t("devise_views.shared.links.new_unlock"), new_unlock_path(resource_name) %><br /> <%= link_to t("devise_views.shared.links.new_unlock"), new_unlock_path(resource_name) %><br>
<% end -%> <% end -%>
<%- if devise_mapping.omniauthable? %> <%- if devise_mapping.omniauthable? %>
<%- resource_class.omniauth_providers.each do |provider| %> <%- resource_class.omniauth_providers.each do |provider| %>
<%= link_to t("devise_views.shared.links.signin_with_provider", provider: provider.to_s.titleize), omniauth_authorize_path(resource_name, provider) %><br /> <%= link_to t("devise_views.shared.links.signin_with_provider", provider: provider.to_s.titleize), omniauth_authorize_path(resource_name, provider) %><br>
<% end -%> <% end -%>
<% end -%> <% end -%>
</div>