🎨 Improve table layout (#1526)

AtCoder-NoviSteps · Dec 1, 2024 · 4a85357 · 4a85357
1 parent fe97ab2
commit 4a85357
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 37 deletions.
diff --git a/src/lib/components/TaskList.svelte b/src/lib/components/TaskList.svelte
@@ -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>
@@ -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(
@@ -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

diff --git a/src/lib/components/WorkBookTasks/WorkBookTasksTable.svelte b/src/lib/components/WorkBookTasks/WorkBookTasksTable.svelte
@@ -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>
@@ -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>
@@ -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),
@@ -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}
@@ -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}

diff --git a/src/routes/workbooks/[slug]/+page.svelte b/src/routes/workbooks/[slug]/+page.svelte
@@ -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}
@@ -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>
@@ -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)}
@@ -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}