Adds search form to sidebar

app/assets/stylesheets/participacion.scss

@@ -10,7 +10,7 @@
 // 08. Forms
 // 09. Alerts
 // 10. User account
-// 11. Filters
+// 11. Filters & search
 // 12. Official levels
 // 13. Pagination
 // 14. Tables
@@ -133,9 +133,14 @@ h6 {
 
 .button {
   font-size: rem-calc(13);
+  font-family: $font-family-sans-serif !important;
   padding: rem-calc(15) rem-calc(32);
 }
 
+.postfix.button {
+  padding: 0;
+}
+
 .clear {
   clear: both;
 }
@@ -985,7 +990,7 @@ img.initialjs-avatar {
   top: -9px;
 }
 
-// 11. Filters
+// 11. Filters & search
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
 .filters {
@@ -1018,6 +1023,23 @@ img.initialjs-avatar {
   }
 }
 
+.search-results {
+  @extend .filters;
+}
+
+.search-form {
+
+  h3 {
+    border-top: 1px solid $votes-border;
+    display: inline-block;
+    font-family: $font-family-sans-serif;
+    font-size: rem-calc(16);
+    margin: -1px 0 rem-calc(12);
+    padding-top: rem-calc(6);
+    text-transform: uppercase;
+  }
+}
+
 // 12. Officials levels
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 

app/views/debates/index.html.erb

@@ -37,6 +37,18 @@
     </div>
   </div>
 
+  <!-- Search results -->
+  <div class="filters row">
+    <div class="small-12 column">
+      <h2>
+      <%= t("debates.index.search_results",
+          number: "N",
+          search_term: "búsqueda").html_safe%>
+    </h2>
+    </div>
+  </div>
+  <!-- /. Search results -->
+
   <div class="row">
     <div id="debates" class="debates-list small-12 medium-9 column js-order-<%= @order.dasherize %>">
       <%= render @debates %>
@@ -45,6 +57,7 @@
     <div class="small-12 medium-3 column">
       <aside class="sidebar" role="complementary">
         <%= link_to t("debates.index.start_debate"), new_debate_path, class: 'button radius expand' %>
+        <%= render "shared/search_form" %>
         <%= render "shared/tag_cloud" %>
       </aside>
     </div>

app/views/shared/_search_form.html.erb

@@ -0,0 +1,17 @@
+<div class="search-form">
+  <div class="sidebar-divider"></div>
+  <h3><%= t("shared.search_form.search_title") %></h3>
+  <br>
+  <div class="row">
+    <div class="small-12 columns">
+      <div class="row collapse">
+        <div class="small-9 medium-12 large-9 columns">
+          <input type="text" placeholder="<%= t("shared.search_form.search_placeholder") %>">
+        </div>
+        <div class="small-3 medium-12 large-3 columns">
+          <a href="#" class="button warning postfix"><%= t("shared.search_form.search_button") %></a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

config/locales/en.yml

@@ -79,6 +79,7 @@ en:
       filter_topic:
         one: "You are seeing one debate with the topic '%{topic}'"
         other: "You are seeing %{count} debates with the topic '%{topic}'"
+      search_results: "Showing %{number} debates containing '%{search_term}'"
     debate:
       debate: Debate
       comments:
@@ -193,6 +194,10 @@ en:
     flag: Flag as inappropriate
     unflag: Undo flag
     collective: Collective
+    search_form:
+      search_title: Search
+      search_button: Search
+      search_placeholder: "Search..."
   mailer:
     comment:
       subject: Someone has commented on your debate

config/locales/es.yml

@@ -79,6 +79,7 @@ es:
       filter_topic:
         one: "Estás viendo un debate con el tema ''%{topic}''"
         other: "Estás viendo %{count} debates con el tema '%{topic}'"
+      search_results: "Mostrando %{number} debates que contienen '%{search_term}'"
     debate:
       debate: Debate
       comments:
@@ -189,10 +190,14 @@ es:
       debate: "el código secreto no coincide con la imagen"
   shared:
     tags_cloud:
-        tags: Temas
+      tags: Temas
     flag: Denunciar como inapropiado
     unflag: Deshacer denuncia
     collective: Colectivo
+    search_form:
+      search_title: Buscar
+      search_button: Buscar
+      search_placeholder: "Buscar..."
   mailer:
     comment:
       subject: Alguien ha comentado en tu debate