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

feat(frontend): tweak user/member layout, add start of edit profile page

Browse source
This commit is contained in:
Sam 2023-03-12 15:59:20 +01:00
parent d4b8a20b4d
commit e4f3b26107
Signed by: sam
GPG key ID: B4EF20DDE721CAA1
7 changed files with 285 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -4,12 +4,13 @@
import type { PageData } from "./$types";
import { Icon } from "sveltestrap";
import { Alert, Icon } from "sveltestrap";
import FieldCard from "$lib/components/FieldCard.svelte";
import StatusIcon from "$lib/components/StatusIcon.svelte";
import PronounLink from "$lib/components/PronounLink.svelte";
import PartialMemberCard from "$lib/components/PartialMemberCard.svelte";
import FallbackImage from "$lib/components/FallbackImage.svelte";
import { userStore } from "$lib/store";
export let data: PageData;
@ -22,74 +23,83 @@
</svelte:head>
<div class="container">
<div class="grid">
{#if $userStore && $userStore.id === data.id}
<Alert color="secondary" fade={false}>
You are currently viewing your <strong>public</strong> profile.
<br /><a href="/edit/profile">Edit your profile</a>
</Alert>
{/if}
<div class="grid row-gap-3">
<div class="row">
<div class="col-md text-center">
<FallbackImage urls={data.avatar_urls} alt="Avatar for @{data.name}" />
<FallbackImage width={200} urls={data.avatar_urls} alt="Avatar for @{data.name}" />
</div>
<div class="col-md-8">
<div class="col-md">
{#if data.display_name}
<h2>{data.display_name}</h2>
<h5 class="text-body-secondary">@{data.name}</h5>
<div>
<h2>{data.display_name}</h2>
<h5 class="text-body-secondary">@{data.name}</h5>
</div>
{:else}
<h2>@{data.name}</h2>
{/if}
<hr />
{#if bio}
<hr />
<p>{@html bio}</p>
{/if}
{#if data.links.length > 0}
<hr />
</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>
{/if}
</div>
</div>
{/if}
</div>
</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>
{#if data.members.length > 0}
<div class="row">
<div class="col">
<hr />
<h2>Members</h2>
</div>
</div>
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4 text-center">
{#each data.members as member}
<PartialMemberCard user={data} {member} />
<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>
{/if}
{#if data.members.length > 0}
<div class="row">
<div class="col">
<hr />
<h2>Members</h2>
</div>
</div>
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4 text-center">
{#each data.members as member}
<PartialMemberCard user={data} {member} />
{/each}
</div>
{/if}
</div>
</div>

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

@ -29,24 +29,25 @@
<div class="grid">
<div class="row">
<div class="col-md text-center">
<FallbackImage urls={data.avatar_urls} alt="Avatar for @{data.name}" />
<FallbackImage width={200} urls={data.avatar_urls} alt="Avatar for @{data.name}" />
</div>
<div class="col-md-8">
<div class="col-md">
<h2>{data.display_name ?? data.name}</h2>
<h5 class="text-body-secondary">{data.name} (@{data.user.name})</h5>
<hr />
{#if bio}
<hr />
<p>{@html bio}</p>
{/if}
{#if data.links.length > 0}
<hr />
</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>
{/if}
</div>
</div>
{/if}
</div>
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3">
{#if data.names.length > 0}