consul/nairobi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adds styles for account page and edit user

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

125
app/assets/stylesheets/debates.scss
View File

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

1
app/assets/stylesheets/variables.scss
View File

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

5
app/views/account/show.html.erb
View File

@@ -39,8 +39,9 @@
</div> </div>
</div> </div>
<% end %> <% 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>
</div> </div>

58
app/views/devise/registrations/edit.html.erb
View File

@@ -1,41 +1,45 @@
<div class="row account"> <div class="row">
<div class="small-12 medium-9 column"> <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> <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| %> <%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %>
<%= devise_error_messages! %> <%= 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"> <div class="small-12 column">
<%= f.label :email, t("devise_views.registrations.edit.email_label") %><br /> <% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
<%= f.email_field :email, autofocus: true %> <div><%= t("devise_views.registrations.edit.waiting_for") %> <%= resource.unconfirmed_email %></div>
</div> <% end %>
</div>
<% if devise_mapping.confirmable? && resource.pending_reconfirmation? %> <div class="small-12 column">
<div><%= t("devise_views.registrations.edit.waiting_for") %> <%= resource.unconfirmed_email %></div> <%= f.label :password, t("devise_views.registrations.edit.password_label") %>
<% end %> <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"> <div class="small-12 column">
<%= f.label :password, t("devise_views.registrations.edit.password_label") %> <i><%= t("devise_views.registrations.edit.leave_blank") %></i><br /> <%= f.label :password_confirmation, t("devise_views.registrations.edit.password_confirmation_label") %>
<%= f.password_field :password, autocomplete: "off" %> <%= f.password_field :password_confirmation, autocomplete: "off", placeholder: t("devise_views.registrations.edit.password_confirmation_label") %>
</div> </div>
<div class="field"> <div class="small-12 column">
<%= f.label :password_confirmation, t("devise_views.registrations.edit.password_confirmation_label") %><br /> <%= f.label :current_password, t("devise_views.registrations.edit.current_password_label") %>
<%= f.password_field :password_confirmation, autocomplete: "off" %> <span class="note"><%= t("devise_views.registrations.edit.need_current") %></span>
</div> <%= f.password_field :current_password, autocomplete: "off", placeholder: t("devise_views.registrations.edit.current_password_label") %>
</div>
<div class="field"> <div class="small-12 column">
<%= f.label :current_password, t("devise_views.registrations.edit.current_password_label") %> <i><%= t("devise_views.registrations.edit.need_current") %></i><br /> <%= f.submit t("devise_views.registrations.edit.update_submit"), class: "button radius" %>
<%= f.password_field :current_password, autocomplete: "off" %> </div>
</div>
<div class="actions">
<%= f.submit t("devise_views.registrations.edit.update_submit") %>
</div> </div>
<% end %> <% end %>
<%= link_to t("devise_views.registrations.edit.back_link"), :back %>
</div> </div>
</div> </div>

4
config/locales/devise_views.en.yml
View File

@@ -41,11 +41,11 @@ en:
edit: "Edit" edit: "Edit"
email_label: "Email" email_label: "Email"
waiting_for: "Currently waiting confirmation for:" 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_label: "New password"
password_confirmation_label: "Confirm new password" password_confirmation_label: "Confirm new password"
current_password_label: "Current 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" update_submit: "Update"
cancel_title: "Cancel my account" cancel_title: "Cancel my account"
cancel_text: "Unhappy?" cancel_text: "Unhappy?"

4
config/locales/devise_views.es.yml
View File

@@ -41,11 +41,11 @@ es:
edit: "Editar" edit: "Editar"
email_label: "Email" email_label: "Email"
waiting_for: "Esperando confirmación de:" 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_label: "Contraseña nueva"
password_confirmation_label: "Confirmar contraseña nueva" password_confirmation_label: "Confirmar contraseña nueva"
current_password_label: "Contraseña actual" 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" update_submit: "Actualizar"
cancel_title: "Cancelar cuenta" cancel_title: "Cancelar cuenta"
cancel_text: "¿Deseas borrar tu cuenta?" cancel_text: "¿Deseas borrar tu cuenta?"