From 921788ba31dc54138c78f52487e8240567393bfb Mon Sep 17 00:00:00 2001
From: Dan Barber <github@danbarber.me>
Date: Tue, 7 Aug 2018 18:46:48 -0400
Subject: [PATCH] Tidy up image display using grid

---
 app/assets/stylesheets/images.css.sass | 16 ++++++----------
 app/views/images/index.html.erb        |  2 +-
 2 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/app/assets/stylesheets/images.css.sass b/app/assets/stylesheets/images.css.sass
index 1713b5e..c1714cb 100644
--- a/app/assets/stylesheets/images.css.sass
+++ b/app/assets/stylesheets/images.css.sass
@@ -5,20 +5,16 @@
 ul.images
   list-style: none
   padding-left: 0
-  display: flex
-  flex-wrap: wrap
+  display: grid
+  grid-template-columns: repeat(6, 1fr)
+  grid-gap: 0.75rem
   justify-content: space-between
 
-  display: -webkit-flex
-  -webkit-flex-wrap: wrap
-  -webkit-justify-content: space-between
-
   li
-    outline: 1px solid red
     margin-bottom: 1em
 
   img
-    max-width: 100px
-    width: 100%
-    border: 1px solid rgba(0, 0, 0, 0.2)
+    max-width: calc(100% - 0.5rem)
+    box-shadow: 0 0 2px rgba(0, 0, 0, 0.2)
+    border-radius: 2px
     padding: 0.25rem
diff --git a/app/views/images/index.html.erb b/app/views/images/index.html.erb
index 427eda4..507fc82 100644
--- a/app/views/images/index.html.erb
+++ b/app/views/images/index.html.erb
@@ -3,7 +3,7 @@
 <ul class="images">
   <% @images.each do |image| %>
     <li>
-      <%= link_to image_tag(image.image.thumb('100x100#').url), image.image.url, class: :image %><br>
+      <%= link_to image_tag(image.image.thumb('200x200#').url), image.image.url, class: :image %><br>
       <%= link_to 'Delete', user_image_path(image), method: :delete, data: { confirm: 'Are you sure?' } %>
     </li>
   <% end %>