j3d1/toolshed
2
1
Fork 0
Code Issues 9 Pull requests 1 Projects Releases Packages Wiki Activity

stash

Browse source
This commit is contained in:
j3d1 2026-09-06 03:00:52 +02:00
parent d0c9b22bb5
commit 6c973b9fc2
1 changed files with 54 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

61
frontend/src/views/Files.vue
View file

@ -8,12 +8,14 @@
<h5 class="card-title">Images</h5> <h5 class="card-title">Images</h5>
</div> </div>
<div class="card-body"> <div class="card-body">
<span v-for="file in only_images(files)" :key="file.id"> <div class="masonry-grid">
<deletable-wrapper confirm-message="Delete this file? This cannot be undone." @delete="deleteFile(file)"> <div class="masonry-item" v-for="file in only_images(files)" :key="file.id">
<authenticated-image :src="thumbnailPathForHash(file.hash)" :owner="file.owner" <deletable-wrapper confirm-message="Delete this file? This cannot be undone." @delete="deleteFile(file)">
class="img-thumbnail"/> <authenticated-image :src="thumbnailPathForHash(file.hash)" :owner="file.owner"
</deletable-wrapper> class="img-preview-masonry"/>
</span> </deletable-wrapper>
</div>
</div>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
@ -70,6 +72,51 @@ export default {
} }
</script> </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> </style>