From fdfef95595328e46295b0e7d65cd9beb7f24ea3b Mon Sep 17 00:00:00 2001 From: Alberto Garcia Cabeza Date: Sat, 8 Aug 2015 13:21:46 +0200 Subject: [PATCH] Adds styles for account page and edit user --- app/assets/stylesheets/debates.scss | 125 ++++++++++++------- app/assets/stylesheets/variables.scss | 1 + app/views/account/show.html.erb | 5 +- app/views/devise/registrations/edit.html.erb | 58 +++++---- config/locales/devise_views.en.yml | 4 +- config/locales/devise_views.es.yml | 4 +- 6 files changed, 119 insertions(+), 78 deletions(-) diff --git a/app/assets/stylesheets/debates.scss b/app/assets/stylesheets/debates.scss index e139b94df..d8b84b1af 100644 --- a/app/assets/stylesheets/debates.scss +++ b/app/assets/stylesheets/debates.scss @@ -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; } diff --git a/app/assets/stylesheets/variables.scss b/app/assets/stylesheets/variables.scss index f9607af9c..72c357e7b 100644 --- a/app/assets/stylesheets/variables.scss +++ b/app/assets/stylesheets/variables.scss @@ -27,6 +27,7 @@ $comments-text: #3F4549; $header-color: #292B33; $link: #0077B9; +$link-hover: #2178BF; $tags-bg: #FAFAFA; $tags-border: #F0F0F0; diff --git a/app/views/account/show.html.erb b/app/views/account/show.html.erb index 578838792..0d2356ecf 100644 --- a/app/views/account/show.html.erb +++ b/app/views/account/show.html.erb @@ -39,8 +39,9 @@ <% end %> + - <%= link_to t("account.show.change_credentials_link"), edit_user_registration_path %> - +
+ <%= link_to t("account.show.change_credentials_link"), edit_user_registration_path, class: 'button radius small secondary' %>
diff --git a/app/views/devise/registrations/edit.html.erb b/app/views/devise/registrations/edit.html.erb index 3216c927b..b670b6776 100644 --- a/app/views/devise/registrations/edit.html.erb +++ b/app/views/devise/registrations/edit.html.erb @@ -1,41 +1,45 @@ -
-
+
+ \ No newline at end of file diff --git a/config/locales/devise_views.en.yml b/config/locales/devise_views.en.yml index 7675a204e..694abdf99 100644 --- a/config/locales/devise_views.en.yml +++ b/config/locales/devise_views.en.yml @@ -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?" diff --git a/config/locales/devise_views.es.yml b/config/locales/devise_views.es.yml index 63e3159e0..95d4e199c 100644 --- a/config/locales/devise_views.es.yml +++ b/config/locales/devise_views.es.yml @@ -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?"