From 03ab5b05398215e08dd0e4859decd709cbfb178a Mon Sep 17 00:00:00 2001
From: Vitaliy Vlasov <siphiuel@gmail.com>
Date: Fri, 19 Jan 2018 15:41:33 +0200
Subject: [PATCH 1/8] Pagination: add cursor pointer for buttons; scroll to top
 when changing page

---
 src/cljs/commiteth/activity.cljs |  1 +
 src/cljs/commiteth/bounties.cljs |  5 +++--
 src/cljs/commiteth/handlers.cljs | 24 ++++++++++++++++++------
 src/less/style.less              |  1 +
 4 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/src/cljs/commiteth/activity.cljs b/src/cljs/commiteth/activity.cljs
index 69b4d34..0d199dd 100644
--- a/src/cljs/commiteth/activity.cljs
+++ b/src/cljs/commiteth/activity.cljs
@@ -59,6 +59,7 @@
 
 (defn activity-list [activity-page-data]
   [:div.ui.container.activity-container
+   {:id "activity-container"}
    (if (empty? (:items activity-page-data))
      [:div.view-no-data-container
       [:p "No recent activity yet"]]
diff --git a/src/cljs/commiteth/bounties.cljs b/src/cljs/commiteth/bounties.cljs
index 26957e3..ebe63d2 100644
--- a/src/cljs/commiteth/bounties.cljs
+++ b/src/cljs/commiteth/bounties.cljs
@@ -47,15 +47,16 @@
 (defn bounties-list [{:keys [items item-count page-number total-count] 
                       :as bounty-page-data}]
   [:div.ui.container.open-bounties-container
+   {:id "open-bounties-container"}
    [:div.open-bounties-header "Bounties"]
    (if (empty? items)
      [:div.view-no-data-container
       [:p "No recent activity yet"]]
-     [:div 
+     [:div
       (let [left (inc (* (dec page-number) items-per-page))
             right (dec (+ left item-count))]
         [:div.item-counts-label
-            [:span (str "Showing " left "-" right " of " total-count)]])
+         [:span (str "Showing " left "-" right " of " total-count)]])
       (display-data-page bounty-page-data bounty-item :set-bounty-page-number)])])
 
 (defn bounties-page []
diff --git a/src/cljs/commiteth/handlers.cljs b/src/cljs/commiteth/handlers.cljs
index 1cf2562..f50ad77 100644
--- a/src/cljs/commiteth/handlers.cljs
+++ b/src/cljs/commiteth/handlers.cljs
@@ -6,6 +6,7 @@
                                    reg-fx
                                    inject-cofx]]
             [ajax.core :refer [GET POST]]
+            [clojure.browser.dom :as dom :refer [get-element]]
             [cuerdas.core :as str]
             [cljs-web3.core :as web3]
             [cljs-web3.eth :as web3-eth]
@@ -38,6 +39,15 @@
    (println "redirecting to" path)
    (set! (.-pathname js/location) path)))
 
+(reg-fx
+  :bounty-scroll-pos
+  (fn [scroll-pos]
+    (.scrollIntoView (get-element "open-bounties-container")) ))
+
+(reg-fx
+  :activity-scroll-pos
+  (fn [scroll-pos]
+    (.scrollIntoView (get-element "activity-container"))))
 
 (reg-event-fx
  :initialize-db
@@ -68,15 +78,17 @@
  (fn [db [_ page]]
    (assoc db :page page)))
 
-(reg-event-db
+(reg-event-fx
   :set-bounty-page-number
-  (fn [db [_ page]]
-    (assoc db :bounty-page-number page)))
+  (fn [{:keys [db]} [_ page]]
+    {:db (assoc db :bounty-page-number page)
+     :bounty-scroll-pos 0}))
 
-(reg-event-db
+(reg-event-fx
   :set-activity-page-number
-  (fn [db [_ page]]
-    (assoc db :activity-page-number page)))
+  (fn [{:keys [db]} [_ page]]
+    {:db (assoc db :activity-page-number page)
+     :activity-scroll-pos 0}))
 
 (reg-event-fx
  :set-flash-message
diff --git a/src/less/style.less b/src/less/style.less
index c21473f..145aca5 100644
--- a/src/less/style.less
+++ b/src/less/style.less
@@ -887,6 +887,7 @@ body {
   flex: none;
   align-items: center;
   justify-content: center;
+  cursor: pointer;
 }
 
 .grayed-out {

From 55cbb713f916af5a810ab7f278b39c610981a0f0 Mon Sep 17 00:00:00 2001
From: Vitaliy Vlasov <siphiuel@gmail.com>
Date: Fri, 19 Jan 2018 21:01:35 +0200
Subject: [PATCH 2/8] Pagination: use React Refs in order to obtain DOM element
 for scrolling

---
 src/cljs/commiteth/activity.cljs | 32 ++++++++++++++---------
 src/cljs/commiteth/bounties.cljs | 45 ++++++++++++++++++--------------
 src/cljs/commiteth/handlers.cljs | 24 +++++------------
 3 files changed, 51 insertions(+), 50 deletions(-)

diff --git a/src/cljs/commiteth/activity.cljs b/src/cljs/commiteth/activity.cljs
index 0d199dd..d59ed19 100644
--- a/src/cljs/commiteth/activity.cljs
+++ b/src/cljs/commiteth/activity.cljs
@@ -58,19 +58,25 @@
 
 
 (defn activity-list [activity-page-data]
-  [:div.ui.container.activity-container
-   {:id "activity-container"}
-   (if (empty? (:items activity-page-data))
-     [:div.view-no-data-container
-      [:p "No recent activity yet"]]
-     (display-data-page activity-page-data activity-item :set-activity-page-number))])
+  (if (empty? (:items activity-page-data))
+    [:div.view-no-data-container
+     [:p "No recent activity yet"]]
+    (display-data-page activity-page-data activity-item :set-activity-page-number)))
 
 (defn activity-page []
   (let [activity-page-data (rf/subscribe [:activities-page])
-        activity-feed-loading? (rf/subscribe [:get-in [:activity-feed-loading?]])]
-    (fn []
-      (if @activity-feed-loading?
-        [:div.view-loading-container
-         [:div.ui.active.inverted.dimmer
-          [:div.ui.text.loader.view-loading-label "Loading"]]]
-        [activity-list @activity-page-data]))))
+        activity-feed-loading? (rf/subscribe [:get-in [:activity-feed-loading?]])
+        container-element (atom nil) 
+        render-fn (fn []
+                    (if @activity-feed-loading?
+                      [:div.view-loading-container
+                       [:div.ui.active.inverted.dimmer
+                        [:div.ui.text.loader.view-loading-label "Loading"]]]
+                      [:div.ui.container.activity-container
+                       {:ref #(reset! container-element %1)} 
+                       [activity-list @activity-page-data]]))]
+    (r/create-class
+      {:component-did-update (fn [] 
+                               (when @container-element
+                                 (.scrollIntoView @container-element)))
+       :reagent-render render-fn})))
diff --git a/src/cljs/commiteth/bounties.cljs b/src/cljs/commiteth/bounties.cljs
index ebe63d2..2868da3 100644
--- a/src/cljs/commiteth/bounties.cljs
+++ b/src/cljs/commiteth/bounties.cljs
@@ -1,5 +1,6 @@
 (ns commiteth.bounties
   (:require [re-frame.core :as rf]
+            [reagent.core :as r]
             [commiteth.common :refer [moment-timestamp
                                       display-data-page
                                       items-per-page
@@ -46,25 +47,31 @@
 
 (defn bounties-list [{:keys [items item-count page-number total-count] 
                       :as bounty-page-data}]
-  [:div.ui.container.open-bounties-container
-   {:id "open-bounties-container"}
-   [:div.open-bounties-header "Bounties"]
-   (if (empty? items)
-     [:div.view-no-data-container
-      [:p "No recent activity yet"]]
-     [:div
-      (let [left (inc (* (dec page-number) items-per-page))
-            right (dec (+ left item-count))]
-        [:div.item-counts-label
-         [:span (str "Showing " left "-" right " of " total-count)]])
-      (display-data-page bounty-page-data bounty-item :set-bounty-page-number)])])
+  (if (empty? items)
+    [:div.view-no-data-container
+     [:p "No recent activity yet"]]
+    [:div
+     (let [left (inc (* (dec page-number) items-per-page))
+           right (dec (+ left item-count))]
+       [:div.item-counts-label
+        [:span (str "Showing " left "-" right " of " total-count)]])
+     (display-data-page bounty-page-data bounty-item :set-bounty-page-number)]))
 
 (defn bounties-page []
   (let [bounty-page-data (rf/subscribe [:open-bounties-page])
-        open-bounties-loading? (rf/subscribe [:get-in [:open-bounties-loading?]])]
-    (fn []
-      (if @open-bounties-loading?
-        [:div.view-loading-container
-         [:div.ui.active.inverted.dimmer
-          [:div.ui.text.loader.view-loading-label "Loading"]]]
-        [bounties-list @bounty-page-data]))))
+        open-bounties-loading? (rf/subscribe [:get-in [:open-bounties-loading?]])
+        container-element (atom nil) 
+        render-fn (fn []
+                    (if @open-bounties-loading?
+                      [:div.view-loading-container
+                       [:div.ui.active.inverted.dimmer
+                        [:div.ui.text.loader.view-loading-label "Loading"]]]
+                      [:div.ui.container.open-bounties-container
+                       {:ref #(reset! container-element %1)} 
+                       [:div.open-bounties-header "Bounties"]
+                       [bounties-list @bounty-page-data]]))]
+    (r/create-class
+      {:component-did-update (fn [] 
+                               (when @container-element
+                                 (.scrollIntoView @container-element)))
+       :reagent-render render-fn})))
diff --git a/src/cljs/commiteth/handlers.cljs b/src/cljs/commiteth/handlers.cljs
index f50ad77..671dbd8 100644
--- a/src/cljs/commiteth/handlers.cljs
+++ b/src/cljs/commiteth/handlers.cljs
@@ -39,16 +39,6 @@
    (println "redirecting to" path)
    (set! (.-pathname js/location) path)))
 
-(reg-fx
-  :bounty-scroll-pos
-  (fn [scroll-pos]
-    (.scrollIntoView (get-element "open-bounties-container")) ))
-
-(reg-fx
-  :activity-scroll-pos
-  (fn [scroll-pos]
-    (.scrollIntoView (get-element "activity-container"))))
-
 (reg-event-fx
  :initialize-db
  [(inject-cofx :store)]
@@ -78,17 +68,15 @@
  (fn [db [_ page]]
    (assoc db :page page)))
 
-(reg-event-fx
+(reg-event-db
   :set-bounty-page-number
-  (fn [{:keys [db]} [_ page]]
-    {:db (assoc db :bounty-page-number page)
-     :bounty-scroll-pos 0}))
+  (fn [db [_ page]]
+    (assoc db :bounty-page-number page)))
 
-(reg-event-fx
+(reg-event-db
   :set-activity-page-number
-  (fn [{:keys [db]} [_ page]]
-    {:db (assoc db :activity-page-number page)
-     :activity-scroll-pos 0}))
+  (fn [db [_ page]]
+    (assoc db :activity-page-number page)))
 
 (reg-event-fx
  :set-flash-message

From b2ab0949f6010a650555a9872728912dec383b79 Mon Sep 17 00:00:00 2001
From: Vitaliy Vlasov <siphiuel@gmail.com>
Date: Fri, 19 Jan 2018 21:02:51 +0200
Subject: [PATCH 3/8] handlers: remove require for clojure.browser.dom

---
 src/cljs/commiteth/handlers.cljs | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/cljs/commiteth/handlers.cljs b/src/cljs/commiteth/handlers.cljs
index 671dbd8..b1114fe 100644
--- a/src/cljs/commiteth/handlers.cljs
+++ b/src/cljs/commiteth/handlers.cljs
@@ -6,7 +6,6 @@
                                    reg-fx
                                    inject-cofx]]
             [ajax.core :refer [GET POST]]
-            [clojure.browser.dom :as dom :refer [get-element]]
             [cuerdas.core :as str]
             [cljs-web3.core :as web3]
             [cljs-web3.eth :as web3-eth]

From 326c221988e5dff5ace552deb892233cfe750fe1 Mon Sep 17 00:00:00 2001
From: Vitaliy Vlasov <siphiuel@gmail.com>
Date: Mon, 22 Jan 2018 13:53:33 +0200
Subject: [PATCH 4/8] [FIX #226] UI changes; refactor React refs usage

---
 src/cljs/commiteth/activity.cljs      | 39 ++++++++++++++-------------
 src/cljs/commiteth/bounties.cljs      | 30 ++++++++++-----------
 src/cljs/commiteth/common.cljs        | 34 ++++++++++++++++-------
 src/cljs/commiteth/db.cljs            |  3 +--
 src/cljs/commiteth/handlers.cljs      | 17 +++++-------
 src/cljs/commiteth/subscriptions.cljs | 13 +++------
 src/less/style.less                   | 20 +++++++++++---
 7 files changed, 88 insertions(+), 68 deletions(-)

diff --git a/src/cljs/commiteth/activity.cljs b/src/cljs/commiteth/activity.cljs
index d59ed19..2e9444e 100644
--- a/src/cljs/commiteth/activity.cljs
+++ b/src/cljs/commiteth/activity.cljs
@@ -2,7 +2,9 @@
   (:require [re-frame.core :as rf]
             [reagent.core :as r]
             [commiteth.common :refer [moment-timestamp
+                                      items-per-page
                                       display-data-page
+                                      scroll-div
                                       issue-url]]))
 
 
@@ -55,28 +57,29 @@
            (str (subs (str tla) 1) " " balance)])])
      [:div.time (moment-timestamp updated)]]]])
 
-
-
-(defn activity-list [activity-page-data]
+(defn activity-list [{:keys [items item-count page-number total-count] 
+                      :as activity-page-data}]
   (if (empty? (:items activity-page-data))
     [:div.view-no-data-container
      [:p "No recent activity yet"]]
-    (display-data-page activity-page-data activity-item :set-activity-page-number)))
+    [:div
+     (let [left (inc (* (dec page-number) items-per-page))
+           right (dec (+ left item-count))]
+       [:div.item-counts-label
+        [:span (str "Showing " left "-" right " of " total-count)]])
+     (display-data-page activity-page-data activity-item)]))
 
 (defn activity-page []
   (let [activity-page-data (rf/subscribe [:activities-page])
         activity-feed-loading? (rf/subscribe [:get-in [:activity-feed-loading?]])
-        container-element (atom nil) 
-        render-fn (fn []
-                    (if @activity-feed-loading?
-                      [:div.view-loading-container
-                       [:div.ui.active.inverted.dimmer
-                        [:div.ui.text.loader.view-loading-label "Loading"]]]
-                      [:div.ui.container.activity-container
-                       {:ref #(reset! container-element %1)} 
-                       [activity-list @activity-page-data]]))]
-    (r/create-class
-      {:component-did-update (fn [] 
-                               (when @container-element
-                                 (.scrollIntoView @container-element)))
-       :reagent-render render-fn})))
+        container-element (atom nil)] 
+    (fn []
+      (if @activity-feed-loading?
+        [:div.view-loading-container
+         [:div.ui.active.inverted.dimmer
+          [:div.ui.text.loader.view-loading-label "Loading"]]]
+        [:div.ui.container.activity-container
+         {:ref #(reset! container-element %1)} 
+         [scroll-div container-element]
+         [:div.activity-header "Activities"]
+         [activity-list @activity-page-data]]))))
diff --git a/src/cljs/commiteth/bounties.cljs b/src/cljs/commiteth/bounties.cljs
index 2868da3..fdf741d 100644
--- a/src/cljs/commiteth/bounties.cljs
+++ b/src/cljs/commiteth/bounties.cljs
@@ -3,6 +3,7 @@
             [reagent.core :as r]
             [commiteth.common :refer [moment-timestamp
                                       display-data-page
+                                      scroll-div
                                       items-per-page
                                       issue-url]]))
 
@@ -55,23 +56,20 @@
            right (dec (+ left item-count))]
        [:div.item-counts-label
         [:span (str "Showing " left "-" right " of " total-count)]])
-     (display-data-page bounty-page-data bounty-item :set-bounty-page-number)]))
+     (display-data-page bounty-page-data bounty-item)]))
 
 (defn bounties-page []
   (let [bounty-page-data (rf/subscribe [:open-bounties-page])
         open-bounties-loading? (rf/subscribe [:get-in [:open-bounties-loading?]])
-        container-element (atom nil) 
-        render-fn (fn []
-                    (if @open-bounties-loading?
-                      [:div.view-loading-container
-                       [:div.ui.active.inverted.dimmer
-                        [:div.ui.text.loader.view-loading-label "Loading"]]]
-                      [:div.ui.container.open-bounties-container
-                       {:ref #(reset! container-element %1)} 
-                       [:div.open-bounties-header "Bounties"]
-                       [bounties-list @bounty-page-data]]))]
-    (r/create-class
-      {:component-did-update (fn [] 
-                               (when @container-element
-                                 (.scrollIntoView @container-element)))
-       :reagent-render render-fn})))
+        container-element (atom nil)] 
+    (fn []
+      (if @open-bounties-loading?
+        [:div.view-loading-container
+         [:div.ui.active.inverted.dimmer
+          [:div.ui.text.loader.view-loading-label "Loading"]]]
+        [:div.ui.container.open-bounties-container
+         {:ref #(reset! container-element %1)} 
+         [scroll-div container-element]
+         [:div.open-bounties-header "Bounties"]
+         [bounties-list @bounty-page-data]]))
+    ))
diff --git a/src/cljs/commiteth/common.cljs b/src/cljs/commiteth/common.cljs
index 6eed787..417dea1 100644
--- a/src/cljs/commiteth/common.cljs
+++ b/src/cljs/commiteth/common.cljs
@@ -1,6 +1,7 @@
 (ns commiteth.common
   (:require [reagent.core :as r]
             [re-frame.core :as rf]
+            [clojure.string :as str]
             [cljsjs.moment]))
 
 (defn input [val-ratom props]
@@ -30,9 +31,22 @@
 (defn issue-url [owner repo number]
   (str "https://github.com/" owner "/" repo "/issues/" number))
 
+(defn scroll-div [container-element]
+  "This is an invisible div that exists
+   for the sole purpose of scrolling the container-element into view
+   when page-number is updated"
+  (let [page-number (rf/subscribe [:page-number])]
+    (r/create-class
+      {:component-did-update (fn [] 
+                               (when @container-element
+                                 (.scrollIntoView @container-element)))
+       :reagent-render (fn []
+                         [:div {:style {:display "none"}}
+                          @page-number])})))
+
 (def items-per-page 15)
 
-(defn draw-page-numbers [page-number page-count set-page-kw]
+(defn draw-page-numbers [page-number page-count]
   "Draw page numbers for the pagination component.
    Inserts ellipsis when list is too long, by default
    max 6 items are allowed"
@@ -41,8 +55,8 @@
                            [:div.rectangle-rounded
                             (cond-> {} 
                               (not current?) 
-                              (assoc :class "grayed-out"
-                                     :on-click #(rf/dispatch [set-page-kw i])))
+                              (assoc :class "grayed-out-page-num"
+                                     :on-click #(rf/dispatch [:set-page-number i])))
                             i])
         max-page-nums 6]
     [:div.page-nums-container 
@@ -78,8 +92,7 @@
                                  total-count
                                  page-number 
                                  page-count]} 
-                         draw-item-fn
-                         set-page-kw]
+                         draw-item-fn]
   "Draw data items along with pagination controls"
   (let [draw-items (fn []
                      (into [:div.ui.items]
@@ -90,14 +103,17 @@
                                              forward?) 
                                         (and (< 1 page-number)
                                              (not forward?))) 
-                                (rf/dispatch [set-page-kw 
+                                (rf/dispatch [:set-page-number
                                               (if forward?
                                                 (inc page-number)
                                                 (dec page-number))])))
         draw-rect (fn [direction]
-                    (let [forward? (= direction :forward)]
+                    (let [forward? (= direction :forward)
+                          gray-out? (or (and forward? (= page-number page-count))
+                                        (and (not forward?) (= page-number 1))) ]
                       [:div.rectangle-rounded 
-                       {:on-click (on-direction-click forward?)}
+                       (cond-> {:on-click (on-direction-click forward?)}
+                         gray-out? (assoc :class "grayed-out-direction"))
                        [:img.icon-forward-gray 
                         (cond-> {:src "icon-forward-gray.svg"}
                           forward? (assoc :class "flip-horizontal"))]]))]
@@ -110,6 +126,6 @@
             [draw-rect :backward]
             [draw-rect :forward]
             [:div.page-nav-text [:span (str "Page " page-number " of " page-count)]]
-            [draw-page-numbers page-number page-count set-page-kw]]])))
+            [draw-page-numbers page-number page-count]]])))
 
 
diff --git a/src/cljs/commiteth/db.cljs b/src/cljs/commiteth/db.cljs
index a93c8bc..76b9a1c 100644
--- a/src/cljs/commiteth/db.cljs
+++ b/src/cljs/commiteth/db.cljs
@@ -8,8 +8,7 @@
    :activity-feed-loading? false
    :open-bounties-loading? false
    :open-bounties []
-   :bounty-page-number 1
-   :activity-page-number 1
+   :page-number 1
    :owner-bounties   {}
    :top-hunters []
    :activity-feed []})
diff --git a/src/cljs/commiteth/handlers.cljs b/src/cljs/commiteth/handlers.cljs
index b1114fe..077d280 100644
--- a/src/cljs/commiteth/handlers.cljs
+++ b/src/cljs/commiteth/handlers.cljs
@@ -63,19 +63,15 @@
 
 
 (reg-event-db
- :set-active-page
- (fn [db [_ page]]
-   (assoc db :page page)))
+  :set-active-page
+  (fn [db [_ page]]
+    (assoc db :page page
+           :page-number 1)))
 
 (reg-event-db
-  :set-bounty-page-number
+  :set-page-number
   (fn [db [_ page]]
-    (assoc db :bounty-page-number page)))
-
-(reg-event-db
-  :set-activity-page-number
-  (fn [db [_ page]]
-    (assoc db :activity-page-number page)))
+    (assoc db :page-number page)))
 
 (reg-event-fx
  :set-flash-message
@@ -90,7 +86,6 @@
  (fn [db _]
    (dissoc db :flash-message)))
 
-
 (defn assoc-in-if-not-empty [m path val]
   (if (seq val)
     (assoc-in m path val)
diff --git a/src/cljs/commiteth/subscriptions.cljs b/src/cljs/commiteth/subscriptions.cljs
index f9cb555..c1b8952 100644
--- a/src/cljs/commiteth/subscriptions.cljs
+++ b/src/cljs/commiteth/subscriptions.cljs
@@ -37,14 +37,14 @@
     (vec (:open-bounties db))))
 
 (reg-sub
-  :bounty-page-number
+  :page-number
   (fn [db _]
-    (:bounty-page-number db)))
+    (:page-number db)))
 
 (reg-sub
   :open-bounties-page
   :<- [:open-bounties]
-  :<- [:bounty-page-number]
+  :<- [:page-number]
   (fn [[open-bounties page-number] _]
     (let [total-count (count open-bounties)
           start (* (dec page-number) items-per-page)
@@ -77,15 +77,10 @@
   (fn [db _]
     (vec (:activity-feed db))))
 
-(reg-sub
-  :activity-page-number
-  (fn [db _]
-    (:activity-page-number db)))
-
 (reg-sub
   :activities-page
   :<- [:activity-feed]
-  :<- [:activity-page-number]
+  :<- [:page-number]
   (fn [[activities page-number] _]
     (let [total-count (count activities)
           start (* (dec page-number) items-per-page)
diff --git a/src/less/style.less b/src/less/style.less
index 145aca5..07e3646 100644
--- a/src/less/style.less
+++ b/src/less/style.less
@@ -523,7 +523,7 @@
         }
     }
 
-    border: #e7e7e7 solid 0.1em!important;
+    border-bottom: #eaecee 1px solid !important;
     box-shadow: none!important;
     border-radius: 0.3em!important;
     padding: 0.8em 1em 1.1em!important;
@@ -588,9 +588,16 @@
 }
 
 .activity-container {
+    background-color: #fff;
     transform: translate(0, -45px);
     border-radius: 10px;
-
+    padding: 24px;
+    .activity-header {
+        font-family: "PostGrotesk-Medium";
+        font-size: 21px;
+        font-weight: 500;
+        color: #42505c;
+    }
 }
 
 .footer-row {
@@ -890,12 +897,19 @@ body {
   cursor: pointer;
 }
 
-.grayed-out {
+.grayed-out-page-num {
   color: #8d99a4;
   background-color: #f2f5f8;
   opacity: 1.0;
 }
 
+.grayed-out-direction {
+  color: #8d99a4;
+  background-color: #f2f5f8;
+  opacity: 0.4;
+  cursor: auto
+}
+
 .flip-horizontal {
     -moz-transform: scaleX(-1);
     -webkit-transform: scaleX(-1);

From df8de465320cb50142e6168d6d6d8287f0a105ef Mon Sep 17 00:00:00 2001
From: Vitaliy Vlasov <siphiuel@gmail.com>
Date: Mon, 22 Jan 2018 17:42:01 +0200
Subject: [PATCH 5/8] Pagination controls: apply CSS media queries for mobile
 devices

---
 src/cljs/commiteth/common.cljs |  5 +++--
 src/less/style.less            | 27 ++++++++++++++++++---------
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/src/cljs/commiteth/common.cljs b/src/cljs/commiteth/common.cljs
index 417dea1..8cb213d 100644
--- a/src/cljs/commiteth/common.cljs
+++ b/src/cljs/commiteth/common.cljs
@@ -123,8 +123,9 @@
           [:div
            [draw-items] 
            [:div.page-nav-container
-            [draw-rect :backward]
-            [draw-rect :forward]
+            [:div.page-direction-container
+             [draw-rect :backward]
+             [draw-rect :forward]]
             [:div.page-nav-text [:span (str "Page " page-number " of " page-count)]]
             [draw-page-numbers page-number page-count]]])))
 
diff --git a/src/less/style.less b/src/less/style.less
index 07e3646..d8c078c 100644
--- a/src/less/style.less
+++ b/src/less/style.less
@@ -919,15 +919,6 @@ body {
     filter: fliph;
 }
 
-.pagination-text {
-	width: 83px;
-	height: 15px;
-	font-family: PostGrotesk;
-	font-size: 15px;
-	text-align: center;
-	color: #8d99a4;
-}
-
 .icon-forward-gray {
 	width: 24px;
 	height: 24px;
@@ -937,10 +928,24 @@ body {
 .page-nav-container {
   display: flex;
   margin: 0 -6px;
+  @media (max-width: 767px) {
+    align-items: center;
+    flex-direction: column;
+  }
+}
+
+.page-direction-container {
+  display: flex;
+  @media (max-width: 767px) {
+    flex-direction: row;
+  }
 }
 
 .page-nums-container {
   display: flex;
+  @media (max-width: 767px) {
+    display: none;
+  }
   margin-left: auto;
   justify-content: space-between;
 }
@@ -955,6 +960,10 @@ body {
   flex: none;
   align-items: center;
   justify-content: center;
+
+  @media (max-width: 767px) {
+    margin-top: 12px;
+  }
 }
 
 .item-counts-label {

From bb71d830a88fa82c78443a98d494eda550e49e60 Mon Sep 17 00:00:00 2001
From: Vitaliy Vlasov <siphiuel@gmail.com>
Date: Thu, 25 Jan 2018 13:43:15 +0200
Subject: [PATCH 6/8] Add page-num-active style disabling pointer cursor

---
 src/cljs/commiteth/common.cljs | 12 ++++++------
 src/less/style.less            |  4 ++++
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/cljs/commiteth/common.cljs b/src/cljs/commiteth/common.cljs
index 8cb213d..25b47b3 100644
--- a/src/cljs/commiteth/common.cljs
+++ b/src/cljs/commiteth/common.cljs
@@ -48,15 +48,15 @@
 
 (defn draw-page-numbers [page-number page-count]
   "Draw page numbers for the pagination component.
-   Inserts ellipsis when list is too long, by default
-   max 6 items are allowed"
+  Inserts ellipsis when list is too long, by default
+  max 6 items are allowed"
   (let [draw-page-num-fn (fn [current? i]
                            ^{:key i}
                            [:div.rectangle-rounded
-                            (cond-> {} 
-                              (not current?) 
-                              (assoc :class "grayed-out-page-num"
-                                     :on-click #(rf/dispatch [:set-page-number i])))
+                            (if current?
+                              {:class "page-num-active"}
+                              {:class "grayed-out-page-num"
+                               :on-click #(rf/dispatch [:set-page-number i])})
                             i])
         max-page-nums 6]
     [:div.page-nums-container 
diff --git a/src/less/style.less b/src/less/style.less
index d8c078c..063f7bb 100644
--- a/src/less/style.less
+++ b/src/less/style.less
@@ -897,6 +897,10 @@ body {
   cursor: pointer;
 }
 
+.page-num-active {
+  cursor: auto;
+}
+
 .grayed-out-page-num {
   color: #8d99a4;
   background-color: #f2f5f8;

From dbffabffe0db5f45e7d668884689db56e4c0fdf6 Mon Sep 17 00:00:00 2001
From: Vitaliy Vlasov <siphiuel@gmail.com>
Date: Thu, 25 Jan 2018 17:04:00 +0200
Subject: [PATCH 7/8] Remove scroll-div; pass container element ref to on-click
 handlers

---
 src/cljs/commiteth/activity.cljs |  9 ++++-----
 src/cljs/commiteth/bounties.cljs |  9 ++++-----
 src/cljs/commiteth/common.cljs   | 29 ++++++++++-------------------
 3 files changed, 18 insertions(+), 29 deletions(-)

diff --git a/src/cljs/commiteth/activity.cljs b/src/cljs/commiteth/activity.cljs
index 2e9444e..887b8c7 100644
--- a/src/cljs/commiteth/activity.cljs
+++ b/src/cljs/commiteth/activity.cljs
@@ -4,7 +4,6 @@
             [commiteth.common :refer [moment-timestamp
                                       items-per-page
                                       display-data-page
-                                      scroll-div
                                       issue-url]]))
 
 
@@ -58,7 +57,8 @@
      [:div.time (moment-timestamp updated)]]]])
 
 (defn activity-list [{:keys [items item-count page-number total-count] 
-                      :as activity-page-data}]
+                      :as activity-page-data}
+                     container-element]
   (if (empty? (:items activity-page-data))
     [:div.view-no-data-container
      [:p "No recent activity yet"]]
@@ -67,7 +67,7 @@
            right (dec (+ left item-count))]
        [:div.item-counts-label
         [:span (str "Showing " left "-" right " of " total-count)]])
-     (display-data-page activity-page-data activity-item)]))
+     (display-data-page activity-page-data activity-item container-element)]))
 
 (defn activity-page []
   (let [activity-page-data (rf/subscribe [:activities-page])
@@ -80,6 +80,5 @@
           [:div.ui.text.loader.view-loading-label "Loading"]]]
         [:div.ui.container.activity-container
          {:ref #(reset! container-element %1)} 
-         [scroll-div container-element]
          [:div.activity-header "Activities"]
-         [activity-list @activity-page-data]]))))
+         [activity-list @activity-page-data container-element]]))))
diff --git a/src/cljs/commiteth/bounties.cljs b/src/cljs/commiteth/bounties.cljs
index fdf741d..bfa73a4 100644
--- a/src/cljs/commiteth/bounties.cljs
+++ b/src/cljs/commiteth/bounties.cljs
@@ -3,7 +3,6 @@
             [reagent.core :as r]
             [commiteth.common :refer [moment-timestamp
                                       display-data-page
-                                      scroll-div
                                       items-per-page
                                       issue-url]]))
 
@@ -47,7 +46,8 @@
        [:img {:src avatar-url}]]]]))
 
 (defn bounties-list [{:keys [items item-count page-number total-count] 
-                      :as bounty-page-data}]
+                      :as bounty-page-data}
+                     container-element]
   (if (empty? items)
     [:div.view-no-data-container
      [:p "No recent activity yet"]]
@@ -56,7 +56,7 @@
            right (dec (+ left item-count))]
        [:div.item-counts-label
         [:span (str "Showing " left "-" right " of " total-count)]])
-     (display-data-page bounty-page-data bounty-item)]))
+     (display-data-page bounty-page-data bounty-item container-element)]))
 
 (defn bounties-page []
   (let [bounty-page-data (rf/subscribe [:open-bounties-page])
@@ -69,7 +69,6 @@
           [:div.ui.text.loader.view-loading-label "Loading"]]]
         [:div.ui.container.open-bounties-container
          {:ref #(reset! container-element %1)} 
-         [scroll-div container-element]
          [:div.open-bounties-header "Bounties"]
-         [bounties-list @bounty-page-data]]))
+         [bounties-list @bounty-page-data container-element]]))
     ))
diff --git a/src/cljs/commiteth/common.cljs b/src/cljs/commiteth/common.cljs
index 25b47b3..f89e5e1 100644
--- a/src/cljs/commiteth/common.cljs
+++ b/src/cljs/commiteth/common.cljs
@@ -31,22 +31,9 @@
 (defn issue-url [owner repo number]
   (str "https://github.com/" owner "/" repo "/issues/" number))
 
-(defn scroll-div [container-element]
-  "This is an invisible div that exists
-   for the sole purpose of scrolling the container-element into view
-   when page-number is updated"
-  (let [page-number (rf/subscribe [:page-number])]
-    (r/create-class
-      {:component-did-update (fn [] 
-                               (when @container-element
-                                 (.scrollIntoView @container-element)))
-       :reagent-render (fn []
-                         [:div {:style {:display "none"}}
-                          @page-number])})))
-
 (def items-per-page 15)
 
-(defn draw-page-numbers [page-number page-count]
+(defn draw-page-numbers [page-number page-count container-element]
   "Draw page numbers for the pagination component.
   Inserts ellipsis when list is too long, by default
   max 6 items are allowed"
@@ -56,7 +43,9 @@
                             (if current?
                               {:class "page-num-active"}
                               {:class "grayed-out-page-num"
-                               :on-click #(rf/dispatch [:set-page-number i])})
+                               :on-click #(do 
+                                            (rf/dispatch [:set-page-number i])
+                                            (.scrollIntoView @container-element))})
                             i])
         max-page-nums 6]
     [:div.page-nums-container 
@@ -92,7 +81,8 @@
                                  total-count
                                  page-number 
                                  page-count]} 
-                         draw-item-fn]
+                         draw-item-fn
+                         container-element]
   "Draw data items along with pagination controls"
   (let [draw-items (fn []
                      (into [:div.ui.items]
@@ -106,11 +96,12 @@
                                 (rf/dispatch [:set-page-number
                                               (if forward?
                                                 (inc page-number)
-                                                (dec page-number))])))
+                                                (dec page-number))])
+                                (.scrollIntoView @container-element)))
         draw-rect (fn [direction]
                     (let [forward? (= direction :forward)
                           gray-out? (or (and forward? (= page-number page-count))
-                                        (and (not forward?) (= page-number 1))) ]
+                                        (and (not forward?) (= page-number 1)))]
                       [:div.rectangle-rounded 
                        (cond-> {:on-click (on-direction-click forward?)}
                          gray-out? (assoc :class "grayed-out-direction"))
@@ -127,6 +118,6 @@
              [draw-rect :backward]
              [draw-rect :forward]]
             [:div.page-nav-text [:span (str "Page " page-number " of " page-count)]]
-            [draw-page-numbers page-number page-count]]])))
+            [draw-page-numbers page-number page-count container-element]]])))
 
 

From 3813e191508a48d1a74c885a7fc19087cb4f6994 Mon Sep 17 00:00:00 2001
From: Vitaliy Vlasov <siphiuel@gmail.com>
Date: Fri, 26 Jan 2018 12:46:50 +0200
Subject: [PATCH 8/8] Add check for container-element

---
 src/cljs/commiteth/common.cljs | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/cljs/commiteth/common.cljs b/src/cljs/commiteth/common.cljs
index f89e5e1..1213395 100644
--- a/src/cljs/commiteth/common.cljs
+++ b/src/cljs/commiteth/common.cljs
@@ -45,7 +45,8 @@
                               {:class "grayed-out-page-num"
                                :on-click #(do 
                                             (rf/dispatch [:set-page-number i])
-                                            (.scrollIntoView @container-element))})
+                                            (when @container-element
+                                              (.scrollIntoView @container-element)))})
                             i])
         max-page-nums 6]
     [:div.page-nums-container 
@@ -97,7 +98,8 @@
                                               (if forward?
                                                 (inc page-number)
                                                 (dec page-number))])
-                                (.scrollIntoView @container-element)))
+                                (when @container-element
+                                  (.scrollIntoView @container-element))))
         draw-rect (fn [direction]
                     (let [forward? (= direction :forward)
                           gray-out? (or (and forward? (= page-number page-count))