feat: turn Vervis information into markup
This comes close to the design specification already. But I lack some information in the Vervis responses. Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
This commit is contained in:
parent
311e5123e7
commit
662dc71ede
1 changed files with 84 additions and 30 deletions
|
@ -13,7 +13,14 @@ You should have received a copy of the GNU Affero General Public License along w
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { _, date } from 'svelte-i18n';
|
import { _, date } from 'svelte-i18n';
|
||||||
import { NorthStar24, Star16 } from 'svelte-octicons';
|
import {
|
||||||
|
EyeClosed16,
|
||||||
|
NorthStar24,
|
||||||
|
Repo24,
|
||||||
|
RepoForked16,
|
||||||
|
Star16,
|
||||||
|
TriangleDown16
|
||||||
|
} from 'svelte-octicons';
|
||||||
|
|
||||||
import Avatar from '../atoms/Avatar.svelte';
|
import Avatar from '../atoms/Avatar.svelte';
|
||||||
import BlockOrReport from '../atoms/BlockOrReport.svelte';
|
import BlockOrReport from '../atoms/BlockOrReport.svelte';
|
||||||
|
@ -85,35 +92,82 @@ You should have received a copy of the GNU Affero General Public License along w
|
||||||
<h2 class="h2 font-semibold leading-tight text-base px-4">
|
<h2 class="h2 font-semibold leading-tight text-base px-4">
|
||||||
{$_('page.profile.projects.heading')}
|
{$_('page.profile.projects.heading')}
|
||||||
</h2>
|
</h2>
|
||||||
<p class="px-4">
|
{#if data?.user?.followingsMap}
|
||||||
{$_('page.profile.projects.empty')}
|
<ul>
|
||||||
{@html $_('page.profile.projects.add_or_import', {
|
{#each data.user.followingsMap as following}
|
||||||
values: {
|
{#if following.type === 'Project'}
|
||||||
addElementOpen: '<a class="anchor" href="#">',
|
<li>
|
||||||
addElementClose: '</a>',
|
<div class="flex bg-white border border-surface-100 p-4">
|
||||||
importElementOpen: `<a class="anchor" href="/projects/import/" data-sb-kind=${sb}>`,
|
<!-- Left -->
|
||||||
importElementClose: '</a>'
|
<div class="flex flex-col flex-grow ps-10">
|
||||||
}
|
<!-- Name + Icon -->
|
||||||
})}
|
<div class="flex -ms-10">
|
||||||
</p>
|
<Repo24 fill="currentColor" />
|
||||||
<div>
|
{following.name}
|
||||||
<p>The following is DEBUG information and will be removed in the near future.</p>
|
</div>
|
||||||
{#if data?.user}
|
<!-- Description -->
|
||||||
<div>
|
<!-- Compensate padding with negative margin -->
|
||||||
<b>Person</b>
|
<div class="flex -ms-4">
|
||||||
<pre>{JSON.stringify(data.user.person, null, 2)}</pre>
|
{following.summary}
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<!-- Tags -->
|
||||||
<b>Followings</b>
|
<div class="flex"></div>
|
||||||
<pre>{JSON.stringify(data.user.followings, null, 2)}</pre>
|
</div>
|
||||||
</div>
|
<!-- Right -->
|
||||||
<div>
|
<div class="flex flex-col">
|
||||||
<b>Followings mapped</b>
|
<!-- Star Fork Watch -->
|
||||||
<p>These are the contents of the items in the previous dump.</p>
|
<div class="flex gap-4">
|
||||||
<pre>{JSON.stringify(data.user.followingsMap, null, 2)}</pre>
|
<button type="button" class="btn-icon border rounded-none">
|
||||||
</div>
|
<RepoForked16 fill="currentColor" />
|
||||||
{/if}
|
</button>
|
||||||
</div>
|
<button type="button" class="btn-icon border rounded-none">
|
||||||
|
<Star16 fill="currentColor" />
|
||||||
|
</button>
|
||||||
|
<button type="button" class="btn-icon border rounded-none">
|
||||||
|
<EyeClosed16 fill="currentColor" />
|
||||||
|
<TriangleDown16 fill="currentColor" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<!-- FIXME: Mark up as translatable once I figured out the
|
||||||
|
timestamp needed here -->
|
||||||
|
<div class="self-end">Updated somewhen</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
{/if}
|
||||||
|
{/each}
|
||||||
|
</ul>
|
||||||
|
<div>
|
||||||
|
<p>The following is DEBUG information and will be removed in the near future.</p>
|
||||||
|
{#if data?.user}
|
||||||
|
<details>
|
||||||
|
<summary>Person</summary>
|
||||||
|
<pre>{JSON.stringify(data.user.person, null, 2)}</pre>
|
||||||
|
</details>
|
||||||
|
<details>
|
||||||
|
<summary>Followings</summary>
|
||||||
|
<pre>{JSON.stringify(data.user.followings, null, 2)}</pre>
|
||||||
|
</details>
|
||||||
|
<details>
|
||||||
|
<summary>Followings mapped</summary>
|
||||||
|
<p>These are the contents of the items in the previous dump.</p>
|
||||||
|
<pre>{JSON.stringify(data.user.followingsMap, null, 2)}</pre>
|
||||||
|
</details>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<p class="px-4">
|
||||||
|
{$_('page.profile.projects.empty')}
|
||||||
|
{@html $_('page.profile.projects.add_or_import', {
|
||||||
|
values: {
|
||||||
|
addElementOpen: '<a class="anchor" href="#">',
|
||||||
|
addElementClose: '</a>',
|
||||||
|
importElementOpen: `<a class="anchor" href="/projects/import/" data-sb-kind=${sb}>`,
|
||||||
|
importElementClose: '</a>'
|
||||||
|
}
|
||||||
|
})}
|
||||||
|
</p>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- History -->
|
<!-- History -->
|
||||||
|
|
Loading…
Reference in a new issue