Changeset 276a8b6 for src/main/resources/templates/album.html

Timestamp:

10/07/21 20:07:41 (3 years ago)

Author:

KostaFortumanov <kfortumanov@…>

Branches:

master

Children:

0c37625

Parents:

0f4f552

Message:

post pagination

File:

• src/main/resources/templates/album.html (modified) (3 diffs)

src/main/resources/templates/album.html

@@ -16 +16 @@
     <p th:if="${noPosts}">No posts</p>
     <div th:unless="${noPosts}" class="album py-5 bg-light">
+
         <div class="container">
-
+            <div class="row">
+                <div class="col-md-2">
+                    <label class="form-label" for="sortBy">Sort By</label>
+                    <select class="input-group-text" id="sortBy">
+                        <option value="id">Default</option>
+                        <option value="title">Title</option>
+                        <option value="dateDue">Date due</option>
+                        <option value="fundsNeeded">Funds needed</option>
+                    </select>
+                </div>
+                <div class="col-md-2">
+                    <label class="form-label" for="order">Order</label>
+                    <select class="input-group-text" id="order">
+                        <option value="asc">Ascending</option>
+                        <option value="desc">Descending</option>
+                    </select>
+                </div>
+            </div>
+            <br>
             <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
                 <div class="col" th:each="post : ${postList}">
@@ -37 +56 @@
             </div>
         </div>
-        <hr class="ui-menu-divider" />
+        <hr class="ui-menu-divider"/>
         <nav>
-            <ul class="pagination justify-content-center">
-                <li class="page-item"><a class="page-link" href="#">Previous</a></li>
-                <li class="page-item"><a class="page-link" href="#">1</a></li>
-                <li class="page-item"><a class="page-link" href="#">2</a></li>
-                <li class="page-item"><a class="page-link" href="#">3</a></li>
-                <li class="page-item"><a class="page-link" href="#">Next</a></li>
-            </ul>
+            <div id="pagination"></div>
         </nav>
     </div>
@@ -51 +64 @@
 </main>
 <script src="/js/bootstrap.min.js"></script>
+<script id="helper" src="/js/pagination.js" th:data-pages="${totalPages}"></script>
 </body>
 </html>