Add nice pagination and some code cleanup #20

This commit is contained in:
Aaron Fischer 2017-04-18 22:21:18 +02:00
parent 7ab11a8069
commit 855dac7e1a
5 changed files with 24 additions and 5 deletions

View file

@ -1,6 +1,6 @@
(defproject yenu "0.1.0-SNAPSHOT" (defproject yenu "0.1.0-SNAPSHOT"
:description "yenu -- The image sharing tool for friends" :description "yenu -- The image sharing tool for friends"
:url "https://aaron-fischer.net/" :url "https://yenu.de/"
:dependencies [[bouncer "1.0.1"] :dependencies [[bouncer "1.0.1"]
[compojure "1.5.2"] [compojure "1.5.2"]

View file

@ -0,0 +1,6 @@
$(function () {
$('#page-switcher').on('change', function(e) {
var page = $(e.target).val();
window.location = '/page/' + page;
});
});

View file

@ -2,7 +2,8 @@
{% block content %} {% block content %}
{% safe %}{{ pagination| }}{% endsafe %} {% safe %}{{ pagination }}{% endsafe %}
{% safe %}{{ pagination-mobile }}{% endsafe %}
<div class="clearfix d-flex justify-content-center flex-wrap"> <div class="clearfix d-flex justify-content-center flex-wrap">
{% for image in images %} {% for image in images %}

View file

@ -81,6 +81,7 @@
{% script "/assets/jquery/jquery.min.js" %} {% script "/assets/jquery/jquery.min.js" %}
{% script "/assets/bootstrap/js/bootstrap.min.js" %} {% script "/assets/bootstrap/js/bootstrap.min.js" %}
{% script "/js/main.js" %}
</body> </body>
</html> </html>

View file

@ -13,7 +13,7 @@
(defn page [number is-current? additional-class content] (defn page [number is-current? additional-class content]
(h/html (h/html
[:li (if is-current? {:class (str "page-item " additional-class)} {:class "page-item"}) [:li {:class (cond-> ["page-item"] is-current? (conj additional-class))}
[:a.page-link {:href (str "/page/" number)} content]])) [:a.page-link {:href (str "/page/" number)} content]]))
(defn dots [] (defn dots []
@ -25,7 +25,7 @@
(defn pagination [num current] (defn pagination [num current]
(h/html (h/html
[:nav.pull-right.clearfix {:aria-label "Page navigation"} [:nav.pull-right.clearfix {:aria-label "Page navigation"}
[:ul.pagination [:ul.pagination.hidden-sm-down
(page (dec current) (= current 1) "disabled" (h/html [:span.fa.fa-arrow-left] " Zurück")) (page (dec current) (= current 1) "disabled" (h/html [:span.fa.fa-arrow-left] " Zurück"))
(cond (cond
(< num 13) (pagelist 1 num current) (< num 13) (pagelist 1 num current)
@ -35,6 +35,16 @@
(page (inc current) (= current num) "disabled" (h/html "Weiter " [:span.fa.fa-arrow-right]))]] (page (inc current) (= current num) "disabled" (h/html "Weiter " [:span.fa.fa-arrow-right]))]]
[:div.clearfix])) [:div.clearfix]))
(defn pagination-mobile [num current]
(h/html
[:ul.pagination.justify-content-end.hidden-md-up
(page (dec current) (= current 1) "disabled" (h/html [:span.fa.fa-arrow-left] " Zurück"))
[:form.form-inline
[:select#page-switcher.form-control
(for [p (range 1 (inc num))]
[:option (cond-> {:value p} (= p current) (assoc :selected "selected")) p])]]
(page (inc current) (= current num) "disabled" (h/html "Weiter " [:span.fa.fa-arrow-right]))]))
(defn index-page [current request] (defn index-page [current request]
(let [image-count 25 (let [image-count 25
offset (* (dec current) image-count) offset (* (dec current) image-count)
@ -43,7 +53,8 @@
(layout/render "index.html" (layout/render "index.html"
{:images images {:images images
:flash (:flash request) :flash (:flash request)
:pagination (pagination pages current)}))) :pagination (pagination pages current)
:pagination-mobile (pagination-mobile pages current)})))
(defn detail-page [image-id request] (defn detail-page [image-id request]
(let [image (db/get-image {:id image-id}) (let [image (db/get-image {:id image-id})