[STYLE] グラフなどのCSS結合

src/main/resources/templates/goal_view.html

@@ -31,9 +31,11 @@
 		</div>
 
 
-		<div style="width: 600px; height: 300px;">
+		<div class="card shadow-sm mb-3">
+			<div style="height: 400px;">
 				<canvas id="myChart"></canvas>
 			</div>
+		</div>
 
 
 		<script th:inline="javascript">
@@ -81,6 +83,7 @@
 					options: {
 
 						responsive: true,
+						maintainAspectRatio: false,
 
 						scales: {
 
@@ -101,21 +104,22 @@
 		</script>
 		<!--    -->
 
-		<div>
 
 		<ul>
 
 			<li th:each="goalForm : ${goalFormList}" class="transaction-item">
 
-					<div>
+				<div class="d-flex justify-content-between">
 
+					<form th:action="@{/goal}" method="get" class="w-100">
 
-						<form th:action="@{/goal}" method="get">
-							<table class="table">
+						<div class="table-responsive">
+							<table class="table mb-0">
 
 								<input type="radio" name="goalId" th:value="${goalForm.goalId}"
 									th:checked="${graphGoal != null and graphGoal.goalId == goalForm.goalId}"
 									onchange="this.form.submit()">
+
 								<tr>
 									<th>目標名</th>
 									<td th:text="${goalForm.goalTitle}"></td>
@@ -125,10 +129,12 @@
 									<th>目標説明</th>
 									<td th:text="${goalForm.goalSubtitle}"></td>
 								</tr>
+
 								<tr>
 									<th>目標金額</th>
 									<td th:text="${goalForm.targetAmount}"></td>
 								</tr>
+
 								<tr>
 									<th>目標達成期限</th>
 									<td th:text="${goalForm.deadline}"></td>
@@ -138,47 +144,44 @@
 									<th>達成率</th>
 									<td th:text="${goalForm.achievementRate} + '%'"></td>
 								</tr>
+
 							</table>
+						</div>
+
 					</form>
 
 				</div>
 
-
-					<div class="transaction-buttons">
+				<div class="d-flex justify-content-end gap-2 mt-3">
 
 					<form th:action="@{/goal/edit}" method="get">
-
 						<input type="hidden" name="goalId" th:value="${goalForm.goalId}">
 
-							<button type="submit" class="btn btn-sm btn-primary w-100">
+						<button type="submit" class="btn btn-sm btn-primary">
 							編集
 						</button>
-
 					</form>
 
-
 					<form th:action="@{/goal/delete}" method="post">
-
 						<input type="hidden" name="goalId" th:value="${goalForm.goalId}">
 
-							<button type="submit" class="btn btn-sm btn-primary w-100">
+						<button type="submit" class="btn btn-sm btn-danger">
 							削除
 						</button>
-
 					</form>
 
 				</div>
 
 			</li>
 
+
 		</ul>
 
 	</div>
 
-
 	<form th:action="@{/goal/create}" method="get">
 
-			<button type="submit" class="btn btn-sm btn-primary w-100">
+		<button type="submit" class="btn btn-success w-100">
 			新規登録
 		</button>
 
@@ -190,8 +193,7 @@
 		</button>
 
 	</form>
-
-
+	</div>
 	<div th:replace="~{footer :: footer}"></div>
 
 </body>