forked from mirrors/pronouns.cc
feat: differentiate okay/avoid preferences more
This commit is contained in:
parent
86f272a365
commit
b1e267cb29
5 changed files with 24 additions and 14 deletions
|
@ -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>
|
||||||
|
|
|
@ -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}
|
||||||
|
|
14
frontend/src/lib/components/StatusLine.svelte
Normal file
14
frontend/src/lib/components/StatusLine.svelte
Normal 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}
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue