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 all commits
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
18 changes: 10 additions & 8 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,16 @@
<!-- 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 class="w-20 sm:w-24 min-w-[5rem]">回答</TableHeadCell>
<TableHeadCell class="w-1/2 text-left pl-0 sm:pl-6 truncate overflow-ellipsis">
問題名
</TableHeadCell>
<TableHeadCell class="min-w-[120px] max-w-[150px] text-left pl-0 truncate">
<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 +80,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 +91,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
57 changes: 43 additions & 14 deletions src/lib/components/WorkBookTasks/WorkBookTasksTable.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
<script lang="ts">
import xss from 'xss';

import {
Label,
Table,
Expand All @@ -9,6 +11,8 @@
TableHeadCell,
} from 'flowbite-svelte';

import TrashBinOutline from 'flowbite-svelte-icons/TrashBinOutline.svelte';

import GradeLabel from '$lib/components/GradeLabel.svelte';
import ExternalLinkWrapper from '$lib/components/ExternalLinkWrapper.svelte';

Expand All @@ -31,7 +35,7 @@
const target = event.target as HTMLElement;

if (target && target instanceof HTMLElement) {
const newComment = target.innerText as string;
const newComment = xss(target.innerText as string);

// HACK: 代替手段として、50文字以下の場合のみ更新
if (newComment.length <= 50) {
Expand Down Expand Up @@ -104,23 +108,28 @@

return task;
}

let isDeleting = false;
</script>

{#if workBookTasksForTable.length}
<Label class="space-y-2">
<span>問題一覧（{workBookTasksForTable.length} 問）</span>
</Label>

<Table shadow class="text-md">
<Table shadow class="text-md table-fixed w-full" aria-label="Workbook tasks">
<caption class="sr-only">List of workbook tasks with their grades and comments</caption>
<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">
<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="min-w-[24px] px-0 text-center">
<TableHeadCell class="w-12 xs:w-16 text-center">
<span class="sr-only">編集</span>
</TableHeadCell>
</TableHead>
Expand All @@ -140,8 +149,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 +167,10 @@
</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"
aria-hidden={true}
>
{addContestNameToTaskIndex(
task.contestId,
getTaskTableIndex(tasksMapByIds, task.taskId),
Expand All @@ -169,7 +181,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 +191,25 @@
</td>

<!-- 削除 -->
<TableBodyCell class="px-0" on:click={() => removeWorkBookTask(task)}>
<div class="flex justify-center items-center px-0">削除</div>
<TableBodyCell class="w-12 xs:w-16">
<button
type="button"
class="flex justify-center items-center"
on:click={() => {
if (confirm('本当に削除しますか?')) {
try {
isDeleting = true;
removeWorkBookTask(task);
} finally {
isDeleting = false;
}
}
}}
disabled={isDeleting}
>
<TrashBinOutline class="w-5 h-5 xs:w-6 xs:h-6" />
<span class="sr-only">削除</span>
</button>
</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