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

style(ui): improve styling of guild creation and joining modals and switch to using Button components in client layout

Browse source
This commit is contained in:
SauceyRed 2025-07-13 04:15:51 +02:00
parent 11e46049a0
commit 06df5cf75d
Signed by: sauceyred
GPG key ID: 2BF92EB6D8A5CCA7
1 changed files with 16 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

27
layouts/client.vue
View file

@ -57,7 +57,8 @@ const options = [
}, },
onCancel: () => { onCancel: () => {
unrender(div); unrender(div);
} },
style: "height: 20dvh; width: 15dvw"
}, },
[ [
h("input", { h("input", {
@ -65,8 +66,10 @@ const options = [
type: "text", type: "text",
placeholder: "oyqICZ", placeholder: "oyqICZ",
}), }),
h("button", { h(Button, {
onClick: async () => { text: "Join",
variant: "normal",
callback: async () => {
const input = document.getElementById("guild-invite-input") as HTMLInputElement; const input = document.getElementById("guild-invite-input") as HTMLInputElement;
const invite = input.value; const invite = input.value;
if (invite.length == 6) { if (invite.length == 6) {
@ -79,8 +82,7 @@ const options = [
} }
} }
} }
}, })
"Join")
]); ]);
document.body.appendChild(div); document.body.appendChild(div);
render(guildJoinModal, div); render(guildJoinModal, div);
@ -91,23 +93,27 @@ const options = [
const user = await useAuth().getUser(); const user = await useAuth().getUser();
const div = document.createElement("div"); const div = document.createElement("div");
const guildCreateModal = h(Modal, { const guildCreateModal = h(Modal, {
title: "Join Guild", title: "Create a Guild",
id: "guild-join-modal", id: "guild-join-modal",
onClose: () => { onClose: () => {
unrender(div); unrender(div);
}, },
onCancel: () => { onCancel: () => {
unrender(div); unrender(div);
} },
style: "height: 20dvh; width: 15dvw;"
}, },
[ [
h("input", { h("input", {
id: "guild-name-input", id: "guild-name-input",
type: "text", type: "text",
placeholder: `${user?.display_name || user?.username}'s Awesome Bouncy Castle'`, placeholder: `${user?.display_name || user?.username}'s Awesome Bouncy Castle'`,
style: "width: 100%"
}), }),
h("button", { h(Button, {
onClick: async () => { text: "Create!",
variant: "normal",
callback: async () => {
const input = document.getElementById("guild-name-input") as HTMLInputElement; const input = document.getElementById("guild-name-input") as HTMLInputElement;
const name = input.value; const name = input.value;
try { try {
@ -116,8 +122,7 @@ const options = [
alert(`Couldn't create guild: ${error}`); alert(`Couldn't create guild: ${error}`);
} }
} }
}, })
"Create")
]); ]);
document.body.appendChild(div); document.body.appendChild(div);
render(guildCreateModal, div); render(guildCreateModal, div);