feat: tweak font size in profile fields
This commit is contained in:
Sam
parent
97cce1d8fc
commit
18fc764d64
|
|
@ -11,7 +11,7 @@
|
||||||
import PartialMemberCard from "$lib/components/PartialMemberCard.svelte";
|
import PartialMemberCard from "$lib/components/PartialMemberCard.svelte";
|
||||||
import FallbackImage from "$lib/components/FallbackImage.svelte";
|
import FallbackImage from "$lib/components/FallbackImage.svelte";
|
||||||
import { userStore } from "$lib/store";
|
import { userStore } from "$lib/store";
|
||||||
import { pronounDisplay, userAvatars, WordStatus } from "$lib/api/entities";
|
import { pronounDisplay, userAvatars, WordStatus, type Member } from "$lib/api/entities";
|
||||||
import { PUBLIC_BASE_URL } from "$env/static/public";
|
import { PUBLIC_BASE_URL } from "$env/static/public";
|
||||||
|
|
||||||
export let data: PageData;
|
export let data: PageData;
|
||||||
|
|
@ -19,50 +19,14 @@
|
||||||
let bio: string | null;
|
let bio: string | null;
|
||||||
$: bio = data.bio ? sanitizeHtml(marked.parse(data.bio)) : null;
|
$: bio = data.bio ? sanitizeHtml(marked.parse(data.bio)) : null;
|
||||||
|
|
||||||
|
let memberPage: number = 0;
|
||||||
|
let memberSlice: Member[] = [];
|
||||||
|
$: member = data.members.slice(memberPage * 20, memberPage + 1 * 20);
|
||||||
|
|
||||||
const favNames = data.names.filter((entry) => entry.status === WordStatus.Favourite);
|
const favNames = data.names.filter((entry) => entry.status === WordStatus.Favourite);
|
||||||
const favPronouns = data.pronouns.filter((entry) => entry.status === WordStatus.Favourite);
|
const favPronouns = data.pronouns.filter((entry) => entry.status === WordStatus.Favourite);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:head>
|
|
||||||
<title>@{data.name} - pronouns.cc</title>
|
|
||||||
|
|
||||||
<meta
|
|
||||||
property="og:title"
|
|
||||||
content={data.display_name ? `${data.display_name} (@${data.name})` : `@${data.name}`}
|
|
||||||
/>
|
|
||||||
<meta property="og:url" content="{PUBLIC_BASE_URL}/@{data.name}" />
|
|
||||||
|
|
||||||
{#if data.avatar}
|
|
||||||
<meta property="og:image" content={userAvatars(data)[0]} />
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
{#if favNames.length !== 0 && favPronouns.length !== 0}
|
|
||||||
<meta
|
|
||||||
property="og:description"
|
|
||||||
content="@{data.name} goes by {favNames.map((x) => x.value).join(', ')} and uses {favPronouns
|
|
||||||
.map((x) => pronounDisplay(x))
|
|
||||||
.join(', ')} pronouns."
|
|
||||||
/>
|
|
||||||
{:else if favNames.length !== 0}
|
|
||||||
<meta
|
|
||||||
property="og:description"
|
|
||||||
content="@{data.name} goes by {favNames.map((x) => x.value).join(', ')}."
|
|
||||||
/>
|
|
||||||
{:else if favPronouns.length !== 0}
|
|
||||||
<meta
|
|
||||||
property="og:description"
|
|
||||||
content="@{data.name} uses {favPronouns.map((x) => pronounDisplay(x)).join(', ')} pronouns."
|
|
||||||
/>
|
|
||||||
{:else if data.bio && data.bio !== ""}
|
|
||||||
<meta
|
|
||||||
property="og:description"
|
|
||||||
content="{data.bio.slice(0, 500)}${data.bio.length > 500 ? '…' : ''}"
|
|
||||||
/>
|
|
||||||
{:else}
|
|
||||||
<meta property="og:description" content="@{data.name} on pronouns.cc" />
|
|
||||||
{/if}
|
|
||||||
</svelte:head>
|
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
{#if $userStore && $userStore.id === data.id}
|
{#if $userStore && $userStore.id === data.id}
|
||||||
<Alert color="secondary" fade={false}>
|
<Alert color="secondary" fade={false}>
|
||||||
|
|
@ -102,8 +66,8 @@
|
||||||
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3">
|
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3">
|
||||||
{#if data.names.length > 0}
|
{#if data.names.length > 0}
|
||||||
<div class="col-md">
|
<div class="col-md">
|
||||||
<h4>Names</h4>
|
<h3>Names</h3>
|
||||||
<ul class="list-unstyled">
|
<ul class="list-unstyled fs-5">
|
||||||
{#each data.names as name}
|
{#each data.names as name}
|
||||||
<li><StatusIcon status={name.status} /> {name.value}</li>
|
<li><StatusIcon status={name.status} /> {name.value}</li>
|
||||||
{/each}
|
{/each}
|
||||||
|
|
@ -112,8 +76,8 @@
|
||||||
{/if}
|
{/if}
|
||||||
{#if data.pronouns.length > 0}
|
{#if data.pronouns.length > 0}
|
||||||
<div class="col-md">
|
<div class="col-md">
|
||||||
<h4>Pronouns</h4>
|
<h3>Pronouns</h3>
|
||||||
<ul class="list-unstyled">
|
<ul class="list-unstyled fs-5">
|
||||||
{#each data.pronouns as pronouns}
|
{#each data.pronouns as pronouns}
|
||||||
<li>
|
<li>
|
||||||
<StatusIcon status={pronouns.status} />
|
<StatusIcon status={pronouns.status} />
|
||||||
|
|
@ -144,3 +108,43 @@
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<svelte:head>
|
||||||
|
<title>@{data.name} - pronouns.cc</title>
|
||||||
|
|
||||||
|
<meta
|
||||||
|
property="og:title"
|
||||||
|
content={data.display_name ? `${data.display_name} (@${data.name})` : `@${data.name}`}
|
||||||
|
/>
|
||||||
|
<meta property="og:url" content="{PUBLIC_BASE_URL}/@{data.name}" />
|
||||||
|
|
||||||
|
{#if data.avatar}
|
||||||
|
<meta property="og:image" content={userAvatars(data)[0]} />
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if favNames.length !== 0 && favPronouns.length !== 0}
|
||||||
|
<meta
|
||||||
|
property="og:description"
|
||||||
|
content="@{data.name} goes by {favNames.map((x) => x.value).join(', ')} and uses {favPronouns
|
||||||
|
.map((x) => pronounDisplay(x))
|
||||||
|
.join(', ')} pronouns."
|
||||||
|
/>
|
||||||
|
{:else if favNames.length !== 0}
|
||||||
|
<meta
|
||||||
|
property="og:description"
|
||||||
|
content="@{data.name} goes by {favNames.map((x) => x.value).join(', ')}."
|
||||||
|
/>
|
||||||
|
{:else if favPronouns.length !== 0}
|
||||||
|
<meta
|
||||||
|
property="og:description"
|
||||||
|
content="@{data.name} uses {favPronouns.map((x) => pronounDisplay(x)).join(', ')} pronouns."
|
||||||
|
/>
|
||||||
|
{:else if data.bio && data.bio !== ""}
|
||||||
|
<meta
|
||||||
|
property="og:description"
|
||||||
|
content="{data.bio.slice(0, 500)}${data.bio.length > 500 ? '…' : ''}"
|
||||||
|
/>
|
||||||
|
{:else}
|
||||||
|
<meta property="og:description" content="@{data.name} on pronouns.cc" />
|
||||||
|
{/if}
|
||||||
|
</svelte:head>
|
||||||
|
|
|
||||||
|
|
@ -21,6 +21,68 @@
|
||||||
const favPronouns = data.pronouns.filter((entry) => entry.status === WordStatus.Favourite);
|
const favPronouns = data.pronouns.filter((entry) => entry.status === WordStatus.Favourite);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div>
|
||||||
|
<Button color="secondary" href="/@{data.user.name}">
|
||||||
|
<Icon name="arrow-left" /> Back to {data.user.display_name ?? data.user.name}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<div class="grid">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md text-center">
|
||||||
|
<FallbackImage width={200} urls={memberAvatars(data)} alt="Avatar for @{data.name}" />
|
||||||
|
</div>
|
||||||
|
<div class="col-md">
|
||||||
|
<h2>{data.display_name ?? data.name}</h2>
|
||||||
|
<h5 class="text-body-secondary">{data.name} (@{data.user.name})</h5>
|
||||||
|
{#if bio}
|
||||||
|
<hr />
|
||||||
|
<p>{@html bio}</p>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{#if data.links.length > 0}
|
||||||
|
<div class="col-md d-flex align-items-center">
|
||||||
|
<ul class="list-unstyled">
|
||||||
|
{#each data.links as link}
|
||||||
|
<li><Icon name="globe" /> <a href={link}>{link}</a></li>
|
||||||
|
{/each}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3">
|
||||||
|
{#if data.names.length > 0}
|
||||||
|
<div class="col-md">
|
||||||
|
<h3>Names</h3>
|
||||||
|
<ul class="list-unstyled fs-5">
|
||||||
|
{#each data.names as name}
|
||||||
|
<li><StatusIcon status={name.status} /> {name.value}</li>
|
||||||
|
{/each}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{#if data.pronouns.length > 0}
|
||||||
|
<div class="col-md">
|
||||||
|
<h3>Pronouns</h3>
|
||||||
|
<ul class="list-unstyled fs-5">
|
||||||
|
{#each data.pronouns as pronouns}
|
||||||
|
<li>
|
||||||
|
<StatusIcon status={pronouns.status} />
|
||||||
|
<PronounLink {pronouns} />
|
||||||
|
</li>
|
||||||
|
{/each}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{#each data.fields as field}
|
||||||
|
<div class="col">
|
||||||
|
<FieldCard {field} />
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<svelte:head>
|
<svelte:head>
|
||||||
<title>{data.display_name ?? data.name} - @{data.user.name} - pronouns.cc</title>
|
<title>{data.display_name ?? data.name} - @{data.user.name} - pronouns.cc</title>
|
||||||
|
|
||||||
|
|
@ -62,65 +124,3 @@
|
||||||
<meta property="og:description" content="{data.name} (@{data.user.name}) on pronouns.cc" />
|
<meta property="og:description" content="{data.name} (@{data.user.name}) on pronouns.cc" />
|
||||||
{/if}
|
{/if}
|
||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<div>
|
|
||||||
<Button color="secondary" href="/@{data.user.name}">
|
|
||||||
<Icon name="arrow-left" /> Back to {data.user.display_name ?? data.user.name}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
<div class="grid">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md text-center">
|
|
||||||
<FallbackImage width={200} urls={memberAvatars(data)} alt="Avatar for @{data.name}" />
|
|
||||||
</div>
|
|
||||||
<div class="col-md">
|
|
||||||
<h2>{data.display_name ?? data.name}</h2>
|
|
||||||
<h5 class="text-body-secondary">{data.name} (@{data.user.name})</h5>
|
|
||||||
{#if bio}
|
|
||||||
<hr />
|
|
||||||
<p>{@html bio}</p>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
{#if data.links.length > 0}
|
|
||||||
<div class="col-md d-flex align-items-center">
|
|
||||||
<ul class="list-unstyled">
|
|
||||||
{#each data.links as link}
|
|
||||||
<li><Icon name="globe" /> <a href={link}>{link}</a></li>
|
|
||||||
{/each}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3">
|
|
||||||
{#if data.names.length > 0}
|
|
||||||
<div class="col-md">
|
|
||||||
<h4>Names</h4>
|
|
||||||
<ul class="list-unstyled">
|
|
||||||
{#each data.names as name}
|
|
||||||
<li><StatusIcon status={name.status} /> {name.value}</li>
|
|
||||||
{/each}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
{#if data.pronouns.length > 0}
|
|
||||||
<div class="col-md">
|
|
||||||
<h4>Pronouns</h4>
|
|
||||||
<ul class="list-unstyled">
|
|
||||||
{#each data.pronouns as pronouns}
|
|
||||||
<li>
|
|
||||||
<StatusIcon status={pronouns.status} />
|
|
||||||
<PronounLink {pronouns} />
|
|
||||||
</li>
|
|
||||||
{/each}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
{#each data.fields as field}
|
|
||||||
<div class="col">
|
|
||||||
<FieldCard {field} />
|
|
||||||
</div>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue