Use different image versions on responsive sizes

app/assets/stylesheets/participation.scss

@@ -653,6 +653,44 @@
   }
 }
 
+.budget-investments-list {
+  .budget-investment{
+    @include breakpoint(medium) {
+      .panel{
+        padding:0 0.75rem 0 0;
+      }
+      h3{
+        font-size: 1.4rem;
+      }
+      .column:first-child{
+        overflow: hidden;
+      }
+      .column:nth-child(2){
+        float: left;
+      }
+      .column:last-child:not(:first-child){
+        padding-top:0.75rem;
+      }
+      img{
+        max-width: 12rem;
+      }
+      .budget-investment-content{
+        ul{
+          margin-bottom:0;
+        }
+      }
+    }
+    @include breakpoint(small) {
+      h3{
+        font-size: 1.3rem;
+      }
+      .column:first-child{
+        text-align: center;
+      }
+    }
+  }
+}
+
 .debate,
 .proposal,
 .investment-project,

app/models/budget/investment.rb

@@ -17,8 +17,7 @@ class Budget
     acts_as_paranoid column: :hidden_at
     include ActsAsParanoidAliases
     
-    # TODO: ROCK&ROR: Set image versions sizes acordingly to enhance page load
+    has_attached_file :image, styles: { large: "600x600>", medium: "300x300#", thumb: "140x245#" }
-    has_attached_file :image, styles: { large: "600x600>", medium: "300x300>", thumb: "100x100>" }
 
     belongs_to :author, -> { with_hidden }, class_name: 'User', foreign_key: 'author_id'
     belongs_to :heading

app/views/budgets/investments/_investment.html.erb

@@ -1,27 +1,27 @@
 <div id="<%= dom_id(investment) %>" class="budget-investment clear">
   <div class="panel">
     <div class="row">
-
+      <div class="small-12 medium-3 large-2 column">
-      <!-- TODO: ROCK&ROR: Temporal markup. Place it as needed to reflect mockup -->
-      <div class="small-2 medium-2 large-2 column">
         <% if investment.image.exists? %>
-          <%= image_tag investment.image.url(:thumb),
+          <picture>
-                        title: investment.image_title,
+            <source srcset="<%= investment.image.url(:medium) %>"
-                        alt: investment.image_title, class: "th" %>
+                    alt="<%= investment.image_description %>"
+                    title= "<%= investment.image_description %>"
+                    media="(max-width: 640px)">
+            <img    srcset="<%= investment.image.url(:thumb) %>"
+                    alt="<%= investment.image_description %>"
+                    title="<%= investment.image_description %>">
+          </picture>
         <% else %>
-          <!-- TODO: ROCK&ROR: Create colored placeholder or default image -->
+
         <% end %>
       </div>
-
+      <div class="small-12 medium-6 large-7 column">
-      <div class="small-10 medium-7 large-10 column">
         <div class="budget-investment-content">
-
           <% cache [locale_and_user_status(investment), 'index', investment, investment.author] do %>
             <h3><%= link_to investment.title, namespaced_budget_investment_path(investment) %></h3>
             <p class="investment-project-info">
-
               <%= l investment.created_at.to_date %>
-
               <% if investment.author.hidden? || investment.author.erased? %>
                 <span class="bullet">&nbsp;&bull;&nbsp;</span>
                 <span class="author">
@@ -39,7 +39,6 @@
                   </span>
                 <% end %>
               <% end %>
-
               <span class="bullet">&nbsp;&bull;&nbsp;</span>
               <%= investment.heading.name %>
             </p>
@@ -53,7 +52,6 @@
       </div>
 
       <% unless investment.unfeasible? %>
-
         <% if investment.should_show_votes? %>
           <div id="<%= dom_id(investment) %>_votes"
                class="small-12 medium-3 column text-center">
@@ -90,7 +88,6 @@
             </p>
           </div>
         <% end %>
-
       <% end %>
     </div>
   </div>