From 18fc764d644dfbb64dfc7be20444fcbf61001dff Mon Sep 17 00:00:00 2001
From: Sam <sam@sam.wf>
Date: Tue, 14 Mar 2023 14:27:54 +0100
Subject: [PATCH] feat: tweak font size in profile fields

---
 frontend/src/routes/@[username]/+page.svelte  |  94 ++++++-------
 .../@[username]/[memberName]/+page.svelte     | 124 +++++++++---------
 2 files changed, 111 insertions(+), 107 deletions(-)

diff --git a/frontend/src/routes/@[username]/+page.svelte b/frontend/src/routes/@[username]/+page.svelte
index 05098ad..5652414 100644
--- a/frontend/src/routes/@[username]/+page.svelte
+++ b/frontend/src/routes/@[username]/+page.svelte
@@ -11,7 +11,7 @@
   import PartialMemberCard from "$lib/components/PartialMemberCard.svelte";
   import FallbackImage from "$lib/components/FallbackImage.svelte";
   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";
 
   export let data: PageData;
@@ -19,50 +19,14 @@
   let bio: string | 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 favPronouns = data.pronouns.filter((entry) => entry.status === WordStatus.Favourite);
 </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">
   {#if $userStore && $userStore.id === data.id}
     <Alert color="secondary" fade={false}>
@@ -102,8 +66,8 @@
     <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">
+          <h3>Names</h3>
+          <ul class="list-unstyled fs-5">
             {#each data.names as name}
               <li><StatusIcon status={name.status} /> {name.value}</li>
             {/each}
@@ -112,8 +76,8 @@
       {/if}
       {#if data.pronouns.length > 0}
         <div class="col-md">
-          <h4>Pronouns</h4>
-          <ul class="list-unstyled">
+          <h3>Pronouns</h3>
+          <ul class="list-unstyled fs-5">
             {#each data.pronouns as pronouns}
               <li>
                 <StatusIcon status={pronouns.status} />
@@ -144,3 +108,43 @@
     {/if}
   </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>
diff --git a/frontend/src/routes/@[username]/[memberName]/+page.svelte b/frontend/src/routes/@[username]/[memberName]/+page.svelte
index 2e4f35d..56bdaac 100644
--- a/frontend/src/routes/@[username]/[memberName]/+page.svelte
+++ b/frontend/src/routes/@[username]/[memberName]/+page.svelte
@@ -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>