Merge pull request #812 from consul/design_layout

Design layout

app/assets/stylesheets/layout.scss

@@ -232,14 +232,13 @@ header {
   }
 
   .selected {
-    border-bottom: 2px solid white;
+    border-bottom: 1px solid white;
-    padding-bottom: $line-height/12;
     position: relative;
   }
 
   .locale {
     float: none;
-    font-family: $font-sans;
+    height: $line-height*1.5;
 
     @media (min-width: $small-breakpoint) {
       float: left;
@@ -264,7 +263,20 @@ header {
     }
 
     .postfix {
+      background: $border;
+      border: 1px solid #ccc;
+      border-left: 0;
+      color: $text;
       height: rem-calc(37);
+
+      &:hover {
+        background: $brand;
+        color: white;
+      }
+    }
+
+    input {
+      border-right: 0;
     }
 
     input, .button {
@@ -499,8 +511,7 @@ header {
     color: $text;
     display: inline-block;
     font-weight: bold;
-    margin-right: $line-height;
+    margin-right: $line-height/2;
-    margin-right: 12px\9;
     position: relative;
     text-align: left;
 
@@ -582,18 +593,17 @@ footer {
 .tags, .tag-cloud {
 
   a {
-    background: $border;
+    background: #ececec;
     border-radius: rem-calc(6);
-    color: #4d4d4d;
+    color: $text;
     display: inline-block;
     font-size: $small-font-size;
     margin-bottom: $line-height/3;
-    padding: 0 $line-height/3;
+    padding: $line-height/4 $line-height/3;
+    text-decoration: none;
 
     &:hover {
-      color: $link;
+      background: #e0e0e0;
-      cursor: pointer;
-      background: #E5F1F8;
     }
   }
 }
@@ -609,27 +619,6 @@ footer {
     padding-top: $line-height/4;
     text-transform: uppercase;
   }
-
-  a {
-    background: white;
-    border: 2px solid $border;
-    padding: $line-height/4 $line-height/3;
-
-    .label {
-      color: white;
-
-      &.info {
-        background: rgba(0,0,0,.5);
-      }
-    }
-
-    &:hover {
-
-      .label {
-        background: $brand;
-      }
-    }
-  }
 }
 
 // 05. Auth pages
@@ -1224,34 +1213,14 @@ table {
 }
 
 .social {
-  margin-top: $line-height;
-  padding-top: $line-height/4;
-  text-align: center;
-  vertical-align: middle;
-
-  @media (min-width: $small-breakpoint) {
-    margin-top: 0;
-    text-align: right;
-  }
 
   a {
-    font-size: rem-calc(24);
+    font-size: $h3-font-size;
-    line-height: $line-height;
     margin: 0 $line-height/2;
     text-decoration: none;
-    vertical-align: middle;
 
     &:hover {
-      opacity: .5;
+      color: $brand;
-      text-decoration: none;
-    }
-
-    @media (min-width: $small-breakpoint) {
-      font-size: rem-calc(18);
-    }
-
-    &:last-child {
-      margin-right: 0;
     }
   }
 }

app/assets/stylesheets/mixins.scss

@@ -18,8 +18,9 @@
   font-weight: lighter;
 
   @media (min-width: $small-breakpoint) {
-    font-size: rem-calc(24);
+    font-size: $h3-font-size;
-    line-height: rem-calc(48);
+    line-height: $line-height*2;
+    margin-top: 0;
   }
 
   img {
@@ -28,7 +29,7 @@
 
     @media (min-width: $small-breakpoint) {
       height: 80px;
-      margin-right: rem-calc(12);
+      margin-right: $line-height/2;
       margin-top: 0;
       width: 80px;
     }

app/assets/stylesheets/participation.scss

@@ -824,7 +824,7 @@
 }
 
 .featured-debates-container, .featured-proposals-container {
-  margin: 0 !important;
+  margin: $line-height 0 !important;
 
   h2 {
     font-size: rem-calc(24);

app/assets/stylesheets/variables.scss

@@ -44,11 +44,11 @@ $line-height:         rem-calc(24);
 // 02. Colors
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
+$brand:             #004A83;
 $body:              #E9E9E9;
 $background:        #EDEFF0;
-$dark:              #0B0C0C;
 $border:            #DEE0E3;
-$brand:             #004A83;
+$dark:              darken($brand, 10%);
 
 $text:              #222222;
 $text-medium:       #999999;

app/views/debates/index.html.erb

@@ -24,16 +24,16 @@
           <% end %>
         </div>
 
+        <% unless @tag_filter || @search_terms %>
+          <%= render "featured_debates_static" %>
+        <% end %>
+
         <%= render 'shared/order_links', i18n_namespace: "debates.index" %>
 
         <div class="show-for-small-only">
           <%= link_to t("debates.index.start_debate"), new_debate_path, class: 'button radius expand' %>
         </div>
 
-        <% unless @tag_filter || @search_terms %>
-          <%= render "featured_debates_static" %>
-        <% end %>
-
         <%= render @debates %>
         <%= paginate @debates %>
       </div>

app/views/layouts/_header.html.erb

@@ -5,25 +5,7 @@
       <div class="external-links">
         <%= link_to t("layouts.header.participation_html"), root_path, class: ("selected" unless current_page?("/opendata")) %>&nbsp;|
         <%= link_to t("layouts.header.external_link_transparency"), t("layouts.header.external_link_transparency_url") %>&nbsp;|
-        <%= link_to t("layouts.header.external_link_opendata"), "/opendata", class: ("selected" if current_page?("/opendata")) %>&nbsp;|&nbsp;
+        <%= link_to t("layouts.header.external_link_opendata"), "/opendata", class: ("selected" if current_page?("/opendata")) %>
-          <div class="social inline-block">
-            <%= link_to "https://twitter.com/abriendomadrid", target: "_blank", title: t("social.twitter") do %>
-              <span class="sr-only"><%= t("social.twitter") %></span>
-              <i class="icon-twitter"></i>
-            <% end %>
-            <%= link_to "https://www.facebook.com/Abriendo-Madrid-1475577616080350/", target: "_blank", title: t("social.facebook") do %>
-              <span class="sr-only"><%= t("social.facebook") %></span>
-              <i class="icon-facebook"></i>
-            <% end %>
-            <%= link_to "/blog", target: "_blank", title: t("social.blog") do %>
-              <span class="sr-only"><%= t("social.blog") %></span>
-              <i class="icon-blog"></i>
-            <% end %>
-            <%= link_to "https://www.youtube.com/channel/UCFmaChI9quIY7lwHplnacfg", target: "_blank", title: t("social.youtube") do %>
-              <span class="sr-only"><%= t("social.youtube") %></span>
-              <i class="icon-youtube"></i>
-            <% end %>
-          </div>
       </div>
     </div>
   </section>
@@ -51,7 +33,7 @@
       </section>
 
       <section class="subnavigation row">
-        <div class="small-12 medium-8 column">
+        <div class="small-12 medium-9 column">
         <%= link_to t("layouts.header.debates"), debates_path, class: ("active" if current_page?(controller: "/debates")) %>
         <%= link_to t("layouts.header.proposals"), proposals_path, class: ("active" if current_page?(controller: "/proposals")) %>
         <%= link_to t("layouts.header.more_information"), page_path('more_information'), class: ("active" if current_page?("/more_information"))  %>
@@ -60,7 +42,7 @@
           <small><i class="icon-external"></i></small>
         <% end %>
         </div>
-        <div class="small-12 medium-4 column right">
+        <div class="small-12 medium-3 column">
           <%= yield :header_addon %>
         </div>
       </section>

app/views/proposals/index.html.erb

@@ -24,12 +24,6 @@
           <% end %>
         </div>
 
-        <%= render 'shared/order_links', i18n_namespace: "proposals.index" %>
-
-        <div class="show-for-small-only">
-          <%= link_to t("proposals.index.start_proposal"), new_proposal_path, class: 'button radius expand' %>
-        </div>
-
         <% if @featured_proposals.present? %>
           <div id="featured-proposals" class="row featured-proposals-container">
             <div class="small-12 medium-3 column">
@@ -48,6 +42,12 @@
           </div>
         <% end %>
 
+        <%= render 'shared/order_links', i18n_namespace: "proposals.index" %>
+
+        <div class="show-for-small-only">
+          <%= link_to t("proposals.index.start_proposal"), new_proposal_path, class: 'button radius expand' %>
+        </div>
+
         <%= render partial: 'proposals/proposal', collection: @proposals %>
         <%= paginate @proposals %>
       </div>

app/views/shared/_tag_cloud.html.erb

@@ -5,7 +5,7 @@
   <% tag_cloud @tag_cloud, %w[s m l] do |tag, css_class| %>
     <%= link_to taggable_path(taggable, tag.name), class: css_class do %>
       <%= tag.name %>
-      <span class='label round info'><%= tag.send(taggable_counter_field(taggable)) %></span>
+      (<%= tag.send(taggable_counter_field(taggable)) %>)
     <% end %>
   <% end %>
 </div>

config/locales/en.yml

@@ -170,7 +170,7 @@ en:
       search_form:
         title: "Search"
         button: "Search"
-        placeholder: "Search citizen proposals..."
+        placeholder: "Search proposals..."
       search_results:
         one: " containing the term '%{search_term}'"
         other: " containing the term '%{search_term}'"

config/locales/es.yml

@@ -170,7 +170,7 @@ es:
       search_form:
         title: "Buscar"
         button: "Buscar"
-        placeholder: "Buscar propuestas ciudadanas..."
+        placeholder: "Buscar propuestas..."
       search_results:
         one: " que contiene '%{search_term}'"
         other: " que contienen '%{search_term}'"

spec/features/tags_spec.rb

@@ -63,10 +63,10 @@ feature 'Tags' do
     visit debates_path
 
     within(:css, "#tag-cloud") do
-      expect(page.find("a:eq(1)")).to have_content("Economía 10")
+      expect(page.find("a:eq(1)")).to have_content("Economía (10)")
-      expect(page.find("a:eq(2)")).to have_content("Corrupción 5")
+      expect(page.find("a:eq(2)")).to have_content("Corrupción (5)")
-      expect(page.find("a:eq(3)")).to have_content("Educación 5")
+      expect(page.find("a:eq(3)")).to have_content("Educación (5)")
-      expect(page.find("a:eq(4)")).to have_content("Medio Ambiente 1")
+      expect(page.find("a:eq(4)")).to have_content("Medio Ambiente (1)")
     end
   end