ulith/pronounss
1
0
Fork 0
forked from mirrors/pronouns.cc
Code Pull requests Activity

feat(frontend): change user/member page heading to always be 2 columns

Browse source
This commit is contained in:
Sam 2023-03-12 05:04:15 +01:00
parent 3d77e9823d
commit ae7c37e4b9
No known key found for this signature in database
GPG key ID: B4EF20DDE721CAA1
2 changed files with 22 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -2,9 +2,10 @@
import { marked } from "marked"; import { marked } from "marked";
import sanitizeHtml from "sanitize-html"; import sanitizeHtml from "sanitize-html";
import FieldCard from "$lib/components/FieldCard.svelte";
import type { PageData } from "./$types"; import type { PageData } from "./$types";
import { Icon } from "sveltestrap";
import FieldCard from "$lib/components/FieldCard.svelte";
import StatusIcon from "$lib/components/StatusIcon.svelte"; import StatusIcon from "$lib/components/StatusIcon.svelte";
import PronounLink from "$lib/components/PronounLink.svelte"; import PronounLink from "$lib/components/PronounLink.svelte";
import PartialMemberCard from "$lib/components/PartialMemberCard.svelte"; import PartialMemberCard from "$lib/components/PartialMemberCard.svelte";
@ -26,7 +27,7 @@
<div class="col-md text-center"> <div class="col-md text-center">
<FallbackImage urls={data.avatar_urls} alt="Avatar for @{data.name}" /> <FallbackImage urls={data.avatar_urls} alt="Avatar for @{data.name}" />
</div> </div>
<div class="col-md"> <div class="col-md-8">
{#if data.display_name} {#if data.display_name}
<h2>{data.display_name}</h2> <h2>{data.display_name}</h2>
<h5 class="text-body-secondary">@{data.name}</h5> <h5 class="text-body-secondary">@{data.name}</h5>
@ -37,20 +38,19 @@
{#if bio} {#if bio}
<p>{@html bio}</p> <p>{@html bio}</p>
{/if} {/if}
</div> {#if data.links.length > 0}
{#if data.links} <hr />
<div class="col-md"> <ul class="list-unstyled">
<ul>
{#each data.links as link} {#each data.links as link}
<li><a href={link}>{link}</a></li> <li><Icon name="globe" /> <a href={link}>{link}</a></li>
{/each} {/each}
</ul> </ul>
</div>
{/if} {/if}
</div> </div>
</div> </div>
</div>
<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} {#if data.names.length > 0}
<div class="col-md"> <div class="col-md">
<h4>Names</h4> <h4>Names</h4>
<ul class="list-unstyled"> <ul class="list-unstyled">
@ -60,7 +60,7 @@
</ul> </ul>
</div> </div>
{/if} {/if}
{#if data.pronouns} {#if data.pronouns.length > 0}
<div class="col-md"> <div class="col-md">
<h4>Pronouns</h4> <h4>Pronouns</h4>
<ul class="list-unstyled"> <ul class="list-unstyled">
@ -79,7 +79,7 @@
</div> </div>
{/each} {/each}
</div> </div>
{#if data.members} {#if data.members.length > 0}
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<hr /> <hr />

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

@ -31,26 +31,25 @@
<div class="col-md text-center"> <div class="col-md text-center">
<FallbackImage urls={data.avatar_urls} alt="Avatar for @{data.name}" /> <FallbackImage urls={data.avatar_urls} alt="Avatar for @{data.name}" />
</div> </div>
<div class="col-md"> <div class="col-md-8">
<h2>{data.display_name ?? data.name}</h2> <h2>{data.display_name ?? data.name}</h2>
<h5 class="text-body-secondary">{data.name} (@{data.user.name})</h5> <h5 class="text-body-secondary">{data.name} (@{data.user.name})</h5>
<hr /> <hr />
{#if bio} {#if bio}
<p>{@html bio}</p> <p>{@html bio}</p>
{/if} {/if}
</div> {#if data.links.length > 0}
{#if data.links} <hr />
<div class="col-md"> <ul class="list-unstyled">
<ul>
{#each data.links as link} {#each data.links as link}
<li><a href={link}>{link}</a></li> <li><Icon name="globe" /> <a href={link}>{link}</a></li>
{/each} {/each}
</ul> </ul>
</div>
{/if} {/if}
</div> </div>
</div>
<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} {#if data.names.length > 0}
<div class="col-md"> <div class="col-md">
<h4>Names</h4> <h4>Names</h4>
<ul class="list-unstyled"> <ul class="list-unstyled">
@ -60,7 +59,7 @@
</ul> </ul>
</div> </div>
{/if} {/if}
{#if data.pronouns} {#if data.pronouns.length > 0}
<div class="col-md"> <div class="col-md">
<h4>Pronouns</h4> <h4>Pronouns</h4>
<ul class="list-unstyled"> <ul class="list-unstyled">