Adds recommended index partial and styles

app/assets/stylesheets/layout.scss

@@ -18,7 +18,7 @@
 // 16. Flags
 // 17. Activity
 // 18. Banners
-// 19. Recommended Section Home
+// 19. Recommendations
 // 20. Documents
 // 21. Related content
 // 22. Images
@@ -2261,8 +2261,8 @@ table {
   }
 }
 
-// 19. Recommended Section Home
+// 19. Recommendations
-// ----------------------------
+// -------------------
 
 .section-recommended {
   background: #fafafa;
@@ -2404,6 +2404,54 @@ table {
   }
 }
 
+.recommended-index {
+  background: #fafafa;
+  border-bottom: 1px solid #eee;
+  margin-bottom: $line-height;
+  margin-top: rem-calc(-25);
+  padding: $line-height 0;
+
+  @include breakpoint(medium) {
+    padding-top: 0;
+  }
+
+  h2 {
+    font-size: $small-font-size;
+    text-transform: uppercase;
+  }
+
+  h3 {
+    font-size: $base-font-size;
+    margin-bottom: 0;
+  }
+
+  a {
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  .recommendation {
+    background: #fff;
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
+    display: block;
+    margin-bottom: $line-height / 4;
+    padding: $line-height / 2;
+
+    &:hover {
+      box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.15);
+    }
+  }
+}
+
+.hide-recommendations {
+  color: $text-light;
+  position: absolute;
+  right: 12px;
+  top: rem-calc(-18);
+}
+
 // 20. Documents
 // -------------
 

app/views/shared/_recommended_index.html.erb

@@ -0,0 +1,29 @@
+<div class="recommended-index">
+  <div class="row relative" data-equalizer data-equalizer-on="medium">
+    <div class="small-12 column">
+      <h2 class="show-for-sr"><%= t("shared.recommended_index.title") %></h2>
+    </div>
+
+    <%= link_to "#", title: t("shared.recommended_index.hide"),
+                     class: "float-right-medium small hide-recommendations" do %>
+      <span class="icon-x"></span>
+      <span class="show-for-sr"><%= t("shared.recommended_index.hide") %></span>
+    <% end %>
+
+    <% recommended.each_with_index do |recommended, index| %>
+      <div class="small-12 medium-6 large-4 column end">
+        <%= link_to recommended_path(recommended) do %>
+          <div class="recommendation" data-equalizer-watch>
+            <h3><%= recommended.title %></h3>
+          </div>
+        <% end %>
+      </div>
+    <% end %>
+
+    <div class="small-12 column">
+      <%= link_to t("shared.recommended_index.see_more"),
+                  current_path_with_query_params(order: "recommendations"),
+                  class: "float-right-medium small" %>
+    </div>
+  </div>
+</div>

app/views/shared/_section_header.html.erb

@@ -3,7 +3,9 @@
     <div class="small-12 column" data-magellan>
       <%= image_tag "help/help_icon_#{image}.png", alt: t("#{i18n_namespace}.icon_alt"), class: "align-top" %>
       <h1 class="inline-block"><%= t("#{i18n_namespace}.title") %></h1>
-      <%= link_to t("#{i18n_namespace}.help"), "#section_help", class: "float-right" %>
+      <div class="float-right-medium">
+        <%= link_to t("#{i18n_namespace}.help"), "#section_help" %>
+      </div>
     </div>
   </div>
 </div>

config/locales/en/general.yml

@@ -632,6 +632,10 @@ en:
       title: View mode
       cards: Cards
       list: List
+    recommended_index:
+        title: Recommendations
+        see_more: See more recommendations
+        hide: Hide recommendations
   social:
     blog: "%{org} Blog"
     facebook: "%{org} Facebook"

config/locales/es/general.yml

@@ -631,6 +631,10 @@ es:
       title: Modo de vista
       cards: Tarjetas
       list: Lista
+    recommended_index:
+        title: Recomendaciones
+        see_more: Ver más recomendaciones
+        hide: Ocultar recomendaciones
   social:
     blog: "Blog de %{org}"
     facebook: "Facebook de %{org}"