Use grid layout for thumbnail view wrapper

The current float-based layout for image thumbnails results in irregular gaps due to the variability in image caption height.
specify · Feb 6, 2024 · d628eac · d628eac
1 parent 17a38a1
commit d628eac
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 0 deletions.
diff --git a/PortalApp/app/view/ThumbnailView.js b/PortalApp/app/view/ThumbnailView.js
@@ -28,6 +28,7 @@ Ext.define('SpWebPortal.view.ThumbnailView', {
     extend: 'Ext.view.View',
     xtype: 'spthumbnail',
     alias: 'widget.thumbnail',
+    cls: 'tv-wrap',
 
     //localizable text...
     emptyText: 'No images to display',

diff --git a/PortalApp/resources/css/thumb-view.css b/PortalApp/resources/css/thumb-view.css
@@ -95,3 +95,8 @@
     padding: 0.5rem 0.5rem 1rem;
     display: table-cell;
 }
+
+.tv-wrap {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, 207px);
+}