Adds styles for account page and edit user

This commit is contained in:
Alberto Garcia Cabeza
2015-08-08 13:21:46 +02:00
parent a65396886a
commit fdfef95595
6 changed files with 119 additions and 78 deletions

View File

@@ -97,7 +97,49 @@ header {
.button {
color: white;
font-family: inherit;
margin-top: $line-height*2;
margin-top: $line-height;
}
.home-page {
.button {
color: white;
font-family: inherit;
margin-top: $line-height*2;
}
}
.selected {
position: relative;
&:before {
top: -14px;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
border-top-color: #fff;
border-width: 8px;
margin-left: -8px;
}
}
.language {
float: none;
text-align: center;
@media (min-width: 480px) {
float: left;
}
}
.external-links {
@extend .language;
@media (min-width: 480px) {
float: right;
}
}
}
@@ -106,13 +148,13 @@ header {
}
.top-bar {
background: white;
color: $header-color;
background: rgba(0,0,0,.5);
color: white; //$header-color;
height: $line-height*4;
max-width: 1170px !important;
.name a {
color: black;
color: white;
font-family: 'Lato';
font-size: rem-calc(36);
font-weight: lighter;
@@ -120,7 +162,7 @@ header {
padding-left: 0;
span {
color: $brand;
// color: $brand;
font-size: rem-calc(24);
font-weight: normal;
}
@@ -132,14 +174,29 @@ header {
}
.top-bar-section {
margin-right: $line-height;
ul li > a {
font-size: rem-calc(14);
}
ul li, ul li:hover:not(.has-form) > a {
background: none;
}
li:not(.has-form) a:not(.button) {
background: white;
color: $brand;
background: none;
color: white;
line-height: $line-height*4;
&:hover {
background: none;
color: $link-hover;
}
}
li.active:not(.has-form) a:not(.button) {
background: none;
height: $line-height*4;
line-height: $line-height*4;
}
@@ -148,9 +205,13 @@ header {
.top-links {
color: white;
font-size: rem-calc(14);
height: $line-height*2;
height: $line-height*3;
padding: $line-height/2 0;
@media (min-width: 480px) {
height: $line-height*2;
}
a {
color: white;
}
@@ -180,7 +241,7 @@ header {
.icon-like {
background: white;
border: 2px solid white;
border: 2px solid $votes-border;
border-radius: rem-calc(3);
color: $votes-neutral;
display: inline-block;
@@ -191,6 +252,7 @@ header {
&:hover {
background: $votes-like;
border-color: white;
color: white;
cursor: pointer;
}
@@ -202,7 +264,7 @@ header {
.icon-unlike {
background: white;
border: 2px solid white;
border: 2px solid $votes-border;
border-radius: rem-calc(3);
color: $votes-neutral;
display: inline-block;
@@ -213,6 +275,7 @@ header {
&:hover {
background: $votes-unlike;
border-color: white;
color: white;
cursor: pointer;
}
@@ -235,40 +298,10 @@ header {
padding-left: rem-calc(8);
vertical-align: top;
}
&.voted {
.icon-like {
background: $votes-like;
color: white;
}
}
&.no-voted {
.icon-like {
opacity: .5;
}
}
}
.unlike {
@extend .like;
&.voted {
.icon-unlike {
background: $votes-unlike;
color: white;
}
}
&.no-voted {
.icon-unlike {
opacity: .5;
}
}
}
.total-votes {
@@ -347,6 +380,7 @@ header {
}
.debate-description {
color: $text-color;
font-size: rem-calc(13);
height: $line-height*6.5;
line-height: $line-height;
@@ -354,10 +388,6 @@ header {
margin-top: $line-height;
overflow: hidden;
position: relative;
a {
color: $text-color;
}
}
.truncate {
@@ -588,6 +618,9 @@ header {
}
}
// 06. Comments
// - - - - - - - - - - - - - - - - - - - - - - - - -
@@ -815,11 +848,13 @@ form {
}
}
// 11. User account
// - - - - - - - - - - - - - - - - - - - - - - - - -
.account {
background: white;
min-height: $line-height*23;
padding-top: $line-height;
@@ -827,7 +862,7 @@ form {
margin-top: -(rem-calc(12));
}
.back {
.back, .icon-angle-left {
@include back;
}

View File

@@ -27,6 +27,7 @@ $comments-text: #3F4549;
$header-color: #292B33;
$link: #0077B9;
$link-hover: #2178BF;
$tags-bg: #FAFAFA;
$tags-border: #F0F0F0;

View File

@@ -39,8 +39,9 @@
</div>
</div>
<% end %>
</div>
<%= link_to t("account.show.change_credentials_link"), edit_user_registration_path %>
<div class="small-12 medium-3 column text-center">
<%= link_to t("account.show.change_credentials_link"), edit_user_registration_path, class: 'button radius small secondary' %>
</div>
</div>

View File

@@ -1,41 +1,45 @@
<div class="row account">
<div class="small-12 medium-9 column">
<div class="row">
<div class="account small-12 medium-9 column small-centered">
<i class="icon-angle-left left"></i>&nbsp;<%= link_to t("devise_views.registrations.edit.back_link"), :back, class: "left back" %>
<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>
<div class="field">
<%= f.label :email, t("devise_views.registrations.edit.email_label") %><br />
<%= f.email_field :email, autofocus: true %>
</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>
<% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
<div><%= t("devise_views.registrations.edit.waiting_for") %> <%= resource.unconfirmed_email %></div>
<% end %>
<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="field">
<%= f.label :password, t("devise_views.registrations.edit.password_label") %> <i><%= t("devise_views.registrations.edit.leave_blank") %></i><br />
<%= f.password_field :password, autocomplete: "off" %>
</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="field">
<%= f.label :password_confirmation, t("devise_views.registrations.edit.password_confirmation_label") %><br />
<%= f.password_field :password_confirmation, autocomplete: "off" %>
</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="field">
<%= f.label :current_password, t("devise_views.registrations.edit.current_password_label") %> <i><%= t("devise_views.registrations.edit.need_current") %></i><br />
<%= f.password_field :current_password, autocomplete: "off" %>
</div>
<div class="actions">
<%= f.submit t("devise_views.registrations.edit.update_submit") %>
<div class="small-12 column">
<%= f.submit t("devise_views.registrations.edit.update_submit"), class: "button radius" %>
</div>
</div>
<% end %>
<%= link_to t("devise_views.registrations.edit.back_link"), :back %>
</div>
</div>

View File

@@ -41,11 +41,11 @@ en:
edit: "Edit"
email_label: "Email"
waiting_for: "Currently waiting confirmation for:"
leave_blank: "(leave blank if you don't want to change it)"
leave_blank: "Leave blank if you don't want to change it"
password_label: "New password"
password_confirmation_label: "Confirm new password"
current_password_label: "Current password"
need_current: "(we need your current password to confirm your changes)"
need_current: "We need your current password to confirm your changes"
update_submit: "Update"
cancel_title: "Cancel my account"
cancel_text: "Unhappy?"

View File

@@ -41,11 +41,11 @@ es:
edit: "Editar"
email_label: "Email"
waiting_for: "Esperando confirmación de:"
leave_blank: "(dejar en blanco si no deseas cambiarla)"
leave_blank: "Dejar en blanco si no deseas cambiarla"
password_label: "Contraseña nueva"
password_confirmation_label: "Confirmar contraseña nueva"
current_password_label: "Contraseña actual"
need_current: "(necesitamos tu contraseña actual para confirmar los cambios)"
need_current: "Necesitamos tu contraseña actual para confirmar los cambios"
update_submit: "Actualizar"
cancel_title: "Cancelar cuenta"
cancel_text: "¿Deseas borrar tu cuenta?"