From 6bd060f5368ed702b72624df80376a87898b18a1 Mon Sep 17 00:00:00 2001 From: Alberto Garcia Cabeza Date: Fri, 21 Aug 2015 13:04:41 +0200 Subject: [PATCH] Reorganizes header links, adds responsive styles --- app/assets/stylesheets/participacion.scss | 92 +++++++++++++++++------ app/assets/stylesheets/variables.scss | 15 ++++ app/views/layouts/_header.html.erb | 36 ++++----- config/locales/en.yml | 2 +- config/locales/es.yml | 2 +- 5 files changed, 105 insertions(+), 42 deletions(-) diff --git a/app/assets/stylesheets/participacion.scss b/app/assets/stylesheets/participacion.scss index d4442e11c..d45dc0b75 100644 --- a/app/assets/stylesheets/participacion.scss +++ b/app/assets/stylesheets/participacion.scss @@ -136,7 +136,11 @@ header { min-height: rem-calc(480); &.results { - min-height: rem-calc(216); + min-height: rem-calc(48); + + @media (min-width: $small-breakpoint) { + min-height: rem-calc(216); + } } h1 { @@ -181,7 +185,7 @@ header { height: 0; width: 0; position: absolute; - border-top-color: #fff; + border-top-color: white; border-width: 8px; margin-left: -8px; } @@ -212,43 +216,81 @@ header { .top-bar { background: rgba(0,0,0,.5); color: white; - height: rem-calc(96); + height: rem-calc(48); max-width: 1170px !important; - .name a { - color: white; - font-family: 'Lato'; - font-size: rem-calc(36); - font-weight: lighter; - line-height: $line-height*4; - padding-left: 0; + @media (min-width: $small-breakpoint) { + height: rem-calc(96); + } - span { - font-size: rem-calc(24); - font-weight: normal; - } + .name { + height: rem-calc(48); - img { - margin-right: rem-calc(12); + a { + color: white; + font-family: 'Lato'; + font-size: rem-calc(18); + font-weight: lighter; + line-height: $line-height*2; + padding-left: 0; + + span { + font-size: rem-calc(14); + font-weight: normal; + } + + @media (min-width: $small-breakpoint) { + line-height: $line-height*4; + } + + @media (min-width: $medium-breakpoint) { + font-size: rem-calc(30); + + span { + font-size: rem-calc(20); + } + } + + img { + height: 48px; + margin-right: rem-calc(6); + width: 48px; + + @media (min-width: $small-breakpoint) { + height: 96px; + margin-right: rem-calc(12); + width: 96px; + } + } } } } .top-bar-section { margin-right: rem-calc(24); + width: 100%; ul li > a { font-size: rem-calc(14); } ul li, ul li:hover:not(.has-form) > a { - background: none; + line-height: $line-height; + + @media (min-width: $small-breakpoint) { + background: none; + border: 0; + line-height: $line-height*4; + } } li:not(.has-form) a:not(.button) { background: none; color: white; - line-height: $line-height*4; + + @media (min-width: $small-breakpoint) { + line-height: $line-height*4; + } &:hover { background: none; @@ -279,27 +321,31 @@ header { } .subnavigation { - background: white; - border-bottom: 1px solid white; + background: rgba(255,255,255,.95); clear: both; + text-transform: lowercase; + + @media (min-width: 480px) { + text-align: center; + } a { color: $link; font-size: rem-calc(14); - font-weight: bold; &.active { color: $text; + font-weight: bold; &:after { - bottom: -17px; + bottom: -16px; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; - border-top-color: #fff; + border-top-color: rgba(255,255,255,.95); border-width: 8px; margin-left: -8px; } diff --git a/app/assets/stylesheets/variables.scss b/app/assets/stylesheets/variables.scss index 0c0942d99..839385778 100644 --- a/app/assets/stylesheets/variables.scss +++ b/app/assets/stylesheets/variables.scss @@ -5,6 +5,7 @@ // 03. Forms // 04. Alerts // 05. Levels +// 06. Responsive // // 01. Fonts @@ -78,3 +79,17 @@ $association: #222222; $comment-author: rgba(45,144,248,.15); $comment-official: rgba(70,219,145,.3); $comment-level-5: rgba(255,241,204,1); + +// 06. Responsive +// - - - - - - - - - - - - - - - - - - - - - - - - - + +$small-breakpoint: em-calc(640); +$medium-breakpoint: em-calc(1024); +$large-breakpoint: em-calc(1440); +$xlarge-breakpoint: em-calc(1920); + +$small-range: (0, $small-breakpoint); +$medium-range: ($small-breakpoint + em-calc(1), $medium-breakpoint); +$large-range: ($medium-breakpoint + em-calc(1), $large-breakpoint); +$xlarge-range: ($large-breakpoint + em-calc(1), $xlarge-breakpoint); +$xxlarge-range: ($xlarge-breakpoint + em-calc(1), em-calc(99999999)); diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb index b47de5f24..bc082f15d 100644 --- a/app/views/layouts/_header.html.erb +++ b/app/views/layouts/_header.html.erb @@ -1,12 +1,11 @@
-
+
- <%= render 'shared/locale_switcher' %> + <%= render "shared/locale_switcher" %>
<%= link_to t("layouts.header.participation"), root_path, class: "selected" %> | <%= link_to t("layouts.header.external_link_transparency"), "#" %> | - <%= link_to t("layouts.header.external_link_opendata"), "#" %> | - <%= link_to t("layouts.header.external_link_blog"), "#" %> + <%= link_to t("layouts.header.external_link_opendata"), "#" %>
@@ -14,33 +13,36 @@
@@ -50,7 +52,7 @@

<%= t("layouts.header.open_city") %>

<%= t("layouts.header.open_city_slogan") %>

- <%= link_to t("layouts.header.see_all_debates"), debates_path, class: 'button radius' %> + <%= link_to t("layouts.header.see_all_debates"), debates_path, class: "button radius" %>
<% end %> diff --git a/config/locales/en.yml b/config/locales/en.yml index 79181cd13..631609924 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -17,7 +17,7 @@ en: administration: Administration moderation: Moderation welcome: Welcome - news: News + how_it_works: How it works debates: Debates initiatives: Initiatives footer: diff --git a/config/locales/es.yml b/config/locales/es.yml index 856560e46..7ec328d6f 100644 --- a/config/locales/es.yml +++ b/config/locales/es.yml @@ -17,7 +17,7 @@ es: administration: Administrar moderation: Moderar welcome: Portada - news: Novedades + how_it_works: "Cómo funciona" debates: Debates initiatives: Iniciativas footer: