Merge pull request #823 from consul/featured_and_filters

Featured and filters

app/assets/stylesheets/admin.scss

@@ -70,10 +70,6 @@ body.admin {
   .admin-content {
     margin-top: rem-calc(24);
 
-    .filters h2 {
-      margin-top: 0;
-    }
-
     .proposal-new, .proposal-edit {
       padding-top: 0;
     }

app/assets/stylesheets/layout.scss

@@ -8,7 +8,7 @@
 // 06. Forms
 // 07. Alerts
 // 08. User account
-// 09. Filters & search
+// 09. Search
 // 10. Official levels
 // 11. Pagination
 // 12. Tables
@@ -1028,60 +1028,9 @@ img.avatar, img.admin-avatar, img.moderator-avatar, img.initialjs-avatar {
   }
 }
 
-// 09. Filters & search
+// 09. Search
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
-.filters, .search-results {
-
-  h2 {
-    display: inline-block;
-    font-size: rem-calc(24);
-    margin: $line-height/2 0;
-
-    @media (min-width: $small-breakpoint) {
-      margin: $line-height 0;
-    }
-  }
-
-  select {
-    background-color: #DEE0E2;
-    height: auto;
-    margin-bottom: $line-height;
-    min-width: $line-height*7.5;
-    outline: 0;
-    padding: $line-height/2;
-    width: auto;
-
-    @media (min-width: $small-breakpoint) {
-      margin: 0 0 $line-height $line-height/2;
-    }
-
-    optgroup {
-      font-size: $small-font-size;
-    }
-
-    option {
-
-      &:after {
-        content: "a";
-        font-family: "icons";
-      }
-    }
-  }
-
-  .debates-order {
-    text-align: left;
-
-    @media (min-width: $small-breakpoint) {
-      text-align: right;
-    }
-
-    select {
-      margin-left: 0;
-    }
-  }
-}
-
 .search-form {
 
   h3 {

app/assets/stylesheets/participation.scss

@@ -789,8 +789,12 @@
 // 05. Featured
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
-.featured-debates-container {
-  background: $votes-bg;
+.featured-debates, .featured-proposals {
+  padding: $line-height/2 0;
+
+  @media (min-width: $small-breakpoint) {
+    margin-top: $line-height !important;
+  }
 
   @media (min-width: $medium-breakpoint) {
     margin-left: 0 !important;
@@ -798,134 +802,40 @@
   }
 
   h2 {
-    color: white;
-  }
-
-  .debates-list {
-    margin-bottom: 0;
-  }
-}
-
-.featured-proposals-container {
-  background: #FED900;
-
-  @media (min-width: $medium-breakpoint) {
-    margin-left: 0 !important;
-    margin-right: rem-calc(-15) !important;
-  }
-
-  h2 {
-    color: $text;
-
-    @media (min-width: $medium-breakpoint) {
-      margin-bottom: rem-calc(27);
-    }
-  }
-}
-
-.featured-debates-container, .featured-proposals-container {
-  margin: $line-height 0 !important;
-
-  h2 {
-    font-size: rem-calc(24);
-    margin: rem-calc(12) 0 0;
-    position: relative;
+    font-size: $small-font-size;
+    line-height: $line-height;
     text-transform: uppercase;
+  }
 
-    .icon-proposals {
-      font-size: rem-calc(20);
-      position: absolute;
-      right: -26px;
-      top: -5px;
+  h3 {
+    margin-bottom: 0;
+
+    a {
+      color: $text;
+      font-size: $h3-font-size;
     }
   }
 
-  .debates-list {
-
-    @media (min-width: $medium-breakpoint) {
-      border-left: 1px solid $votes-border;
-    }
-
-    &:after {
-
-      @media (min-width: $medium-breakpoint) {
-        content: none;
-      }
-    }
+  a, .info {
+    color: lighten($text, 15%);
+    font-size: $small-font-size;
   }
 
-  .proposals-list {
-
-    @media (min-width: $medium-breakpoint) {
-      border-left: 1px solid #D2B400;
-    }
-
-    &:after {
-      border-color: #C9AF00 transparent transparent transparent;
-
-      @media (min-width: $medium-breakpoint) {
-        content: " ";
-      }
-    }
-  }
-
-  .debates-list, .proposals-list {
-    margin: rem-calc(6) 0;
-
-    &:after {
-      content: none;
-      position: absolute;
-      display: block;
-      border-style: solid;
-      bottom: rem-calc(-20);
-      border-left-width: 0;
-      border-right-color: transparent;
-      right: rem-calc(1);
-      border-width: rem-calc(14) rem-calc(14) 0 0;
-    }
-  }
 }
 
-.debate-featured, .proposal-featured {
-  margin-bottom: 0;
-  margin-top: 0;
-  padding-left: 0;
+.featured-debates {
+  background: $highlight;
+}
 
-  .panel {
-    background: none;
-    border: 0;
-    margin-bottom: 0;
-    padding: 0 rem-calc(12);
-
-    h3 {
-      font-weight: bold;
-      margin: rem-calc(8) 0 0 0;
-      min-height: auto;
-
-      a {
-        clear: both;
-        display: block;
-        font-size: rem-calc(14);
-        line-height: $line-height;
-      }
-    }
-  }
-
-  .progress {
-    display: none !important;
-  }
-
-  .content {
-    overflow: hidden;
-  }
+.featured-proposals {
+  background: $featured;
 
   .supports {
     @include supports;
     background: none;
     border: 0;
-    padding: 0;
-    padding-left: rem-calc(13);
-    margin-right: rem-calc(-26);
+    padding-bottom: 0;
+    padding-top: 0;
 
     &:after {
       content: none;
@@ -935,8 +845,12 @@
       display: none;
     }
 
+    .button-support {
+      margin-top: 0;
+    }
+
     .not-logged, .organizations-votes {
-      background: #FED900;
+      background: $featured;
       color: $warning-color;
       font-size: $small-font-size;
       line-height: rem-calc(24);
@@ -949,14 +863,12 @@
     }
 
     .anonymous-votes {
-      background: #FED900;
-      padding: 0;
-      padding-top: rem-calc(6);
+      background: $featured;
 
       p {
-        font-size: rem-calc(12);
-        line-height: rem-calc(20);
-        margin: 0;
+        color: $text;
+        font-size: $small-font-size;
+        line-height: $line-height;
       }
     }
 
@@ -967,10 +879,6 @@
       text-align: center;
     }
 
-    .button-support {
-      margin-top: rem-calc(4);
-    }
-
     .supported {
       margin-top: 0;
     }
@@ -981,53 +889,12 @@
       .social-share-button-facebook,
       .social-share-button-google_plus {
         height: rem-calc(33);
-      }
 
-      .social-share-button-twitter:before,
-      .social-share-button-facebook:before,
-      .social-share-button-google_plus:before {
-        font-size: rem-calc(18);
-        line-height: rem-calc(33);
+        &:before {
+          font-size: rem-calc(18);
+          line-height: rem-calc(33);
+        }
       }
     }
   }
 }
-
-.debate-featured {
-  background: $votes-bg;
-  margin-bottom: rem-calc(12) !important;
-
-  .panel h3 a {
-    color: #0D3F54;
-    font-size: $h3-font-size;
-    margin: 0;
-  }
-
-  .info, .info a {
-    color: white !important;
-    font-family: $font-sans;
-    font-size: $small-font-size;
-  }
-
-  .content {
-    height: auto;
-  }
-}
-
-.proposal-featured {
-  background: #FED900;
-
-  .panel h3 a {
-    color: $text;
-    font-size: $base-font-size;
-  }
-
-  .info {
-    color: #806C00 !important;
-    font-size: $small-font-size;
-  }
-
-  .content {
-    height: rem-calc(60);
-  }
-}

app/assets/stylesheets/variables.scss

@@ -74,6 +74,7 @@ $proposals:         #FFA42D;
 $proposals-border:  #CC8425;
 
 $highlight:         #E7F2FC;
+$featured:          #FED900;
 
 $footer-bg:         #DEE0E2;
 $footer-color:      #171819;

app/views/debates/_featured_debates_static.html.erb

@@ -1,41 +1,17 @@
-<div id="featured-debates" class="row featured-debates-container">
-  <div class="small-12 medium-3 column">
-    <h2>
-      <%= t("debates.index.featured_debates_html") %>
-    </h2>
-    <span class="show-for-medium-up">
-      <%= image_tag("featured_debates.jpg", size: "210x135") %>
-    </span>
+<div id="featured-debates" class="row featured-debates">
+
+  <div class="small-12 column">
+    <h2><%= t("debates.index.featured_debates") %></h2>
   </div>
-  <div class="small-12 medium-9 column debates-list">
-
-    <div class="debate-featured small-12 column">
-      <div class="panel">
-        <div class="content small-12 left">
-          <h3>
-          <%= link_to "#Túpreguntas: Manuela Carmena, Alcaldesa de Madrid.", "https://decide.madrid.es/debates/4320" %></h3>
-          <div class="info">
-            <span class="author">
-              <%= link_to "Manuela Carmena ", "https://decide.madrid.es/users/21452"%>
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="debate-featured small-12 column">
-      <div class="panel">
-        <div class="content small-12 left">
-          <h3>
-          <%= link_to "¿Y si cualquiera pudiera entrevistar a Manuela Carmena o a los otros concejales?", "https://decide.madrid.es/debates/4299" %></h3>
-          <div class="info">
-            <span class="author">
-              <%= link_to "ParticipaciónYTransparenciaAytoMadrid", "https://decide.madrid.es/users/52055"%>
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
 
+  <div class="small-12 medium-6 column">
+    <h3><%= link_to "#Túpreguntas: Manuela Carmena, Alcaldesa de Madrid.", "https://decide.madrid.es/debates/4320" %></h3>
+    <%= link_to "Manuela Carmena ", "https://decide.madrid.es/users/21452"%>
   </div>
+
+  <div class="small-12 medium-6 column">
+    <h3><%= link_to "¿Y si pudieras entrevistar a Manuela Carmena o a los otros concejales?", "https://decide.madrid.es/debates/4299" %></h3>
+    <%= link_to "ParticipaciónYTransparenciaAytoMadrid", "https://decide.madrid.es/users/52055"%>
+  </div>
+
 </div>

app/views/debates/index.html.erb

@@ -9,34 +9,32 @@
   <div class="wrap row">
     <div id="debates" class="debates-list small-12 medium-9 column">
 
-      <div class="filters">
-        <div class="small-12 medium-7 left">
-          <% if @search_terms %>
-            <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 class="margin-top">
-              <%= page_entries_info @debates %>
-              <%= t("debates.index.filter_topic", count: @debates.size, topic: @tag_filter) %>
-            </h2>
-          <% end %>
-        </div>
-
-        <% unless @tag_filter || @search_terms %>
-          <%= render "featured_debates_static" %>
+      <div class="small-12 medium-7 left">
+        <% if @search_terms %>
+          <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 class="margin-top">
+            <%= page_entries_info @debates %>
+            <%= t("debates.index.filter_topic", count: @debates.size, topic: @tag_filter) %>
+          </h2>
         <% 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>
-
-        <%= render @debates %>
-        <%= paginate @debates %>
       </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>
+
+      <%= render @debates %>
+      <%= paginate @debates %>
     </div>
 
     <div class="small-12 medium-3 column">

app/views/proposals/_featured_proposal.html.erb

@@ -1,22 +1,18 @@
-<div id="<%= dom_id(proposal) %>" class="proposal-featured small-12 column">
-  <div class="panel">
-    <div class="content small-12 medium-9 left">
-      <h3><%= link_to proposal.title, proposal %></h3>
-      <div class="info">
-        <span class="author">
-          <% if proposal.author.hidden? || proposal.author.erased? %>
-            <%= t("proposals.show.author_deleted") %>
-          <% else %>
-            <%= proposal.author.name %>
-          <% end %>
-        </span>
-        <span>&nbsp;&bull;&nbsp;</span>
-        <%= t("proposals.proposal.supports", count: proposal.total_votes) %>
-      </div>
-    </div>
-
-    <div id="<%= dom_id(proposal) %>_votes" class="small-12 medium-3 left">
-      <%= render 'featured_votes', proposal: proposal %>
+<div id="<%= dom_id(proposal) %>" class="proposal-featured clear">
+  <div class="small-12 medium-9 column">
+    <h3><%= link_to proposal.title, proposal %></h3>
+    <div class="info">
+      <% if proposal.author.hidden? || proposal.author.erased? %>
+        <%= t("proposals.show.author_deleted") %>
+      <% else %>
+        <%= proposal.author.name %>
+      <% end %>
+      &nbsp;&bull;&nbsp;
+      <strong><%= t("proposals.proposal.supports", count: proposal.total_votes) %></strong>
     </div>
   </div>
+
+  <div id="<%= dom_id(proposal) %>_votes" class="small-12 medium-3 column">
+    <%= render 'featured_votes', proposal: proposal %>
+  </div>
 </div>

app/views/proposals/index.html.erb

@@ -9,48 +9,41 @@
   <div class="wrap row">
     <div id="proposals" class="proposals-list small-12 medium-9 column">
 
-      <div class="filters">
-        <div class="small-12 medium-7 left">
-          <% if @search_terms %>
-            <h2 class="margin-top">
-              <%= page_entries_info @proposals %>
-              <%= t("proposals.index.search_results", count: @proposals.size, search_term: @search_terms) %>
-            </h2>
-          <% elsif @tag_filter %>
-            <h2 class="margin-top">
-              <%= page_entries_info @proposals %>
-              <%= t("proposals.index.filter_topic", count: @proposals.size, topic: @tag_filter) %>
+      <div class="small-12 medium-7 left">
+        <% if @search_terms %>
+          <h2 class="margin-top">
+            <%= page_entries_info @proposals %>
+            <%= t("proposals.index.search_results", count: @proposals.size, search_term: @search_terms) %>
+          </h2>
+        <% elsif @tag_filter %>
+          <h2 class="margin-top">
+            <%= page_entries_info @proposals %>
+            <%= t("proposals.index.filter_topic", count: @proposals.size, topic: @tag_filter) %>
+          </h2>
+        <% end %>
+      </div>
+
+      <% if @featured_proposals.present? %>
+        <div id="featured-proposals" class="row featured-proposals">
+          <div class="small-12 column">
+            <h2>
+              <%= t("proposals.index.featured_proposals") %>
             </h2>
+          </div>
+          <% @featured_proposals.each do |featured_proposal| %>
+            <%= render "featured_proposal", proposal: featured_proposal %>
           <% end %>
         </div>
+      <% end %>
 
-        <% if @featured_proposals.present? %>
-          <div id="featured-proposals" class="row featured-proposals-container">
-            <div class="small-12 medium-3 column">
-              <h2>
-                <%= t("proposals.index.featured_proposals_html") %>
-              </h2>
-              <span class="show-for-medium-up">
-                <%= image_tag("featured_proposals.jpg", size: "210x135") %>
-              </span>
-            </div>
-            <div class="small-12 medium-9 column proposals-list">
-              <% @featured_proposals.each do |featured_proposal| %>
-                <%= render "featured_proposal", proposal: featured_proposal %>
-              <% end %>
-            </div>
-          </div>
-        <% end %>
+      <%= render 'shared/order_links', i18n_namespace: "proposals.index" %>
 
-        <%= 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 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>
 
     <div class="small-12 medium-3 column">

app/views/welcome/highlights.html.erb

@@ -4,19 +4,16 @@
     <div class="wrap row">
       <div id="activities" class="debates-list small-12 medium-9 column">
 
-        <div class="filters">
-
-          <div class="small-12 medium-7 left">
-              <h1 class="inline-block"><%= t('welcome.highlights') %></h1>
-              &nbsp;&nbsp;
-              <h2 class="margin-top">
-                <%= t('welcome.signed_in_home_title') %>
-              </h2>
-          </div>
-
-          <%= render @list %>
-          <%= paginate @paginator %>
+        <div class="small-12 medium-7 left">
+            <h1 class="inline-block"><%= t('welcome.highlights') %></h1>
+            &nbsp;&nbsp;
+            <h2 class="margin-top">
+              <%= t('welcome.signed_in_home_title') %>
+            </h2>
         </div>
+
+        <%= render @list %>
+        <%= paginate @paginator %>
       </div>
 
       <div class="small-12 medium-3 column">

config/locales/en.yml

@@ -85,7 +85,7 @@ en:
   debates:
     index:
       title: "Debates"
-      featured_debates_html: "Featured<br>debates"
+      featured_debates: "Featured"
       start_debate: "Start a debate"
       select_order: "Order by"
       orders:
@@ -160,7 +160,7 @@ en:
   proposals:
     index:
       title: "Proposals"
-      featured_proposals_html: "Featured<br>proposals"
+      featured_proposals: "Featured"
       start_proposal: "Create a proposal"
       select_order_long: "You are viewing proposals according to:"
       select_order: "Order by"

config/locales/es.yml

@@ -85,7 +85,7 @@ es:
   debates:
     index:
       title: "Debates"
-      featured_debates_html: "Debates<br>destacados"
+      featured_debates: "Destacados"
       start_debate: "Empieza un debate"
       select_order: "Ordenar por"
       orders:
@@ -160,7 +160,7 @@ es:
   proposals:
     index:
       title: "Propuestas ciudadanas"
-      featured_proposals_html: "Propuestas<br>destacadas"
+      featured_proposals: "Destacadas"
       start_proposal: "Crea una propuesta"
       select_order_long: "Estas viendo las propuestas"
       select_order: "Ordenar por"