Nicer grid view

This commit is contained in:
Christoph Haas 2020-11-01 23:25:11 +01:00
parent 6b18b057f8
commit bd08afdede
2 changed files with 34 additions and 3 deletions

View file

@ -259,7 +259,7 @@ div.thumb-height
.grid-thumbnail
{
// Pretend that all thumbnails are 120 pixels high to align the captions properly
height: 130px;
height: 260px;
}
// Avoid painting links to detail packages in the primary color
@ -539,3 +539,34 @@ a.black
animation-delay: 4s;
animation-fill-mode: both;
}
/* Grid view */
.pkgcard {
.image {
height: 260px;
// width: 100%;
background: #e0e0e0;
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
// display: table-cell;
// vertical-align: middle;
margin-left: auto;
margin-right: auto;
}
.text {
padding: 10px;
text-align: center;
}
.pkgname {
font-size: 120%;
padding: 10px;
}
// width: 100%;
margin-bottom: 20px;
display: table;
background: #ffffff;
border: 1px solid #e0e0e0;
padding: 5px;
}

View file

@ -12,9 +12,9 @@
.grid-x
.small-9.large-10.cell
- if @packages.length>0
.grid-x.grid-margin-x.small-up-1.medium-up-3.large-up-4
.grid-x.grid-margin-x.small-up-1.medium-up-2.large-up-3 data-equalizer=true data-equalize-on="medium"
- @packages.all.each do |pkg|
.cell
.cell.pkgcard data-equalizer-watch=true
= render partial: 'packages/grid_thumbnail', locals: { pkg: pkg }
- else