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

feat: remove margin-top from message box and have it be set dynamically on last message

Browse source
This commit is contained in:
SauceyRed 2025-05-31 16:34:25 +02:00
parent 3fd28ed3fc
commit 5011affd49
Signed by: sauceyred
GPG key ID: 2BF92EB6D8A5CCA7
2 changed files with 14 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

12
components/Message.vue
View file

@ -1,5 +1,5 @@
<template>
<div v-if="props.type == 'normal'" class="message normal-message" :class="{ 'message-margin-bottom': props.marginBottom }">
<div v-if="props.type == 'normal'" :id="props.last ? 'last-message' : undefined" class="message normal-message" :class="{ 'message-margin-bottom': props.marginBottom }">
<div class="left-column">
<img v-if="props.img" class="message-author-avatar" :src="props.img" :alt="username">
<Icon v-else name="lucide:user" class="message-author-avatar" />
@ -18,7 +18,7 @@
</div>
</div>
</div>
<div v-else ref="messageElement" class="message grouped-message">
<div v-else ref="messageElement" :id="props.last ? 'last-message' : undefined" class="message grouped-message">
<div class="left-column">
<div>
<span :class="{ 'invisible': dateHidden }" class="message-date" :title="date.toString()">
@ -43,7 +43,8 @@ const props = defineProps<{
timestamp: number,
format: "12" | "24",
type: "normal" | "grouped",
marginBottom: boolean
marginBottom: boolean,
last: boolean
}>();
const messageDate = ref<string>();
@ -56,6 +57,7 @@ const date = new Date(props.timestamp);
console.log("Message.vue: message:", props.text);
console.log("Message.vue: message type:", props.type);
console.log("Message.vue: is last?", props.last);
let dateHour = date.getHours();
let dateMinute = date.getMinutes();
@ -102,6 +104,10 @@ onMounted(() => {
margin-bottom: 1dvh;
}
#last-message {
margin-bottom: 2dvh;
}
.message-metadata {
display: flex;
gap: .5dvw;