Skip to content

🎨 Improve table layout (#1526) #1545

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
KATO-Hiro merged 6 commits into from
Dec 3, 2024
Merged

🎨 Improve table layout (#1526) #1545

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
4a85357
:art: Improve table layout (#1526)
KATO-Hiro Dec 1, 2024
546937d
Merge branch 'staging' of github.com:KATO-Hiro/AtCoderNoviceProblemsS…
KATO-Hiro Dec 3, 2024
e0bbef9
:art: Improve table layout (#1526)
KATO-Hiro Dec 3, 2024
716f376
:art: Improve table layout and UX (#1526)
KATO-Hiro Dec 3, 2024
923d2bf
🚨 Sanitize input text in comment (#1526)
KATO-Hiro Dec 3, 2024
6df3ac4
:art: Enhance accessibility (#1526)
KATO-Hiro Dec 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 10 additions & 10 deletions src/lib/components/TaskList.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,16 +53,14 @@
<!-- TODO: 問題が多くなってきたら、ページネーションを導入する -->
<!-- TODO: 回答状況に応じて、フィルタリングできるようにする -->
<div class="overflow-auto rounded-md border">
<Table shadow id={grade} class="text-md">
<Table shadow id={grade} class="text-md table-fixed w-full">
<TableHead class="text-sm bg-gray-100">
<TableHeadCell class="min-w-[96px] max-w-[120px]">回答</TableHeadCell>
<TableHeadCell class="min-w-[240px] max-w-2/3 text-left pl-0 sm:pl-6 truncate">
問題名
</TableHeadCell>
<TableHeadCell class="min-w-[120px] max-w-[150px] text-left pl-0 truncate">
<TableHeadCell class="w-20 sm:w-24">回答</TableHeadCell>
<TableHeadCell class="w-1/2 text-left pl-0 sm:pl-6 truncate">問題名</TableHeadCell>
<TableHeadCell class="w-1/3 hidden sm:table-cell text-left pl-0 truncate">
出典
</TableHeadCell>
<TableHeadCell class="min-w-[24px] text-center">
<TableHeadCell class="w-6 text-center">
<span class="sr-only">編集</span>
</TableHeadCell>
</TableHead>
Expand All @@ -80,7 +78,7 @@
<SubmissionStatusImage {taskResult} {isLoggedIn} />
</div>
</TableBodyCell>
<TableBodyCell class="pl-0 sm:pl-6 w-2/3">
<TableBodyCell class="w-1/2 text-left truncate pl-0 sm:pl-6">
<ExternalLinkWrapper
url={getTaskUrl(taskResult.contest_id, taskResult.task_id)}
description={removeTaskIndexFromTitle(
Expand All @@ -91,10 +89,12 @@
textColorInDarkMode="dark:text-gray-300"
/>
</TableBodyCell>
<TableBodyCell class="pl-0 xs:text-lg text-gray-700 dark:text-gray-300">
<TableBodyCell
class="w-1/3 hidden sm:table-cell text-left truncate pl-0 xs:text-lg text-gray-700 dark:text-gray-300"
>
{addContestNameToTaskIndex(taskResult.contest_id, taskResult.task_table_index)}
</TableBodyCell>
<TableBodyCell class="px-0">
<TableBodyCell class="w-6 px-0">
{#if isAdmin}
<div class="flex justify-center items-center px-0">
<a
Expand Down
34 changes: 19 additions & 15 deletions src/lib/components/WorkBookTasks/WorkBookTasksTable.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,16 +111,18 @@
<span>問題一覧（{workBookTasksForTable.length} 問）</span>
</Label>

<Table shadow class="text-md">
<Table shadow class="text-md table-fixed w-full">
<TableHead class="text-sm bg-gray-100">
<TableHeadCell class="min-w-[18px] pl-2 md:pl-4 pr-0 text-center">#</TableHeadCell>
<TableHeadCell class="text-center px-0" aria-label="Task grade">グレード</TableHeadCell>
<TableHeadCell class="min-w-[240px] pl-0 truncate">問題名</TableHeadCell>
<TableHeadCell class="min-w-[120px] max-w-[150px] truncate">出典</TableHeadCell>
<TableHeadCell class="min-w-[120px] max-w-[150px] px-0 truncate">
一言（50文字以下）
</TableHeadCell>
<TableHeadCell class="min-w-[24px] px-0 text-center">
<TableHeadCell class="w-6 pl-2 md:pl-4 pr-0 text-center">#</TableHeadCell>
<TableHeadCell class="w-20 xs:w-24 text-center px-0" aria-label="Task grade"
>グレード</TableHeadCell
>
<TableHeadCell class="w-1/2 pl-0 truncate">問題名</TableHeadCell>
<TableHeadCell class="w-1/3 hidden sm:table-cell truncate">出典</TableHeadCell>
<TableHeadCell class="w-24 md:w-64 hidden sm:table-cell px-0 truncate"
>一言（50文字以下）</TableHeadCell
>
<TableHeadCell class="w-6 text-center">
<span class="sr-only">編集</span>
</TableHeadCell>
</TableHead>
Expand All @@ -140,8 +142,8 @@
</TableBodyCell>

<!-- グレード -->
<TableBodyCell>
<div class="flex items-center justify-center min-w-[54px] max-w-fit">
<TableBodyCell class="w-20 xs:w-24">
<div class="flex items-center justify-center">
<GradeLabel taskGrade={getTaskGrade(tasksMapByIds, task.taskId)} />
</div>
</TableBodyCell>
Expand All @@ -158,7 +160,9 @@
</TableBodyCell>

<!-- 出典 -->
<TableBodyCell class="xs:text-lg text-gray-700 dark:text-gray-300 truncate">
<TableBodyCell
class="xs:text-lg hidden sm:table-cell text-gray-700 dark:text-gray-300 truncate"
>
{addContestNameToTaskIndex(
task.contestId,
getTaskTableIndex(tasksMapByIds, task.taskId),
Expand All @@ -169,7 +173,7 @@
<!-- Note: <TableBodyCell>コンポーネントだとon:inputが動作しない -->
<td
contenteditable={true}
class="xs:text-lg text-gray-700 dark:text-gray-300 truncate"
class="xs:text-lg hidden sm:table-cell text-gray-700 dark:text-gray-300 truncate"
on:input={(event) => updateComment(index, event)}
on:focus={handleFocus}
on:blur={handleBlur}
Expand All @@ -179,8 +183,8 @@
</td>

<!-- 削除 -->
<TableBodyCell class="px-0" on:click={() => removeWorkBookTask(task)}>
<div class="flex justify-center items-center px-0">削除</div>
<TableBodyCell on:click={() => removeWorkBookTask(task)}>
<div class="flex justify-center items-center">削除</div>
</TableBodyCell>
</TableBodyRow>
{/each}
Expand Down
23 changes: 11 additions & 12 deletions src/routes/workbooks/[slug]/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,14 +140,13 @@
<!-- 問題一覧 -->
{#if workBookTasks.length}
<div class="overflow-auto rounded-md border">
<Table shadow class="text-md">
<Table shadow class="text-md table-fixed w-full">
<TableHead class="text-xs xs:text-sm bg-gray-100">
<TableHeadCell class="text-center w-14 px-0.5 xs:px-0">グレード</TableHeadCell>
<TableHeadCell class="text-center min-w-[96px] max-w-[120px]">回答</TableHeadCell>
<TableHeadCell class="min-w-[240px] max-w-2/3 truncate px-0 sm:px-6">問題名</TableHeadCell
>
<TableHeadCell class="min-w-[120px] max-w-[150px] truncate">出典</TableHeadCell>
<TableHeadCell class="text-center px-0">一言</TableHeadCell>
<TableHeadCell class="text-center w-16 xs:w-20 px-0.5 xs:px-0">グレード</TableHeadCell>
<TableHeadCell class="text-center w-20">回答</TableHeadCell>
<TableHeadCell class="w-1/2 truncate px-3 sm:px-6">問題名</TableHeadCell>
<TableHeadCell class="w-1/3 hidden xs:table-cell truncate">出典</TableHeadCell>
<TableHeadCell class="w-14 text-center px-0.5">一言</TableHeadCell>
</TableHead>
<TableBody tableBodyClass="divide-y">
{#each workBookTasks as workBookTask}
Expand All @@ -156,7 +155,7 @@
class={getBackgroundColorFrom(getTaskResult(workBookTask.taskId).status_name)}
>
<!-- 問題のグレード -->
<TableBodyCell class="justify-center w-14 px-3">
<TableBodyCell class="justify-center w-16 px-0.5 xs:px-3">
<div class="flex items-center justify-center min-w-[54px] max-w-[54px]">
<GradeLabel taskGrade={getTaskGrade(workBookTask.taskId)} />
</div>
Expand All @@ -176,7 +175,7 @@
</TableBodyCell>

<!-- 問題のリンク -->
<TableBodyCell class="px-0 sm:px-6">
<TableBodyCell class="w-1/2 px-3 sm:px-6">
<div class="xs:text-lg truncate">
<ExternalLinkWrapper
url={getTaskUrl(getContestIdFrom(workBookTask.taskId), workBookTask.taskId)}
Expand All @@ -188,15 +187,15 @@
</TableBodyCell>

<!-- 出典 -->
<TableBodyCell>
<TableBodyCell class="w-1/3 hidden xs:table-cell">
<div class="xs:text-lg text-gray-700 dark:text-gray-300 truncate">
{getContestNameFrom(workBookTask.taskId)}
</div>
</TableBodyCell>

<!-- 一言（コメント・ヒント） -->
<TableBodyCell class="justify-center w-14 px-0.5 sm:px-3">
<div class="flex items-center justify-center min-w-[54px] max-w-[54px]">
<TableBodyCell class="justify-center w-14 px-0.5">
<div class="flex items-center justify-center">
<CommentAndHint
uniqueId={getUniqueIdUsing(workBookTask.taskId)}
commentAndHint={workBookTask.comment}
Expand Down
Loading