From bc821416e21142d8c4c44a45f1d70622b2d2faa0 Mon Sep 17 00:00:00 2001 From: Sebastien Curt <sebastien.curt@tetras-libre.fr> Date: Tue, 3 May 2022 11:10:08 +0200 Subject: [PATCH] mosaic UI improvement : align images within the grid --- capsule-prototype/css/mosaic.css | 20 ++++++++++++++++---- capsule-prototype/js/MosaicPanelWidget.js | 8 +++++++- 2 files changed, 23 insertions(+), 5 deletions(-) diff --git a/capsule-prototype/css/mosaic.css b/capsule-prototype/css/mosaic.css index 1fe9387..98ef4db 100644 --- a/capsule-prototype/css/mosaic.css +++ b/capsule-prototype/css/mosaic.css @@ -3,6 +3,9 @@ --card-height: 150px; --card-width: 150px; + --card-image-container-width: var(--card-width); + --card-image-container-height: calc(var(--card-height) - 50px); + --filter-width: 80px; --filter-height: 25px; @@ -23,7 +26,6 @@ display: flex; flex-direction: row; flex: 1; - flex-wrap: wrap; } @@ -77,11 +79,21 @@ color: #ebecec; } -.mosaic_item img { +.mosaic_item_thumbnail_container { + width: var(--card-image-container-width); + height: var(--card-image-container-height); + display: flex; + align-items: center; + align-content: center; + justify-content: center; + padding: var(--base-spacing); +} + +.mosaic_item_thumbnail_container_img { width: 80%; height: auto; - max-height: var(--card-height); - padding: var(--base-spacing); + max-height: var(--card-image-container-height); + max-width: var(--card-image-container-width); } .mosaic_filter_item:not(.mosaic_filter_item_all), .mosaic_category > h2 { diff --git a/capsule-prototype/js/MosaicPanelWidget.js b/capsule-prototype/js/MosaicPanelWidget.js index b68acc5..b400705 100644 --- a/capsule-prototype/js/MosaicPanelWidget.js +++ b/capsule-prototype/js/MosaicPanelWidget.js @@ -53,7 +53,13 @@ let div = $('<div/>').addClass('mosaic_item mosaic_button').on('click', function () { tagOrDoc.openPopupEdit(); }); - div.append($('<img/>').attr('src', url).attr('onerror', "this.src='../shared/css/images/img-document.png';")); + let divImageContainer = $('<div>').addClass('mosaic_item_thumbnail_container'); + divImageContainer + .append($('<img/>') + .addClass('mosaic_item_thumbnail_container_img') + .attr('src', url) + .attr('onerror', "this.src='../shared/css/images/img-document.png';")); + div.append(divImageContainer); div.append($('<span/>').addClass('caption').text(name)); div.attr('data-rekall-labels', ''); div.attr('data-rekall-labels', tagOrDoc.getMetadata('Rekall->Labels')); -- GitLab