Skip to content

Commit ff3fd93

Browse files
KATO-HiroKATO-Hiro
authored
Merge pull request #1545 from AtCoder-NoviSteps/#1526
🎨 Improve table layout (#1526)
2 parents 110108d + 6df3ac4 commit ff3fd93

File tree

3 files changed

+64
-34
lines changed

3 files changed

+64
-34
lines changed

‎src/lib/components/TaskList.svelte‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -53,16 +53,16 @@
5353
<!-- TODO: 問題が多くなってきたら、ページネーションを導入する -->
5454
<!-- TODO: 回答状況に応じて、フィルタリングできるようにする -->
5555
<div class="overflow-auto rounded-md border">
56-
<Table shadow id={grade} class="text-md">
56+
<Table shadow id={grade} class="text-md table-fixed w-full">
5757
<TableHead class="text-sm bg-gray-100">
58-
<TableHeadCell class="min-w-[96px] max-w-[120px]">回答</TableHeadCell>
59-
<TableHeadCell class="min-w-[240px] max-w-2/3 text-left pl-0 sm:pl-6 truncate">
58+
<TableHeadCell class="w-20 sm:w-24 min-w-[5rem]">回答</TableHeadCell>
59+
<TableHeadCell class="w-1/2 text-left pl-0 sm:pl-6 truncate overflow-ellipsis">
6060
問題名
6161
</TableHeadCell>
62-
<TableHeadCell class="min-w-[120px] max-w-[150px] text-left pl-0 truncate">
62+
<TableHeadCell class="w-1/3 hidden sm:table-cell text-left pl-0 truncate">
6363
出典
6464
</TableHeadCell>
65-
<TableHeadCell class="min-w-[24px] text-center">
65+
<TableHeadCell class="w-6 text-center">
6666
<span class="sr-only">編集</span>
6767
</TableHeadCell>
6868
</TableHead>
@@ -80,7 +80,7 @@
8080
<SubmissionStatusImage {taskResult} {isLoggedIn} />
8181
</div>
8282
</TableBodyCell>
83-
<TableBodyCell class="pl-0 sm:pl-6 w-2/3">
83+
<TableBodyCell class="w-1/2 text-left truncate pl-0 sm:pl-6">
8484
<ExternalLinkWrapper
8585
url={getTaskUrl(taskResult.contest_id, taskResult.task_id)}
8686
description={removeTaskIndexFromTitle(
@@ -91,10 +91,12 @@
9191
textColorInDarkMode="dark:text-gray-300"
9292
/>
9393
</TableBodyCell>
94-
<TableBodyCell class="pl-0 xs:text-lg text-gray-700 dark:text-gray-300">
94+
<TableBodyCell
95+
class="w-1/3 hidden sm:table-cell text-left truncate pl-0 xs:text-lg text-gray-700 dark:text-gray-300"
96+
>
9597
{addContestNameToTaskIndex(taskResult.contest_id, taskResult.task_table_index)}
9698
</TableBodyCell>
97-
<TableBodyCell class="px-0">
99+
<TableBodyCell class="w-6 px-0">
98100
{#if isAdmin}
99101
<div class="flex justify-center items-center px-0">
100102
<a

‎src/lib/components/WorkBookTasks/WorkBookTasksTable.svelte‎

Lines changed: 43 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
<script lang="ts">
2+
import xss from 'xss';
3+
24
import {
35
Label,
46
Table,
@@ -9,6 +11,8 @@
911
TableHeadCell,
1012
} from 'flowbite-svelte';
1113
14+
import TrashBinOutline from 'flowbite-svelte-icons/TrashBinOutline.svelte';
15+
1216
import GradeLabel from '$lib/components/GradeLabel.svelte';
1317
import ExternalLinkWrapper from '$lib/components/ExternalLinkWrapper.svelte';
1418
@@ -31,7 +35,7 @@
3135
const target = event.target as HTMLElement;
3236
3337
if (target && target instanceof HTMLElement) {
34-
const newComment = target.innerText as string;
38+
const newComment = xss(target.innerText as string);
3539
3640
// HACK: 代替手段として、50文字以下の場合のみ更新
3741
if (newComment.length <= 50) {
@@ -104,23 +108,28 @@
104108
105109
return task;
106110
}
111+
112+
let isDeleting = false;
107113
</script>
108114

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

114-
<Table shadow class="text-md">
120+
<Table shadow class="text-md table-fixed w-full" aria-label="Workbook tasks">
121+
<caption class="sr-only">List of workbook tasks with their grades and comments</caption>
115122
<TableHead class="text-sm bg-gray-100">
116-
<TableHeadCell class="min-w-[18px] pl-2 md:pl-4 pr-0 text-center">#</TableHeadCell>
117-
<TableHeadCell class="text-center px-0" aria-label="Task grade">グレード</TableHeadCell>
118-
<TableHeadCell class="min-w-[240px] pl-0 truncate">問題名</TableHeadCell>
119-
<TableHeadCell class="min-w-[120px] max-w-[150px] truncate">出典</TableHeadCell>
120-
<TableHeadCell class="min-w-[120px] max-w-[150px] px-0 truncate">
123+
<TableHeadCell class="w-6 pl-2 md:pl-4 pr-0 text-center">#</TableHeadCell>
124+
<TableHeadCell class="w-20 xs:w-24 text-center px-0" aria-label="Task grade">
125+
グレード
126+
</TableHeadCell>
127+
<TableHeadCell class="w-1/2 pl-0 truncate">問題名</TableHeadCell>
128+
<TableHeadCell class="w-1/3 hidden sm:table-cell truncate">出典</TableHeadCell>
129+
<TableHeadCell class="w-24 md:w-64 hidden sm:table-cell px-0 truncate">
121130
一言（50文字以下）
122131
</TableHeadCell>
123-
<TableHeadCell class="min-w-[24px] px-0 text-center">
132+
<TableHeadCell class="w-12 xs:w-16 text-center">
124133
<span class="sr-only">編集</span>
125134
</TableHeadCell>
126135
</TableHead>
@@ -140,8 +149,8 @@
140149
</TableBodyCell>
141150

142151
<!-- グレード -->
143-
<TableBodyCell>
144-
<div class="flex items-center justify-center min-w-[54px] max-w-fit">
152+
<TableBodyCell class="w-20 xs:w-24">
153+
<div class="flex items-center justify-center">
145154
<GradeLabel taskGrade={getTaskGrade(tasksMapByIds, task.taskId)} />
146155
</div>
147156
</TableBodyCell>
@@ -158,7 +167,10 @@
158167
</TableBodyCell>
159168

160169
<!-- 出典 -->
161-
<TableBodyCell class="xs:text-lg text-gray-700 dark:text-gray-300 truncate">
170+
<TableBodyCell
171+
class="xs:text-lg hidden sm:table-cell text-gray-700 dark:text-gray-300 truncate"
172+
aria-hidden={true}
173+
>
162174
{addContestNameToTaskIndex(
163175
task.contestId,
164176
getTaskTableIndex(tasksMapByIds, task.taskId),
@@ -169,7 +181,7 @@
169181
<!-- Note: <TableBodyCell>コンポーネントだとon:inputが動作しない -->
170182
<td
171183
contenteditable={true}
172-
class="xs:text-lg text-gray-700 dark:text-gray-300 truncate"
184+
class="xs:text-lg hidden sm:table-cell text-gray-700 dark:text-gray-300 truncate"
173185
on:input={(event) => updateComment(index, event)}
174186
on:focus={handleFocus}
175187
on:blur={handleBlur}
@@ -179,8 +191,25 @@
179191
</td>
180192

181193
<!-- 削除 -->
182-
<TableBodyCell class="px-0" on:click={() => removeWorkBookTask(task)}>
183-
<div class="flex justify-center items-center px-0">削除</div>
194+
<TableBodyCell class="w-12 xs:w-16">
195+
<button
196+
type="button"
197+
class="flex justify-center items-center"
198+
on:click={() => {
199+
if (confirm('本当に削除しますか?')) {
200+
try {
201+
isDeleting = true;
202+
removeWorkBookTask(task);
203+
} finally {
204+
isDeleting = false;
205+
}
206+
}
207+
}}
208+
disabled={isDeleting}
209+
>
210+
<TrashBinOutline class="w-5 h-5 xs:w-6 xs:h-6" />
211+
<span class="sr-only">削除</span>
212+
</button>
184213
</TableBodyCell>
185214
</TableBodyRow>
186215
{/each}

‎src/routes/workbooks/[slug]/+page.svelte‎

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -140,14 +140,13 @@
140140
<!-- 問題一覧 -->
141141
{#if workBookTasks.length}
142142
<div class="overflow-auto rounded-md border">
143-
<Table shadow class="text-md">
143+
<Table shadow class="text-md table-fixed w-full">
144144
<TableHead class="text-xs xs:text-sm bg-gray-100">
145-
<TableHeadCell class="text-center w-14 px-0.5 xs:px-0">グレード</TableHeadCell>
146-
<TableHeadCell class="text-center min-w-[96px] max-w-[120px]">回答</TableHeadCell>
147-
<TableHeadCell class="min-w-[240px] max-w-2/3 truncate px-0 sm:px-6">問題名</TableHeadCell
148-
>
149-
<TableHeadCell class="min-w-[120px] max-w-[150px] truncate">出典</TableHeadCell>
150-
<TableHeadCell class="text-center px-0">一言</TableHeadCell>
145+
<TableHeadCell class="text-center w-16 xs:w-20 px-0.5 xs:px-0">グレード</TableHeadCell>
146+
<TableHeadCell class="text-center w-20">回答</TableHeadCell>
147+
<TableHeadCell class="w-1/2 truncate px-3 sm:px-6">問題名</TableHeadCell>
148+
<TableHeadCell class="w-1/3 hidden xs:table-cell truncate">出典</TableHeadCell>
149+
<TableHeadCell class="w-14 text-center px-0.5">一言</TableHeadCell>
151150
</TableHead>
152151
<TableBody tableBodyClass="divide-y">
153152
{#each workBookTasks as workBookTask}
@@ -156,7 +155,7 @@
156155
class={getBackgroundColorFrom(getTaskResult(workBookTask.taskId).status_name)}
157156
>
158157
<!-- 問題のグレード -->
159-
<TableBodyCell class="justify-center w-14 px-3">
158+
<TableBodyCell class="justify-center w-16 px-0.5 xs:px-3">
160159
<div class="flex items-center justify-center min-w-[54px] max-w-[54px]">
161160
<GradeLabel taskGrade={getTaskGrade(workBookTask.taskId)} />
162161
</div>
@@ -176,7 +175,7 @@
176175
</TableBodyCell>
177176

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

190189
<!-- 出典 -->
191-
<TableBodyCell>
190+
<TableBodyCell class="w-1/3 hidden xs:table-cell">
192191
<div class="xs:text-lg text-gray-700 dark:text-gray-300 truncate">
193192
{getContestNameFrom(workBookTask.taskId)}
194193
</div>
195194
</TableBodyCell>
196195

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

0 commit comments

Comments
 (0)