fix(creator): the album-view was not streching correctly on resize
This commit is contained in:
@@ -62,6 +62,16 @@ const displayedImages = computed(() => {
|
|||||||
}
|
}
|
||||||
return images.slice(0, 3); // 3 images on smaller screens
|
return images.slice(0, 3); // 3 images on smaller screens
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Add computed property for grid columns based on number of images
|
||||||
|
const gridColumns = computed(() => {
|
||||||
|
const count = displayedImages.value.length;
|
||||||
|
if (count === 1) return '1fr';
|
||||||
|
if (count === 2) return 'repeat(2, 1fr)';
|
||||||
|
if (count === 3) return 'repeat(3, 1fr)';
|
||||||
|
if (count === 4) return 'repeat(4, 1fr)';
|
||||||
|
return 'repeat(5, 1fr)';
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
@@ -71,8 +81,8 @@ const displayedImages = computed(() => {
|
|||||||
|
|
||||||
.image-grid {
|
.image-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(3, 1fr);
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
grid-template-columns: v-bind(gridColumns);
|
||||||
}
|
}
|
||||||
|
|
||||||
.image-wrapper {
|
.image-wrapper {
|
||||||
@@ -88,23 +98,7 @@ const displayedImages = computed(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* Responsive adjustments */
|
/* Responsive adjustments */
|
||||||
@media (min-width: 768px) {
|
|
||||||
.image-grid {
|
|
||||||
grid-template-columns: repeat(4, 1fr);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1024px) {
|
|
||||||
.image-grid {
|
|
||||||
grid-template-columns: repeat(5, 1fr);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 640px) {
|
|
||||||
.image-grid {
|
|
||||||
grid-template-columns: repeat(3, 1fr);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<i18n>
|
<i18n>
|
||||||
|
|||||||
Reference in New Issue
Block a user