Update attachemnts css (#1700)

app/assets/stylesheets/constants.scss

@@ -494,3 +494,16 @@ $state-danger-border: adjust-hue(darken($state-danger-bg, 5%), -10);
 // $dl-horizontal-offset: $component-offset-horizontal;
 // $dl-horizontal-breakpoint: $grid-float-breakpoint;
 // $hr-border: $gray-lighter;
+//
+//
+//
+// // Material design - https://material.io/design/
+//
+// Card style
+$md-color-shadow-light: rgba(0, 0, 0, .12);
+$md-color-shadow-dark: rgba(0, 0, 0, .24);
+
+$md-shadow: 0 1px 3px $md-color-shadow-light, 0 1px 2px $md-color-shadow-dark;
+$md-shadow-hover: 0 14px 28px $md-color-shadow-dark, 0 10px 10px $md-color-shadow-dark;
+
+$md-transaction: all .4s cubic-bezier(.25, .8, .25, 1);

app/assets/stylesheets/mixins.scss

@@ -62,3 +62,14 @@
   transition-property: transform;
   @include rotate($degrees);
 }
+
+
+// Material design mixins
+
+@mixin md-card-style {
+  background-color: $color-white;
+  border: 1px solid $color-concrete;
+  border-radius: 5px;
+  box-shadow: $md-shadow;
+  transition: $md-transaction;
+}

app/assets/stylesheets/steps.scss

@@ -7,6 +7,7 @@
 // scss-lint:disable ImportantRule
 
 @import "constants";
+@import "mixins";
 
 #new_step,
 .panel-step-attachment {
@@ -89,18 +90,22 @@
 }
 
 .attacments {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-evenly;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+
+  .pseudo-attachment-container {
+    display: flex;
+    justify-content: center;
+  }
 }
 
 .attachment-placeholder {
-  background-color: $color-white;
-  border-radius: 5px;
+  @include md-card-style;
   color: $color-silver-chalice;
-  height: 277px;
-  margin: 3px;
-  width: 216px;
+  height: 280px;
+  margin: 8px;
+  text-align: center;
+  width: 220px;
 
   a {
     color: inherit;
@@ -111,19 +116,20 @@
   }
 
   &:hover {
-    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .18);
+    box-shadow: $md-shadow-hover;
   }
 
   .attachment-thumbnail {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .15);
+    display: inline-block;
     height: 160px;
-    margin: 16px auto 5px;
+    margin: 16px 10px 5px;
     overflow: hidden;
     text-align: center;
-    width: 113px;
 
     img {
+      border-radius: 5px;
       max-height: 100%;
+      max-width: 100%;
     }
 
     i.fas {
@@ -160,7 +166,7 @@
   }
 
   .remove-icon {
-    bottom: 10px;
+    bottom: 15px;
     position: relative;
     right: 10px;
   }

app/views/steps/attachments/_item.html.erb

@@ -1,4 +1,5 @@
-<%= link_to download_asset_path(asset),
+<div class="pseudo-attachment-container">
+    <%= link_to download_asset_path(asset),
             class: 'file-preview-link',
             id: "modal_link#{asset.id}",
             style: "order: #{ assets_count - i }",
@@ -10,6 +11,7 @@
                     'order-new': assets_count - i,
             } do %>
 
-  <%= render partial: 'steps/attachments/placeholder.html.erb',
+    <%= render partial: 'steps/attachments/placeholder.html.erb',
              locals: { edit_page: false, asset: asset } %>
-<% end %>
+    <% end %>
+</div>