Skip to content

Commit 4a85357

Browse files
KATO-HiroKATO-Hiro
committed
🎨 Improve table layout (#1526)
1 parent fe97ab2 commit 4a85357

File tree

3 files changed

+40
-37
lines changed

3 files changed

+40
-37
lines changed

‎src/lib/components/TaskList.svelte

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -53,16 +53,14 @@
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">
60-
問題名
61-
</TableHeadCell>
62-
<TableHeadCell class="min-w-[120px] max-w-[150px] text-left pl-0 truncate">
58+
<TableHeadCell class="w-20 sm:w-24">回答</TableHeadCell>
59+
<TableHeadCell class="w-1/2 text-left pl-0 sm:pl-6 truncate">問題名</TableHeadCell>
60+
<TableHeadCell class="w-1/3 hidden sm:table-cell text-left pl-0 truncate">
6361
出典
6462
</TableHeadCell>
65-
<TableHeadCell class="min-w-[24px] text-center">
63+
<TableHeadCell class="w-6 text-center">
6664
<span class="sr-only">編集</span>
6765
</TableHeadCell>
6866
</TableHead>
@@ -80,7 +78,7 @@
8078
<SubmissionStatusImage {taskResult} {isLoggedIn} />
8179
</div>
8280
</TableBodyCell>
83-
<TableBodyCell class="pl-0 sm:pl-6 w-2/3">
81+
<TableBodyCell class="w-1/2 text-left truncate pl-0 sm:pl-6">
8482
<ExternalLinkWrapper
8583
url={getTaskUrl(taskResult.contest_id, taskResult.task_id)}
8684
description={removeTaskIndexFromTitle(
@@ -91,10 +89,12 @@
9189
textColorInDarkMode="dark:text-gray-300"
9290
/>
9391
</TableBodyCell>
94-
<TableBodyCell class="pl-0 xs:text-lg text-gray-700 dark:text-gray-300">
92+
<TableBodyCell
93+
class="w-1/3 hidden sm:table-cell text-left truncate pl-0 xs:text-lg text-gray-700 dark:text-gray-300"
94+
>
9595
{addContestNameToTaskIndex(taskResult.contest_id, taskResult.task_table_index)}
9696
</TableBodyCell>
97-
<TableBodyCell class="px-0">
97+
<TableBodyCell class="w-6 px-0">
9898
{#if isAdmin}
9999
<div class="flex justify-center items-center px-0">
100100
<a

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

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -111,16 +111,18 @@
111111
<span>問題一覧（{workBookTasksForTable.length} 問）</span>
112112
</Label>
113113

114-
<Table shadow class="text-md">
114+
<Table shadow class="text-md table-fixed w-full">
115115
<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">
121-
一言（50文字以下）
122-
</TableHeadCell>
123-
<TableHeadCell class="min-w-[24px] px-0 text-center">
116+
<TableHeadCell class="w-6 pl-2 md:pl-4 pr-0 text-center">#</TableHeadCell>
117+
<TableHeadCell class="w-20 xs:w-24 text-center px-0" aria-label="Task grade"
118+
>グレード</TableHeadCell
119+
>
120+
<TableHeadCell class="w-1/2 pl-0 truncate">問題名</TableHeadCell>
121+
<TableHeadCell class="w-1/3 hidden sm:table-cell truncate">出典</TableHeadCell>
122+
<TableHeadCell class="w-24 md:w-64 hidden sm:table-cell px-0 truncate"
123+
>一言（50文字以下）</TableHeadCell
124+
>
125+
<TableHeadCell class="w-6 text-center">
124126
<span class="sr-only">編集</span>
125127
</TableHeadCell>
126128
</TableHead>
@@ -140,8 +142,8 @@
140142
</TableBodyCell>
141143

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

160162
<!-- 出典 -->
161-
<TableBodyCell class="xs:text-lg text-gray-700 dark:text-gray-300 truncate">
163+
<TableBodyCell
164+
class="xs:text-lg hidden sm:table-cell text-gray-700 dark:text-gray-300 truncate"
165+
>
162166
{addContestNameToTaskIndex(
163167
task.contestId,
164168
getTaskTableIndex(tasksMapByIds, task.taskId),
@@ -169,7 +173,7 @@
169173
<!-- Note: <TableBodyCell>コンポーネントだとon:inputが動作しない -->
170174
<td
171175
contenteditable={true}
172-
class="xs:text-lg text-gray-700 dark:text-gray-300 truncate"
176+
class="xs:text-lg hidden sm:table-cell text-gray-700 dark:text-gray-300 truncate"
173177
on:input={(event) => updateComment(index, event)}
174178
on:focus={handleFocus}
175179
on:blur={handleBlur}
@@ -179,8 +183,8 @@
179183
</td>
180184

181185
<!-- 削除 -->
182-
<TableBodyCell class="px-0" on:click={() => removeWorkBookTask(task)}>
183-
<div class="flex justify-center items-center px-0">削除</div>
186+
<TableBodyCell on:click={() => removeWorkBookTask(task)}>
187+
<div class="flex justify-center items-center">削除</div>
184188
</TableBodyCell>
185189
</TableBodyRow>
186190
{/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)