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

wip: more work on client look

Browse source
This commit is contained in:
SauceyRed 2025-05-01 22:38:59 +02:00
parent ef494ee23e
commit c3e17cb56e
Signed by: sauceyred
GPG key ID: 270B096EF6E9A462
2 changed files with 289 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

276
pages/index.vue
View file

@ -1,16 +1,280 @@
<template>
<div id="main">
<h1 class="center">Welcome to Gorb, the best chat app in the WORLD!!!</h1>
<a href="/web" class="center">Go to web client</a>
</div>
<div id="client-root">
<div id="home" class=".homebar-item">
<NuxtLink href="/web">
<img src="~/assets/img/house.svg" alt="Home">
</NuxtLink>
</div>
<div id="current-channel" class=".homebar-item">
main bar
</div>
<div id="test" class=".homebar-item">test</div>
<div id="test2" class=".homebar-item">test2</div>
<div id="servers-list">
<NuxtLink v-for="server of servers" :href="'web' + server.url">
<img src="~/assets/img/server.svg" :alt="server.name">
</NuxtLink>
</div>
<div id="channels-list" class="main-grid-row">
<Channel v-for="channel of channels" :name="channel.name" :href="`${useRoute().path}/${channel.id}`" />
</div>
<div id="message-history" class="main-grid-row">
<div id="messages">
<Message v-for="message of messages" :img="pfp" :username="message.author.username" :text="message.text"
:timestamp="message.timestamp" format="12" />
</div>
<div id="message-box" class="main-grid-row">
<form @submit="sendMessage">
<input type="text" name="message-box-input" id="message-box-input">
<button type="submit">
<img :src="checkmark" alt="Send" width="20">
</button>
</form>
</div>
</div>
<div id="members-list">
<div class="member-item" v-for="member of members">
<img src="~/assets/img/tiger-head.svg" :alt="member.displayName" width="30dvw">
<span class="member-display-name">{{ member.displayName }}</span>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import pfp from "~/assets/img/tiger-head.svg";
import checkmark from "~/assets/img/check-mark.png";
const servers = [
{
name: "Test",
url: "/servers/284103257435"
},
{
name: "Test",
url: "/servers/284103257435"
},
{
name: "Test",
url: "/servers/284103257435"
}
];
const members = [
{
id: "3287484395",
displayName: "SauceyRed"
},
{
id: "3287484395",
displayName: "SauceyRed"
},
{
id: "3287484395",
displayName: "SauceyRed"
},
{
id: "3287484395",
displayName: "SauceyRed"
},
{
id: "3287484395",
displayName: "SauceyRed"
},
{
id: "3287484395",
displayName: "SauceyRed"
},
{
id: "3287484395",
displayName: "SauceyRed"
},
{
id: "3287484395",
displayName: "SauceyRed"
},
{
id: "3287484395",
displayName: "SauceyRed"
}
];
const messages = [
{
author: {
id: "3287484395",
username: "SauceyRed",
avatar: "~/assets/img/tiger-head.svg"
},
text: "hello gamers!",
timestamp: 1745948498000
},
{
author: {
id: "3287484395",
username: "SauceyRed",
avatar: "~/assets/img/tiger-head.svg"
},
text: "yo what's up!",
timestamp: 1745948498000
},
{
author: {
id: "3287484395",
username: "SauceyRed",
avatar: "~/assets/img/tiger-head.svg"
},
text: "how are you guys?",
timestamp: 1745948498000
},
{
author: {
id: "3287484395",
username: "SauceyRed",
avatar: "~/assets/img/tiger-head.svg"
},
text: "im doing well",
timestamp: 1745948498000
}
]
const channels = [
{
name: "#super-cool-channel",
id: "8gh9548rg44"
},
{
name: "#super-lame-channel",
id: "hgff45387hy"
},
{
name: "#secret-channel",
id: "g8f734h87gt"
},
]
function sendMessage(e: Event) {
e.preventDefault();
const textInput = document.getElementById("message-box-input") as HTMLInputElement;
const text = textInput.value;
console.log("MESSAGE SENT!!!");
console.log("text:", text);
}
</script>
<style>
#main {
text-align: center;
#client-root {
/* border: 1px solid white; */
height: 100%;
display: grid;
grid-template-columns: 1fr 4fr 18fr 4fr;
grid-template-rows: 8dvh auto;
text-align: center;
}
#client-root>div:nth-child(-n+4) {
border-bottom: 1px solid rgb(70, 70, 70);
}
#client-root div {
/* border: 1px solid cyan; */
}
#main-bar {}
#__nuxt {
display: flex;
flex-flow: column;
height: 100%;
}
.grid-column {
padding-top: 1dvh;
}
#home {
grid-column: 1;
grid-row: 1;
}
#current-info {
grid-column: 2;
grid-row: 1;
}
#test {
grid-column: 3;
grid-row: 1;
}
#utilities {
display: flex;
flex-direction: row;
margin-bottom: 3dvh;
justify-content: center;
}
#left-sidebar-container,
#right-sidebar-container {
text-align: center;
}
.member-item {
display: flex;
justify-content: center;
align-items: center;
}
.bottom-border {
border-bottom: 1px solid rgb(70, 70, 70);
}
.left-border {
border-left: 1px solid rgb(70, 70, 70);
}
.right-border {
border-right: 1px solid rgb(70, 70, 70);
}
#main-content {
display: grid;
grid-template-rows: 1fr 15fr 30fr 2fr;
text-align: center;
margin-left: 1dvw;
}
#message-box {
border: 1px solid rgb(70, 70, 70);
width: 100%;
margin-bottom: 1dvh;
height: 5%;
text-align: center;
}
#message-box-input {
width: 80%;
height: 100%;
}
.main-grid-row {
/* border: 1px solid cyan; */
}
#main-bar {}
#servers-list,
#channels-list,
#message-history,
#members-list {
margin-top: 3dvh;
}
#message-history {
display: flex;
flex-direction: column;
justify-content: space-between;
}
</style>