Merge pull request #812 from consul/design_layout

Design layout
2016-01-07 17:42:20 +01:00
parent 5e635d7cfc 14e0cf29da
commit bcf8c18143
11 changed files with 50 additions and 98 deletions
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -232,14 +232,13 @@ header {
  }

  .selected {
-    border-bottom: 2px solid white;
-    padding-bottom: $line-height/12;
+    border-bottom: 1px solid white;
    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: 12px\9;
+    margin-right: $line-height/2;
    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;
-      cursor: pointer;
-      background: #E5F1F8;
+      background: #e0e0e0;
    }
  }
 }
@@ -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);
-    line-height: $line-height;
+    font-size: $h3-font-size;
    margin: 0 $line-height/2;
    text-decoration: none;
-    vertical-align: middle;

    &:hover {
-      opacity: .5;
-      text-decoration: none;
-    }
-
-    @media (min-width: $small-breakpoint) {
-      font-size: rem-calc(18);
-    }
-
-    &:last-child {
-      margin-right: 0;
+      color: $brand;
    }
  }
 }
--- a/app/assets/stylesheets/mixins.scss
+++ b/app/assets/stylesheets/mixins.scss
@@ -18,8 +18,9 @@
  font-weight: lighter;

  @media (min-width: $small-breakpoint) {
-    font-size: rem-calc(24);
-    line-height: rem-calc(48);
+    font-size: $h3-font-size;
+    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;
    }
--- a/app/assets/stylesheets/participation.scss
+++ b/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);
--- a/app/assets/stylesheets/variables.scss
+++ b/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;
--- a/app/views/debates/index.html.erb
+++ b/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>
--- a/app/views/layouts/_header.html.erb
+++ b/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;
-          <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>
+        <%= link_to t("layouts.header.external_link_opendata"), "/opendata", class: ("selected" if current_page?("/opendata")) %>
      </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>
--- a/app/views/proposals/index.html.erb
+++ b/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>
--- a/app/views/shared/_tag_cloud.html.erb
+++ b/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>
--- a/config/locales/en.yml
+++ b/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}'"
--- a/config/locales/es.yml
+++ b/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}'"
--- a/spec/features/tags_spec.rb
+++ b/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(2)")).to have_content("Corrupció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(1)")).to have_content("Economía (10)")
+      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(4)")).to have_content("Medio Ambiente (1)")
    end
  end