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 (
<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 class="flex-row centered">

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

@ -1,8 +1,4 @@
import {
faBadgeCheck,
faCircleExclamation,
faPlus,
} from "@fortawesome/pro-regular-svg-icons";
import { faPlusCircle, faWrench } from "@fortawesome/pro-regular-svg-icons";
import { useLocation, useNavigate } from "@solidjs/router";
import createClient from "openapi-fetch";
import { For, createResource } from "solid-js";
@ -91,44 +87,58 @@ function index() {
{ deferStream: true },
);
const icons = [faPlus, faCircleExclamation, faBadgeCheck];
const colors = [undefined, "orange", "green"];
return (
<Layout site="config">
<h3 class="text-center">Configure li&apos;l Judd in</h3>
<div>
<For each={payload()?.guilds}>
{(guild, i) => {
return (
<a
href={
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"
>
<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
// beat={i() % 3 === 1}
color={colors[i() % 3]}
icon={icons[i() % 3]}
size="xl"
/>
</a>
);
}}
</For>
<div class="group">
<h3>Configure li&apos;l Judd in</h3>
<div>
<For each={payload()?.guilds}>
{(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 (
<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}`}
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>
</Layout>
);

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

@ -1,34 +1,66 @@
.config {
.text-center {
text-align: center;
}
.group {
margin: 5rem;
.guildpfp {
width: 50px;
height: 50px;
border-radius: 100%;
}
h3 {
text-align: center;
}
label {
margin-right: 10px;
}
.guildpfp {
width: 50px;
height: 50px;
border-radius: 100%;
}
section,
a {
background-color: rgba(0, 0, 0, 0.5);
border-radius: 4px;
padding: 1rem;
max-width: 1100px;
margin: 1rem auto;
width: 100%;
}
label {
margin-right: 10px;
}
.sub {
margin-left: 10px;
section,
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 {
pointer-events: none;
opacity: 0.5;
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 {
margin-left: 10px;
&.disabled {
pointer-events: none;
opacity: 0.5;
}
}
}
}