gorb/frontend
4
0
Fork 0
Code Issues 15 Pull requests 8 Projects Releases Packages 1 Wiki Activity Actions

fix(ui): use css instead of javascript to prevent cutting off media
All checks were successful
ci/woodpecker/push/build-and-publish Pipeline was successful
Details
ci/woodpecker/pr/build-and-publish Pipeline was successful
Details

Browse source
This commit is contained in:
Twig 2025-08-11 23:01:28 +02:00
parent 01423951bc
commit 53ec803f2c
Signed by: twig
SSH key fingerprint: SHA256:nBO+OwpTkd8LYhe38PIqdxmDvkIg9Vw2EbrRZM97dkU
2 changed files with 8 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

36
components/MessageMedia.vue
View file

@ -1,6 +1,9 @@
<template>
<div ref="mediaContainer" class="media-container">
<NuxtImg v-for="link of props.links" class="media-item" :src="link" @click.prevent="createModal(link)" @load="imagesLoaded++" />
<div class="media-container">
<NuxtImg v-for="link of props.links"
class="media-item"
:src="link"
@click.prevent="createModal(link)" />
</div>
</template>
@ -8,26 +11,8 @@
import { ModalBase } from '#components';
import { render } from 'vue';
const props = defineProps<{ links: string[] }>();
const mediaContainer = ref<HTMLDivElement>();
const imagesLoaded = ref(0);
watch(imagesLoaded, () => {
if (imagesLoaded.value < props.links.length) return;
const messageDataContainer = mediaContainer.value?.closest(".message-data");
const messagesContainer = document.getElementById("messages");
if (messageDataContainer && messagesContainer && mediaContainer.value) {
const mediaRect = messageDataContainer.getBoundingClientRect();
const messagesRect = messagesContainer.getBoundingClientRect();
if (mediaRect.right > messagesRect.right) {
mediaContainer.value.style.flexDirection = "column";
}
}
});
function createModal(link: string) {
const div = document.createElement("div");
const modal = h(ModalBase, {
@ -52,20 +37,13 @@ function createModal(link: string) {
.media-container {
display: flex;
grid-column: 2;
grid-row: 3;
flex-wrap: wrap;
gap: .2rem;
}
.grouped-message .media-container {
display: flex;
grid-column: 2;
grid-row: 2;
max-width: 100%;
}
.media-item {
cursor: pointer;
max-width: 15dvw;
}
</style>