furu04/Super-HomeworkManager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 4 Wiki Activity

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

Browse Source
This commit is contained in:
furu04
2026-04-26 15:51:30 +09:00
parent 2fdcca35e6
commit 19d65fec9d
7 changed files with 161 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
web/static/css/style.css
View File

@@ -358,3 +358,142 @@ tr.kb-focus {
outline: 2px solid var(--primary-color);
outline-offset: -2px;
}
@media (max-width: 575.98px) {
.custom-table thead {
display: none;
}
.custom-table tbody tr {
display: block;
position: relative;
padding: 0.75rem;
border-bottom: 1px solid #dee2e6;
}
.custom-table tbody td {
display: inline-block;
border: none;
padding: 0;
}
tr.assignment-row td:nth-child(1) {
position: absolute;
top: 0.75rem;
left: 0.75rem;
}
tr.assignment-row td:nth-child(2) {
position: absolute;
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-right: 0.5rem;
}
tr.assignment-row td:nth-child(4) {
display: inline-block;
margin-right: 0.5rem;
}
tr.assignment-row td:nth-child(6) {
display: inline-block;
margin-right: 0.5rem;
}
tr.assignment-row td:nth-child(7) {
display: inline-block;
}
.countdown-col {
white-space: nowrap;
font-size: 0.75rem;
}
tr.recurring-row td:nth-child(1) {
display: block;
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.user-row td:nth-child(1),
tr.user-row td:nth-child(5) {
display: none !important;
}
tr.user-row td:nth-child(2) {
display: block;
font-weight: bold;
margin-bottom: 0.25rem;
}
tr.user-row td:nth-child(3) {
display: block;
font-size: 0.85rem;
color: #6c757d;
margin-bottom: 0.5rem;
}
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;
}
.dashboard-stat-card .display-4 {
font-size: 1.5rem !important;
}
.dashboard-stat-card h2 {
font-size: 1.4rem;
}
.dashboard-stat-card h6 {
font-size: 0.7rem;
}
.urgent-countdown {
font-size: 1.05rem !important;
padding-left: 0.75rem !important;
padding-right: 0.75rem !important;
}
}
@media (max-width: 767.98px) {
.nav-tabs#assignmentTabs {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.nav-tabs#assignmentTabs .ms-auto {
margin-left: 0 !important;
}
}

4
web/templates/admin/users.html
View File

@@ -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>

24
web/templates/assignments/index.html
View File

@@ -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>

8
web/templates/assignments/new.html
View File

@@ -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>

2
web/templates/assignments/statistics.html
View File

@@ -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>

2
web/templates/layouts/base.html
View File

@@ -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>

4
web/templates/recurring/index.html
View File

@@ -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}}