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

feat: change message area back to using flex display, improvement for UI

Browse source
This commit is contained in:
SauceyRed 2025-06-06 01:55:18 +02:00
parent d22e77ed14
commit 3899843a7c
Signed by: sauceyred
GPG key ID: 270B096EF6E9A462
2 changed files with 28 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

43
components/Message.vue
View file

@ -16,15 +16,13 @@
<div class="message-text" v-html="sanitized" tabindex="0"></div> <div class="message-text" v-html="sanitized" tabindex="0"></div>
</div> </div>
</div> </div>
<div v-else ref="messageElement" class="message grouped-message" :class="{ 'message-margin-bottom': props.marginBottom }"> <div v-else ref="messageElement" :id="props.last ? 'last-message' : undefined" class="message grouped-message" :class="{ 'message-margin-bottom': props.marginBottom }">
<div class="left-column"> <div class="left-column">
<div>
<span :class="{ 'invisible': dateHidden }" class="message-date side-message-date" :title="date.toString()"> <span :class="{ 'invisible': dateHidden }" class="message-date side-message-date" :title="date.toString()">
{{ date.toLocaleTimeString(undefined, { timeStyle: "short" }) }} {{ date.toLocaleTimeString(undefined, { timeStyle: "short" }) }}
</span> </span>
</div> </div>
</div> <div class="message-data">
<div class="message-data" :id="props.last ? 'last-message' : undefined">
<div class="message-text" :class="$style['message-text']" v-html="sanitized" tabindex="0"></div> <div class="message-text" :class="$style['message-text']" v-html="sanitized" tabindex="0"></div>
</div> </div>
</div> </div>
@ -82,12 +80,15 @@ onMounted(async () => {
.message { .message {
text-align: left; text-align: left;
/* border: 1px solid lightcoral; */ /* border: 1px solid lightcoral; */
display: contents; display: grid;
grid-template-columns: 2dvw 1fr;
align-items: center; align-items: center;
column-gap: 1dvw;
width: 100%;
} }
.message-margin-bottom > * { .message:hover {
margin-bottom: 1dvh; background-color: rgb(20, 20, 20);
} }
.normal-message { .normal-message {
@ -95,7 +96,7 @@ onMounted(async () => {
} }
#last-message { #last-message {
margin-bottom: 1dvh; margin-bottom: 2dvh;
} }
.message-metadata { .message-metadata {
@ -109,8 +110,8 @@ onMounted(async () => {
margin-left: .5dvw; margin-left: .5dvw;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1dvh; height: fit-content;
height: 100%; width: 100%;
} }
.message-author { .message-author {
@ -119,15 +120,15 @@ onMounted(async () => {
} }
.message-author-avatar { .message-author-avatar {
height: 2.3em; width: 100%;
width: 2.3em;
border-radius: 50%; border-radius: 50%;
} }
.left-column { .left-column {
display: flex;
text-align: center; text-align: center;
align-content: center;
white-space: nowrap; white-space: nowrap;
} }
.author-username { .author-username {
@ -143,6 +144,9 @@ onMounted(async () => {
.side-message-date { .side-message-date {
font-size: .625em; font-size: .625em;
display: flex;
align-items: center;
align-content: center;
} }
/* /*
@ -154,14 +158,13 @@ onMounted(async () => {
</style> </style>
<style module> <style module>
.message-text ul { .message-text ul, h1, h2, h3, h4, h5, h6 {
margin-top: 1dvh; padding-top: 1dvh;
margin-bottom: 1dvh; padding-bottom: 1dvh;
padding-left: 2dvw; margin: 0;
} }
.message-text h1, h2, h3, h4, h5, h6 { .message-text ul {
margin-top: 1dvh; padding-left: 2dvw;
margin-bottom: 1dvh;
} }
</style> </style>

5
components/MessageArea.vue
View file

@ -245,9 +245,8 @@ onMounted(async () => {
#messages { #messages {
overflow-y: scroll; overflow-y: scroll;
display: grid; display: flex;
grid-template-columns: min-content 1fr; flex-direction: column;
gap: 1dvh;
padding-left: 1dvw; padding-left: 1dvw;
padding-right: 1dvw; padding-right: 1dvw;
} }