pagination indicator mini-arrow next/prev

core · Jun 2, 2016 · 9c4fb56 · 9c4fb56
1 parent 773c56f
commit 9c4fb56
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 24 deletions.
diff --git a/src/cljs/ulysses/components/basic.cljs b/src/cljs/ulysses/components/basic.cljs
@@ -1,6 +1,6 @@
 (ns ulysses.components.basic
   (:require [reagent.core :as reagent]
-            [ulysses.utils :refer [d-p map-subels classes]]
+            [ulysses.utils :refer [d-p map-subels classes-attr]]
             [ulysses.routes :refer [url-for]]
             [re-frame.core :refer [dispatch subscribe]]
             [clojure.string :as string]))
@@ -27,7 +27,7 @@
 (defn fa
   "font awesome icon"
   [fa-id]
-  [:i {:class (classes :fa (str "fa-" (name fa-id)))}])
+  [:i (classes-attr :fa (str "fa-" (name fa-id)))])
 
 (defn label
   "bootstrap label"

diff --git a/src/cljs/ulysses/components/header.cljs b/src/cljs/ulysses/components/header.cljs
@@ -1,7 +1,7 @@
 (ns ulysses.components.header
   (:require [ulysses.components.basic :refer [link fa]]
             [ulysses.config :as config]
-            [ulysses.utils :refer [classes]]
+            [ulysses.utils :refer [classes-attr]]
             [re-frame.core :as re-frame :refer [subscribe]]))
 
 ;; ----------------------------------------------------------------------------
@@ -38,7 +38,7 @@
             slim? (not= :home page)
             ovpr-url "http://research.uconn.edu"]
         [:nav.navbar.uconn-banner
-          {:class (classes {:slim slim?})}
+          (classes-attr {:slim slim?})
           [link "http://uconn.edu" {:class :navbar-brand}
             [:img {:src "/img/uconn-wordmark-single-white.png"}]]
           [:div.ovpr-sub

diff --git a/src/cljs/ulysses/pages/home.cljs b/src/cljs/ulysses/pages/home.cljs
@@ -5,14 +5,23 @@
                                    btn-classes
                                    mechanism-to-contextual
                                    truncate-with-ellipsis]]
-            [ulysses.components.basic :refer [hink
+            [ulysses.components.basic :refer [fa
+                                              hink
                                               link
                                               dropdown
                                               loading-or-no-results
                                               css-transition-group-standard]]
             [ulysses.components.misc :refer [grant-op-meta]]
             [ulysses.routes :as routes]))
 
+;; ----------------------------------------------------------------------------
+;; helpers
+;; ----------------------------------------------------------------------------
+
+(defn request-page
+  [n]
+  (dispatch [:request-grant-ops n]))
+
 ;; ----------------------------------------------------------------------------
 ;; helper sub-components
 ;; ----------------------------------------------------------------------------
@@ -95,16 +104,20 @@
 
 (defn pagination-item
   [n current-n on-click kind]
-  ; disabled-page, active-page, target-n, content
-  (let [[d a t c] (case kind :previous [1 nil (dec current-n)
-                                        [[:span "«"] [:span.sr-only "Previous"]]]
-                             :next [n nil (inc current-n)
-                                    [[:span "»"] [:span.sr-only "Next"]]]
-                             [nil kind kind [kind]])]
+  ; parent-tag-type, disabled-page, active-page, target-n, content
+  (let [[p d a t c] (case kind :previous [:lpi 1 nil (dec current-n)
+                                          [[:span "«"] [:span.sr-only "Previous"]]]
+                               :next [:lpi n nil (inc current-n)
+                                      [[:span "»"] [:span.sr-only "Next"]]]
+                               :previous-tiny [:s 1 nil (dec current-n)
+                                               [[fa :caret-left]]]
+                               :next-tiny [:s n nil (inc current-n)
+                                           [[fa :caret-right]]]
+                               [:lpi nil kind kind [kind]])]
     ^{:key (str kind)}
-    [:li.page-item
-      (classes-attr {:disabled (= d current-n) :active (= a current-n)})
-      (into [hink (partial on-click t) {:class :page-link}] c)]))
+    [(if (= :lpi p) :li.page-item :span.arrow-link-wrapper)
+     (classes-attr {:disabled (= d current-n) :active (= a current-n)})
+     (into [hink (partial on-click t) {:class (if (= :lpi p) :page-link :arrow-link)}] c)]))
 
 (defn grant-op-pagination
   [n current-n on-click]
@@ -114,10 +127,13 @@
         (partial pagination-item n current-n on-click)
         (concat [:previous] (map inc (range n)) [:next]))]])
 
-(defn pagination-info
-  [n current-n]
-  [:div.pagination-info
-    "page " current-n " / " n])
+(defn pagination-top
+  [n current-n on-click]
+  [:div.pagination-top
+    (pagination-item n current-n on-click :previous-tiny)
+    [:span
+      "page " current-n " / " n]
+    (pagination-item n current-n on-click :next-tiny)])
 
 ;; ----------------------------------------------------------------------------
 ;; main
@@ -130,15 +146,15 @@
     (fn []
       (let [gops @grant-ops
             hf @home-filters
-            p @pagination]
+            p @pagination
+            p-args [(:last p) (:current p) request-page]]
         [:div
           [grant-op-filters hf]
           (if (empty? gops)
             [loading-or-no-results]
             [:div.relative
-              [pagination-info (:last p) (:current p)]
+              (apply pagination-top p-args)
               [:div.grant-op-boxes
                 [css-transition-group-standard
                   (map-subels grant-op-box gops)]]
-              [grant-op-pagination (:last p) (:current p)
-                (fn [page] (dispatch [:request-grant-ops page]))]])]))))
+              (apply grant-op-pagination p-args)])]))))
diff --git a/src/sass/components/_grant-op-pagination.scss b/src/sass/components/_grant-op-pagination.scss
@@ -6,8 +6,29 @@
   }
 }
 
-.pagination-info {
+.pagination-top {
+  padding: 0 9px;
   position: absolute;
   right: .5%;
-  top: -25px;
+  top: -27px;
+
+  .arrow-link-wrapper {
+    display: block;
+    left: 0;
+    padding-right: 4px;
+    position: absolute;
+    top: 1px;
+
+    &:last-of-type {
+      left: auto;
+      padding-left: 4px;
+      padding-right: 0;
+      right: 0;
+    }
+  }
+
+  .arrow-link {
+    color: $body-color;
+    text-decoration: none;
+  }
 }