stan/personal-website
1
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

add mobile view

Browse Source
This commit is contained in:
Stan Runge
2025-02-24 22:24:33 +01:00
parent 11f56aa986
commit 3b42fa902d
1 changed files with 84 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
packages/web/src/routes/progress/+page.svelte
View File

@@ -28,53 +28,99 @@
{#if data.tasks.length > 0}
<div class="overflow-x-auto w-full">
<table class="min-w-full">
<thead>
<tr class="border-b border-white">
<th class="px-6 py-3 text-left text-sm font-semibold">Name</th>
<th class="px-6 py-3 text-left text-sm font-semibold">Topics</th>
<th class="px-6 py-3 text-left text-sm font-semibold min-w-[200px]">Progress</th>
</tr>
</thead>
<tbody>
{#each data.tasks as task, index}
<tr class="{index % 2 === 0 ? 'bg-black' : 'bg-gray-950'} hover:bg-gray-800">
<td class="px-6 py-2 border-b">
<a href={`/progress/${task.id}`} class="text-blue-500 hover:underline">
{task.name}
</a>
</td>
<td class="px-6 py-2 border-b">
<a href={`/progress/${task.id}`} class="flex gap-2 flex-wrap">
{#if data.tasks.length > 0}
<!-- Desktop Table View -->
<div class="hidden md:block">
<table class="min-w-full">
<thead>
<tr class="border-b border-white">
<th class="px-6 py-3 text-left text-sm font-semibold">Name</th>
<th class="px-6 py-3 text-left text-sm font-semibold">Topics</th>
<th class="px-6 py-3 text-left text-sm font-semibold min-w-[200px]">Progress</th>
</tr>
</thead>
<tbody>
{#each data.tasks as task, index}
<tr class="{index % 2 === 0 ? 'bg-black' : 'bg-gray-950'} hover:bg-gray-800">
<td class="px-6 py-2 border-b">
<a href={`/progress/${task.id}`} class="text-blue-500 hover:underline">
{task.name}
</a>
</td>
<td class="px-6 py-2 border-b">
<a href={`/progress/${task.id}`} class="flex gap-2 flex-wrap">
{#each task.tasksToTopics as topic}
<div
class="relative bg-blue-500 text-white rounded-full px-2 py-1 shadow font-medium hover:bg-blue-600 transition cursor-pointer"
title="Click for more details about {topic.topic.name}"
>
{topic.topic.name}
</div>
{/each}
</a>
</td>
<td class="px-6 py-2 border-b min-w-[200px]">
<div class="relative w-full h-6 bg-gray-700 rounded-full overflow-hidden">
<div
class="absolute h-full bg-green-500"
style="width: {(task.currentPoints / task.totalPoints) * 100}%"
/>
<span class="absolute inset-0 flex items-center justify-center text-sm">
{task.currentPoints} / {task.totalPoints} ({(
(task.currentPoints / task.totalPoints) *
100
).toFixed(1)}%)
</span>
</div>
</td>
</tr>
{/each}
</tbody>
</table>
</div>
<!-- Mobile Card View -->
<div class="md:hidden space-y-4">
{#each data.tasks as task}
<div class="bg-gray-800 rounded-lg p-2 w-full">
<a
href={`/progress/${task.id}`}
class="text-blue-500 hover:underline text-lg font-bold"
>
{task.name}
</a>
<div class="mt-1">
<div class="mb-1"></div>
<span class="font-medium">Topics:</span>
<div class="flex flex-wrap gap-1 mt-1">
{#each task.tasksToTopics as topic}
<div
class="relative bg-blue-500 text-white rounded-full px-2 py-1 shadow font-medium hover:bg-blue-600 transition cursor-pointer group"
class="bg-blue-500 text-white rounded-full px-2 py-1 shadow font-medium hover:bg-blue-600 transition cursor-pointer"
title="Click for more details about {topic.topic.name}"
>
{topic.topic.name}
</div>
{/each}
</a>
</td>
<td class="px-6 py-2 border-b min-w-[200px]">
<div class="relative w-full h-6 bg-gray-700 rounded-full overflow-hidden">
<div
class="absolute h-full bg-green-500"
style="width: {(task.currentPoints / task.totalPoints) * 100}%"
/>
<span class="absolute inset-0 flex items-center justify-center text-sm">
{task.currentPoints} / {task.totalPoints} ({(
(task.currentPoints / task.totalPoints) *
100
).toFixed(1)}%)
</span>
</div>
</td>
</tr>
</div>
<div class="w-full h-4 bg-gray-700 rounded-full relative overflow-hidden">
<div
class="absolute h-full bg-green-500"
style="width: {(task.currentPoints / task.totalPoints) * 100}%"
/>
<span class="absolute inset-0 flex items-center justify-center text-xs">
{task.currentPoints} / {task.totalPoints} ({(
(task.currentPoints / task.totalPoints) *
100
).toFixed(1)}%)
</span>
</div>
</div>
{/each}
</tbody>
</table>
</div>
{:else}
<p class="text-gray-500">No tasks available. Click "Create" to add a new task.</p>
{/if}
</div>
{:else}
<p class="text-gray-500">No tasks available. Click "Create" to add a new task.</p>