85596541fd
I made a best effort attempt to design the profile page according to the current design specification. Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
85 lines
2.4 KiB
Svelte
85 lines
2.4 KiB
Svelte
<script>
|
|
import { Avatar } from '@skeletonlabs/skeleton';
|
|
|
|
/** @type {import('./$types').PageData} */
|
|
export let data;
|
|
</script>
|
|
|
|
<section class="w-full mx-auto flex px-8 pt-8">
|
|
<!-- Profile header -->
|
|
<div>
|
|
<Avatar
|
|
src={data.user.avatar}
|
|
width="w-32"
|
|
rounded="rounded-full"
|
|
initials={data.user.display_name}
|
|
/>
|
|
</div>
|
|
<!-- Board -->
|
|
<div class="flex flex-1 flex-col pl-8">
|
|
<div class="self-end">
|
|
<span
|
|
>created <date datetime={data.user.created_at}>{@html data.user.created_at_formatted}</date
|
|
></span
|
|
>
|
|
<button type="button" class="underline">block</button>
|
|
or
|
|
<button type="button" class="underline">report</button>
|
|
</div>
|
|
<!-- Top Row -->
|
|
<div class="flex mt-2">
|
|
<!-- Board -->
|
|
<div class="flex flex-col flex-1 gap-2">
|
|
<div class="flex items-end">
|
|
<h1 class="h1 font-semibold text-4xl leading-tight">
|
|
<span class="sr-only">Profile for </span>
|
|
{@html data.user.display_name}
|
|
</h1>
|
|
<p class="leading-normal my-1">(she/her)</p>
|
|
</div>
|
|
<span class="leading-tight">
|
|
{@html data.user.username}@{@html data.user.instance}
|
|
</span>
|
|
</div>
|
|
<!-- Interaction Links -->
|
|
<button type="button" class="btn-icon border rounded-none self-start">⭐</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="w-full h-full mx-auto flex mt-8 px-8">
|
|
<!-- Board -->
|
|
<div class="flex flex-1 flex-col px-4">
|
|
<div class="space-y-6">
|
|
<h2 class="h2 font-semibold leading-tight text-base px-4">Projects</h2>
|
|
<p class="px-4">
|
|
No projects added yet.
|
|
<a class="anchor" href="#">Add a project</a>
|
|
or
|
|
<a class="anchor" href="#">import a project</a>.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<!-- History -->
|
|
<div class="flex flex-1 flex-col px-4">
|
|
<div class="space-y-6">
|
|
<h2 class="h2 font-semibold leading-tight text-base">Activities</h2>
|
|
<ul>
|
|
<li class="flex flex-col border-l-2 ml-2">
|
|
<!-- Commit day -->
|
|
<span>
|
|
<!-- North Star in surface-900 -->
|
|
<span class="-ml-2 bg-[#0f161f]">✴️</span>
|
|
<span class="ml-4">Apr 23, 2023 - account set up</span>
|
|
</span>
|
|
<!-- Commits -->
|
|
<span class="ml-6 mt-8">
|
|
<span class="border box-decoration-clone px-4 py-2 leading-10">
|
|
The F2 account @{@html data.user.username}@{@html data.user.instance} was successfully
|
|
set up within {@html data.user.created_with}
|
|
</span>
|
|
</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|