Websites/liljudd-website
1
0
Fork 0
Code Issues Pull requests Projects Releases 3 Packages Wiki Activity

Chore: improved config list style

Browse source
This commit is contained in:
Aron Malcher 2024-03-11 19:04:26 +01:00
parent 76fa4872f1
commit faa42f0899
Signed by: aronmal
GPG key ID: 816B7707426FC612
3 changed files with 109 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/routes/config/[guildId].tsx
View file

@ -191,7 +191,7 @@ function config() {
return ( return (
<Layout site="config"> <Layout site="config">
<h3 class="text-center">Configure li&apos;l Judd in</h3> <h3>Configure li&apos;l Judd in</h3>
<div> <div>
<div> <div>
<div class="flex-row centered"> <div class="flex-row centered">

92
src/routes/config/index.tsx
View file

@ -1,8 +1,4 @@
import { import { faPlusCircle, faWrench } from "@fortawesome/pro-regular-svg-icons";
faBadgeCheck,
faCircleExclamation,
faPlus,
} from "@fortawesome/pro-regular-svg-icons";
import { useLocation, useNavigate } from "@solidjs/router"; import { useLocation, useNavigate } from "@solidjs/router";
import createClient from "openapi-fetch"; import createClient from "openapi-fetch";
import { For, createResource } from "solid-js"; import { For, createResource } from "solid-js";
@ -91,44 +87,58 @@ function index() {
{ deferStream: true }, { deferStream: true },
); );
const icons = [faPlus, faCircleExclamation, faBadgeCheck];
const colors = [undefined, "orange", "green"];
return ( return (
<Layout site="config"> <Layout site="config">
<h3 class="text-center">Configure li&apos;l Judd in</h3> <div class="group">
<div> <h3>Configure li&apos;l Judd in</h3>
<For each={payload()?.guilds}> <div>
{(guild, i) => { <For each={payload()?.guilds}>
return ( {(guild) => {
<a return (
href={ <a href={`/config/${guild.id}`} class="flex-row centered">
i() % 3 === 0 <img
? `/config/${guild.id}` class="guildpfp"
: `https://discord.com/api/oauth2/authorize?client_id=${import.meta.env.VITE_DISCORD_CLIENT_ID}&permissions=${import.meta.env.VITE_DISCORD_OAUTH2_PERMISSIONS}&scope=bot&guild_id=${guild.id}` src={
} guild.icon
class="flex-row centered" ? `https://cdn.discordapp.com/icons/${guild.id}/${guild.icon}.webp?size=240`
> : "https://cdn.discordapp.com/icons/1040502664506646548/bb5a51c4659cf47bdd942bb11e974da7.webp?size=240"
<img }
class="guildpfp" alt="Server pfp"
src={ />
guild.icon <h1>{guild.name}</h1>
? `https://cdn.discordapp.com/icons/${guild.id}/${guild.icon}.webp?size=240` <FontAwesomeIcon icon={faWrench} size="xl" />
: "https://cdn.discordapp.com/icons/1040502664506646548/bb5a51c4659cf47bdd942bb11e974da7.webp?size=240" </a>
} );
alt="Server pfp" }}
/> </For>
<h1>{guild.name}</h1> </div>
<FontAwesomeIcon </div>
// beat={i() % 3 === 1} <div class="group">
color={colors[i() % 3]} <h3>Add li&apos;l Judd to</h3>
icon={icons[i() % 3]} <div>
size="xl" <For each={payload()?.guilds}>
/> {(guild) => {
</a> return (
); <a
}} href={`https://discord.com/api/oauth2/authorize?client_id=${import.meta.env.VITE_DISCORD_CLIENT_ID}&permissions=${import.meta.env.VITE_DISCORD_OAUTH2_PERMISSIONS}&scope=bot&guild_id=${guild.id}`}
</For> class="flex-row centered"
>
<img
class="guildpfp"
src={
guild.icon
? `https://cdn.discordapp.com/icons/${guild.id}/${guild.icon}.webp?size=240`
: "https://cdn.discordapp.com/icons/1040502664506646548/bb5a51c4659cf47bdd942bb11e974da7.webp?size=240"
}
alt="Server pfp"
/>
<h1>{guild.name}</h1>
<FontAwesomeIcon icon={faPlusCircle} size="xl" />
</a>
);
}}
</For>
</div>
</div> </div>
</Layout> </Layout>
); );

82
src/styles/pages/config.scss
View file

@ -1,34 +1,66 @@
.config { .config {
.text-center { .group {
text-align: center; margin: 5rem;
}
.guildpfp { h3 {
width: 50px; text-align: center;
height: 50px; }
border-radius: 100%;
}
label { .guildpfp {
margin-right: 10px; width: 50px;
} height: 50px;
border-radius: 100%;
}
section, label {
a { margin-right: 10px;
background-color: rgba(0, 0, 0, 0.5); }
border-radius: 4px;
padding: 1rem;
max-width: 1100px;
margin: 1rem auto;
width: 100%;
}
.sub { section,
margin-left: 10px; a {
transition: 0.3s;
transition-timing-function: ease-out;
background-color: rgba(0, 0, 0, 0.5);
border: 2px solid transparent;
border-radius: 4px;
padding: 1rem;
max-width: 1100px;
margin: 1rem auto;
width: 100%;
&.disabled { svg {
pointer-events: none; padding: 0 1rem;
opacity: 0.5;
path {
transition: 0.1s;
transform: translateX(100%);
opacity: 0;
}
}
&:hover {
transition: 1s;
transition-delay: 0.1s;
background-color: rgba(0, 0, 0, 0.4);
border: 2px solid rgba(255, 255, 255, 0.5);
svg path {
transition: 0.5s;
transition-delay: 0.1s;
transition-timing-function: ease-out;
transform: translateX(0);
opacity: 1;
}
}
}
.sub {
margin-left: 10px;
&.disabled {
pointer-events: none;
opacity: 0.5;
}
} }
} }
} }