| 1 | <!DOCTYPE html>
|
|---|
| 2 | <html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
|
|---|
| 3 | <head>
|
|---|
| 4 | <meta charset="UTF-8"/>
|
|---|
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1"/>
|
|---|
| 6 | <title>Album</title>
|
|---|
| 7 | <!-- Bootstrap core CSS -->
|
|---|
| 8 | <link href="css/bootstrap.min.css" rel="stylesheet"/>
|
|---|
| 9 | </head>
|
|---|
| 10 | <body>
|
|---|
| 11 | <header th:replace="common/navbar :: navbar"></header>
|
|---|
| 12 | <hr class="dropdown-divider">
|
|---|
| 13 | <br/>
|
|---|
| 14 | <br/>
|
|---|
| 15 | <main>
|
|---|
| 16 | <p th:if="${noPosts}">No posts</p>
|
|---|
| 17 | <div th:unless="${noPosts}" class="album py-5 bg-light">
|
|---|
| 18 | <div class="container">
|
|---|
| 19 |
|
|---|
| 20 | <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
|
|---|
| 21 | <div class="col" th:each="post : ${postList}">
|
|---|
| 22 | <div class="card shadow-sm">
|
|---|
| 23 | <img class="card-img" style="object-fit: contain" width="100%" height="225"
|
|---|
| 24 | th:src="${post.imagesPath[0]}">
|
|---|
| 25 | <div class="card-body overflow-hidden">
|
|---|
| 26 | <h4 th:text="${post.title}" style="height: 60px"></h4>
|
|---|
| 27 | <p class="card-text text-truncate" style="height: 45px" th:text="${post.description}"></p>
|
|---|
| 28 | <div class="d-flex justify-content-between align-items-center">
|
|---|
| 29 | <div class="btn-group">
|
|---|
| 30 | <a class="btn btn-sm btn-outline-secondary" th:href="@{/post(postid=${post.id})}">Open</a>
|
|---|
| 31 | </div>
|
|---|
| 32 | <span class="text-muted">Date due: <small th:text="${post.dateDue}"></small></span>
|
|---|
| 33 | </div>
|
|---|
| 34 | </div>
|
|---|
| 35 | </div>
|
|---|
| 36 | </div>
|
|---|
| 37 | </div>
|
|---|
| 38 | </div>
|
|---|
| 39 | <hr class="ui-menu-divider" />
|
|---|
| 40 | <nav>
|
|---|
| 41 | <ul class="pagination justify-content-center">
|
|---|
| 42 | <li class="page-item"><a class="page-link" href="#">Previous</a></li>
|
|---|
| 43 | <li class="page-item"><a class="page-link" href="#">1</a></li>
|
|---|
| 44 | <li class="page-item"><a class="page-link" href="#">2</a></li>
|
|---|
| 45 | <li class="page-item"><a class="page-link" href="#">3</a></li>
|
|---|
| 46 | <li class="page-item"><a class="page-link" href="#">Next</a></li>
|
|---|
| 47 | </ul>
|
|---|
| 48 | </nav>
|
|---|
| 49 | </div>
|
|---|
| 50 |
|
|---|
| 51 | </main>
|
|---|
| 52 | <script src="/js/bootstrap.min.js"></script>
|
|---|
| 53 | </body>
|
|---|
| 54 | </html> |
|---|
