From 2ec0ca57161f8b355bae9107d3442642986162dd Mon Sep 17 00:00:00 2001
From: Anton Romanov <a.romanov@ulstu.ru>
Date: Wed, 14 Sep 2022 15:58:54 +0400
Subject: [PATCH] add bootstrap

---
 src/main/resources/templates/index.html |  92 +++++++++++++-----
 src/main/resources/templates/list.html  | 122 +++++++++++++++++-------
 2 files changed, 160 insertions(+), 54 deletions(-)
diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
index f37aa8f..16df476 100644
--- a/src/main/resources/templates/index.html
+++ b/src/main/resources/templates/index.html
@@ -2,29 +2,77 @@
 <html xmlns:th="http://www.thymeleaf.org">
 <head>
     <title>Простая обработка формы на Spring MVC</title>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
+          integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
 </head>
 <body>
-<h1>Форма</h1>
-<form action="#" th:action="@{/sendEmail}" th:object="${emailForm}" method="post">
-    <p style="color:red" th:text="${error}"></p>
-    <table>
-        <tr>
-            <td>Тема:</td>
-            <td><input type="text" th:field="*{subject}"/></td>
-        </tr>
-        <tr>
-            <td>Кому:</td>
-            <td><input type="text" th:field="*{to}"/></td>
-        </tr>
-        <tr>
-            <td>Сообщение:</td>
-            <td><textarea th:field="*{message}"/></td>
-        </tr>
-        <tr>
-            <td colspan="2"><input type="submit" value="Отправить"/></td>
-        </tr>
-    </table>
-</form>
+<!-- компонент меню-->
+<nav class="navbar navbar-expand-lg bg-light">
+    <div class="container-fluid">
+        <a class="navbar-brand" href="/">Название web-приложения</a>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
+                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                <li class="nav-item">
+                    <a class="nav-link active" aria-current="page" href="/">Главная страница</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="/list">Список отправленных сообщений</a>
+                </li>
+                <li class="nav-item dropdown">
+                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
+                       aria-expanded="false">
+                        Выпадающее меню
+                    </a>
+                    <ul class="dropdown-menu">
+                        <li><a class="dropdown-item" href="#">Пункт 1</a></li>
+                        <li><a class="dropdown-item" href="#">Пункт 3</a></li>
+                        <li>
+                            <hr class="dropdown-divider">
+                        </li>
+                        <li><a class="dropdown-item" href="#">Пункт 3</a></li>
+                    </ul>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link disabled">Недоступно</a>
+                </li>
+            </ul>
+        </div>
+    </div>
+</nav>
+
+<div class="container-fluid">
+    <div class="row">
+        <div class="col-md-2"></div>
+        <div class="col-md-8 col-sm-12">
+            <h2>Форма</h2>
+            <form action="#" th:action="@{/sendEmail}" th:object="${emailForm}" method="post">
+                <p style="color:red" th:text="${error}"></p>
+                <div class="form-group">
+                    <label for="theme">Тема</label>
+                    <input type="text" class="form-control" id="theme" placeholder="Введите тему" th:field="*{subject}">
+                </div>
+                <div class="form-group">
+                    <label for="to">Кому</label>
+                    <input class="form-control" type="email" id="to" th:field="*{to}" placeholder="Кому"/>
+                </div>
+                <div class="form-group">
+                    <label for="message">Сообщение</label>
+                    <textarea class="form-control" id="message" th:field="*{message}" placeholder="Сообщение"/>
+                </div>
+                <input class="form-group" type="submit" value="Отправить"/>
+            </form>
+        </div>
+    </div>
+</div>
+</div>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
+        crossorigin="anonymous"></script>
 </body>
 </html>
diff --git a/src/main/resources/templates/list.html b/src/main/resources/templates/list.html
index 675aaae..706980c 100644
--- a/src/main/resources/templates/list.html
+++ b/src/main/resources/templates/list.html
@@ -3,40 +3,98 @@
 <head>
     <title>Список записей в БД</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
-          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
-
-    <!-- Optional theme -->
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
-          integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
-
-    <!-- Latest compiled and minified JavaScript -->
-    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
-            integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
-            crossorigin="anonymous"></script>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
+          integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
 </head>
 <body>
-<h1>Список записей в БД:</h1>
-<table class="table table-striped">
-    <thead class="thead-dark">
-    <tr>
-        <th scope="col">Кому</th>
-        <th scope="col">Тема</th>
-        <th scope="col">Сообщение</th>
-    </tr>
-    </thead>
-    <tbody>
-    <tr th:each="email: ${emails}">
-        <td th:text="${email.to}">
-        </td>
-        <td th:text="${email.subject}">
-        </td>
-        <td th:text="${email.message}">
-        </td>
-    </tr>
-    </tbody>
-</table>
+<!-- компонент меню-->
+<nav class="navbar navbar-expand-lg bg-light">
+    <div class="container-fluid">
+        <a class="navbar-brand" href="/">Название web-приложения</a>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
+                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                <li class="nav-item">
+                    <a class="nav-link active" aria-current="page" href="/">Главная страница</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="/list">Список отправленных сообщений</a>
+                </li>
+                <li class="nav-item dropdown">
+                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
+                       aria-expanded="false">
+                        Выпадающее меню
+                    </a>
+                    <ul class="dropdown-menu">
+                        <li><a class="dropdown-item" href="#">Пункт 1</a></li>
+                        <li><a class="dropdown-item" href="#">Пункт 3</a></li>
+                        <li>
+                            <hr class="dropdown-divider">
+                        </li>
+                        <li><a class="dropdown-item" href="#">Пункт 3</a></li>
+                    </ul>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link disabled">Недоступно</a>
+                </li>
+            </ul>
+        </div>
+    </div>
+</nav>
 
-<a href="/">Отправить другое сообщение</a>
+<div class="container-fluid">
+    <div class="row">
+        <div class="col-md-2"></div>
+        <div class="col-md-8 col-sm-12">
+            <h2>Список записей в БД:</h2>
+            <div class="row">
+                <div class="col-md-4" style="font-weight: bold">
+                    Кому
+                </div>
+                <div class="col-md-4" style="font-weight: bold">
+                    Тема
+                </div>
+                <div class="col-md-4" style="font-weight: bold">
+                    Сообщение
+                </div>
+            </div>
+            <div class="row" th:each="email: ${emails}">
+                <div class="col-md-4" th:text="${email.to}"/>
+                <div class="col-md-4" th:text="${email.subject}"/>
+                <div class="col-md-4" th:text="${email.message}"/>
+            </div>
+
+            <!--<table class="table table-striped">
+                <thead class="thead-dark">
+                <tr>
+                    <th scope="col">Кому</th>
+                    <th scope="col">Тема</th>
+                    <th scope="col">Сообщение</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr th:each="email: ${emails}">
+                    <td th:text="${email.to}">
+                    </td>
+                    <td th:text="${email.subject}">
+                    </td>
+                    <td th:text="${email.message}">
+                    </td>
+                </tr>
+                </tbody>
+            </table>-->
+            <a href="/">Отправить другое сообщение</a>
+        </div>
+    </div>
+</div>
+
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
+        crossorigin="anonymous"></script>
 </body>
 </html>

Тема:
Кому:
Сообщение:	</td> - </tr> - <tr> - <td colspan="2"><input type="submit" value="Отправить"/></td> - </tr> - </table> -</form> +<!-- компонент меню--> +<nav class="navbar navbar-expand-lg bg-light"> + <div class="container-fluid"> + <a class="navbar-brand" href="/">Название web-приложения</a> + <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" + aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> + <span class="navbar-toggler-icon"></span> + </button> + <div class="collapse navbar-collapse" id="navbarSupportedContent"> + <ul class="navbar-nav me-auto mb-2 mb-lg-0"> + <li class="nav-item"> + <a class="nav-link active" aria-current="page" href="/">Главная страница</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="/list">Список отправленных сообщений</a> + </li> + <li class="nav-item dropdown"> + <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" + aria-expanded="false"> + Выпадающее меню + </a> + <ul class="dropdown-menu"> + <li><a class="dropdown-item" href="#">Пункт 1</a></li> + <li><a class="dropdown-item" href="#">Пункт 3</a></li> + <li> + <hr class="dropdown-divider"> + </li> + <li><a class="dropdown-item" href="#">Пункт 3</a></li> + </ul> + </li> + <li class="nav-item"> + <a class="nav-link disabled">Недоступно</a> + </li> + </ul> + </div> + </div> +</nav> + +<div class="container-fluid"> + <div class="row"> + <div class="col-md-2"></div> + <div class="col-md-8 col-sm-12"> + <h2>Форма</h2> + <form action="#" th:action="@{/sendEmail}" th:object="${emailForm}" method="post"> + <p style="color:red" th:text="${error}"></p> + <div class="form-group"> + <label for="theme">Тема</label> + <input type="text" class="form-control" id="theme" placeholder="Введите тему" th:field="{subject}"> + </div> + <div class="form-group"> + <label for="to">Кому</label> + <input class="form-control" type="email" id="to" th:field="{to}" placeholder="Кому"/> + </div> + <div class="form-group"> + <label for="message">Сообщение</label> + <textarea class="form-control" id="message" th:field="*{message}" placeholder="Сообщение"/> + </div> + <input class="form-group" type="submit" value="Отправить"/> + </form> + </div> + </div> +</div> +</div> +<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" + integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" + crossorigin="anonymous"></script> </body> </html> diff --git a/src/main/resources/templates/list.html b/src/main/resources/templates/list.html index 675aaae..706980c 100644 --- a/src/main/resources/templates/list.html +++ b/src/main/resources/templates/list.html @@ -3,40 +3,98 @@ <head> <title>Список записей в БД</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> - <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" - integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> - - <!-- Optional theme --> - <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" - integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous"> - - <!-- Latest compiled and minified JavaScript --> - <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" - integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" - crossorigin="anonymous"></script> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" + integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous"> </head> <body> -<h1>Список записей в БД:</h1> -<table class="table table-striped"> - <thead class="thead-dark"> - <tr> - <th scope="col">Кому</th> - <th scope="col">Тема</th> - <th scope="col">Сообщение</th> - </tr> - </thead> - <tbody> - <tr th:each="email: ${emails}"> - <td th:text="${email.to}"> - </td> - <td th:text="${email.subject}"> - </td> - <td th:text="${email.message}"> - </td> - </tr> - </tbody> -</table> +<!-- компонент меню--> +<nav class="navbar navbar-expand-lg bg-light"> + <div class="container-fluid"> + <a class="navbar-brand" href="/">Название web-приложения</a> + <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" + aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> + <span class="navbar-toggler-icon"></span> + </button> + <div class="collapse navbar-collapse" id="navbarSupportedContent"> + <ul class="navbar-nav me-auto mb-2 mb-lg-0"> + <li class="nav-item"> + <a class="nav-link active" aria-current="page" href="/">Главная страница</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="/list">Список отправленных сообщений</a> + </li> + <li class="nav-item dropdown"> + <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" + aria-expanded="false"> + Выпадающее меню + </a> + <ul class="dropdown-menu"> + <li><a class="dropdown-item" href="#">Пункт 1</a></li> + <li><a class="dropdown-item" href="#">Пункт 3</a></li> + <li> + <hr class="dropdown-divider"> + </li> + <li><a class="dropdown-item" href="#">Пункт 3</a></li> + </ul> + </li> + <li class="nav-item"> + <a class="nav-link disabled">Недоступно</a> + </li> + </ul> + </div> + </div> +</nav> -<a href="/">Отправить другое сообщение</a> +<div class="container-fluid"> + <div class="row"> + <div class="col-md-2"></div> + <div class="col-md-8 col-sm-12"> + <h2>Список записей в БД:</h2> + <div class="row"> + <div class="col-md-4" style="font-weight: bold"> + Кому + </div> + <div class="col-md-4" style="font-weight: bold"> + Тема + </div> + <div class="col-md-4" style="font-weight: bold"> + Сообщение + </div> + </div> + <div class="row" th:each="email: ${emails}"> + <div class="col-md-4" th:text="${email.to}"/> + <div class="col-md-4" th:text="${email.subject}"/> + <div class="col-md-4" th:text="${email.message}"/> + </div> + + <!--<table class="table table-striped"> + <thead class="thead-dark"> + <tr> + <th scope="col">Кому</th> + <th scope="col">Тема</th> + <th scope="col">Сообщение</th> + </tr> + </thead> + <tbody> + <tr th:each="email: ${emails}"> + <td th:text="${email.to}"> + </td> + <td th:text="${email.subject}"> + </td> + <td th:text="${email.message}"> + </td> + </tr> + </tbody> + </table>--> + <a href="/">Отправить другое сообщение</a> + </div> + </div> +</div> + +<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" + integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" + crossorigin="anonymous"></script> </body> </html>