Merge pull request #1938 from consul/imageable-polish

Imageable polish

app/assets/fonts/icons.svg

@@ -62,4 +62,5 @@
 <glyph glyph-name="expand" unicode="&#48;" d="M26 168l-26-158c0-2 1-5 3-7 0 0 0 0 0 0 2-2 5-3 7-3l158 27c3 0 6 3 7 6 1 3 0 7-3 9l-30 31 82 82c4 4 4 9 0 13l-57 57c-3 3-9 3-12 0l-83-83-31 31c-2 2-5 3-9 2-3-1-5-4-6-7z m460 176l26 158c0 2-1 5-3 7 0 0 0 0 0 0-2 2-5 3-7 3l-158-27c-3 0-6-3-7-6-1-3 0-7 3-9l30-31-82-82c-4-4-4-9 0-13l57-57c3-3 9-3 12 0l83 83 31-31c2-2 5-3 9-2 3 1 5 4 6 7z"/>
 <glyph glyph-name="telegram" unicode="&#49;" d="M504 509c6-5 9-11 8-18l-73-439c-1-6-4-10-10-13-2-2-5-2-8-2-3 0-5 0-7 1l-130 53-69-84c-3-5-8-7-14-7-2 0-4 0-6 1-4 1-7 4-9 7-2 3-3 6-3 10l0 100 247 303-306-265-113 47c-7 2-10 7-11 15 0 8 3 14 9 17l476 274c2 2 5 3 9 3 4 0 7-1 10-3z"/>
 <glyph glyph-name="instagram" unicode="&#50;" d="M426 105l0 185-39 0c4-12 6-25 6-38 0-24-6-46-18-66-13-20-29-36-50-48-21-12-44-18-69-18-37 0-69 13-96 39-27 26-40 57-40 93 0 13 2 26 6 38l-41 0 0-185c0-5 2-10 5-13 4-3 8-5 13-5l305 0c5 0 9 2 13 5 3 3 5 8 5 13z m-81 152c0 23-9 44-26 60-18 17-38 25-63 25-24 0-45-8-62-25-17-16-26-37-26-60 0-24 9-44 26-61 17-16 38-25 62-25 25 0 45 9 63 25 17 17 26 37 26 61z m81 103l0 47c0 5-2 10-6 14-4 4-8 6-14 6l-50 0c-5 0-10-2-14-6-4-4-5-9-5-14l0-47c0-6 1-10 5-14 4-4 9-6 14-6l50 0c6 0 10 2 14 6 4 4 6 8 6 14z m49 59l0-326c0-16-5-29-16-40-11-11-24-16-40-16l-326 0c-16 0-29 5-40 16-11 11-16 24-16 40l0 326c0 16 5 29 16 40 11 11 24 16 40 16l326 0c16 0 29-5 40-16 11-11 16-24 16-40z"/>
+<glyph glyph-name="image" unicode="&#51;" d="M165 347c0-15-6-28-16-38-11-11-24-16-39-16-16 0-28 5-39 16-11 10-16 23-16 38 0 16 5 29 16 39 11 11 23 16 39 16 15 0 28-5 39-16 10-10 16-23 16-39z m292-109l0-128-402 0 0 55 91 91 46-46 146 147z m28 201l-458 0c-2 0-4-1-6-3-2-2-3-4-3-6l0-348c0-2 1-4 3-6 2-2 4-3 6-3l458 0c2 0 4 1 6 3 2 2 3 4 3 6l0 348c0 2-1 4-3 6-2 2-4 3-6 3z m45-9l0-348c0-12-4-23-13-32-9-9-20-13-32-13l-458 0c-12 0-23 4-32 13-9 9-13 20-13 32l0 348c0 12 4 23 13 32 9 9 20 13 32 13l458 0c12 0 23-4 32-13 9-9 13-20 13-32z"/>
 </font></defs></svg>

app/assets/stylesheets/icons.scss

@@ -97,10 +97,6 @@
   content: '\72';
 }
 
-.icon-documents::before {
-  content: '\68';
-}
-
 .icon-proposals::before {
   content: '\68';
 }
@@ -197,10 +193,6 @@
   content: '\53';
 }
 
-.icon-image::before {
-  content: '\68';
-}
-
 .icon-notification::before {
   content: '\6e';
 }
@@ -264,3 +256,7 @@
 .icon-instagram::before {
   content: '\32';
 }
+
+.icon-image::before {
+  content: '\33';
+}

app/assets/stylesheets/mixins.scss

@@ -64,8 +64,8 @@
 @mixin direct-uploads {
 
   .cached-image {
-    max-width: 150px;
-    max-height: 150px;
+    max-width: rem-calc(150);
+    max-height: rem-calc(150);
   }
 
   .progress-bar-placeholder {
@@ -78,15 +78,23 @@
 
     .document-attachment,
     .image-attachment {
-      padding-left:0;
+      padding-left: 0;
 
-      p{
+      p {
         margin-bottom: 0;
       }
     }
-    input.js-document-attachment,
-    input.js-image-attachment{
-      display: none;
+
+    .attachment-errors {
+
+      > .js-image-attachment,
+      > .js-document-attachment {
+        display: none;
+
+        ~ .error {
+          display: inline-block;
+        }
+      }
     }
   }
 

app/assets/stylesheets/participation.scss

@@ -255,7 +255,6 @@
   .icon-debates,
   .icon-proposals,
   .icon-budget,
-  .icon-documents,
   .icon-image {
     font-size: rem-calc(50);
     line-height: $line-height;
@@ -267,7 +266,6 @@
   }
 
   .icon-proposals,
-  .icon-documents,
   .icon-image {
     color: $proposals;
   }
@@ -312,12 +310,10 @@
 .budget-investment-new,
 .proposal-form,
 .proposal-edit,
-.new_poll_question,
-.edit_poll_question {
+.poll-question-form {
   @include direct-uploads;
 }
 
-
 // 03. Show participation
 // ----------------------
 
@@ -358,8 +354,7 @@
     width: rem-calc(48);
   }
 
-  .edit-debate,
-  .edit-proposal {
+  .edit-debate {
     margin-bottom: 0;
   }
 
@@ -661,20 +656,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 {
@@ -683,19 +675,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;
     }
@@ -705,7 +695,7 @@
     }
 
     .column:last-child:not(:first-child) {
-      padding-top: 0.75rem;
+      padding-top: $line-height / 2;
     }
 
     img {

app/views/admin/poll/questions/edit.html.erb

@@ -2,4 +2,6 @@
 
 <h2><%= t("admin.questions.edit.title") %></h2>
 
-<%= render "form", form_url: admin_question_path(@question) %>
+<div class="poll-question-form">
+  <%= render "form", form_url: admin_question_path(@question) %>
+</div>

app/views/admin/poll/questions/new.html.erb

@@ -2,4 +2,6 @@
 
 <h2><%= t("admin.questions.new.title") %></h2>
 
-<%= render "form", form_url: admin_questions_path %>
+<div class="poll-question-form">
+  <%= render "form", form_url: admin_questions_path %>
+</div>

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,11 +83,13 @@
           </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>
           </div>
+        <% else %>
+          <div data-equalizer-watch></div>
         <% end %>
 
       <% end %>

app/views/documents/_nested_documents.html.erb

@@ -20,7 +20,4 @@
   <div id="max-documents-notice" class="max-documents-notice callout warning text-center <%= "hide" unless max_documents_allowed?(documentable) %>">
     <%= t "documents.max_documents_allowed_reached_html" %>
   </div>
-
-  <hr>
-
-</div>
+</div>

app/views/images/_image_fields.html.erb

@@ -28,4 +28,5 @@
     <div class="progress-bar-placeholder"><div class="loading-bar"></div></div>
   </div>
 
+  <hr>
 </div>

app/views/images/_nested_image.html.erb

@@ -1,12 +1,10 @@
-<div>
-  <%= f.label :image, t("images.form.title") %>
-  <p class="help-text"><%= imageables_note(imageable) %></p>
+<%= f.label :image, t("images.form.title") %>
+<p class="help-text"><%= imageables_note(imageable) %></p>
 
-  <div id="nested-image">
-    <%= f.fields_for :image do |image_builder| %>
-      <%= render 'images/image_fields', f: image_builder, imageable: imageable %>
-    <% end %>
-  </div>
+<div id="nested-image">
+  <%= f.fields_for :image do |image_builder| %>
+    <%= render 'images/image_fields', f: image_builder, imageable: imageable %>
+  <% end %>
 </div>
 
 <%= link_to_add_association t('images.form.add_new_image'), f, :image,
@@ -21,5 +19,3 @@
                               association_insertion_node: "#nested-image",
                               association_insertion_method: "append"
                             } %>
-
-<hr>

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">
 

app/views/proposals/show.html.erb

@@ -117,6 +117,13 @@
           <h2><%= t("proposals.show.author") %></h2>
           <div class="show-actions-menu">
 
+            <% if current_editable?(@proposal) %>
+              <%= link_to edit_proposal_path(@proposal), class: 'button hollow expanded' do %>
+                          <span class="icon-edit"></span>
+                          <%= t("proposals.show.edit_proposal_link") %>
+              <% end %>
+            <% end %>
+
             <% if author_of_proposal?(@proposal) %>
               <%= link_to new_proposal_notification_path(proposal_id: @proposal.id),
                           class: 'button hollow expanded' do %>
@@ -128,20 +135,13 @@
             <% if can_destroy_image?(@proposal) %>
               <%= link_to image_path(@proposal.image, from: request.url),
                           method: :delete,
-                          class: 'button hollow expanded',
+                          class: 'button hollow alert expanded',
                           data: { confirm: t('images.actions.destroy.confirm') } do %>
-                          <span class="icon-document"></span>
+                          <span class="icon-image"></span>
                           <%= t("images.remove_image") %>
               <% end %>
             <% end %>
 
-            <% if current_editable?(@proposal) %>
-              <%= link_to edit_proposal_path(@proposal), class: 'edit-proposal button hollow expanded' do %>
-                          <span class="icon-edit"></span>
-                          <%= t("proposals.show.edit_proposal_link") %>
-              <% end %>
-            <% end %>
-
           </div>
         <% end %>