2026_09_5H_Spring_KIZAKI/Monegement
16
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[STYLE] menuのデザインを変更しました。

Browse Source
This commit is contained in:
s-choi
2026-09-18 13:51:59 +09:00
parent 20b4366d91
commit 12550c5b1d
2 changed files with 155 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
src/main/resources/templates/menu.html
View File

@@ -2,71 +2,106 @@
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Calendar</title>
<link rel="stylesheet" th:href="@{/css/menu.css}">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Calendar</title>
<link rel="stylesheet" th:href="@{/css/menu.css}">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<span class="year" th:text="|${year}年|"></span>
<span class="month" th:text="|${month}月|"></span>
<div th:replace="~{header :: header}"></div>
<table id="calendar">
<thead>
<tr>
<th class="holiday">日</th>
<th>月</th>
<th>火</th>
<th>水</th>
<th>木</th>
<th>金</th>
<th>土</th>
</tr>
</thead>
<div class="calendar-title">
<tbody>
<span class="year" th:text="|${year}年|">
</span>
<tr th:each="week : ${#numbers.sequence(0, 5)}">
<span class="month" th:text="|${month}月|">
</span>
<td th:each="weekDay : ${#numbers.sequence(0, 6)}">
</div>
<div th:if="${week * 7 + weekDay - firstDayOfWeek + 1 >= 1 and week * 7 + weekDay - firstDayOfWeek + 1 <= lastDay}">
<div class="date" th:text="${week * 7 + weekDay - firstDayOfWeek + 1}">
</div>
<table id="calendar">
<div th:each="income : ${incomeList}"
th:if="${income.date.dayOfMonth == week * 7 + weekDay - firstDayOfWeek + 1}"
class="income"
th:text="|収入 +${income.amount}円|"
style="color: blue;">
</div>
<thead>
<div th:each="expense : ${expenseList}"
th:if="${expense.date.dayOfMonth == week * 7 + weekDay - firstDayOfWeek + 1}"
class="expense"
th:text="|支出 -${expense.amount}円|"
style="color: red;">
</div>
<tr>
<th class="holiday">日</th>
<th>月</th>
<th>火</th>
<th>水</th>
<th>木</th>
<th>金</th>
<th>土</th>
</tr>
</div>
</thead>
</td>
</tr>
<tbody>
</tbody>
</table>
<tr th:each="week : ${#numbers.sequence(0, 5)}">
<td th:each="weekDay : ${#numbers.sequence(0, 6)}">
<a th:if="${week * 7 + weekDay - firstDayOfWeek + 1 >= 1
and week * 7 + weekDay - firstDayOfWeek + 1 <= lastDay}"
th:href="@{/transaction/detail(
todayDates=${T(java.time.LocalDate).of(year, month, week * 7 + weekDay - firstDayOfWeek + 1)}
)}">
<div th:if="${week * 7 + weekDay - firstDayOfWeek + 1 >= 1 and week * 7 + weekDay - firstDayOfWeek + 1 <= lastDay}">
<div class="date" th:text="${week * 7 + weekDay - firstDayOfWeek + 1}">
</div>
<div th:each="income : ${incomeList}" th:if="${income.date.dayOfMonth == week * 7 + weekDay - firstDayOfWeek + 1}" class="income" th:text="|収入 +${income.amount}円|">
</div>
<div th:each="expense : ${expenseList}" th:if="${expense.date.dayOfMonth == week * 7 + weekDay - firstDayOfWeek + 1}" class="expense" th:text="|支出 -${expense.amount}円|">
</div>
</div>
</a>
</td>
</tr>
</tbody>
</table>
<div class="total">
<div>
<span>収入：</span>
<span th:text="${totalIncome}"></span>
<span>円</span>
</div>
<div>
<span>支出：</span>
<span th:text="${totalExpense}"></span>
<span>円</span>
</div>
</div>
<div>
<h2>
<span th:text="|収入：${totalIncome}|"></span>
<span th:text="|支出：${totalExpense}|"></span>
</h2>
</div>
</body>
</html>
</html>