Fixes styles for mobile version

app/assets/stylesheets/participacion.scss

@@ -301,14 +301,37 @@ header {
     font-family: inherit;
     font-size: rem-calc(16);
     margin-top: 0;
+
+    &.see-more {
+      width: 100%;
+
+      @media (min-width: $small-breakpoint) {
+        width: auto;
+      }
+    }
+  }
+
+  .home-page {
+    text-align: center;
+
+    @media (min-width: $small-breakpoint) {
+      text-align: left;
+    }
   }
 
   .more-info {
     color: white;
+    display: block;
     font-size: rem-calc(14);
-    margin-left: rem-calc(24);
+    margin-bottom: rem-calc(24);
     text-decoration: underline;
 
+    @media (min-width: $small-breakpoint) {
+      display: inline-block;
+      margin-bottom: 0;
+      margin-left: rem-calc(24);
+    }
+
     &:hover {
       opacity: .75;
     }
@@ -330,10 +353,14 @@ header {
   }
 
   .icon-external {
+    display: inline-block;
     font-size: rem-calc(12);
     opacity: .5;
+    padding-top: rem-calc(3);
+    vertical-align: top;
 
     @media (min-width: $small-breakpoint) {
+      padding-top: 0;
       position: absolute;
       right: -18px;
       top: 3px;
@@ -419,11 +446,6 @@ header {
       font-size: rem-calc(16);
       font-weight: lighter;
       line-height: $line-height*2;
-      padding-left: rem-calc(12);
-
-      @media (min-width: $small-breakpoint) {
-        padding-left: 0;
-      }
 
       span {
         *display: inline; /* IE */
@@ -503,6 +525,18 @@ header {
   margin-right: rem-calc(24);
   width: 100%;
 
+  ul {
+    margin-left: 0;
+
+    @media (min-width: $small-breakpoint) {
+      margin-left:rem-calc(24);
+    }
+  }
+
+  ul li {
+    background: none;
+  }
+
   ul li > a {
     font-size: rem-calc(14);
 
@@ -510,13 +544,17 @@ header {
       border-radius: 0;
       line-height: $line-height*1.5;
       text-align: left;
+      background: none;
+      padding-left: rem-calc(6);
     }
 
     @media (min-width: $small-breakpoint) {
       &.button {
+        background: $brand;
         border-radius: rem-calc(3);
         line-height: rem-calc(15);
         margin-top: rem-calc(24);
+        padding-left: rem-calc(15);
         text-align: center;
       }
     }
@@ -550,7 +588,7 @@ header {
     li:not(.has-form) a:not(.button) {
       background: none;
       color: white;
-      padding: 0 rem-calc(6);
+      padding: rem-calc(12) 0;
 
       @media (min-width: $small-breakpoint) {
         line-height: $line-height*4;
@@ -608,7 +646,7 @@ header {
 
   a {
     color: $text;
-    display: block;
+    display: inline-block;
     font-size: rem-calc(14);
     font-weight: bold;
     line-height: $line-height*2;
@@ -616,12 +654,26 @@ header {
     text-align: left;
 
     @media (min-width: $small-breakpoint) {
-      display: inline-block;
       line-height: $line-height*3;
       margin-left: rem-calc(12);
       margin-right: rem-calc(72);
     }
 
+    &:after {
+      color: $border;
+      content: "|";
+      padding: 0 rem-calc(12);
+
+      @media (min-width: $small-breakpoint) {
+        content: none;
+        padding: 0;
+      }
+    }
+
+    &:last-child:after {
+      content: none;
+    }
+
     &:hover {
       color: $link;
     }
@@ -758,7 +810,6 @@ footer {
   background: #065687 image-url("auth_bg.jpg");
   background-repeat: no-repeat;
   background-size: cover;
-  padding-top: rem-calc(24);
 
   @media (min-width: $small-breakpoint) {
     padding-top: rem-calc(48);
@@ -772,9 +823,8 @@ footer {
     @include logo;
 
     a {
-      line-height: $line-height;
 
-      span {
+      span.logo-site {
         vertical-align: middle;
       }
     }
@@ -1058,7 +1108,11 @@ img.initialjs-avatar {
   h2 {
     display: inline-block;
     font-size: rem-calc(24);
-    margin-left: rem-calc(-17);
+    margin: rem-calc(12) 0;
+
+    @media (min-width: $small-breakpoint) {
+      margin: rem-calc(24) 0;
+    }
   }
 
   select {
@@ -1070,10 +1124,6 @@ img.initialjs-avatar {
     padding: rem-calc(12);
     width: auto;
 
-    @media (max-width: $small) {
-      margin-left: rem-calc(-17);
-    }
-
     @media (min-width: $small-breakpoint) {
       margin: 0 0 rem-calc(24) rem-calc(12);
     }

app/views/debates/index.html.erb

@@ -3,17 +3,17 @@
   <div class="wrap row">
     <div id="debates" class="debates-list small-12 medium-9 column js-order-<%= @order.dasherize %>">
       <div class="filters">
-        <div class="small-12 medium-7 column">
+        <div class="small-12 medium-7 left">
           <% if @search_terms %>
-              <h2 class="margin-top">
+            <h2 class="margin-top">
-                <%= page_entries_info @debates %>
+              <%= page_entries_info @debates %>
-                <%= t("debates.index.search_results", count: @debates.size, search_term: @search_terms) %>
+              <%= t("debates.index.search_results", count: @debates.size, search_term: @search_terms) %>
-              </h2>
+            </h2>
           <% elsif @tag_filter %>
-              <h2 class="margin-top">
+            <h2 class="margin-top">
-                <%= page_entries_info @debates %>
+              <%= page_entries_info @debates %>
-                <%= t("debates.index.filter_topic", count: @debates.size, topic: @tag_filter) %>
+              <%= t("debates.index.filter_topic", count: @debates.size, topic: @tag_filter) %>
-              </h2>
+            </h2>
           <% end %>
         </div>
         <% if @tag_filter || @search_terms %>
@@ -22,10 +22,10 @@
               <%= t("debates.index.select_order") %>
             </h6>
         <% else %>
-          <div class="small-12 column margin-top inline-block">
+          <div class="small-12 inline-block">
-          <h2 class="inline-block">
+            <h2 class="inline-block">
-            <%= t("debates.index.select_order_long") %>
+              <%= t("debates.index.select_order_long") %>
-          </h2>
+            </h2>
         <% end %>
           <form class="inline-block">
              <select class="js-location-changer" name="order-selector">

app/views/layouts/_header.html.erb

@@ -33,7 +33,7 @@
     <section class="subnavigation row">
       <%#= link_to t("layouts.header.welcome"), root_path %>
       <%#= link_to t("layouts.header.initiatives"), "#" %>
-      <div class="small-8 column">
+      <div class="small-12 medium-8 column">
       <%= link_to t("layouts.header.debates"), debates_path, class: ("active" if current_page?(controller: "/debates")) %>
       <%= link_to t("layouts.header.more_information"), "/more_information", class: ("active" if current_page?("/more_information"))  %>
       <%= link_to t("layouts.header.external_link_blog_url"), target: "_blank" do %>
@@ -48,11 +48,11 @@
   </div>
 
   <% if home_page? %>
-    <div class="row">
+    <div class="row home-page">
       <div class="small-12 medium-7 column">
         <h1><%= t("layouts.header.open_city_title") %></h1>
         <p><%= t("layouts.header.open_city_slogan") %></p>
-        <%= 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 see-more" %>
         <%= link_to t("layouts.header.more_information"), "/more_information", class: "more-info" %>
       </div>
 

app/views/layouts/devise.html.erb

@@ -18,7 +18,8 @@
       <div class="small-12 medium-8 large-5 column small-centered">
         <h1>
           <%= link_to root_path do %>
-            <%= image_tag("auth_logo.png", class: "left", size: "450x96", alt: t('layouts.header.logo')) %>
+            <%= image_tag('header_logo_madrid.png', class: 'show-for-medium-up left', size: '96x96') %>
+            <%= t("layouts.header.open_gov", open: "#{t('layouts.header.open')}").html_safe %>
           <% end %>
         </h1>
       </div>

app/views/welcome/welcome.html.erb

@@ -4,7 +4,7 @@
 <p><%= t("welcome.welcome.instructions_3_html") %></p>
 <p>
   <%= link_to t("welcome.welcome.verify_account"),
-      verification_path, class: "button large success radius margin-top expand" %>
+      verification_path, class: "button success radius margin-top expand" %>
 </p>
 <p class="text-center">
   <%= link_to t("welcome.welcome.go_to_index"),

config/locales/devise_views.en.yml

@@ -3,7 +3,7 @@ en:
     confirmations:
       title: "Resend confirmation instructions"
       email_label: Email
-      submit: "Resend confirmation instructions"
+      submit: "Resend confirmation"
     mailer:
       confirmation_instructions:
         title: "Welcome to open government portal"
@@ -37,7 +37,7 @@ en:
       new:
         title: "Forgot your password?"
         email_label: "Email"
-        send_submit: "Send me reset password instructions"
+        send_submit: "Send me reset password"
     users:
       registrations:
         edit:

config/locales/devise_views.es.yml

@@ -3,7 +3,7 @@ es:
     confirmations:
       title: "Reenviar instrucciones de confirmación"
       email_label: Email
-      submit: "Reenviar instrucciones de confirmación"
+      submit: "Reenviar instrucciones"
     mailer:
       confirmation_instructions:
         title: "Te damos la bienvenida al Portal de Gobierno Abierto del Ayuntamiento de Madrid"
@@ -37,7 +37,7 @@ es:
       new:
         title: "¿Has olvidado tu contraseña?"
         email_label: "Email"
-        send_submit: "Recibir instrucciones para recuperar mi contraseña"
+        send_submit: "Recibir instrucciones"
     users:
       registrations:
         edit:

config/locales/es.yml

@@ -215,7 +215,7 @@ es:
       instructions_3_html: "Sin verificar tus datos <b>el acceso que tienes es limitado</b>. Verificarlos ahora te permitirá, por ejemplo, apoyar propuestas ciudadanas."
       verify_account: "Verificar mi cuenta"
       go_to_index: "Quiero entrar como un usuario no verificado (acceso limitado)"
-      instructions_4_html: "Si quieres verificarte más tarde, puedes hacerlo en <i>Mi cuenta -> Verificar mi cuenta</i>."
+      instructions_4_html: "Si quieres verificarte más tarde, puedes hacerlo en <i>Mi cuenta > Verificar mi cuenta</i>."
   omniauth:
     finish_signup:
       title: Añade tu email