stash

frontend/src/views/Files.vue

@@ -8,12 +8,14 @@
                         <h5 class="card-title">Images</h5>
                     </div>
                     <div class="card-body">
-                        <span v-for="file in only_images(files)" :key="file.id">
+                        <div class="masonry-grid">
+                            <div class="masonry-item" v-for="file in only_images(files)" :key="file.id">
                                 <deletable-wrapper confirm-message="Delete this file? This cannot be undone." @delete="deleteFile(file)">
                                     <authenticated-image :src="thumbnailPathForHash(file.hash)" :owner="file.owner"
-                                                     class="img-thumbnail"/>
+                                                         class="img-preview-masonry"/>
                                 </deletable-wrapper>
-                        </span>
+                            </div>
+                        </div>
                     </div>
                 </div>
                 <div class="card">
@@ -70,6 +72,51 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+@import "../scss/breakpoints";
 
+.img-preview-masonry {
+    width: 100%;
+    height: auto;
+    object-fit: cover;
+}
+
+.masonry-item :deep(span) {
+    display: block !important;
+    width: 100%;
+}
+
+.masonry-grid {
+    column-count: 2;
+    column-gap: 1rem;
+}
+
+.masonry-item {
+    break-inside: avoid;
+    margin-bottom: 1rem;
+}
+
+@include media-breakpoint-up(md) {
+    .masonry-grid {
+        column-count: 3;
+    }
+}
+
+@include media-breakpoint-up(lg) {
+    .masonry-grid {
+        column-count: 4;
+    }
+}
+
+@include media-breakpoint-up(xl) {
+    .masonry-grid {
+        column-count: 6;
+    }
+}
+
+@include media-breakpoint-up(xxl) {
+    .masonry-grid {
+        column-count: 12;
+    }
+}
 </style>