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

feat: improve message box :3
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-07-07 22:22:20 +02:00
parent c0ad1a7c0d
commit fa93e00759
No known key found for this signature in database
2 changed files with 48 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

64
components/MessageArea.vue
View file

@ -9,11 +9,23 @@
</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">
<div id="message-box-left-elements">
<span class="message-box-button">
<Icon name="lucide:file-plus-2" />
</span>
</div>
<input v-model="messageInput" id="message-box-input" class="rounded-corners" type="text" <input v-model="messageInput" id="message-box-input" class="rounded-corners" type="text"
name="message-input" autocomplete="off"> name="message-input" autocomplete="off">
<button id="submit-button" type="submit">
<Icon name="lucide:send" /> <div id="message-box-right-elements">
</button> <button class="message-box-button" type="submit">
<Icon name="lucide:send" />
</button>
<span class="message-box-button">
<Icon name="lucide:image-play" />
</span>
</div>
</form> </form>
</div> </div>
</div> </div>
@ -249,33 +261,51 @@ router.beforeEach((to, from, next) => {
} }
#message-box { #message-box {
display: flex; /* flex-direction: column; */
flex-direction: column; /* justify-content: center; */
justify-content: center; /* align-content: center; */
align-content: center; /* padding-bottom: 1dvh; */
border: 1px solid var(--padding-color); /* padding-top: 1dvh; */
padding-bottom: 1dvh; margin-bottom: 2dvh;
padding-top: 1dvh;
margin-bottom: 1dvh;
margin-left: 1dvw; margin-left: 1dvw;
margin-right: 1dvw; margin-right: 1dvw;
background: var(--optional-message-box-background); /* background: var(--optional-message-box-background); */
} }
#message-form { #message-form {
display: flex; display: flex;
flex-direction: row;
border: 1px solid var(--padding-color);
height: 100%;
padding-left: 2%;
padding-right: 2%;
min-height: 100%;
justify-content: center; justify-content: center;
background-color: var(--chatbox-background-color);
} }
#message-box-input { #message-box-input {
width: 80%; height: 100%;
width: 100%;
margin-left: 1.5%;
margin-right: 1.5%;
box-sizing: border-box;
display: inline-block;
vertical-align: top;
border: none; border: none;
color: inherit; color: inherit;
padding-left: 1dvw;
padding-right: 1dvw;
background-color: var(--chatbox-background-color); background-color: var(--chatbox-background-color);
} }
#message-box-left-elements, #message-box-right-elements {
display: flex;
align-items: center;
}
#messages { #messages {
overflow-y: scroll; overflow-y: scroll;
display: flex; display: flex;
@ -284,7 +314,7 @@ router.beforeEach((to, from, next) => {
padding-right: 1dvw; padding-right: 1dvw;
} }
#submit-button { .message-box-button {
background-color: inherit; background-color: inherit;
border: none; border: none;
color: var(--primary-color); color: var(--primary-color);
@ -292,7 +322,7 @@ router.beforeEach((to, from, next) => {
font-size: 1.5em; font-size: 1.5em;
} }
#submit-button:hover { .message-box-button:hover {
color: var(--primary-highlighted-color); color: var(--primary-highlighted-color);
cursor: pointer; cursor: pointer;
} }

2
public/themes/dark.css
View file

@ -7,7 +7,7 @@
--sidebar-background-color: #2e2a27; --sidebar-background-color: #2e2a27;
--sidebar-highlighted-background-color: #36322b; --sidebar-highlighted-background-color: #36322b;
--topbar-background-color: #2a2723; --topbar-background-color: #2a2723;
--chatbox-background-color: #2a2723; --chatbox-background-color: #1a1713;
--padding-color: #484848; --padding-color: #484848;