Chore: improved config list style

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

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">

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,22 +87,40 @@ 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">
<h3>Configure li&apos;l Judd in</h3>
<div> <div>
<For each={payload()?.guilds}> <For each={payload()?.guilds}>
{(guild, i) => { {(guild) => {
return (
<a href={`/config/${guild.id}`} 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={faWrench} size="xl" />
</a>
);
}}
</For>
</div>
</div>
<div class="group">
<h3>Add li&apos;l Judd to</h3>
<div>
<For each={payload()?.guilds}>
{(guild) => {
return ( return (
<a <a
href={ 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}`}
i() % 3 === 0
? `/config/${guild.id}`
: `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}`
}
class="flex-row centered" class="flex-row centered"
> >
<img <img
@ -119,17 +133,13 @@ function index() {
alt="Server pfp" alt="Server pfp"
/> />
<h1>{guild.name}</h1> <h1>{guild.name}</h1>
<FontAwesomeIcon <FontAwesomeIcon icon={faPlusCircle} size="xl" />
// beat={i() % 3 === 1}
color={colors[i() % 3]}
icon={icons[i() % 3]}
size="xl"
/>
</a> </a>
); );
}} }}
</For> </For>
</div> </div>
</div>
</Layout> </Layout>
); );
} }

View file

@ -1,5 +1,8 @@
.config { .config {
.text-center { .group {
margin: 5rem;
h3 {
text-align: center; text-align: center;
} }
@ -15,12 +18,40 @@
section, section,
a { a {
transition: 0.3s;
transition-timing-function: ease-out;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
border: 2px solid transparent;
border-radius: 4px; border-radius: 4px;
padding: 1rem; padding: 1rem;
max-width: 1100px; max-width: 1100px;
margin: 1rem auto; margin: 1rem auto;
width: 100%; width: 100%;
svg {
padding: 0 1rem;
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 { .sub {
@ -32,3 +63,4 @@
} }
} }
} }
}