diff --git a/capsule-prototype/css/mosaic.css b/capsule-prototype/css/mosaic.css index 1fe9387762415d786d5859acabc579a22d464d0a..98ef4db233a70cd38a78844ad7f307bc54844aa7 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 b68acc54ea984ad045618037945b11a2d2f64597..b400705a130baf693dec222c2601543a7f13a705 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'));