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