mirrors/pronouns.cc
1
0
Fork 1
mirror of https://codeberg.org/pronounscc/pronouns.cc.git synced 2024-11-20 12:19:52 +01:00
Code Issues Projects Releases Packages Wiki Activity

fix(frontend): limit avatar size

Browse source
This commit is contained in:
Sam 2022-11-21 17:04:07 +01:00
parent 69e5082e89
commit 3aefe4fa88
2 changed files with 24 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
frontend/components/FallbackImage.tsx
View file

@ -23,9 +23,11 @@ export default function FallbackImage({ urls, alt, className }: Props) {
} else {
contentType = "application/octet-stream";
}
return <source key={key} srcSet={url} type={contentType} />;
return (
<source width={200} key={key} srcSet={url} type={contentType} />
);
})}
<img src={fallbackUrl} alt={alt} className={className} />
<img width={200} src={fallbackUrl} alt={alt} className={className} />
</picture>
);
}

26
frontend/components/PersonPage.tsx
View file

@ -1,5 +1,14 @@
import Head from "next/head";
import { Field, Member, Name, PartialPerson, Person, Pronoun, User, WordStatus } from "../lib/types";
import {
Field,
Member,
Name,
PartialPerson,
Person,
Pronoun,
User,
WordStatus,
} from "../lib/types";
import ReactMarkdown from "react-markdown";
import { userState } from "../lib/state";
import { useRecoilValue } from "recoil";
@ -41,10 +50,13 @@ export default function PersonPage({ person }: { person: Person }) {
<LabelList content={person.names ?? []} />
<LabelList content={person.pronouns ?? []} />
<FieldCardGrid fields={person.fields ?? []} />
{"user" in person
? <BlueLink to={personURL(person.user)}>{`< ${person.user.display_name}`}</BlueLink>
: <MemberList user={person as any as User} />
}
{"user" in person ? (
<BlueLink to={personURL(person.user)}>{`< ${
person.user.display_name ?? person.user.name
}`}</BlueLink>
) : (
<MemberList user={person as any as User} />
)}
</div>
</>
);
@ -203,7 +215,9 @@ function PersonInfo({ person }: { person: Person }) {
return (
<div className="flex flex-col">
{/* name */}
<h1 className="text-2xl font-bold">{display_name === null ? name : display_name}</h1>
<h1 className="text-2xl font-bold">
{display_name === null ? name : display_name}
</h1>
{/* handle */}
<h3 className="text-xl font-light text-slate-600 dark:text-slate-400">
{personFullHandle(person)}