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>
|
||||
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 BlockOrReport from '../atoms/BlockOrReport.svelte';
|
||||
|
@ -85,6 +92,70 @@ 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">
|
||||
{$_('page.profile.projects.heading')}
|
||||
</h2>
|
||||
{#if data?.user?.followingsMap}
|
||||
<ul>
|
||||
{#each data.user.followingsMap as following}
|
||||
{#if following.type === 'Project'}
|
||||
<li>
|
||||
<div class="flex bg-white border border-surface-100 p-4">
|
||||
<!-- Left -->
|
||||
<div class="flex flex-col flex-grow ps-10">
|
||||
<!-- Name + Icon -->
|
||||
<div class="flex -ms-10">
|
||||
<Repo24 fill="currentColor" />
|
||||
{following.name}
|
||||
</div>
|
||||
<!-- Description -->
|
||||
<!-- Compensate padding with negative margin -->
|
||||
<div class="flex -ms-4">
|
||||
{following.summary}
|
||||
</div>
|
||||
<!-- Tags -->
|
||||
<div class="flex"></div>
|
||||
</div>
|
||||
<!-- Right -->
|
||||
<div class="flex flex-col">
|
||||
<!-- Star Fork Watch -->
|
||||
<div class="flex gap-4">
|
||||
<button type="button" class="btn-icon border rounded-none">
|
||||
<RepoForked16 fill="currentColor" />
|
||||
</button>
|
||||
<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', {
|
||||
|
@ -96,26 +167,9 @@ You should have received a copy of the GNU Affero General Public License along w
|
|||
}
|
||||
})}
|
||||
</p>
|
||||
<div>
|
||||
<p>The following is DEBUG information and will be removed in the near future.</p>
|
||||
{#if data?.user}
|
||||
<div>
|
||||
<b>Person</b>
|
||||
<pre>{JSON.stringify(data.user.person, null, 2)}</pre>
|
||||
</div>
|
||||
<div>
|
||||
<b>Followings</b>
|
||||
<pre>{JSON.stringify(data.user.followings, null, 2)}</pre>
|
||||
</div>
|
||||
<div>
|
||||
<b>Followings mapped</b>
|
||||
<p>These are the contents of the items in the previous dump.</p>
|
||||
<pre>{JSON.stringify(data.user.followingsMap, null, 2)}</pre>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- History -->
|
||||
<div class="flex flex-1 flex-col px-4">
|
||||
<div class="space-y-6">
|
||||
|
|
Loading…
Reference in a new issue