Added style to the button to upload image into budgets/investments/new. Refactor some css into partecipation.scss for pass scss-lint.

app/assets/stylesheets/mixins.scss

@@ -30,3 +30,17 @@
     }
   }
 }
+
+@mixin image-upload {
+  .image-upload {
+    .button,
+    p {
+      float: left;
+    }
+
+    p {
+      margin-left: 1rem;
+      margin-top: 0.8rem;
+    }
+  }
+}

app/assets/stylesheets/participation.scss

@@ -654,55 +654,70 @@
 }
 
 .budget-investments-list {
-  .budget-investment{
+  .budget-investment {
-    .no-image{
+    .no-image {
       background: $brand;
     }
-    @include breakpoint(medium) {
+  }
-      .panel{
+}
-        padding:0 0.75rem 0 0;
+
-        .no-image{
+.budget-investments-list .budget-investment {
-          height: 245px;
+
-          width: 140px;
+  @include breakpoint(small) {
-        }
+    .no-image {
-      }
+      width: 100%;
-      h3{
+      max-width: 300px;
-        font-size: 1.4rem;
+      margin: 0 auto;
-      }
+    }
-      .column:first-child{
+
-        overflow: hidden;
+    .no-image::before {
-      }
+      content: '';
-      .column:nth-child(2){
+      display: block;
-        float: left;
+      padding-top: 100%;
-      }
+    }
-      .column:last-child:not(:first-child){
+
-        padding-top:0.75rem;
+    h3 {
-      }
+      font-size: 1.3rem;
-      img{
+    }
-        max-width: 12rem;
+
-      }
+    .column:first-child {
-      .budget-investment-content{
+      text-align: center;
-        ul{
+    }
-          margin-bottom:0;
+  }
-        }
+
+  @include breakpoint(medium) {
+    .panel {
+      padding: 0 0.75rem 0 0;
+
+      .no-image {
+        height: 245px;
+        width: 140px;
       }
     }
-    @include breakpoint(small) {
+
-      .no-image{
+    h3 {
-        width: 100%;
+      font-size: 1.4rem;
-        max-width: 300px;
+    }
-        margin:0 auto;
+
-        &:before {
+    .column:first-child {
-          content: "";
+      overflow: hidden;
-        	display: block;
+    }
-        	padding-top: 100%;
+
-        }
+    .column:nth-child(2) {
-      }
+      float: left;
-      h3{
+    }
-        font-size: 1.3rem;
+
-      }
+    .column:last-child:not(:first-child) {
-      .column:first-child{
+      padding-top: 0.75rem;
-        text-align: center;
+    }
+
+    img {
+      max-width: 12rem;
+    }
+
+    .budget-investment-content {
+      ul {
+        margin-bottom: 0;
       }
     }
   }
@@ -927,32 +942,33 @@
   }
 }
 
-.budget-investment-show{
+.budget-investment-show {
-  figure{
+
+  figure {
     margin: 1em 0 0;
     display: inline-block;
-    figcaption{
+
+    figcaption {
       font-size: $small-font-size;
-      margin-top:1rem;
+      margin-top: 1rem;
     }
   }
 }
 
-.edit_budget_investment{
+.edit_budget_investment {
-  .note-marked p{
+
-    margin-bottom:0;
+  @include image-upload;
-  }
+
-  .image-upload{
+  .note-marked p {
-    .button, p{
+    margin-bottom: 0;
-      float: left;
-    }
-    p{
-      margin-left:1rem;
-      margin-top: 0.8rem;
-    }
   }
 }
 
+.new_budget_investment {
+
+  @include image-upload;
+}
+
 .investment-project-show .supports,
 .budget-investment-show .supports {
   border: 0;

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

@@ -54,7 +54,12 @@
     </div>
 
     <div class="small-12 column">
-      <%= f.file_field :image, accept: 'image/jpeg' %>
+      <div class="image-upload">
+        <%= f.file_field :image, accept: 'image/jpeg', label: false, class:'show-for-sr' %>
+        <br>
+        <%= f.label :image, t("images.upload_image"), class:'button' %>
+        <p><%= investment_image_file_name(@investment) %></p>
+      </div>
     </div>
 
     <div class="small-12 column">