Merge pull request #212 from AyuntamientoMadrid/reorganize_header

Reorganize header

app/assets/stylesheets/participacion.scss

@@ -136,8 +136,12 @@ header {
   min-height: rem-calc(480);
 
   &.results {
+    min-height: rem-calc(48);
+
+    @media (min-width: $small-breakpoint) {
       min-height: rem-calc(216);
     }
+  }
 
   h1 {
     color: white;
@@ -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 {
+  @media (min-width: $small-breakpoint) {
+    height: rem-calc(96);
+  }
+
+  .name {
+    height: rem-calc(48);
+
+    a {
       color: white;
       font-family: 'Lato';
-    font-size: rem-calc(36);
+      font-size: rem-calc(18);
       font-weight: lighter;
-    line-height: $line-height*4;
+      line-height: $line-height*2;
       padding-left: 0;
 
       span {
-      font-size: rem-calc(24);
+        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 {
+    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;
+
+    @media (min-width: $small-breakpoint) {
       line-height: $line-height*4;
+    }
 
     &:hover {
       background: none;
@@ -279,27 +321,31 @@ header {
 }
 
 .subnavigation {
-  background: white;
+  background: rgba(255,255,255,.95);
-  border-bottom: 1px solid white;
   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;
       }

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));

app/views/layouts/_header.html.erb

@@ -1,12 +1,11 @@
 <header class="<%= header_css %>">
-  <section class="top-links">
+  <section class="top-links show-for-medium-up">
     <div class="row">
-      <%= render 'shared/locale_switcher' %>
+      <%= render "shared/locale_switcher" %>
       <div class="external-links">
         <%= link_to t("layouts.header.participation"), root_path, class: "selected" %>&nbsp;|
         <%= link_to t("layouts.header.external_link_transparency"), "#" %>&nbsp;|
-        <%= link_to t("layouts.header.external_link_opendata"), "#" %>&nbsp;|
+        <%= link_to t("layouts.header.external_link_opendata"), "#" %>
-        <%= link_to t("layouts.header.external_link_blog"), "#" %>
       </div>
     </div>
   </section>
@@ -14,33 +13,36 @@
   <div class="contain-to-grid clear">
     <nav class="top-bar" data-topbar role="navigation">
       <ul class="title-area">
+        <li class="toggle-topbar menu-icon"><a href="#"><span><%= t("layouts.header.menu") %></span></a></li>
         <li class="name">
           <%= link_to root_path do %>
             <%= image_tag('header_logo_madrid.png', class: 'left', size: '96x96') %>
             <%= t("layouts.header.open_gov", open: "<strong>#{t('layouts.header.open')}</strong>").html_safe %> | <span><%= t("layouts.header.participation") %></span>
           <% end %>
         </li>
-        <li class="toggle-topbar menu-icon"><a href="#"><span><%= t("layouts.header.menu") %></span></a></li>
       </ul>
 
       <section class="top-bar-section">
-        <%= render 'devise/menu/login_items' %>
+        <%= render "devise/menu/login_items" %>
-        <%= render 'shared/admin_login_items' %>
+        <%= render "shared/admin_login_items" %>
       </section>
 
-      <section class="subnavigation row text-center">
+      <section class="subnavigation row">
-        <div class="small-12 medium-3 column end">
+        <div class="small-12 medium-2 medium-offset-1 column end">
-          <%= link_to t("layouts.header.welcome"), root_path, class: ("active" if current_page?(root_path)) %>
+          <%= link_to t("layouts.header.welcome"), root_path %>
         </div>
-        <div class="small-12 medium-3 column end">
+        <div class="small-12 medium-2 column end">
-          <%= link_to t("layouts.header.news"), "#" %>
+          <%= link_to t("layouts.header.debates"), debates_path, class: ("active" if current_page?(controller: "debates")) %>
         </div>
-        <div class="small-12 medium-3 column end">
+        <div class="small-12 medium-2 column end">
-          <%= link_to t("layouts.header.debates"), debates_path, class: ("active" if current_page?(controller: 'debates')) %>
-        </div>
-        <div class="small-12 medium-3 column end">
           <%= link_to t("layouts.header.initiatives"), "#" %>
         </div>
+        <div class="small-12 medium-2 column end">
+          <%= link_to t("layouts.header.how_it_works"), "#" %>
+        </div>
+        <div class="small-12 medium-2 column end">
+          <%= link_to t("layouts.header.external_link_blog"), "#" %>
+        </div>
       </section>
     </nav>
   </div>
@@ -50,7 +52,7 @@
       <div class="small-12 column text-center">
         <h1><%= t("layouts.header.open_city") %></h1>
         <h2><%= t("layouts.header.open_city_slogan") %></h2>
-        <%= 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" %>
       </div>
     </div>
   <% end %>

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:

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: