Skip to content
Snippets Groups Projects
Commit bc821416 authored by Sebastien's avatar Sebastien
Browse files

mosaic UI improvement : align images within the grid

parent b52e456f
Branches
Tags
1 merge request!98refresh the mosaic on annotation modification
Pipeline #1089 passed
...@@ -3,6 +3,9 @@ ...@@ -3,6 +3,9 @@
--card-height: 150px; --card-height: 150px;
--card-width: 150px; --card-width: 150px;
--card-image-container-width: var(--card-width);
--card-image-container-height: calc(var(--card-height) - 50px);
--filter-width: 80px; --filter-width: 80px;
--filter-height: 25px; --filter-height: 25px;
...@@ -23,7 +26,6 @@ ...@@ -23,7 +26,6 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex: 1; flex: 1;
flex-wrap: wrap; flex-wrap: wrap;
} }
...@@ -77,11 +79,21 @@ ...@@ -77,11 +79,21 @@
color: #ebecec; 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%; width: 80%;
height: auto; height: auto;
max-height: var(--card-height); max-height: var(--card-image-container-height);
padding: var(--base-spacing); max-width: var(--card-image-container-width);
} }
.mosaic_filter_item:not(.mosaic_filter_item_all), .mosaic_category > h2 { .mosaic_filter_item:not(.mosaic_filter_item_all), .mosaic_category > h2 {
......
...@@ -53,7 +53,13 @@ ...@@ -53,7 +53,13 @@
let div = $('<div/>').addClass('mosaic_item mosaic_button').on('click', function () { let div = $('<div/>').addClass('mosaic_item mosaic_button').on('click', function () {
tagOrDoc.openPopupEdit(); 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.append($('<span/>').addClass('caption').text(name));
div.attr('data-rekall-labels', ''); div.attr('data-rekall-labels', '');
div.attr('data-rekall-labels', tagOrDoc.getMetadata('Rekall->Labels')); div.attr('data-rekall-labels', tagOrDoc.getMetadata('Rekall->Labels'));
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment