| 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 |
|
|---|
| 19 | <div class="container">
|
|---|
| 20 | <div class="row">
|
|---|
| 21 | <div class="col-md-2">
|
|---|
| 22 | <label class="form-label" for="sortBy">Sort By</label>
|
|---|
| 23 | <select class="input-group-text" id="sortBy">
|
|---|
| 24 | <option value="id">Default</option>
|
|---|
| 25 | <option value="title">Title</option>
|
|---|
| 26 | <option value="dateDue">Date due</option>
|
|---|
| 27 | <option value="fundsNeeded">Funds needed</option>
|
|---|
| 28 | </select>
|
|---|
| 29 | </div>
|
|---|
| 30 | <div class="col-md-2">
|
|---|
| 31 | <label class="form-label" for="order">Order</label>
|
|---|
| 32 | <select class="input-group-text" id="order">
|
|---|
| 33 | <option value="asc">Ascending</option>
|
|---|
| 34 | <option value="desc">Descending</option>
|
|---|
| 35 | </select>
|
|---|
| 36 | </div>
|
|---|
| 37 | <div class="col-md-2">
|
|---|
| 38 | <label class="form-label" for="groupBy">Group by</label>
|
|---|
| 39 | <select class="input-group-text" id="groupBy">
|
|---|
| 40 | <option value="all">All</option>
|
|---|
| 41 | <option value="completed">Completed</option>
|
|---|
| 42 | <option value="expired">Expired</option>
|
|---|
| 43 | </select>
|
|---|
| 44 | </div>
|
|---|
| 45 | </div>
|
|---|
| 46 | <br>
|
|---|
| 47 | <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
|
|---|
| 48 | <div class="col" th:each="post : ${postList}">
|
|---|
| 49 | <div class="card shadow-sm">
|
|---|
| 50 | <img class="card-img" style="object-fit: contain" width="100%" height="225"
|
|---|
| 51 | th:src="${post.imagesPath[0]}">
|
|---|
| 52 | <div class="card-body overflow-hidden">
|
|---|
| 53 | <h4 th:text="${post.title}" style="height: 60px"></h4>
|
|---|
| 54 | <p class="card-text text-truncate" style="height: 45px" th:text="${post.description}"></p>
|
|---|
| 55 | <div class="d-flex justify-content-between align-items-center">
|
|---|
| 56 | <div class="btn-group">
|
|---|
| 57 | <a class="btn btn-sm btn-outline-secondary" th:href="@{/post(postid=${post.id})}">Open</a>
|
|---|
| 58 | </div>
|
|---|
| 59 | <span class="text-muted">Date due: <small th:text="${post.dateDue}"></small></span>
|
|---|
| 60 | </div>
|
|---|
| 61 | </div>
|
|---|
| 62 | </div>
|
|---|
| 63 | </div>
|
|---|
| 64 | </div>
|
|---|
| 65 | </div>
|
|---|
| 66 | <hr class="ui-menu-divider"/>
|
|---|
| 67 | <nav>
|
|---|
| 68 | <div id="pagination"></div>
|
|---|
| 69 | </nav>
|
|---|
| 70 | </div>
|
|---|
| 71 |
|
|---|
| 72 | </main>
|
|---|
| 73 | <script src="/js/bootstrap.min.js"></script>
|
|---|
| 74 | <script id="helper" src="/js/pagination.js" th:data-pages="${totalPages}"></script>
|
|---|
| 75 | </body>
|
|---|
| 76 | </html> |
|---|
