スマホ版のUIを改善

web/static/css/style.css

@@ -363,18 +363,22 @@ tr.kb-focus {
     .custom-table thead {
         display: none;
     }
-    .custom-table tbody tr {
+    .custom-table tbody tr.assignment-row,
+    .custom-table tbody tr.recurring-row,
+    .custom-table tbody tr.user-row {
         display: block;
         position: relative;
         padding: 0.75rem;
         border-bottom: 1px solid #dee2e6;
     }
-    .custom-table tbody td {
+    .custom-table tbody tr.assignment-row td,
+    .custom-table tbody tr.recurring-row td,
+    .custom-table tbody tr.user-row td {
         display: inline-block;
         border: none;
         padding: 0;
     }
-    
+
     tr.assignment-row td:nth-child(1) {
         position: absolute;
         top: 0.75rem;
@@ -385,25 +389,21 @@ tr.kb-focus {
         top: 0.75rem;
         left: 2.25rem;
     }
-    tr.assignment-row td:nth-child(5) {
-        display: block;
-        margin-left: 3.5rem; 
-        margin-right: 4rem; 
-        margin-bottom: 0.5rem;
-    }
-    tr.assignment-row td:nth-child(8) {
-        position: absolute;
-        top: 0.75rem;
-        right: 0.75rem;
-    }
     tr.assignment-row td:nth-child(3) {
         display: inline-block;
+        margin-left: 4rem;
         margin-right: 0.5rem;
     }
     tr.assignment-row td:nth-child(4) {
         display: inline-block;
         margin-right: 0.5rem;
     }
+    tr.assignment-row td:nth-child(5) {
+        display: block;
+        margin-left: 0;
+        margin-right: 4rem;
+        margin-bottom: 0.5rem;
+    }
     tr.assignment-row td:nth-child(6) {
         display: inline-block;
         margin-right: 0.5rem;
@@ -411,6 +411,11 @@ tr.kb-focus {
     tr.assignment-row td:nth-child(7) {
         display: inline-block;
     }
+    tr.assignment-row td:nth-child(8) {
+        position: absolute;
+        top: 0.75rem;
+        right: 0.75rem;
+    }
     .countdown-col {
         white-space: nowrap;
         font-size: 0.75rem;
@@ -421,17 +426,17 @@ tr.kb-focus {
         margin-bottom: 0.5rem;
         margin-right: 3rem;
     }
-    tr.recurring-row td:nth-child(5) {
-        position: absolute;
-        top: 0.75rem;
-        right: 0.75rem;
-    }
     tr.recurring-row td:nth-child(2),
     tr.recurring-row td:nth-child(3),
     tr.recurring-row td:nth-child(4) {
         display: inline-block;
         margin-right: 0.5rem;
     }
+    tr.recurring-row td:nth-child(5) {
+        position: absolute;
+        top: 0.75rem;
+        right: 0.75rem;
+    }
 
     tr.user-row td:nth-child(1),
     tr.user-row td:nth-child(5) {
@@ -448,28 +453,28 @@ tr.kb-focus {
         color: #6c757d;
         margin-bottom: 0.5rem;
     }
+    tr.user-row td:nth-child(4) {
+        display: inline-block;
+    }
     tr.user-row td:nth-child(6) {
         position: absolute;
         top: 0.75rem;
         right: 0.75rem;
     }
-    tr.user-row td:nth-child(4) {
-        display: inline-block;
-    }
 
     .stats-table {
         min-width: auto !important;
     }
-    tr.subject-row td:nth-child(3),
-    tr.subject-row td:nth-child(4),
-    tr.subject-row td:nth-child(5) {
-        display: none !important;
-    }
     .stats-table thead th:nth-child(3),
     .stats-table thead th:nth-child(4),
     .stats-table thead th:nth-child(5) {
         display: none !important;
     }
+    tr.subject-row td:nth-child(3),
+    tr.subject-row td:nth-child(4),
+    tr.subject-row td:nth-child(5) {
+        display: none !important;
+    }
 
     .dashboard-stat-card .display-4 {
         font-size: 1.5rem !important;
@@ -492,6 +497,10 @@ tr.kb-focus {
         flex-wrap: nowrap;
         overflow-x: auto;
         -webkit-overflow-scrolling: touch;
+        scrollbar-width: none;
+    }
+    .nav-tabs#assignmentTabs::-webkit-scrollbar {
+        display: none;
     }
     .nav-tabs#assignmentTabs .ms-auto {
         margin-left: 0 !important;

web/templates/assignments/index.html

@@ -5,7 +5,7 @@
 
 <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center mb-3 gap-2">
     <h4 class="mb-0 fw-bold"><i class="bi bi-list-task me-2" aria-hidden="true"></i>課題一覧</h4>
-    <div class="d-flex gap-2 align-items-stretch align-items-md-center">
+    <div class="d-flex gap-2 align-items-center flex-wrap">
         <div class="btn-group btn-group-sm" role="group" aria-label="表示切替">
             <button type="button" class="btn btn-outline-secondary" id="viewTableBtn" onclick="setView('table')" title="テーブル表示">
                 <i class="bi bi-table" aria-hidden="true"></i>
@@ -14,13 +14,13 @@
                 <i class="bi bi-kanban" aria-hidden="true"></i>
             </button>
         </div>
-        <button class="btn btn-sm btn-outline-secondary flex-fill" id="groupToggleBtn" onclick="toggleGrouping()" title="科目でグループ化">
+        <button class="btn btn-sm btn-outline-secondary" id="groupToggleBtn" onclick="toggleGrouping()" title="科目でグループ化">
             <i class="bi bi-collection me-1" aria-hidden="true"></i><span id="groupBtnText" class="d-none d-sm-inline">グループ化</span>
         </button>
-        <button class="btn btn-sm btn-secondary text-white flex-fill" onclick="toggleCountdown()" id="toggleCountdownBtn" aria-pressed="false">
+        <button class="btn btn-sm btn-secondary text-white" onclick="toggleCountdown()" id="toggleCountdownBtn" aria-pressed="false">
             <i class="bi bi-clock me-1" aria-hidden="true"></i><span id="countdownBtnText" class="d-none d-sm-inline">残り非表示</span>
         </button>
-        <a href="/assignments/new" class="btn btn-sm btn-primary flex-fill text-nowrap text-center">
+        <a href="/assignments/new" class="btn btn-sm btn-primary">
             <i class="bi bi-plus-lg me-1" aria-hidden="true"></i>新規登録
         </a>
     </div>