Adds styles for authentication pages

This commit is contained in:
Alberto Garcia Cabeza
2015-08-06 20:53:14 +02:00
parent 515d083633
commit f9cb8151ff
7 changed files with 113 additions and 77 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 115 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

View File

@@ -611,14 +611,45 @@ header {
// 08.1. Login // 08.1. Login
// - - - - - - - - - - - - // - - - - - - - - - - - -
.auth-page {
background: url('auth_bg.jpg');
margin-top: $line-height;
@media (min-width: 480px) {
margin-top: $line-height*2;
}
h1 {
a {
color: white;
font-family: 'Lato';
font-size: rem-calc(20);
font-weight: lighter;
line-height: $line-height*4;
padding-left: rem-calc(6);
span {
font-size: rem-calc(16);
font-weight: lighter;
vertical-align: top;
}
@media (min-width: 480px) {
font-size: rem-calc(30);
span {
font-size: rem-calc(20);
}
}
}
}
}
.auth { .auth {
background: $background;
box-shadow: 0px -4px 5px $background;
min-height: $line-height*20; min-height: $line-height*20;
.panel { .panel {
background: white; background: white;
margin-top: $line-height*2;
h1 { h1 {
font-size: rem-calc(30); font-size: rem-calc(30);

View File

@@ -1,16 +1,24 @@
<h2><%= t("devise_views.confirmations.title") %></h2> <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.confirmations.title") %></h1>
<%= form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post }) do |f| %> <%= form_for(resource, as: resource_name, url: confirmation_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.confirmations.email_label") %><br /> <div class="small-12 columns">
<%= f.email_field :email, autofocus: true, value: (resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email) %> <%= f.label :email, t("devise_views.confirmations.email_label") %>
<%= f.email_field :email, autofocus: true, placeholder: t("devise_views.confirmations.email_label"), value: (resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email) %>
</div>
<div class="small-12 columns">
<%= f.submit(t("devise_views.confirmations.submit"), class: "button radius expand") %>
</div>
</div>
<% end %>
<%= render "devise/shared/links" %>
</div>
</div> </div>
</div>
<div class="actions">
<%= f.submit(t("devise_views.confirmations.submit"), class: "button radius") %>
</div>
<% end %>
<%= render "devise/shared/links" %>

View File

@@ -1,28 +1,22 @@
<div class="row-full auth"> <div class="row auth">
<div class="row"> <div class="small-12 medium-8 large-5 column small-centered">
<div class="small-12 medium-8 large-8 column small-centered"> <div class="panel">
<div class="panel"> <h1 class="text-center"><%= t("devise_views.passwords.new.title") %></h1>
<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| %>
<%= devise_error_messages! %>
<div class="row">
<div class="small-12 column">
<%= f.label :email, t("devise_views.passwords.new.email_label") %>
<%= f.email_field :email, autofocus: true, placeholder: t("devise_views.passwords.new.email_label") %>
</div>
<%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %> <div class="small-12 column text-center">
<%= devise_error_messages! %> <%= f.submit t("devise_views.passwords.new.send_submit"), class: "button radius expand" %>
</div>
</div>
<% end %>
<div class="row"> <%= render "devise/shared/links" %>
<div class="small-12 column"> </div>
<%= 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="row">
<div class="small-12 column text-center">
<%= f.submit t("devise_views.passwords.new.send_submit"), class: "button radius" %>
</div>
</div>
<% end %>
<%= render "devise/shared/links" %>
</div>
</div>
</div>
</div> </div>

View File

@@ -1,42 +1,34 @@
<div class="row-full auth"> <div class="auth row">
<div class="row"> <div class="small-12 medium-8 large-5 column small-centered">
<div class="small-12 medium-8 large-5 column small-centered"> <div class="panel">
<div class="panel"> <h1 class="text-center"><%= t("devise_views.sessions.new.title") %></h1>
<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="row"> <div class="row">
<div class="small-12 columns"> <div class="small-12 columns">
<%= f.label :email, t("devise_views.sessions.new.email_label") %> <%= f.label :email, t("devise_views.sessions.new.email_label") %>
<%= f.email_field :email, autofocus: true, placeholder: t("devise_views.sessions.new.email_label") %> <%= f.email_field :email, autofocus: true, placeholder: t("devise_views.sessions.new.email_label") %>
</div> </div>
</div>
<div class="row"> <div class="small-12 columns">
<div class="small-12 columns"> <%= f.label :password, t("devise_views.sessions.new.password_label") %>
<%= f.label :password, t("devise_views.sessions.new.password_label") %> <%= f.password_field :password, autocomplete: "off", placeholder: t("devise_views.sessions.new.password_label") %>
<%= f.password_field :password, autocomplete: "off", placeholder: t("devise_views.sessions.new.password_label") %> </div>
</div>
</div>
<% if devise_mapping.rememberable? -%> <% if devise_mapping.rememberable? -%>
<div class="row"> <div class="small-12 columns">
<div class="small-12 columns"> <%= f.check_box :remember_me %>
<%= f.check_box :remember_me %> <%= f.label :remember_me, t("devise_views.sessions.new.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>
<% end -%>
<div class="small-12 columns">
<%= f.submit(t("devise_views.sessions.new.submit"), class: "button radius expand") %>
</div>
</div> </div>
<% end %>
<%= render "devise/shared/links" %>
</div> </div>
</div>
</div> </div>

View File

@@ -12,7 +12,7 @@
<script src="https://www.google.com/recaptcha/api.js?hl=<%= I18n.locale %>"></script> <script src="https://www.google.com/recaptcha/api.js?hl=<%= I18n.locale %>"></script>
</head> </head>
<body> <body class="auth-page">
<% if notice %> <% if notice %>
<p class="alert-box success"><%= notice %></p> <p class="alert-box success"><%= notice %></p>
@@ -22,6 +22,17 @@
<p class="alert-box"><%= alert %></p> <p class="alert-box"><%= alert %></p>
<% end %> <% end %>
<div class="row">
<div class="small-12 medium-8 large-5 column small-centered">
<h1>
<%= link_to root_path do %>
<%= image_tag('logo_madrid_white.png', class: 'left', size: '96x96') %>
<%= t("layouts.header.open_gov", open: "<strong>#{t('layouts.header.open')}</strong>").html_safe %> | <span><%= t("layouts.header.participation") %></span>
<% end %>
</h1>
</div>
</div>
<%= yield %> <%= yield %>
</body> </body>