feat: differentiate okay/avoid preferences more

This commit is contained in:
Sam 2023-03-30 23:10:13 +02:00
parent 86f272a365
commit b1e267cb29
No known key found for this signature in database
GPG key ID: B4EF20DDE721CAA1
5 changed files with 24 additions and 14 deletions

View file

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import type { Field } from "$lib/api/entities"; import type { Field } from "$lib/api/entities";
import StatusIcon from "./StatusIcon.svelte"; import StatusLine from "./StatusLine.svelte";
export let field: Field; export let field: Field;
</script> </script>
@ -10,7 +10,7 @@
<h3>{field.name}</h3> <h3>{field.name}</h3>
<ul class="list-unstyled fs-5"> <ul class="list-unstyled fs-5">
{#each field.entries as entry} {#each field.entries as entry}
<li><StatusIcon status={entry.status} /> {entry.value}</li> <li><StatusLine status={entry.status}>{entry.value}</StatusLine></li>
{/each} {/each}
</ul> </ul>
</div> </div>

View file

@ -26,7 +26,7 @@
</script> </script>
{#if shouldLink} {#if shouldLink}
<a href="/pronouns/{link}">{pronounText}</a> <a class="text-reset" href="/pronouns/{link}">{pronounText}</a>
{:else} {:else}
{pronounText} {pronounText}
{/if} {/if}

View file

@ -0,0 +1,14 @@
<script lang="ts">
import { WordStatus } from "$lib/api/entities";
import StatusIcon from "$lib/components/StatusIcon.svelte";
export let status: WordStatus;
</script>
{#if status === WordStatus.Favourite}
<strong class="fs-5"><StatusIcon {status} /> <slot /></strong>
{:else if status === WordStatus.Avoid}
<span class="fs-6 text-muted"><StatusIcon {status} /> <slot /></span>
{:else}
<StatusIcon {status} /> <slot />
{/if}

View file

@ -33,7 +33,8 @@
import renderMarkdown from "$lib/api/markdown"; import renderMarkdown from "$lib/api/markdown";
import ReportButton from "./ReportButton.svelte"; import ReportButton from "./ReportButton.svelte";
import ProfileLink from "./ProfileLink.svelte"; import ProfileLink from "./ProfileLink.svelte";
import { memberNameRegex } from "$lib/api/regex"; import { memberNameRegex } from "$lib/api/regex";
import StatusLine from "$lib/components/StatusLine.svelte";
export let data: PageData; export let data: PageData;
@ -146,7 +147,7 @@
<h3>Names</h3> <h3>Names</h3>
<ul class="list-unstyled fs-5"> <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><StatusLine status={name.status}>{name.value}</StatusLine></li>
{/each} {/each}
</ul> </ul>
</div> </div>
@ -156,10 +157,7 @@
<h3>Pronouns</h3> <h3>Pronouns</h3>
<ul class="list-unstyled fs-5"> <ul class="list-unstyled fs-5">
{#each data.pronouns as pronouns} {#each data.pronouns as pronouns}
<li> <li><StatusLine status={pronouns.status}><PronounLink {pronouns} /></StatusLine></li>
<StatusIcon status={pronouns.status} />
<PronounLink {pronouns} />
</li>
{/each} {/each}
</ul> </ul>
</div> </div>

View file

@ -12,6 +12,7 @@
import renderMarkdown from "$lib/api/markdown"; import renderMarkdown from "$lib/api/markdown";
import ReportButton from "../ReportButton.svelte"; import ReportButton from "../ReportButton.svelte";
import ProfileLink from "../ProfileLink.svelte"; import ProfileLink from "../ProfileLink.svelte";
import StatusLine from "$lib/components/StatusLine.svelte";
export let data: PageData; export let data: PageData;
@ -80,7 +81,7 @@
<h3>Names</h3> <h3>Names</h3>
<ul class="list-unstyled fs-5"> <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><StatusLine status={name.status}>{name.value}</StatusLine></li>
{/each} {/each}
</ul> </ul>
</div> </div>
@ -90,10 +91,7 @@
<h3>Pronouns</h3> <h3>Pronouns</h3>
<ul class="list-unstyled fs-5"> <ul class="list-unstyled fs-5">
{#each data.pronouns as pronouns} {#each data.pronouns as pronouns}
<li> <li><StatusLine status={pronouns.status}><PronounLink {pronouns} /></StatusLine></li>
<StatusIcon status={pronouns.status} />
<PronounLink {pronouns} />
</li>
{/each} {/each}
</ul> </ul>
</div> </div>