Adds styles for account page and edit user
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -27,6 +27,7 @@ $comments-text: #3F4549;
|
||||
|
||||
$header-color: #292B33;
|
||||
$link: #0077B9;
|
||||
$link-hover: #2178BF;
|
||||
|
||||
$tags-bg: #FAFAFA;
|
||||
$tags-border: #F0F0F0;
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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> <%= 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>
|
||||
@@ -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?"
|
||||
|
||||
@@ -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?"
|
||||
|
||||
Reference in New Issue
Block a user