Skip to content

S
spring-boot
Commit fd1a7ba7 authored by Kim Rudolph's avatar Kim Rudolph Committed by Andy Wilkinson
Browse files
Options

Migrate spring-boot-sample-web-ui to Bootstrap v4 

Closes gh-10653
parent 498f66fc
Expand all Show whitespace changes
Inline Side-by-side
Showing with 66 additions and 10736 deletions
spring-boot-samples/spring-boot-sample-web-ui/src/main/resources/templates/fragments.html
View file @ fd1a7ba7
...@@ -7,14 +7,12 @@ ...@@ -7,14 +7,12 @@
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<div th:fragment="navbar" class="navbar"> <nav th:fragment="navbar" class="navbar navbar-dark bg-primary">
<div class="navbar-inner"> <a class="navbar-brand" href="http://thymeleaf.org">Thymeleaf</a>
<a class="brand" href="http://thymeleaf.org">Thymeleaf</a> <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<ul class="nav"> <li class="nav-item"><a class="nav-link" th:href="@{/}" href="messages.html">Messages</a></li>
<li><a th:href="@{/}" href="messages.html"> Messages </a></li>
</ul> </ul>
</div> </nav>
</div>
</div> </div>
</body> </body>
</html> </html>
spring-boot-samples/spring-boot-sample-web-ui/src/main/resources/templates/messages/form.html
View file @ fd1a7ba7
...@@ -6,27 +6,25 @@ ...@@ -6,27 +6,25 @@
<body> <body>
<div class="container"> <div class="container">
<div th:replace="fragments :: navbar"></div> <div th:replace="fragments :: navbar"></div>
<h1>Messages : Create</h1> <div class="float-right mt-2">
<form id="messageForm" th:action="@{/(form)}" th:object="${message}" <a class="btn btn-primary btn-sm" th:href="@{/}" href="messages.html"> Messages </a>
action="#" method="post">
<div th:if="${#fields.hasErrors('*')}" class="alert alert-error">
<p th:each="error : ${#fields.errors('*')}" th:text="${error}">
Validation error</p>
</div> </div>
<div class="pull-right"> <h4 class="float-left mt-2">Messages : Create</h4>
<a th:href="@{/}" href="messages.html"> Messages </a> <div class="clearfix"></div>
<form id="messageForm" th:action="@{/(form)}" th:object="${message}" action="#" method="post">
<div th:if="${#fields.hasErrors('*')}" class="alert alert-danger" role="alert">
<p th:each="error : ${#fields.errors('*')}" class="m-0" th:text="${error}">Validation error</p>
</div> </div>
<input type="hidden" th:field="*{id}" <input type="hidden" th:field="*{id}" th:class="${'form-control' + (#fields.hasErrors('id') ? ' is-invalid' : '')}"/>
th:class="${#fields.hasErrors('id')} ? 'field-error'" /> <label <div class="form-group">
for="summary">Summary</label> <input type="text" <label for="summary">Summary</label>
th:field="*{summary}" <input type="text" th:field="*{summary}" th:class="${'form-control' + (#fields.hasErrors('summary') ? ' is-invalid' : '')}">
th:class="${#fields.hasErrors('summary')} ? 'field-error'" /> <label
for="text">Message</label>
<textarea th:field="*{text}"
th:class="${#fields.hasErrors('text')} ? 'field-error'"></textarea>
<div class="form-actions">
<input type="submit" value="Save" />
</div> </div>
<div class="form-group">
<label for="text">Message</label>
<textarea th:field="*{text}" th:class="${'form-control' + (#fields.hasErrors('text') ? ' is-invalid' : '')}"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form> </form>
</div> </div>
</body> </body>
......
spring-boot-samples/spring-boot-sample-web-ui/src/main/resources/templates/messages/list.html
View file @ fd1a7ba7
...@@ -6,17 +6,16 @@ ...@@ -6,17 +6,16 @@
<body> <body>
<div class="container"> <div class="container">
<div th:replace="fragments :: navbar"></div> <div th:replace="fragments :: navbar"></div>
<h1>Messages : View all</h1> <div class="float-right mt-2">
<div class="container"> <a class="btn btn-primary btn-sm" href="form.html" th:href="@{/(form)}">Create Message</a>
<div class="pull-right">
<a href="form.html" th:href="@{/(form)}">Create Message</a>
</div> </div>
<h4 class="float-left mt-2">Messages : View all</h4>
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<td>ID</td> <th>ID</th>
<td>Created</td> <th>Created</th>
<td>Summary</td> <th>Summary</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
...@@ -33,6 +32,5 @@ ...@@ -33,6 +32,5 @@
</tbody> </tbody>
</table> </table>
</div> </div>
</div>
</body> </body>
</html> </html>
spring-boot-samples/spring-boot-sample-web-ui/src/main/resources/templates/messages/view.html
View file @ fd1a7ba7
...@@ -6,27 +6,21 @@ ...@@ -6,27 +6,21 @@
<body> <body>
<div class="container"> <div class="container">
<div th:replace="fragments :: navbar"></div> <div th:replace="fragments :: navbar"></div>
<h1>Messages : View</h1> <div class="float-right mt-2">
<div class="alert alert-success" th:if="${globalMessage}" <a class="btn btn-primary btn-sm" href="list.html" th:href="@{/}">Messages</a>
th:text="${globalMessage}">Some Success message</div> </div>
<div class="pull-right"> <h4 class="float-left mt-2">Messages : View</h4>
<a th:href="@{/}" href="list.html"> Messages </a> <div class="clearfix"></div>
<div class="alert alert-success" th:if="${globalMessage}" th:text="${globalMessage}">Some Success message
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title" th:text="${message.id + ': ' + message.summary}">123 - A short summary...</h4>
<h6 class="card-subtitle mb-2 text-muted" th:text="${#calendars.format(message.created)}">July 11, 2012 2:17:16 PM CDT</h6>
<p class="card-text" th:text="${message.text}">A detailed message that is longer than the summary.</p>
<a class="card-link" href="messages" th:href="@{'/delete/' + ${message.id}}">delete</a>
<a class="card-link" href="form.html" th:href="@{'/modify/' + ${message.id}}"> modify</a>
</div> </div>
<dl>
<dt>ID</dt>
<dd id="id" th:text="${message.id}">123</dd>
<dt>Date</dt>
<dd id="created" th:text="${#calendars.format(message.created)}">
July 11, 2012 2:17:16 PM CDT</dd>
<dt>Summary</dt>
<dd id="summary" th:text="${message.summary}">A short summary...</dd>
<dt>Message</dt>
<dd id="text" th:text="${message.text}">A detailed message that
is longer than the summary.</dd>
</dl>
<div class="pull-left">
<a href="messages" th:href="@{'/delete/' + ${message.id}}">delete </a> |
<a href="form.html" th:href="@{'/modify/' + ${message.id}}"> modify </a>
</div> </div>
</div> </div>
</body> </body>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment