Merge pull request #471 from AyuntamientoMadrid/improve_design

Fixes styles for search results and filters

app/assets/stylesheets/debates.scss

@@ -305,7 +305,7 @@
   .panel {
     border-radius: 0;
     box-shadow: 0px 1px 3px 0 $border;
-    margin-bottom: rem-calc(12);
+    margin-bottom: rem-calc(4);
     min-height: rem-calc(192);
     padding-top: rem-calc(12);
 

app/assets/stylesheets/participacion.scss

@@ -259,7 +259,7 @@ h6 {
 
 .footer {
   background: #DEE0E2;
-  border-top: rem-calc(10) solid $brand;
+  border-top: rem-calc(6) solid $brand;
 }
 
 // 04. Header
@@ -330,8 +330,14 @@ header {
   }
 
   .icon-external {
-    color: #D01A6C;
     font-size: rem-calc(12);
+    opacity: .5;
+
+    @media (min-width: $small-breakpoint) {
+      position: absolute;
+      right: -18px;
+      top: 3px;
+    }
   }
 
   .selected {
@@ -398,6 +404,7 @@ header {
   color: white;
   height: rem-calc(48);
   max-width: 1170px !important;
+  padding: 0 rem-calc(12);
 
   @media (min-width: $small-breakpoint) {
     height: rem-calc(96);
@@ -543,9 +550,11 @@ header {
     li:not(.has-form) a:not(.button) {
       background: none;
       color: white;
+      padding: 0 rem-calc(6);
 
       @media (min-width: $small-breakpoint) {
         line-height: $line-height*4;
+        padding: 0 rem-calc(12);
       }
 
       &:hover {
@@ -569,6 +578,10 @@ header {
   color: white;
   font-size: rem-calc(14);
 
+  .row {
+    padding: 0 rem-calc(12);
+  }
+
   a {
     color: white;
 
@@ -725,7 +738,7 @@ footer {
       color: white;
 
       &.info {
-        background: $brand;
+        background: rgba(0,0,0,.5);
       }
     }
 
@@ -1045,11 +1058,7 @@ img.initialjs-avatar {
   h2 {
     display: inline-block;
     font-size: rem-calc(24);
-    margin: rem-calc(24) 0 rem-calc(12);
-
-    @media (min-width: $small-breakpoint) {
-      margin: rem-calc(24) 0;
-    }
+    margin-left: rem-calc(-17);
   }
 
   select {
@@ -1061,8 +1070,12 @@ 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 rem-calc(6) rem-calc(24);
+      margin: 0 0 rem-calc(24) rem-calc(12);
     }
 
     optgroup {
@@ -1077,6 +1090,18 @@ img.initialjs-avatar {
       }
     }
   }
+
+  .debates-order {
+    text-align: left;
+
+    @media (min-width: $small-breakpoint) {
+      text-align: right;
+    }
+
+    select {
+      margin-left: 0;
+    }
+  }
 }
 
 .search-results {

app/views/debates/_debate.html.erb

@@ -1,5 +1,5 @@
 <% cache [locale_and_user_status, debate, @debate_votes[debate.id]] do %>
-  <div id="<%= dom_id(debate) %>" class="debate">
+  <div id="<%= dom_id(debate) %>" class="debate clear">
     <div class="panel">
       <div class="row">
 

app/views/debates/index.html.erb

@@ -3,29 +3,30 @@
   <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-8 column">
+        <div class="small-12 medium-7 column">
           <% if @search_terms %>
-              <h2>
+              <h2 class="margin-top">
                 <%= page_entries_info @debates %>
                 <%= t("debates.index.search_results", count: @debates.size, search_term: @search_terms) %>
               </h2>
           <% elsif @tag_filter %>
-              <h2>
+              <h2 class="margin-top">
                 <%= 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 %>
+        <% if @tag_filter || @search_terms %>
+          <div class="small-12 medium-5 margin-top inline-block debates-order">
+            <h6 class="inline-block">
+              <%= t("debates.index.select_order") %>
+            </h6>
+        <% else %>
+          <div class="small-12 column margin-top inline-block">
+          <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| %>

config/locales/en.yml

@@ -189,7 +189,7 @@ en:
       debate: "secret code did not match with the image"
   shared:
     tags_cloud:
-      tags: Topics
+      tags: Trend
     flag: Flag as inappropriate
     unflag: Undo flag
     collective: Collective

config/locales/es.yml

@@ -189,7 +189,7 @@ es:
       debate: "el código secreto no coincide con la imagen"
   shared:
     tags_cloud:
-      tags: Temas
+      tags: Tendencias
     flag: Denunciar como inapropiado
     unflag: Deshacer denuncia
     collective: Colectivo