From 9c4fb56220736bf2fd5d6c3fd4ffbede9bf98248 Mon Sep 17 00:00:00 2001 From: Andrew Suzuki Date: Thu, 2 Jun 2016 10:39:01 -0400 Subject: [PATCH] pagination indicator mini-arrow next/prev --- src/cljs/ulysses/components/basic.cljs | 4 +- src/cljs/ulysses/components/header.cljs | 4 +- src/cljs/ulysses/pages/home.cljs | 52 ++++++++++++------- src/sass/components/_grant-op-pagination.scss | 25 ++++++++- 4 files changed, 61 insertions(+), 24 deletions(-) diff --git a/src/cljs/ulysses/components/basic.cljs b/src/cljs/ulysses/components/basic.cljs index 10d2839..0ee2074 100644 --- 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 index 20545b7..6972fe6 100644 --- 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 index 11766cc..d699300 100644 --- a/src/cljs/ulysses/pages/home.cljs +++ b/src/cljs/ulysses/pages/home.cljs @@ -5,7 +5,8 @@ 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 @@ -13,6 +14,14 @@ [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 index 7ba1332..7a3a94f 100644 --- 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; + } }