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

12
components/MessageArea.vue
View file

@ -1,12 +1,11 @@
<template> <template>
<div id="message-area"> <div id="message-area">
<div id="messages" ref="messagesElement"> <div id="messages" ref="messagesElement">
<div v-for="(message, i) of messages"> <Message v-for="(message, i) of messages" :username="message.user.display_name ?? message.user.username"
<Message :username="message.user.display_name ?? message.user.username" :text="message.message" :timestamp="messageTimestamps[message.uuid]" :img="message.user.avatar"
:text="message.message" :timestamp="messageTimestamps[message.uuid]" :img="message.user.avatar" format="12" :type="messagesType[message.uuid]"
format="12" :type="messagesType[message.uuid]" :margin-bottom="messages[i + 1] && messagesType[messages[i + 1].uuid] == 'normal'"
:margin-bottom="messages[i + 1] && messagesType[messages[i + 1].uuid] == 'normal'" /> :last="i == messages.length - 1" />
</div>
</div> </div>
<div id="message-box" class="rounded-corners"> <div id="message-box" class="rounded-corners">
<form id="message-form" @submit="sendMessage"> <form id="message-form" @submit="sendMessage">
@ -176,7 +175,6 @@ onMounted(async () => {
padding-bottom: 1dvh; padding-bottom: 1dvh;
padding-top: 1dvh; padding-top: 1dvh;
margin-bottom: 1dvh; margin-bottom: 1dvh;
margin-top: 2dvh;
} }
#message-form { #message-form {