danbarber/my-images
1
0
Fork 0
mirror of https://github.com/danbee/my-images synced 2025-03-04 08:49:05 +00:00
Code Issues Releases Wiki Activity

Tidy up image display using grid

Browse Source
This commit is contained in:
Daniel Barber 2018-08-07 18:46:48 -04:00
parent 021b93aa21
commit 921788ba31
Signed by: danbarber
GPG Key ID: 931D8112E0103DD8
2 changed files with 7 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
app/assets/stylesheets/images.css.sass
View File

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

2
app/views/images/index.html.erb
View File

@ -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 %>