Migrate spring-boot-sample-web-ui to Bootstrap v4
Closes gh-10653
This commit is contained in:
parent
498f66fcdc
commit
fd1a7ba77c
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -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>
|
</nav>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
<div th:if="${#fields.hasErrors('*')}" class="alert alert-error">
|
<h4 class="float-left mt-2">Messages : Create</h4>
|
||||||
<p th:each="error : ${#fields.errors('*')}" th:text="${error}">
|
<div class="clearfix"></div>
|
||||||
Validation error</p>
|
<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>
|
||||||
<div class="pull-right">
|
<input type="hidden" th:field="*{id}" th:class="${'form-control' + (#fields.hasErrors('id') ? ' is-invalid' : '')}"/>
|
||||||
<a th:href="@{/}" href="messages.html"> Messages </a>
|
<div class="form-group">
|
||||||
|
<label for="summary">Summary</label>
|
||||||
|
<input type="text" th:field="*{summary}" th:class="${'form-control' + (#fields.hasErrors('summary') ? ' is-invalid' : '')}">
|
||||||
</div>
|
</div>
|
||||||
<input type="hidden" th:field="*{id}"
|
<div class="form-group">
|
||||||
th:class="${#fields.hasErrors('id')} ? 'field-error'" /> <label
|
<label for="text">Message</label>
|
||||||
for="summary">Summary</label> <input type="text"
|
<textarea th:field="*{text}" th:class="${'form-control' + (#fields.hasErrors('text') ? ' is-invalid' : '')}"></textarea>
|
||||||
th:field="*{summary}"
|
|
||||||
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>
|
||||||
|
<button type="submit" class="btn btn-primary">Submit</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
|
|
@ -6,33 +6,31 @@
|
||||||
<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>
|
|
||||||
<table class="table table-bordered table-striped">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<td>ID</td>
|
|
||||||
<td>Created</td>
|
|
||||||
<td>Summary</td>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr th:if="${messages.empty}">
|
|
||||||
<td colspan="3">No messages</td>
|
|
||||||
</tr>
|
|
||||||
<tr th:each="message : ${messages}">
|
|
||||||
<td th:text="${message.id}">1</td>
|
|
||||||
<td th:text="${#calendars.format(message.created)}">July 11,
|
|
||||||
2012 2:17:16 PM CDT</td>
|
|
||||||
<td><a href="view.html" th:href="@{'/' + ${message.id}}"
|
|
||||||
th:text="${message.summary}"> The summary </a></td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
</div>
|
||||||
|
<h4 class="float-left mt-2">Messages : View all</h4>
|
||||||
|
<table class="table table-bordered table-striped">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>ID</th>
|
||||||
|
<th>Created</th>
|
||||||
|
<th>Summary</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr th:if="${messages.empty}">
|
||||||
|
<td colspan="3">No messages</td>
|
||||||
|
</tr>
|
||||||
|
<tr th:each="message : ${messages}">
|
||||||
|
<td th:text="${message.id}">1</td>
|
||||||
|
<td th:text="${#calendars.format(message.created)}">July 11,
|
||||||
|
2012 2:17:16 PM CDT</td>
|
||||||
|
<td><a href="view.html" th:href="@{'/' + ${message.id}}"
|
||||||
|
th:text="${message.summary}"> The summary </a></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -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 class="pull-right">
|
|
||||||
<a th:href="@{/}" href="list.html"> Messages </a>
|
|
||||||
</div>
|
</div>
|
||||||
<dl>
|
<h4 class="float-left mt-2">Messages : View</h4>
|
||||||
<dt>ID</dt>
|
<div class="clearfix"></div>
|
||||||
<dd id="id" th:text="${message.id}">123</dd>
|
<div class="alert alert-success" th:if="${globalMessage}" th:text="${globalMessage}">Some Success message
|
||||||
<dt>Date</dt>
|
</div>
|
||||||
<dd id="created" th:text="${#calendars.format(message.created)}">
|
<div class="card">
|
||||||
July 11, 2012 2:17:16 PM CDT</dd>
|
<div class="card-body">
|
||||||
<dt>Summary</dt>
|
<h4 class="card-title" th:text="${message.id + ': ' + message.summary}">123 - A short summary...</h4>
|
||||||
<dd id="summary" th:text="${message.summary}">A short summary...</dd>
|
<h6 class="card-subtitle mb-2 text-muted" th:text="${#calendars.format(message.created)}">July 11, 2012 2:17:16 PM CDT</h6>
|
||||||
<dt>Message</dt>
|
<p class="card-text" th:text="${message.text}">A detailed message that is longer than the summary.</p>
|
||||||
<dd id="text" th:text="${message.text}">A detailed message that
|
<a class="card-link" href="messages" th:href="@{'/delete/' + ${message.id}}">delete</a>
|
||||||
is longer than the summary.</dd>
|
<a class="card-link" href="form.html" th:href="@{'/modify/' + ${message.id}}"> modify</a>
|
||||||
</dl>
|
</div>
|
||||||
<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>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue