From 8aaa0cb718583c7efd0f5fc109e1500e53e8b602 Mon Sep 17 00:00:00 2001
From: decabeza <alberto@decabeza.es>
Date: Thu, 28 Sep 2017 15:20:00 +0200
Subject: [PATCH] adds data equalizer to fix height on items with images

---
 app/assets/stylesheets/participation.scss     | 31 ++++++++-----------
 .../budgets/investments/_investment.html.erb  | 22 +++++++------
 app/views/proposals/_proposal.html.erb        | 16 +++++-----
 3 files changed, 34 insertions(+), 35 deletions(-)

diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss
index 6a915ca54..62bf65d91 100644
--- a/app/assets/stylesheets/participation.scss
+++ b/app/assets/stylesheets/participation.scss
@@ -658,20 +658,17 @@
 .proposals-list .proposal {
 
   @include breakpoint(small) {
+
     .no-image {
       width: 100%;
-      max-width: 300px;
+      max-width: rem-calc(300);
       margin: 0 auto;
-    }
 
-    .no-image::before {
-      content: '';
-      display: block;
-      padding-top: 100%;
-    }
-
-    h3 {
-      font-size: 1.3rem;
+      &::before {
+        content: '';
+        display: block;
+        padding-top: 100%;
+      }
     }
 
     .column:first-child {
@@ -680,19 +677,17 @@
   }
 
   @include breakpoint(medium) {
+
     .panel {
-      padding: 0 0.75rem 0 0;
+      padding: 0 $line-height / 2 0 0;
 
       .no-image {
-        height: 245px;
-        width: 140px;
+        height: 100%;
+        min-height: rem-calc(245);
+        width: rem-calc(140);
       }
     }
 
-    h3 {
-      font-size: 1.4rem;
-    }
-
     .column:first-child {
       overflow: hidden;
     }
@@ -702,7 +697,7 @@
     }
 
     .column:last-child:not(:first-child) {
-      padding-top: 0.75rem;
+      padding-top: $line-height / 2;
     }
 
     img {
diff --git a/app/views/budgets/investments/_investment.html.erb b/app/views/budgets/investments/_investment.html.erb
index e663229ad..b42f8be31 100644
--- a/app/views/budgets/investments/_investment.html.erb
+++ b/app/views/budgets/investments/_investment.html.erb
@@ -1,13 +1,15 @@
 <div id="<%= dom_id(investment) %>" class="budget-investment clear">
   <div class="panel">
-    <div class="row">
+    <div class="row" data-equalizer>
 
       <div class="small-12 medium-3 large-2 column">
-        <% if investment.image.present? %>
-          <%= image_tag investment.image_url(:thumb), alt: investment.image.title %>
-        <% else %>
-          <div class="no-image"></div>
-        <% end %>
+        <div data-equalizer-watch>
+          <% if investment.image.present? %>
+            <%= image_tag investment.image_url(:thumb), alt: investment.image.title %>
+          <% else %>
+            <div class="no-image"></div>
+          <% end %>
+        </div>
       </div>
 
       <div class="small-12 medium-6 large-7 column">
@@ -53,7 +55,7 @@
 
         <% if investment.should_show_votes? %>
           <div id="<%= dom_id(investment) %>_votes"
-               class="small-12 medium-3 column text-center">
+               class="small-12 medium-3 column text-center" data-equalizer-watch>
                <%= render partial: '/budgets/investments/votes', locals: {
                  investment: investment,
                  investment_votes: investment_votes,
@@ -62,7 +64,7 @@
           </div>
         <% elsif investment.should_show_vote_count? %>
           <div id="<%= dom_id(investment) %>_votes"
-               class="small-12 medium-3 column text-center">
+               class="small-12 medium-3 column text-center" data-equalizer-watch>
             <div class="supports js-participation">
               <span class="total-supports no-button">
                 <%= t("budgets.investments.investment.supports",
@@ -72,7 +74,7 @@
           </div>
         <% elsif investment.should_show_ballots? %>
           <div id="<%= dom_id(investment) %>_ballot"
-                class="small-12 medium-3 column text-center">
+                class="small-12 medium-3 column text-center" data-equalizer-watch>
                 <%= render partial: '/budgets/investments/ballot', locals: {
                   investment: investment,
                   investment_ids: investment_ids,
@@ -81,7 +83,7 @@
           </div>
         <% elsif investment.should_show_price? %>
           <div id="<%= dom_id(investment) %>_price"
-               class="supports small-12 medium-3 column text-center">
+               class="supports small-12 medium-3 column text-center" data-equalizer-watch>
             <p class="investment-project-amount margin-top">
               <%= investment.formatted_price %>
             </p>
diff --git a/app/views/proposals/_proposal.html.erb b/app/views/proposals/_proposal.html.erb
index eb02ea316..be5ac8e17 100644
--- a/app/views/proposals/_proposal.html.erb
+++ b/app/views/proposals/_proposal.html.erb
@@ -3,14 +3,16 @@
      data-type="proposal">
   <div class="panel">
     <div class="icon-successful"></div>
-    <div class="row">
+    <div class="row" data-equalizer>
 
       <div class="small-12 medium-3 large-2 column">
-        <% if proposal.image.present? %>
-          <%= image_tag proposal.image_url(:thumb), alt: proposal.image.title %>
-        <% else %>
-          <div class="no-image"></div>
-        <% end %>
+        <div data-equalizer-watch>
+          <% if proposal.image.present? %>
+            <%= image_tag proposal.image_url(:thumb), alt: proposal.image.title %>
+          <% else %>
+            <div class="no-image"></div>
+          <% end %>
+        </div>
       </div>
 
       <div class="small-12 medium-6 large-7 column">
@@ -58,7 +60,7 @@
         </div>
       </div>
 
-      <div id="<%= dom_id(proposal) %>_votes" class="small-12 medium-3 column supports-container">
+      <div id="<%= dom_id(proposal) %>_votes" class="small-12 medium-3 column supports-container" data-equalizer-watch>
         <% if proposal.successful? %>
           <div class="padding text-center">