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

src/main/resources/templates/goal_view.html

@@ -31,8 +31,10 @@
 		</div>
 
 
-		<div style="width: 600px; height: 300px;">
+		<div class="card shadow-sm mb-3">
-			<canvas id="myChart"></canvas>
+			<div style="height: 400px;">
+				<canvas id="myChart"></canvas>
+			</div>
 		</div>
 
 
@@ -81,6 +83,7 @@
 					options: {
 
 						responsive: true,
+						maintainAspectRatio: false,
 
 						scales: {
 
@@ -101,21 +104,22 @@
 		</script>
 		<!--    -->
 
-		<div>
 
-			<ul>
+		<ul>
 
-				<li th:each="goalForm : ${goalFormList}" class="transaction-item">
+			<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">
+						<div class="table-responsive">
-							<table class="table">
+							<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,61 +144,57 @@
 									<th>達成率</th>
 									<td th:text="${goalForm.achievementRate} + '%'"></td>
 								</tr>
+
 							</table>
-						</form>
+						</div>
 
-					</div>
+					</form>
+
+				</div>
+
+				<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">
+							編集
+						</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-danger">
+							削除
+						</button>
+					</form>
+
+				</div>
+
+			</li>
 
 
-					<div class="transaction-buttons">
+		</ul>
 
-						<form th:action="@{/goal/edit}" method="get">
+	</div>
 
-							<input type="hidden" name="goalId" th:value="${goalForm.goalId}">
+	<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>
+		</button>
 
-						</form>
+	</form>
+	<form th:action="@{/goal/record}" method="get">
 
+		<button type="submit" class="btn btn-sm btn-primary w-100">
+			履歴
+		</button>
 
-						<form th:action="@{/goal/delete}" method="post">
+	</form>
-
+	</div>
-							<input type="hidden" name="goalId" th:value="${goalForm.goalId}">
+	<div th:replace="~{footer :: footer}"></div>
-
-							<button type="submit" class="btn btn-sm btn-primary w-100">
-								削除
-							</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>
-
-		</form>
-		<form th:action="@{/goal/record}" method="get">
-
-			<button type="submit" class="btn btn-sm btn-primary w-100">
-				履歴
-			</button>
-
-		</form>
-
-
-		<div th:replace="~{footer :: footer}"></div>
 
 </body>