sam/pronounscc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: tweak font size in profile fields

Browse source
This commit is contained in:
Sam 2023-03-14 14:27:54 +01:00
parent 97cce1d8fc
commit 18fc764d64
Signed by: sam
GPG key ID: B4EF20DDE721CAA1
2 changed files with 111 additions and 107 deletions
Download patch file Download diff file Expand all files Collapse all files

124
frontend/src/routes/@[username]/[memberName]/+page.svelte
View file

@ -21,6 +21,68 @@
const favPronouns = data.pronouns.filter((entry) => entry.status === WordStatus.Favourite);
</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>
<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" />
{/if}
</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>