Skip to content

Commit 0511971

Browse files
fehmerfehmer
committed
cleanup user classes
1 parent 61b92ac commit 0511971

3 files changed

Lines changed: 77 additions & 72 deletions

File tree

‎frontend/src/ts/components/common/DiscordAvatar.tsx‎

Lines changed: 34 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -16,43 +16,41 @@ export function DiscordAvatar(props: {
1616
missingIcon?: FaSolidIcon;
1717
}): JSXElement {
1818
return (
19-
<div class="grid grid-cols-[1.25em_max-content_auto] items-center justify-items-start gap-2">
20-
<div class="col-start-1 col-end-2 row-start-1 row-end-2 grid h-(--size) w-(--size) place-content-center leading-(--size) text-(--size) transition-[opacity,filter] duration-125 [--size:1em]">
21-
<Conditional
22-
if={
23-
props.discordId !== undefined &&
24-
props.discordAvatar !== undefined &&
25-
avatar[`${props.discordId}/${props.discordAvatar}`] !== false
26-
}
27-
then={
28-
<>
29-
<Show
30-
when={
31-
avatar[`${props.discordId}/${props.discordAvatar}`] ===
32-
undefined
33-
}
34-
>
35-
<Fa
36-
icon={"fa-circle-notch"}
37-
spin={true}
38-
class="absolute z-0 h-[1em] w-[1em]"
39-
/>
40-
</Show>
41-
<img
42-
src={`https://cdn.discordapp.com/avatars/${props.discordId}/${props.discordAvatar}.png?size=${props.size ?? 32}`}
43-
class="absolute z-10 h-[1em] w-[1em] rounded-full object-cover"
44-
onLoad={() => {
45-
setAvatar(`${props.discordId}/${props.discordAvatar}`, true);
46-
}}
47-
onError={() => {
48-
setAvatar(`${props.discordId}/${props.discordAvatar}`, false);
49-
}}
19+
<div class="relative inline-flex h-[1em] w-[1em] shrink-0 items-center justify-center">
20+
<Conditional
21+
if={
22+
props.discordId !== undefined &&
23+
props.discordAvatar !== undefined &&
24+
avatar[`${props.discordId}/${props.discordAvatar}`] !== false
25+
}
26+
then={
27+
<>
28+
<Show
29+
when={
30+
avatar[`${props.discordId}/${props.discordAvatar}`] ===
31+
undefined
32+
}
33+
>
34+
<Fa
35+
icon={"fa-circle-notch"}
36+
spin={true}
37+
class="absolute inset-0"
5038
/>
51-
</>
52-
}
53-
else={<Fa icon={props.missingIcon ?? "fa-user-circle"} />}
54-
/>
55-
</div>
39+
</Show>
40+
<img
41+
src={`https://cdn.discordapp.com/avatars/${props.discordId}/${props.discordAvatar}.png?size=${props.size ?? 32}`}
42+
class="relative h-full w-full rounded-full object-cover"
43+
onLoad={() => {
44+
setAvatar(`${props.discordId}/${props.discordAvatar}`, true);
45+
}}
46+
onError={() => {
47+
setAvatar(`${props.discordId}/${props.discordAvatar}`, false);
48+
}}
49+
/>
50+
</>
51+
}
52+
else={<Fa icon={props.missingIcon ?? "fa-user-circle"} />}
53+
/>
5654
</div>
5755
);
5856
}

‎frontend/src/ts/components/common/User.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,21 +26,19 @@ export function User(
2626
} & UserFlagOptions,
2727
): JSXElement {
2828
return (
29-
<div class="grid grid-cols-[1.25em_max-content_auto] items-center justify-items-start gap-2">
29+
<div class="inline-flex items-center gap-2 text-sm leading-none">
3030
<Show when={props.showAvatar ?? true}>
3131
<DiscordAvatar
3232
discordId={props.user.discordId}
3333
discordAvatar={props.user.discordAvatar}
3434
/>
3535
</Show>
36-
3736
<Button
3837
type="text"
3938
href={`/profile/${props.user.uid}?isUid`}
4039
text={props.user.name}
4140
router-link
4241
/>
43-
4442
<div class="flex items-center justify-center gap-2 text-sub">
4543
<UserFlags
4644
{...props.user}
@@ -55,7 +53,6 @@ export function User(
5553

5654
function UserFlags(props: SupportsFlags & UserFlagOptions): JSXElement {
5755
const flags = (): UserFlag[] => getMatchingFlags(props);
58-
console.log("####", props, flags());
5956

6057
return (
6158
<For each={flags()}>

‎frontend/src/ts/components/pages/AboutPage.tsx‎

Lines changed: 42 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -53,40 +53,50 @@ export function AboutPage(): JSXElement {
5353
<div class="content-grid grid gap-8">
5454
<section>
5555
{/*TODO remove after testing */}
56-
<User
57-
user={{ name: "Bob", uid: "uid", badgeId: 6, isPremium: true }}
58-
isFriend={true}
59-
/>
60-
<User
61-
user={{
62-
name: "Miodec",
63-
uid: "uid",
64-
discordId: "102819690287489024",
65-
discordAvatar: "a_af6c0b8ad26fdd6bcb86ed7bb40ee6e5",
66-
badgeId: 1,
67-
}}
68-
/>
69-
<User
70-
user={{
71-
name: "Kevin",
72-
uid: "uid",
73-
discordId: "invalid",
74-
discordAvatar: "invalid",
56+
<ul>
57+
<li>
58+
<User
59+
user={{ name: "Bob", uid: "uid", badgeId: 6, isPremium: true }}
60+
isFriend={true}
61+
/>
62+
</li>
63+
<li>
64+
<User
65+
user={{
66+
name: "Miodec",
67+
uid: "uid",
68+
discordId: "102819690287489024",
69+
discordAvatar: "a_af6c0b8ad26fdd6bcb86ed7bb40ee6e5",
70+
badgeId: 1,
71+
}}
72+
/>
73+
</li>
74+
<li>
75+
<User
76+
user={{
77+
name: "Kevin",
78+
uid: "uid",
79+
discordId: "invalid",
80+
discordAvatar: "invalid",
7581

76-
banned: true,
77-
lbOptOut: true,
78-
}}
79-
/>
80-
<User
81-
user={{
82-
name: "Stuart",
83-
uid: "uid",
82+
banned: true,
83+
lbOptOut: true,
84+
}}
85+
/>
86+
</li>
87+
<li>
88+
<User
89+
user={{
90+
name: "Stuart",
91+
uid: "uid",
8492

85-
banned: true,
86-
lbOptOut: true,
87-
}}
88-
iconsOnly={true}
89-
/>
93+
banned: true,
94+
lbOptOut: true,
95+
}}
96+
iconsOnly={true}
97+
/>
98+
</li>
99+
</ul>
90100
</section>
91101
<section class="text-center text-sub">
92102
Created with love by Miodec.

0 commit comments

Comments
 (0)