[STYLE] menuのデザインを変更しました。
This commit is contained in:
s-choi
@@ -1,15 +1,80 @@
|
||||
table, th, td {border: 1px solid black; border-collapse: collapse;}
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
td:hover{background-color: lightblue;}
|
||||
#calendar {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
th{font-weight: bold; height: 50px;}
|
||||
#calendar th,
|
||||
#calendar td {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
td{text-align: left; vertical-align: text-top; width: 200px; height: 100px; padding: 10px}
|
||||
th {
|
||||
font-weight: bold;
|
||||
height: 35px;
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.holiday{color: red;}
|
||||
td {
|
||||
width: 14.28%;
|
||||
height: 70px;
|
||||
padding: 5px;
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
#today{font-weight: bold; background-color: bisque;}
|
||||
td:hover {
|
||||
background-color: lightblue;
|
||||
}
|
||||
|
||||
.year{font-size: 30px;}
|
||||
.holiday {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.month{font-size: 50px; font-weight: bold;}
|
||||
#today {
|
||||
font-weight: bold;
|
||||
background-color: bisque;
|
||||
}
|
||||
|
||||
.year {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.month {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.calendar-title {
|
||||
margin: 15px 10px;
|
||||
}
|
||||
|
||||
.date {
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.income {
|
||||
color: blue;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.expense {
|
||||
color: red;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.total {
|
||||
margin: 15px 10px;
|
||||
padding: 10px;
|
||||
border-top: 1px solid #ddd;
|
||||
|
||||
font-size: 16px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user