Improves styles for index, header and footer

app/assets/stylesheets/debates.scss

@@ -276,17 +276,10 @@
   .panel {
     border: 0;
     border-radius: 0;
-    margin-bottom: rem-calc(2);
+    border-bottom: 1px solid rgba(0,0,0,.1);
+    margin-bottom: rem-calc(12);
     min-height: rem-calc(192);
-    padding: 0 rem-calc(12) rem-calc(2) rem-calc(12);
+    padding: rem-calc(12);
-
-    &:first-child {
-      padding-top: rem-calc(12);
-
-      @media (min-width: $small-breakpoint) {
-        padding-top: rem-calc(24);
-      }
-    }
 
     .label {
       line-height: $line-height;
@@ -660,8 +653,6 @@
           padding: rem-calc(6) rem-calc(12);
         }
 
-
-
         &.is-admin {
           background: $comment-admin;
           padding: rem-calc(6) rem-calc(12);
@@ -670,6 +661,11 @@
         &.is-moderator {
           @extend .is-admin;
         }
+
+        &.level-5 {
+          background: $comment-level-5;
+          padding: rem-calc(6) rem-calc(12);
+        }
       }
     }
 

app/assets/stylesheets/participacion.scss

@@ -44,9 +44,14 @@
     padding-left: rem-calc(6);
 
     span {
-      font-size: rem-calc(16);
+      opacity: .5;
-      font-weight: lighter;
+
-      vertical-align: top;
+      &.logo-site {
+        font-size: rem-calc(16);
+        font-weight: lighter;
+        opacity: 1;
+        vertical-align: top;
+      }
     }
 
     @media (min-width: $small-breakpoint) {
@@ -132,6 +137,7 @@ h6 {
 }
 
 .button {
+  background: $brand;
   font-size: rem-calc(13);
   font-family: $font-family-sans-serif !important;
   padding: rem-calc(15) rem-calc(32);
@@ -158,6 +164,7 @@ h6 {
 }
 
 .sidebar {
+  margin-top: rem-calc(24);
   margin-bottom: rem-calc(48);
 }
 
@@ -245,6 +252,10 @@ h6 {
   height: 100%;
 }
 
+.wrap {
+  background: white;
+}
+
 .footer, .push {
   clear: both;
   min-height: rem-calc(288);
@@ -262,13 +273,14 @@ header {
   background-position: 50% 50%;
   background-size: cover;
   color: $text;
-  min-height: rem-calc(624);
+  min-height: rem-calc(696);
 
   &.results {
+    border-bottom: rem-calc(1) solid $border;
     min-height: rem-calc(48);
 
     @media (min-width: $small-breakpoint) {
-      min-height: rem-calc(216);
+      min-height: rem-calc(192);
     }
   }
 
@@ -377,8 +389,11 @@ header {
       padding-left: 0;
 
       span {
-        font-size: rem-calc(14);
+        opacity: .5;
-        font-weight: normal;
+
+        &.logo-site {
+          opacity: 1;
+        }
       }
 
       @media (min-width: $small-breakpoint) {
@@ -510,11 +525,6 @@ header {
 .top-links {
   color: white;
   font-size: rem-calc(14);
-  height: rem-calc(72);
-
-  @media (min-width: $small-breakpoint) {
-    height: rem-calc(48);
-  }
 
   .row {
     background-color: rgba(0,0,0,.5);
@@ -533,6 +543,7 @@ header {
 .subnavigation {
   background: white;
   clear: both;
+  height: rem-calc(47);
 
   @media (min-width: $small-breakpoint) {
     text-align: center;
@@ -570,19 +581,6 @@ header {
       @media (min-width: $small-breakpoint) {
         background: $brand;
         color: white;
-
-        &:after {
-          bottom: -16px;
-          left: 50%;
-          border: solid transparent;
-          content: " ";
-          height: 0;
-          width: 0;
-          position: absolute;
-          border-top-color: $brand;
-          border-width: 8px;
-          margin-left: -8px;
-        }
       }
     }
   }
@@ -716,6 +714,10 @@ footer {
     padding-top: rem-calc(48);
   }
 
+  p {
+    font-size: rem-calc(14);
+  }
+
   h1 {
     @include logo;
 
@@ -798,6 +800,14 @@ form {
     height: rem-calc(48);
     margin-bottom: rem-calc(16);
 
+    &.search-form {
+      height: rem-calc(37);
+
+      @media (min-width: $small-breakpoint) {
+        border-right: 0;
+      }
+    }
+
     &.error {
       margin-bottom: rem-calc(1);
     }
@@ -885,6 +895,10 @@ form {
     border-color: $alert-border;
     color: $alert-color;
   }
+
+  .close {
+    text-decoration: none !important;
+  }
 }
 
 .alert-layout {

app/views/debates/index.html.erb

@@ -1,50 +1,43 @@
 <section role="main">
 
-  <div class="filters row">
+  <div class="wrap row">
-    <div class="small-12 medium-9 column">
-
-      <% if @search_terms %>
-        <div class="inline-block small-12 medium-8" >
-          <h2>
-            <%= page_entries_info @debates %>
-            <%= t("debates.index.search_results", count: @debates.size, search_term: @search_terms) %>
-            </h2>
-        </div>
-      <% elsif @tag_filter %>
-        <div class="inline-block small-12 medium-8" >
-          <h2>
-            <%= page_entries_info @debates %>
-            <%= t("debates.index.filter_topic", count: @debates.size, topic: @tag_filter) %>
-            </h2>
-        </div>
-      <% end %>
-
-      <div class="inline-block <%= 'right' if (@tag_filter || @search_terms) %>">
-          <% if @tag_filter || @search_terms %>
-            <h6 class="inline-block">
-              <%= t("debates.index.select_order") %>
-            </h6>
-          <% else %>
-            <h2 class="inline-block">
-              <%= t("debates.index.select_order_long") %>
-            </h2>
-          <% end %>
-        <form class="inline-block">
-           <select class="js-location-changer" name="order-selector">
-             <% @valid_orders.each do |order| %>
-               <option <%= 'selected' if order == @order %>
-                       value='<%= current_path_with_query_params(order: order) %>'>
-                 <%= t("debates.index.orders.#{order}") %>
-               </option>
-             <% end %>
-           </select>
-        </form>
-      </div>
-    </div>
-  </div>
-
-  <div class="row">
     <div id="debates" class="debates-list small-12 medium-9 column js-order-<%= @order.dasherize %>">
+      <div class="filters">
+        <div class="small-12 medium-8 column">
+          <% if @search_terms %>
+              <h2>
+                <%= page_entries_info @debates %>
+                <%= t("debates.index.search_results", count: @debates.size, search_term: @search_terms) %>
+              </h2>
+          <% elsif @tag_filter %>
+              <h2>
+                <%= page_entries_info @debates %>
+                <%= t("debates.index.filter_topic", count: @debates.size, topic: @tag_filter) %>
+              </h2>
+          <% end %>
+        </div>
+        <div class="inline-block <%= 'right' if (@tag_filter || @search_terms) %>">
+            <% if @tag_filter || @search_terms %>
+              <h6 class="inline-block">
+                <%= t("debates.index.select_order") %>
+              </h6>
+            <% else %>
+              <h2 class="inline-block">
+                <%= t("debates.index.select_order_long") %>
+              </h2>
+            <% end %>
+          <form class="inline-block">
+             <select class="js-location-changer" name="order-selector">
+               <% @valid_orders.each do |order| %>
+                 <option <%= 'selected' if order == @order %>
+                         value='<%= current_path_with_query_params(order: order) %>'>
+                   <%= t("debates.index.orders.#{order}") %>
+                 </option>
+               <% end %>
+             </select>
+          </form>
+        </div>
+      </div>
       <%= render @debates %>
       <%= paginate @debates %>
     </div>

app/views/layouts/_admin_header.html.erb

@@ -11,7 +11,7 @@
         <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("admin.dashboard.index.title") %></span>
+            <%= t("layouts.header.open_gov", open: "<strong>#{t('layouts.header.open')}</strong>").html_safe %> <span>|</span> <span class="logo-site"><%= t("admin.dashboard.index.title") %></span>
           <% end %>
         </li>
         <li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>

app/views/layouts/_footer.html.erb

@@ -4,7 +4,7 @@
 
       <div class="small-12 medium-4 column">
         <div class="logo">
-          <%= link_to t("layouts.header.open_gov", open: "<strong>#{t('layouts.header.open')}</strong>").html_safe %>
+          <%= link_to t("layouts.header.open_gov", open: "#{t('layouts.header.open')}").html_safe %>
         </div>
 
         <p class="footer-description">

app/views/layouts/_header.html.erb

@@ -17,7 +17,7 @@
         <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>
+            <%= t("layouts.header.open_gov", open: "#{t('layouts.header.open')}").html_safe %> <span>|</span> <span class="logo-site"><%= t("layouts.header.participation") %></span>
           <% end %>
         </li>
       </ul>
@@ -61,7 +61,7 @@
 
         <p>Por ahora puedes visitar el portal que existía hasta ahora:</p>
 
-        <%= link_to "Ir al Portal de Transparencia existente anteriormente", t("layouts.header.external_link_transparency_url"), target: "_blank", class: "button radius" %>
+        <%= link_to "Ir al Portal de Transparencia", t("layouts.header.external_link_transparency_url"), target: "_blank", class: "button radius" %>
 
         <p>Mientras acabamos el nuevo portal, te invitamos a visitar el <a href="/blog" target="_blank">blog del Área de Participación Ciudadana, Transparencia y Gobierno Abierto</a> para conocer nuestros avances y novedades; o la <a href="/">sección de Participación Ciudadana</a> donde poder decidir qué ciudad es la que quieres.</p>
       </div>
@@ -75,9 +75,9 @@
         <h1><%= t("pages.opendata") %></h1>
 
       <div class="small-12 medium-10 column small-centered">
-       <p>Estamos trabajando en el nuevo Portal de Datos Abiertos de Ayuntamiento de Madrid, para que puedas reutilizar todos los datos de Ayuntamiento como quieras. Por ahora puedes visitar el portal qu existía hasta ahora:</p>
+       <p>Estamos trabajando en el nuevo Portal de Datos Abiertos del Ayuntamiento de Madrid, por ahora puedes visitar el portal que existía hasta ahora:</p>
 
-        <%= link_to "Ir al Portal de Datos Abiertos existente anteriormente", t("layouts.header.external_link_opendata_url"), target: "_blank", class: "button radius" %>
+        <%= link_to "Ir al Portal de Datos Abiertos", t("layouts.header.external_link_opendata_url"), target: "_blank", class: "button radius" %>
 
         <p>Mientras acabamos el nuevo portal, te invitamos a visitar el <a href="/blog" target="_blank">blog del Área de Participación Ciudadana, Transparencia y Gobierno Abierto</a> para conocer nuestros avances y novedades; o la <a href="/">sección de Participación Ciudadana</a> donde poder decidir qué ciudad es la que quieres.</p>
       </div>

app/views/shared/_search_form.html.erb

@@ -8,10 +8,10 @@
         <div class="row collapse">
 
           <div class="small-9 medium-12 large-9 columns">
-            <input type="text" name="search" placeholder="<%= t("shared.search_form.search_placeholder") %>">
+            <input type="text" name="search" placeholder="<%= t("shared.search_form.search_placeholder") %>" class="search-form">
           </div>
           <div class="small-3 medium-12 large-3 columns">
-            <input type="submit" class="button warning postfix" value="<%= t('shared.search_form.search_button') %>">
+            <input type="submit" class="button secondary postfix" value="<%= t('shared.search_form.search_button') %>">
           </div>
 
         </div>