スマホ版のUIを改善しUXを向上

web/templates/admin/users.html

@@ -7,7 +7,7 @@
 
 {{if .users}}
 <div class="table-responsive">
-    <table class="table table-hover" aria-label="ユーザー一覧">
+    <table class="table table-hover custom-table" aria-label="ユーザー一覧">
         <thead class="table-light">
             <tr>
                 <th scope="col">ID</th>
@@ -20,7 +20,7 @@
         </thead>
         <tbody>
             {{range .users}}
-            <tr {{if eq .ID $.currentUserID}}class="table-primary"{{end}}>
+            <tr class="user-row {{if eq .ID $.currentUserID}}table-primary{{end}}">
                 <td>{{.ID}}</td>
                 <td>{{.Name}}{{if eq .ID $.currentUserID}}<span class="badge bg-info ms-2">自分</span>{{end}}</td>
                 <td>{{.Email}}</td>

web/templates/assignments/index.html

@@ -3,9 +3,9 @@
 {{define "content"}}
 <input type="hidden" id="_csrf_global" value="{{.csrfToken}}">
 
-<div class="d-flex justify-content-between align-items-center mb-3">
+<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-center flex-wrap">
+    <div class="d-flex gap-2 align-items-stretch align-items-md-center">
         <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" id="groupToggleBtn" onclick="toggleGrouping()" title="科目でグループ化">
-            <i class="bi bi-collection me-1" aria-hidden="true"></i><span id="groupBtnText">グループ化</span>
+        <button class="btn btn-sm btn-outline-secondary flex-fill" 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" onclick="toggleCountdown()" id="toggleCountdownBtn" aria-pressed="false">
-            <i class="bi bi-clock me-1" aria-hidden="true"></i><span id="countdownBtnText">残り非表示</span>
+        <button class="btn btn-sm btn-secondary text-white flex-fill" 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">
+        <a href="/assignments/new" class="btn btn-sm btn-primary flex-fill text-nowrap text-center">
             <i class="bi bi-plus-lg me-1" aria-hidden="true"></i>新規登録
         </a>
     </div>
@@ -57,14 +57,14 @@
 
 <form action="/assignments" method="GET" class="row g-2 mb-3 align-items-center" role="search">
     <input type="hidden" name="filter" value="{{.filter}}">
-    <div class="col-md-4">
+    <div class="col-md-4 col-12">
         <div class="input-group input-group-sm">
             <span class="input-group-text bg-white border-end-0 text-muted"><i class="bi bi-search" aria-hidden="true"></i></span>
             <label for="searchInput" class="visually-hidden">課題を検索</label>
             <input type="text" class="form-control border-start-0 ps-0 bg-white" id="searchInput" name="q" placeholder="検索..." value="{{.query}}">
         </div>
     </div>
-    <div class="col-md-2">
+    <div class="col-md-2 col-6">
         <label for="priorityFilter" class="visually-hidden">重要度</label>
         <select class="form-select form-select-sm bg-white" id="priorityFilter" name="priority" onchange="this.form.submit()">
             <option value="">全重要度</option>
@@ -73,14 +73,14 @@
             <option value="low"    {{if eq .priority "low"   }}selected{{end}}>低</option>
         </select>
     </div>
-    <div class="col-md-2">
+    <div class="col-md-2 col-6">
         <label for="subjectFilter" class="visually-hidden">科目</label>
         <select class="form-select form-select-sm bg-white" id="subjectFilter" name="subject" onchange="this.form.submit()">
             <option value="">全科目</option>
             {{range .subjects}}<option value="{{.}}" {{if eq . $.subject}}selected{{end}}>{{.}}</option>{{end}}
         </select>
     </div>
-    <div class="col-md-2">
+    <div class="col-md-2 col-6">
         <label for="sortSelect" class="visually-hidden">並び順</label>
         <select class="form-select form-select-sm bg-white" id="sortSelect" name="sort" onchange="this.form.submit()">
             <option value=""         {{if eq .sort ""          }}selected{{end}}>期限昇順</option>
@@ -90,7 +90,7 @@
             <option value="created_desc" {{if eq .sort "created_desc"}}selected{{end}}>登録日時</option>
         </select>
     </div>
-    <div class="col-md-2">
+    <div class="col-md-2 col-6">
         <a href="/assignments?filter={{.filter}}" class="btn btn-sm btn-outline-secondary w-100 bg-white">クリア</a>
     </div>
 </form>

web/templates/assignments/new.html

@@ -72,7 +72,7 @@
                         <div class="collapse" id="recurringSettings">
                             <div class="card-body py-2">
                                 <div class="row mb-2">
-                                    <div class="col-6">
+                                    <div class="col-sm-6 col-12 mb-2 mb-sm-0">
                                         <label for="recurrence_type" class="form-label small">繰り返しタイプ</label>
                                         <select class="form-select form-select-sm" id="recurrence_type" name="recurrence_type" onchange="updateRecurrenceOptions()">
                                             <option value="none" selected>なし</option>
@@ -81,7 +81,7 @@
                                             <option value="monthly">毎月</option>
                                         </select>
                                     </div>
-                                    <div class="col-6" id="interval_group" style="display: none;">
+                                    <div class="col-sm-6 col-12" id="interval_group" style="display: none;">
                                         <label for="recurrence_interval" class="form-label small">間隔</label>
                                         <div class="input-group input-group-sm">
                                             <input type="number" class="form-control" id="recurrence_interval" name="recurrence_interval" value="1" min="1" max="12" onchange="updateLeadDaysMax()">
@@ -142,10 +142,10 @@
                                         <label class="form-check-label small" for="end_date">終了日</label>
                                     </div>
                                     <div class="mt-1" id="end_count_group" style="display: none;">
-                                        <input type="number" class="form-control form-control-sm" id="end_count_value" name="end_count" value="10" min="1" style="width: 100px;">
+                                        <input type="number" class="form-control form-control-sm" id="end_count_value" name="end_count" value="10" min="1" style="max-width: 100px; width: 100%;">
                                     </div>
                                     <div class="mt-1" id="end_date_group" style="display: none;">
-                                        <input type="date" class="form-control form-control-sm" id="end_date_value" name="end_date" style="width: 150px;">
+                                        <input type="date" class="form-control form-control-sm" id="end_date_value" name="end_date" style="max-width: 150px; width: 100%;">
                                     </div>
                                 </div>
                             </div>

web/templates/assignments/statistics.html

@@ -62,7 +62,7 @@
                 <label for="toDate" class="form-label">登録日（終了）</label>
                 <input type="date" id="toDate" name="to" class="form-control" value="{{.toDate}}">
             </div>
-            <div class="col-md-4 d-flex align-items-end">
+            <div class="col-md-4 d-flex align-items-end mt-2 mt-md-0">
                 <button type="submit" class="btn btn-primary me-2">
                     <i class="bi bi-filter me-1" aria-hidden="true"></i>絞り込み
                 </button>

web/templates/layouts/base.html

@@ -87,7 +87,7 @@
     <footer class="footer mt-auto py-1 bg-light">
         <div class="container text-center">
             <span class="text-muted small" style="font-size: 0.75rem;">Super Homework Manager</span><br>
-            <small class="text-muted" style="font-size: 0.65rem;">Licensed under <a
+            <small class="text-muted" style="font-size: 0.75rem;">Licensed under <a
                     href="https://www.gnu.org/licenses/agpl-3.0.html" target="_blank">AGPLv3</a> | Time:
                 {{.processing_time}}</small>
         </div>

web/templates/recurring/index.html

@@ -10,7 +10,7 @@
 
 <div class="card shadow-sm">
     <div class="table-responsive">
-        <table class="table table-hover mb-0" aria-label="繰り返し設定一覧">
+        <table class="table table-hover mb-0 custom-table" aria-label="繰り返し設定一覧">
             <thead class="table-light">
                 <tr>
                     <th scope="col" class="ps-3">タイトル</th>
@@ -22,7 +22,7 @@
             </thead>
             <tbody>
                 {{range .recurrings}}
-                <tr>
+                <tr class="recurring-row">
                     <td class="ps-3">
                         <div class="fw-bold">{{.Title}}</div>
                         {{if .Description}}