Skip to content

Commit

Permalink
fix: bug template with title in english characters without spaces wil…
Browse files Browse the repository at this point in the history 
…l cause UI issue, minor style updated (#131)

* fix: fix issue#126

* style: modfiy the title and label style for the long title

* style: enhance session card layout by adding status badges in dashboard
  • Loading branch information
@howard9199
howard9199 authored Dec 26, 2024
1 parent 0932447 commit fabaa56
Show file tree
Hide file tree
Showing 5 changed files with 100 additions and 39 deletions.
46 changes: 24 additions & 22 deletions src/lib/components/session/HostView.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -483,28 +483,30 @@
</script>

<main class="mx-auto max-w-7xl px-4 py-16">
<div class="mb-8 flex items-center justify-between">
<div class="flex items-center gap-4">
<h1 class="text-3xl font-bold">{$session?.title}</h1>
{#if $session?.status === 'preparing'}
<LabelManager sessionId={$page.params.id} labels={$session?.labels || []} />
{:else if $session?.labels?.length}
<div class="flex items-center gap-2">
{#each $session.labels as label}
<span class="rounded-full bg-gray-100 px-3 py-1 text-sm text-gray-600">
{label}
</span>
{/each}
</div>
{/if}
</div>

<div class="flex items-center gap-6">
<StageProgress
session={$session}
onStageChange={handleStageChange}
showAction={$session && stageButton[$session.status].show}
/>
<div class="mb-8 flex flex-col gap-4">
{#if $session?.status === 'preparing'}
<LabelManager sessionId={$page.params.id} labels={$session?.labels || []} />
{:else if $session?.labels?.length}
<div class="flex items-center gap-2">
{#each $session.labels as label}
<span class="rounded-full bg-gray-100 px-3 py-1 text-sm text-gray-600">
{label}
</span>
{/each}
</div>
{/if}
<div class="flex items-center justify-between">
<h1 class="text-3xl font-bold">
{$session?.title}
</h1>

<div class="flex items-center gap-6">
<StageProgress
session={$session}
onStageChange={handleStageChange}
showAction={$session && stageButton[$session.status].show}
/>
</div>
</div>
</div>

Expand Down
40 changes: 34 additions & 6 deletions src/routes/dashboard/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -212,7 +212,7 @@
{#each $publicTemplates as [doc, template]}
<Card padding="lg" class="transition-all hover:border-primary-500">
<div>
<h3 class="mb-2 text-xl font-bold">{template.title}</h3>
<h3 class="mb-2 line-clamp-1 text-xl font-bold">{template.title}</h3>
<p class="mb-4 line-clamp-2 text-gray-600">{template.task}</p>
<div class="mb-4 flex items-center gap-4">
<span class="text-sm text-gray-500">
Expand Down Expand Up @@ -268,7 +268,7 @@
<Card padding="lg" class="transition-all hover:border-primary-500">
<div>
<div class="mb-4 flex items-start justify-between">
<h3 class="text-xl font-bold">{template.title}</h3>
<h3 class="line-clamp-1 text-xl font-bold">{template.title}</h3>
<span
class="rounded-full px-3 py-1 text-sm font-medium {template.public
? 'bg-green-100 text-green-600'
Expand Down Expand Up @@ -329,7 +329,22 @@
{#each $filteredHostSessions as [doc, session]}
<Card padding="lg" class="transition-all hover:border-primary-500">
<div>
<h3 class="mb-2 text-xl font-bold">{session.title}</h3>
<div class="mb-4 flex items-start justify-between">
<h3 class="line-clamp-1 text-xl font-bold">{session.title}</h3>
<span
class="rounded-full px-3 py-1 text-sm font-medium {session.status === 'preparing'
? 'bg-yellow-100 text-yellow-600'
: session.status === 'individual'
? 'bg-blue-100 text-blue-600'
: session.status === 'before-group'
? 'bg-purple-100 text-purple-600'
: session.status === 'group'
? 'bg-green-100 text-green-600'
: 'bg-gray-100 text-gray-600'}"
>
{session.status}
</span>
</div>
<div class="mb-4 flex min-h-[28px] flex-wrap gap-2">
{#if session.labels?.length}
{#each session.labels.sort() as label}
Expand All @@ -340,7 +355,6 @@
{/if}
</div>
<p class="mb-4 line-clamp-2 text-gray-600">{session.task}</p>
<p class="mb-4 line-clamp-2 text-blue-600">Now is in {session.status} stage.</p>
<div class="mb-4 flex items-center gap-4">
<span class="text-sm text-gray-500">
{(session.createdAt as Timestamp).toDate().toLocaleString()}
Expand Down Expand Up @@ -375,9 +389,23 @@
{#each $sessions as [hoster, docid, session]}
<Card padding="lg" class="transition-all hover:border-primary-500">
<div>
<h3 class="mb-2 text-xl font-bold">{session.title}</h3>
<div class="mb-4 flex items-start justify-between">
<h3 class="line-clamp-1 text-xl font-bold">{session.title}</h3>
<span
class="rounded-full px-3 py-1 text-sm font-medium {session.status === 'preparing'
? 'bg-yellow-100 text-yellow-600'
: session.status === 'individual'
? 'bg-blue-100 text-blue-600'
: session.status === 'before-group'
? 'bg-purple-100 text-purple-600'
: session.status === 'group'
? 'bg-green-100 text-green-600'
: 'bg-gray-100 text-gray-600'}"
>
{session.status}
</span>
</div>
<p class="mb-4 line-clamp-2 text-gray-600">{session.task}</p>
<p class="mb-4 line-clamp-2 text-blue-600">Now is in {session.status} stage.</p>
<p class="line-clamp-2 text-gray-500">Host by: {hoster}</p>
<div class="mb-4 flex items-center gap-4">
<span class="text-sm text-gray-500">
Expand Down
18 changes: 16 additions & 2 deletions src/routes/dashboard/recent/host/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,22 @@
{#each $filteredHostSessions as [doc, session]}
<Card padding="lg" class="transition-all hover:border-primary-500">
<div>
<h3 class="mb-2 text-xl font-bold">{session.title}</h3>
<div class="mb-4 flex items-start justify-between">
<h3 class="line-clamp-1 text-xl font-bold">{session.title}</h3>
<span
class="rounded-full px-3 py-1 text-sm font-medium {session.status === 'preparing'
? 'bg-yellow-100 text-yellow-600'
: session.status === 'individual'
? 'bg-blue-100 text-blue-600'
: session.status === 'before-group'
? 'bg-purple-100 text-purple-600'
: session.status === 'group'
? 'bg-green-100 text-green-600'
: 'bg-gray-100 text-gray-600'}"
>
{session.status}
</span>
</div>
<div class="mb-4 flex min-h-[28px] flex-wrap gap-2">
{#if session.labels?.length}
{#each session.labels.sort() as label}
Expand All @@ -102,7 +117,6 @@
{/if}
</div>
<p class="mb-4 line-clamp-2 text-gray-600">{session.task}</p>
<p class="mb-4 line-clamp-2 text-blue-600">Now is in {session.status} stage.</p>
<div class="mb-4 flex items-center gap-4">
<span class="text-sm text-gray-500">
{(session.createdAt as Timestamp).toDate().toLocaleString()}
Expand Down
27 changes: 25 additions & 2 deletions src/routes/dashboard/recent/participant/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,9 +78,32 @@
{#each $sessions as [hoster, docid, session]}
<Card padding="lg" class="transition-all hover:border-primary-500">
<div>
<h3 class="mb-2 text-xl font-bold">{session.title}</h3>
<div class="mb-4 flex items-start justify-between">
<h3 class="line-clamp-1 text-xl font-bold">{session.title}</h3>
<span
class="rounded-full px-3 py-1 text-sm font-medium {session.status === 'preparing'
? 'bg-yellow-100 text-yellow-600'
: session.status === 'individual'
? 'bg-blue-100 text-blue-600'
: session.status === 'before-group'
? 'bg-purple-100 text-purple-600'
: session.status === 'group'
? 'bg-green-100 text-green-600'
: 'bg-gray-100 text-gray-600'}"
>
{session.status}
</span>
</div>
<div class="mb-4 flex min-h-[28px] flex-wrap gap-2">
{#if session.labels?.length}
{#each session.labels.sort() as label}
<span class="rounded-full bg-gray-100 px-2 py-1 text-xs text-gray-600">
{label}
</span>
{/each}
{/if}
</div>
<p class="mb-4 line-clamp-2 text-gray-600">{session.task}</p>
<p class="mb-4 line-clamp-2 text-blue-600">Now is in {session.status} stage.</p>
<p class="line-clamp-2 text-gray-500">Host by: {hoster}</p>
<div class="mb-4 flex items-center gap-4">
<span class="text-sm text-gray-500">
Expand Down
8 changes: 1 addition & 7 deletions src/routes/template/[id]/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,13 +135,7 @@
<form on:submit|preventDefault={saveTemplate} class="space-y-6">
<div>
<label for="title" class="mb-2 block">Title</label>
<Input
id="title"
bind:value={title}
required
maxlength={200}
placeholder="Template title"
/>
<Input id="title" bind:value={title} required maxlength={50} placeholder="Template title" />
</div>

<div>
Expand Down

0 comments on commit fabaa56

Please sign in to comment.