Add nice pagination and some code cleanup #20

project.clj

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

resources/public/js/main.js

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

resources/templates/index.html

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

resources/templates/layout.html

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

src/clj/yenu/routes/core.clj

@@ -13,7 +13,7 @@
 
 (defn page [number is-current? additional-class content]
   (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]]))
 
 (defn dots []
@@ -25,7 +25,7 @@
 (defn pagination [num current]
   (h/html
    [: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"))
      (cond
        (< num 13) (pagelist 1 num current)
@@ -35,6 +35,16 @@
      (page (inc current) (= current num) "disabled" (h/html "Weiter " [:span.fa.fa-arrow-right]))]]
    [: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]
   (let [image-count 25
         offset (* (dec current) image-count)
@@ -43,7 +53,8 @@
     (layout/render "index.html"
                    {:images images
                     :flash (:flash request)
-                    :pagination (pagination pages current)})))
+                    :pagination (pagination pages current)
+                    :pagination-mobile (pagination-mobile pages current)})))
 
 (defn detail-page [image-id request]
   (let [image (db/get-image {:id image-id})