projects / demos / testing / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: f70e2fe)
Added a layout based on Bootstrap-4.x with the help of webjars exception-handling
authorKai Moritz <kai@juplo.de>
Sun, 20 Sep 2020 12:43:32 +0000 (14:43 +0200)
committerKai Moritz <kai@juplo.de>
Sat, 3 Oct 2020 12:01:06 +0000 (14:01 +0200)
* The templates refer to bootstrapcnd.com directly
* The production-version uses webjars, to embed the CSS in the app

pom.xml patch | blob | history
src/main/resources/templates/400.html patch | blob | history
src/main/resources/templates/error.html patch | blob | history
src/main/resources/templates/layout.html [new file with mode: 0644] patch | blob
src/main/resources/templates/view.html patch | blob | history

diff --git a/pom.xml b/pom.xml
index 299903c..546ac9f 100644 (file)
--- a/pom.xml
+++ b/pom.xml
@@ -16,6 +16,7 @@
 
        <properties>
                <java.version>11</java.version>
+               <bootstrap.version>4.5.2</bootstrap.version>
        </properties>
 
        <dependencies>
@@ -32,6 +33,12 @@
                        <artifactId>spring-boot-devtools</artifactId>
                        <optional>true</optional>
                </dependency>
+               <dependency>
+                       <groupId>org.webjars</groupId>
+                       <artifactId>bootstrap</artifactId>
+                       <version>${bootstrap.version}</version>
+                       <scope>runtime</scope>
+               </dependency>
 
                <dependency>
                        <groupId>org.springframework.boot</groupId>
diff --git a/src/main/resources/templates/400.html b/src/main/resources/templates/400.html
index f1d4d5d..36ba0c0 100644 (file)
--- a/src/main/resources/templates/400.html
+++ b/src/main/resources/templates/400.html
@@ -1,14 +1,15 @@
 <!DOCTYPE HTML>
-<html xmlns:th="http://www.thymeleaf.org">
+<html xmlns:th="http://www.thymeleaf.org" th:replace="~{layout :: pagelayout(~{:: title}, ~{:: h1}, ~{:: div.card-text})}">
   <head>
     <title th:text="'400: ' + ${exception.getClass().getSimpleName()}">Testing Exception-Handling - Template for 400</title>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   </head>
   <body>
     <h1 th:text="'400: ' + ${exception.getClass().getSimpleName()}">Template for 400</h1>
-    <div>
+    <div class="card-text table">
       <p><strong th:text="'Catched exception: ' + ${exception}">EXCEPTION</strong></p>
-      <p><a href="#" th:href="@{/}">Back to HOME</a></p>
+      <p><a href="#" th:href="@{/}" class="btn btn-primary">Back to HOME</a></p>
     </div>
   </body>
 </html>
diff --git a/src/main/resources/templates/error.html b/src/main/resources/templates/error.html
index e30ef9e..a5e8149 100644 (file)
--- a/src/main/resources/templates/error.html
+++ b/src/main/resources/templates/error.html
@@ -1,14 +1,15 @@
 <!doctype html>
-<html xmlns:th="http://www.thymeleaf.org">
+<html xmlns:th="http://www.thymeleaf.org" th:replace="~{layout :: pagelayout(~{:: title}, ~{:: h1}, ~{:: table.card-text})}">
   <head>
     <title th:text="|${status}: ${error}">XXX: ERROR</title>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   </head>
   <body>
     <h1 th:text="|${status}: ${error}">XXX: ERROR</h1>
-      <table>
+      <table class="card-text table">
         <tbody>
-          <tr>
+          <tr class="border-top-0">
             <th scope="row">Status</th>
             <td th:text="${status}">ERROR.STATUS</td>
           </tr>
@@ -21,7 +22,7 @@
             <td th:text="${message}">ERROR.MESSAGE</td>
           </tr>
           <tr th:if="!${#strings.isEmpty(requestId)}">
-            <th scope="row">Request-ID</th>
+            <th class="text-nowrap" scope="row">Request-ID</th>
             <td th:text="${requestId}">ERROR.REQUEST_ID</td>
           </tr>
           <tr>
@@ -36,15 +37,15 @@
           <tr th:if="!${#strings.isEmpty(trace)}">
             <th scope="row">Trace</th>
             <td>
-              <div>
-                <pre th:text="${trace}">ERROR.TRACE</pre>
+              <div class="overflow-hidden">
+                <pre class="overflow-hidden" th:text="${trace}">ERROR.TRACE</pre>
               </div>
             </td>
           </tr>
           <!--**/-->
         </tbody>
       </table>
-      <p><a href="#" th:href="@{/}">Back to HOME</a>
+      <p><a href="#" th:href="@{/}" class="btn btn-primary">Back to HOME</a>
     </div>
   </body>
 </html>
diff --git a/src/main/resources/templates/layout.html b/src/main/resources/templates/layout.html
new file mode 100644 (file)
index 0000000..5e455c2
--- /dev/null
+++ b/src/main/resources/templates/layout.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org" th:fragment="pagelayout(title,header,body)">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title th:replace="${title}">TITLE</title>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" th:href="@{/webjars/bootstrap/4.5.2/css/bootstrap.min.css}">
+  </head>
+  <body>
+    <nav class="navbar navbar-dark bg-primary navbar-expand navbar-dark flex-column">
+      <h2 class="navbar-brand">Demo: Testing Exception-Handling With/In the Springframework</h2>
+    </nav>
+    <main class="container mt-5">
+      <div id="content" class="card">
+        <div class="card-header"><h1 th:replace="${header}">HEADER</h1></div>
+        <div class="card-body"><div th:replace="${body}">BODY</div></div>
+      </div>
+    </main>
+  </body>
+</html>
diff --git a/src/main/resources/templates/view.html b/src/main/resources/templates/view.html
index 70d3c51..e632398 100644 (file)
--- a/src/main/resources/templates/view.html
+++ b/src/main/resources/templates/view.html
@@ -1,12 +1,13 @@
 <!DOCTYPE HTML>
-<html xmlns:th="http://www.thymeleaf.org">
+<html xmlns:th="http://www.thymeleaf.org" th:replace="~{layout :: pagelayout(~{:: title}, ~{:: h1}, ~{:: div.card-text})}">
   <head>
     <title>Template: view</title>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   </head>
   <body>
     <h1>Deep Thought</h1>
-    <div th:switch="${answer}">
+    <div th:switch="${answer}" class="card-text">
       <p th:case="null">
         <strong>What is the answer to the ultimate question of life, the universe and everything?</strong>
       </p>
@@ -15,12 +16,14 @@
         <li>Outcome: <strong th:text="${outcome.get()}">OUTCOME</strong></li>
       </ul>
     </div>
-    <div>
+    <div class="card-text">
       <form action="#" th:action="@{/}" method="get">
-        <div>
-          <label for="answer">Answer:</label>
-          <input type="text" name="answer" value="42" th:value="${answer}"/>
-          <button type="submit">Submit</button>
+        <div class="input-group">
+          <div class="input-group-prepend">
+            <label for="answer" class="input-group-text">Answer:</label>
+          </div>
+          <input type="text" name="answer" value="42" th:value="${answer}" class="form-control"/>
+          <button type="submit" class="btn btn-primary input-group-append">Submit</button>
         </div>
       </form>
     </div>
Unnamed repository; edit this file 'description' to name the repository.