From ee0bbe42fdbcf477faff1ba03e82ff65dd4ebe9c Mon Sep 17 00:00:00 2001
From: decabeza <alberto@decabeza.es>
Date: Wed, 6 Jun 2018 11:23:43 +0200
Subject: [PATCH] Improves homepage layout

---
 app/assets/stylesheets/_consul_settings.scss |  2 +-
 app/assets/stylesheets/layout.scss           | 40 +++++++++++---------
 app/views/welcome/_feeds.html.erb            | 16 ++++----
 app/views/welcome/index.html.erb             |  4 +-
 4 files changed, 34 insertions(+), 28 deletions(-)

diff --git a/app/assets/stylesheets/_consul_settings.scss b/app/assets/stylesheets/_consul_settings.scss
index 7b256e8a0..70bde8f65 100644
--- a/app/assets/stylesheets/_consul_settings.scss
+++ b/app/assets/stylesheets/_consul_settings.scss
@@ -115,4 +115,4 @@ $tab-content-border: $border;
 
 $orbit-bullet-diameter: 0.8rem;
 
-$pagination-radius: $global-radius;
\ No newline at end of file
+$pagination-radius: $global-radius;
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index 2ae5b7c40..c9858accb 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -253,7 +253,7 @@ a {
       }
     }
 
-    & + li {
+    + li {
       margin-left: 0;
     }
 
@@ -2662,8 +2662,9 @@ table {
     &.title {
       display: inline-block;
       border-top: 4px solid $brand;
+      margin-bottom: 0;
       min-width: rem-calc(240);
-      padding-top: $line-height / 2;
+      padding: $line-height / 2 0;
     }
   }
 }
@@ -2674,17 +2675,28 @@ table {
     clear: both;
   }
 
-  .debate {
-    margin: $line-height 0;
+  a {
+
+    &.see-all {
+      border-bottom: 1px solid $border;
+      display: block;
+      font-size: $small-font-size;
+      margin: $line-height 0 $line-height / 2;
+      text-align: right;
+      width: 100%;
+    }
   }
 }
 
 .feed-image {
   display: inline-block;
   height: rem-calc(120);
-  margin: $line-height / 2 0;
   overflow: hidden;
 
+  @include breakpoint(medium) {
+    height: rem-calc(96);
+  }
+
   img {
     margin-left: rem-calc(-15);
     max-width: none;
@@ -2694,25 +2706,19 @@ table {
 
 .feed-description {
 
-  @include breakpoint(medium) {
-    padding-top: $line-height;
-  }
-
   p {
     font-size: $small-font-size;
+    margin-bottom: 0;
   }
 }
 
 .feed-content {
-  border-bottom: 1px solid $border;
-  display: inline-block;
 
-  a {
-
-    &.see-all {
-      font-size: $small-font-size;
-      margin: $line-height 0 $line-height / 2;
-    }
+  .debate,
+  .proposal {
+    margin-bottom: 0;
+    margin-top: 0;
+    padding: $line-height / 2 0;
   }
 }
 
diff --git a/app/views/welcome/_feeds.html.erb b/app/views/welcome/_feeds.html.erb
index 3a898d835..3d9548ff2 100644
--- a/app/views/welcome/_feeds.html.erb
+++ b/app/views/welcome/_feeds.html.erb
@@ -1,15 +1,15 @@
-<div class="row margin-bottom feeds-list">
+<div class="row margin-bottom feeds-list" data-equalizer data-equalize-on="medium">
   <% @feeds.each do |feed| %>
 
     <% if feed_proposals?(feed) %>
       <div class="small-12 medium-8 column margin-top">
-        <div class="feed-content">
+        <div class="feed-content" data-equalizer-watch>
           <h3 class="title"><%= t("welcome.feed.most_active.#{feed.kind}") %></h3>
 
           <% feed.items.each do |item| %>
             <div class="<%= item.class.to_s.parameterize('_') %> row">
               <% if feature?(:allow_images) && item.image.present? %>
-                <div class="small-12 large-3 column">
+                <div class="small-12 medium-6 large-3 column">
                   <div class="feed-image">
                     <%= image_tag item.image_url(:thumb),
                                   alt: item.image.title.unicode_normalize %>
@@ -22,15 +22,15 @@
               </div>
             </div>
           <% end %>
-
-          <%= link_to t("welcome.feed.see_all_proposals"), proposals_path, class: "float-right see-all" %>
         </div>
+
+        <%= link_to t("welcome.feed.see_all_proposals"), proposals_path, class: "see-all" %>
       </div>
     <% end %>
 
     <% if feed_debates?(feed) %>
       <div class="small-12 medium-4 column margin-top">
-        <div class="feed-content">
+        <div class="feed-content" data-equalizer-watch>
           <h3 class="title"><%= t("welcome.feed.most_active.#{feed.kind}") %></h3>
 
           <% feed.items.each do |item| %>
@@ -38,9 +38,9 @@
               <strong><%= link_to item.title, url_for(item) %></strong>
             </div>
           <% end %>
-
-          <%= link_to t("welcome.feed.see_all_debates"), debates_path, class: "float-right see-all" %>
         </div>
+
+        <%= link_to t("welcome.feed.see_all_debates"), debates_path, class: "see-all" %>
       </div>
     <% end %>
 
diff --git a/app/views/welcome/index.html.erb b/app/views/welcome/index.html.erb
index 4796a6d47..f670ff69c 100644
--- a/app/views/welcome/index.html.erb
+++ b/app/views/welcome/index.html.erb
@@ -16,11 +16,11 @@
 
 
   <div class="row">
-    <div class="small-12 column <%= 'medium-8' if feed_processes_enabled? %>">
+    <div class="small-12 column <%= 'large-8' if feed_processes_enabled? %>">
       <%= render "cards" %>
     </div>
 
-    <div class="small-12 medium-4 column">
+    <div class="small-12 large-4 column">
       <%= render "processes" %>
     </div>
   </div>