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

2
components/Message.vue
View file

@ -55,7 +55,7 @@
</div> </div>
<div class="message-data"> <div class="message-data">
<div class="message-text" :class="$style['message-text']" v-html="sanitized" :hidden="hideText" tabindex="0"></div> <div class="message-text" :class="$style['message-text']" v-html="sanitized" :hidden="hideText" tabindex="0"></div>
<MessageMedia v-if="mediaLinks.length" :links="mediaLinks" /> <MessageMedia v-if="mediaLinks.length" :links="mediaLinks"/>
</div> </div>
</div> </div>
</template> </template>

36
components/MessageMedia.vue
View file

@ -1,6 +1,9 @@
<template> <template>
<div ref="mediaContainer" class="media-container"> <div class="media-container">
<NuxtImg v-for="link of props.links" class="media-item" :src="link" @click.prevent="createModal(link)" @load="imagesLoaded++" /> <NuxtImg v-for="link of props.links"
class="media-item"
:src="link"
@click.prevent="createModal(link)" />
</div> </div>
</template> </template>
@ -8,26 +11,8 @@
import { ModalBase } from '#components'; import { ModalBase } from '#components';
import { render } from 'vue'; import { render } from 'vue';
const props = defineProps<{ links: string[] }>(); 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) { function createModal(link: string) {
const div = document.createElement("div"); const div = document.createElement("div");
const modal = h(ModalBase, { const modal = h(ModalBase, {
@ -52,20 +37,13 @@ function createModal(link: string) {
.media-container { .media-container {
display: flex; display: flex;
grid-column: 2; flex-wrap: wrap;
grid-row: 3;
gap: .2rem; gap: .2rem;
} max-width: 100%;
.grouped-message .media-container {
display: flex;
grid-column: 2;
grid-row: 2;
} }
.media-item { .media-item {
cursor: pointer; cursor: pointer;
max-width: 15dvw; max-width: 15dvw;
} }
</style> </style>