From 39def428b5d46bc05b377e5d2db09b771e6e79cb Mon Sep 17 00:00:00 2001
From: decabeza <alberto@decabeza.es>
Date: Wed, 6 Dec 2017 21:00:34 +0100
Subject: [PATCH] improves layout for items list with images

---
 app/assets/stylesheets/participation.scss     | 29 -------------------
 app/views/budgets/investments/_form.html.erb  |  8 +++--
 .../budgets/investments/_investment.html.erb  | 28 +++++++++++-------
 app/views/polls/_poll_group.html.erb          |  2 --
 app/views/proposals/_form.html.erb            |  8 +++--
 app/views/proposals/_proposal.html.erb        | 26 ++++++++++-------
 6 files changed, 42 insertions(+), 59 deletions(-)

diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss
index 848cd539a..5acfa53d0 100644
--- a/app/assets/stylesheets/participation.scss
+++ b/app/assets/stylesheets/participation.scss
@@ -655,29 +655,6 @@
 .budget-investments-list .budget-investment,
 .proposals-list .proposal {
 
-  .no-image {
-    background: $brand;
-  }
-}
-
-.budget-investments-list .budget-investment,
-.proposals-list .proposal {
-
-  @include breakpoint(small) {
-
-    .no-image {
-      width: 100%;
-      max-width: rem-calc(300);
-      margin: 0 auto;
-
-      &::before {
-        content: '';
-        display: block;
-        padding-top: 100%;
-      }
-    }
-  }
-
   @include breakpoint(medium) {
 
     .panel {
@@ -685,12 +662,6 @@
       &.with-image {
         padding: 0 $line-height / 2 0 0;
       }
-
-      .no-image {
-        height: 100%;
-        min-height: rem-calc(245);
-        width: rem-calc(140);
-      }
     }
 
     .column:first-child {
diff --git a/app/views/budgets/investments/_form.html.erb b/app/views/budgets/investments/_form.html.erb
index b3bbf4e14..fffafcb0d 100644
--- a/app/views/budgets/investments/_form.html.erb
+++ b/app/views/budgets/investments/_form.html.erb
@@ -21,9 +21,11 @@
       <%= f.text_field :external_url %>
     </div>
 
-    <div class="images small-12 column">
-      <%= render 'images/nested_image', imageable: @investment, f: f %>
-    </div>
+    <% if feature?(:allow_images) %>
+      <div class="images small-12 column">
+        <%= render 'images/nested_image', imageable: @investment, f: f %>
+      </div>
+    <% end %>
 
     <div class="documents small-12 column">
       <%= render 'documents/nested_documents', documentable: @investment, f: f %>
diff --git a/app/views/budgets/investments/_investment.html.erb b/app/views/budgets/investments/_investment.html.erb
index ecfdcb3c7..7b37a9ceb 100644
--- a/app/views/budgets/investments/_investment.html.erb
+++ b/app/views/budgets/investments/_investment.html.erb
@@ -1,18 +1,20 @@
 <div id="<%= dom_id(investment) %>" class="budget-investment clear">
-  <div class="panel with-image">
+  <div class="panel <%= ('with-image' if feature?(:allow_images) && investment.image.present?) %>">
+
+    <% if feature?(:allow_images) && investment.image.present? %>
     <div class="row" data-equalizer>
 
       <div class="small-12 medium-3 large-2 column text-center">
         <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 %>
+          <%= image_tag investment.image_url(:thumb), alt: investment.image.title %>
         </div>
       </div>
 
       <div class="small-12 medium-6 large-7 column">
+    <% else %>
+      <div class="row">
+        <div class="small-12 medium-9 column">
+    <% end %>
         <div class="budget-investment-content">
 
           <% cache [locale_and_user_status(investment), 'index', investment, investment.author] do %>
@@ -55,7 +57,8 @@
 
         <% if investment.should_show_votes? %>
           <div id="<%= dom_id(investment) %>_votes"
-               class="small-12 medium-3 column text-center" data-equalizer-watch>
+               class="small-12 medium-3 column text-center"
+               <%= 'data-equalizer-watch' if feature?(:allow_images) && investment.image.present? %>>
                <%= render partial: '/budgets/investments/votes', locals: {
                  investment: investment,
                  investment_votes: investment_votes,
@@ -64,7 +67,8 @@
           </div>
         <% elsif investment.should_show_vote_count? %>
           <div id="<%= dom_id(investment) %>_votes"
-               class="small-12 medium-3 column text-center" data-equalizer-watch>
+               class="small-12 medium-3 column text-center"
+               <%= 'data-equalizer-watch' if feature?(:allow_images) && investment.image.present? %>>
             <div class="supports js-participation">
               <span class="total-supports no-button">
                 <%= t("budgets.investments.investment.supports",
@@ -74,7 +78,8 @@
           </div>
         <% elsif investment.should_show_ballots? %>
           <div id="<%= dom_id(investment) %>_ballot"
-                class="small-12 medium-3 column text-center" data-equalizer-watch>
+                class="small-12 medium-3 column text-center"
+                <%= 'data-equalizer-watch' if feature?(:allow_images) && investment.image.present? %>>
                 <%= render partial: '/budgets/investments/ballot', locals: {
                   investment: investment,
                   investment_ids: investment_ids,
@@ -83,13 +88,14 @@
           </div>
         <% elsif investment.should_show_price? %>
           <div id="<%= dom_id(investment) %>_price"
-               class="supports small-12 medium-3 column text-center" data-equalizer-watch>
+               class="supports small-12 medium-3 column text-center"
+               <%= 'data-equalizer-watch' if feature?(:allow_images) && investment.image.present? %>>
             <p class="investment-project-amount margin-top">
               <%= investment.formatted_price %>
             </p>
           </div>
         <% else %>
-          <div data-equalizer-watch></div>
+          <div <%= 'data-equalizer-watch' if feature?(:allow_images) && investment.image.present? %>></div>
         <% end %>
 
       <% end %>
diff --git a/app/views/polls/_poll_group.html.erb b/app/views/polls/_poll_group.html.erb
index 93174e157..033aff23e 100644
--- a/app/views/polls/_poll_group.html.erb
+++ b/app/views/polls/_poll_group.html.erb
@@ -10,8 +10,6 @@
         <div class="image-container" data-equalizer-watch>
           <% if poll.image.present? %>
             <%= image_tag poll.image_url(:large), alt: poll.image.title %>
-          <% else %>
-            <div class="no-image"></div>
           <% end %>
         </div>
       </div>
diff --git a/app/views/proposals/_form.html.erb b/app/views/proposals/_form.html.erb
index 2390b62f6..6bf8c274a 100644
--- a/app/views/proposals/_form.html.erb
+++ b/app/views/proposals/_form.html.erb
@@ -46,9 +46,11 @@
       <%= f.text_field :external_url, placeholder: t("proposals.form.proposal_external_url"), label: false %>
     </div>
 
-    <div class="images small-12 column">
-      <%= render 'images/nested_image', imageable: @proposal, f: f %>
-    </div>
+    <% if feature?(:allow_images) %>
+      <div class="images small-12 column">
+        <%= render 'images/nested_image', imageable: @proposal, f: f %>
+      </div>
+    <% end %>
 
     <div class="documents small-12 column">
       <%= render 'documents/nested_documents', documentable: @proposal, f: f %>
diff --git a/app/views/proposals/_proposal.html.erb b/app/views/proposals/_proposal.html.erb
index 2f5c22c3c..9473984bb 100644
--- a/app/views/proposals/_proposal.html.erb
+++ b/app/views/proposals/_proposal.html.erb
@@ -1,21 +1,23 @@
 <div id="<%= dom_id(proposal) %>"
      class="proposal clear <%= ("successful" if proposal.total_votes > Proposal.votes_needed_for_success) %>"
      data-type="proposal">
-  <div class="panel with-image">
+  <div class="panel <%= ('with-image' if feature?(:allow_images) && proposal.image.present?) %>">
     <div class="icon-successful"></div>
-    <div class="row" data-equalizer>
 
-      <div class="small-12 medium-3 large-2 column text-center">
-        <div data-equalizer-watch>
-          <% if proposal.image.present? %>
+    <% if feature?(:allow_images) && proposal.image.present? %>
+      <div class="row" data-equalizer>
+
+        <div class="small-12 medium-3 large-2 column text-center">
+          <div data-equalizer-watch>
             <%= image_tag proposal.image_url(:thumb), alt: proposal.image.title %>
-          <% else %>
-            <div class="no-image"></div>
-          <% end %>
+          </div>
         </div>
-      </div>
 
-      <div class="small-12 medium-6 large-7 column">
+        <div class="small-12 medium-6 large-7 column">
+    <% else %>
+      <div class="row">
+        <div class="small-12 medium-9 column">
+      <% end %>
         <div class="proposal-content">
           <% cache [locale_and_user_status(proposal), 'index', proposal, proposal.author] do %>
             <h3><%= link_to proposal.title, namespaced_proposal_path(proposal) %></h3>
@@ -60,7 +62,9 @@
         </div>
       </div>
 
-      <div id="<%= dom_id(proposal) %>_votes" class="small-12 medium-3 column supports-container" data-equalizer-watch>
+      <div id="<%= dom_id(proposal) %>_votes"
+           class="small-12 medium-3 column supports-container"
+           <%= 'data-equalizer-watch' if feature?(:allow_images) && proposal.image.present? %>>
         <% if proposal.successful? %>
           <div class="padding text-center">