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>
|
||||||
</div>
|
</nav>
|
||||||
</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 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>
|
||||||
|
|
|
||||||
|
|
@ -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 @@
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</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>
|
||||||
<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>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue