sfu-dhil / wilde

eXist/XQuery app for detecting copying in a collection of XHTML documents.
GNU General Public License v3.0
2 stars 9 forks source link

Image tiles should be all the same height #26

Closed joeytakeda closed 4 years ago

joeytakeda commented 4 years ago

Is your feature request related to a problem? Please describe. The height of items in the image gallery are inconsistent; the height of each row is always the maximum necessary for the longest item.

Describe the solution you'd like

I think the height of each item should match the longest, rather than having white space on the top and bottom. This is achievable by adding the following CSS (generated using FF Style Change inspector):


/* style.css | https://dhil.lib.sfu.ca/wilde/resources/css/style.css */

#content .row {
  display: flex;
  flex-wrap: wrap;
}

/* Inline #2 | https://dhil.lib.sfu.ca/wilde/gallery.html */

.col-xs-12.col-sm-4 {
  display: flex;
}

/* bootstrap.min.css | https://dhil.lib.sfu.ca/wilde/resources/lib/bootswatch/lumen/bootstrap.min.css */

.thumbnail {
  width: 100%; /*Necessary for making the items full width in small device mode*/
}

Additional context

Before:

Screen Shot 2020-01-06 at 12 24 02 PM

After: Screen Shot 2020-01-06 at 12 31 08 PM