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>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div th:fragment="navbar" class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<a class="brand" href="http://thymeleaf.org">Thymeleaf</a>
|
||||
<ul class="nav">
|
||||
<li><a th:href="@{/}" href="messages.html"> Messages </a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<nav th:fragment="navbar" class="navbar navbar-dark bg-primary">
|
||||
<a class="navbar-brand" href="http://thymeleaf.org">Thymeleaf</a>
|
||||
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
|
||||
<li class="nav-item"><a class="nav-link" th:href="@{/}" href="messages.html">Messages</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -6,27 +6,25 @@
|
|||
<body>
|
||||
<div class="container">
|
||||
<div th:replace="fragments :: navbar"></div>
|
||||
<h1>Messages : Create</h1>
|
||||
<form id="messageForm" th:action="@{/(form)}" th:object="${message}"
|
||||
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 class="float-right mt-2">
|
||||
<a class="btn btn-primary btn-sm" th:href="@{/}" href="messages.html"> Messages </a>
|
||||
</div>
|
||||
<h4 class="float-left mt-2">Messages : Create</h4>
|
||||
<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 class="pull-right">
|
||||
<a th:href="@{/}" href="messages.html"> Messages </a>
|
||||
<input type="hidden" th:field="*{id}" th:class="${'form-control' + (#fields.hasErrors('id') ? ' is-invalid' : '')}"/>
|
||||
<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>
|
||||
<input type="hidden" th:field="*{id}"
|
||||
th:class="${#fields.hasErrors('id')} ? 'field-error'" /> <label
|
||||
for="summary">Summary</label> <input type="text"
|
||||
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 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>
|
||||
</div>
|
||||
</body>
|
||||
|
|
|
@ -6,33 +6,31 @@
|
|||
<body>
|
||||
<div class="container">
|
||||
<div th:replace="fragments :: navbar"></div>
|
||||
<h1>Messages : View all</h1>
|
||||
<div class="container">
|
||||
<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 class="float-right mt-2">
|
||||
<a class="btn btn-primary btn-sm" href="form.html" th:href="@{/(form)}">Create Message</a>
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -6,27 +6,21 @@
|
|||
<body>
|
||||
<div class="container">
|
||||
<div th:replace="fragments :: navbar"></div>
|
||||
<h1>Messages : View</h1>
|
||||
<div class="alert alert-success" th:if="${globalMessage}"
|
||||
th:text="${globalMessage}">Some Success message</div>
|
||||
<div class="pull-right">
|
||||
<a th:href="@{/}" href="list.html"> Messages </a>
|
||||
<div class="float-right mt-2">
|
||||
<a class="btn btn-primary btn-sm" href="list.html" th:href="@{/}">Messages</a>
|
||||
</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>
|
||||
<h4 class="float-left mt-2">Messages : View</h4>
|
||||
<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>
|
||||
</div>
|
||||
</body>
|
||||
|
|
Loading…
Reference in New Issue