andi/perfdb
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Activity

use a grid to place the gallery items

Browse Source 
This has the advantage, that the height of each element in a row is the
same.
This commit is contained in:
Andreas Huber
2018-05-19 08:24:52 +02:00
parent 47e32bb6b1
commit f073ea98d0
2 changed files with 18 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
pdb-ui/src/main/resources/resources/css/design.css
View File

@@ -185,25 +185,26 @@ textarea {
top: 0; top: 0;
} }
.gallery-item { .card-grid-300 {
width: 300px; display: grid;
height: 200px; grid-template-columns: repeat(auto-fit, minmax(300px, 300px));
margin: 10px; grid-gap: 10px;
float: left; padding: 10px;
background: white;
box-shadow: 5px 5px 10px 0px #aaa;
position: relative;
} }
.gallery-item img { .gallery-item {
max-width: 300px; display: flex;
max-height: 200px; flex-flow: column;
display:block; /* removes 3 pixels extra height around the image */ background: white;
box-shadow: 5px 5px 10px 0px #aaa;
}
.gallery-item a {
align-self: center;
} }
.gallery-item .fieldValue{ .gallery-item .fieldValue{
position: absolute; word-break: break-all;
bottom: 0;
} }
#result-view-gallery-image-viewer { #result-view-gallery-image-viewer {

4
pdb-ui/src/main/resources/resources/js/ui.js
View File

@@ -225,7 +225,9 @@ Vue.component('result-view-gallery', {
template: ` template: `
<div id="result-view-gallery" <div id="result-view-gallery"
v-if="gallery.tiles"> v-if="gallery.tiles">
<div v-show="!gallery.image"> <div
class="card-grid-300"
v-show="!gallery.image">
<result-view-gallery-item <result-view-gallery-item
v-for="item in gallery.tiles" v-for="item in gallery.tiles"
v-bind:key="item.fieldValue" v-bind:key="item.fieldValue"