some filter and sort markup

src/cljs/commiteth/bounties.cljs

@@ -5,19 +5,19 @@
 
 
 (defn bounty-item [bounty]
-  (let [{avatar-url :repo_owner_avatar_url
+  (let [{avatar-url   :repo_owner_avatar_url
-         owner :repo-owner
+         owner        :repo-owner
-         repo-name :repo-name
+         repo-name    :repo-name
-         issue-title :issue-title
+         issue-title  :issue-title
          issue-number :issue-number
-         updated :updated
+         updated      :updated
-         tokens :tokens
+         tokens       :tokens
-         balance-eth :balance-eth
+         balance-eth  :balance-eth
-         value-usd :value-usd
+         value-usd    :value-usd
-         claim-count :claim-count} bounty
+         claim-count  :claim-count} bounty
-        full-repo (str owner "/" repo-name)
+        full-repo  (str owner "/" repo-name)
-        repo-url (str "https://github.com/" full-repo)
+        repo-url   (str "https://github.com/" full-repo)
-        repo-link [:a {:href repo-url} full-repo]
+        repo-link  [:a {:href repo-url} full-repo]
         issue-link [:a
                     {:href (issue-url owner repo-name issue-number)}
                     issue-title]]
@@ -37,24 +37,38 @@
        [:span.usd-value-label "Value "] [:span.usd-balance-label (str "$" value-usd)]
        (when (> claim-count 0)
          [:span.open-claims-label (str claim-count " open claim"
-                                       (when (> claim-count 1) "s"))]) ]]
+                                       (when (> claim-count 1) "s"))])]]
      [:div.open-bounty-item-icon
       [:div.ui.tiny.circular.image
        [:img {:src avatar-url}]]]]))
 
 (defn bounties-list [open-bounties]
-  [:div.ui.container.open-bounties-container
+  (let [order (rf/subscribe [:bounties-order])]
-   [:div.open-bounties-header "Bounties"]
+    [:div.ui.container.open-bounties-container
-   (if (empty? open-bounties)
+     [:div.open-bounties-header "Bounties"]
-     [:div.view-no-data-container
+     [:div.open-bounties-filter-and-sort
-      [:p "No recent activity yet"]]
+      [:div.open-bounties-filter
-     (into [:div.ui.items]
+       [:a.open-bounties-filter-element {:href "javascript:;"} "Value"]
-           (for [bounty open-bounties]
+       [:div.open-bounties-filter-tooltip "Lalala"]
-             [bounty-item bounty])))])
+       [:a.open-bounties-filter-element {:href "javascript:;"} "Type"]
+       [:a.open-bounties-filter-element {:href "javascript:;"} "Language"]
+       [:a.open-bounties-filter-element {:href "javascript:;"} "Date"]
+       [:a.open-bounties-filter-element {:href "javascript:;"} "More"]]
+      [:div.open-bounties-sort
+       "Most Recent"
+       [:div.icon-forward-white-box
+        [:img
+         {:src "icon-forward-white.svg"}]]]]
+     (if (empty? open-bounties)
+       [:div.view-no-data-container
+        [:p "No recent activity yet"]]
+       (into [:div.ui.items]
+             (for [bounty open-bounties]
+               [bounty-item bounty])))]))
 
 
 (defn bounties-page []
-  (let [open-bounties (rf/subscribe [:open-bounties])
+  (let [open-bounties          (rf/subscribe [:open-bounties])
         open-bounties-loading? (rf/subscribe [:get-in [:open-bounties-loading?]])]
     (fn []
       (if @open-bounties-loading?

src/cljs/commiteth/db.cljs

@@ -10,4 +10,5 @@
    :open-bounties []
    :owner-bounties   {}
    :top-hunters []
-   :activity-feed []})
+   :activity-feed []
+   :bounties-order ::bounties-order|most-recent})

src/cljs/commiteth/subscriptions.cljs

@@ -80,3 +80,8 @@
     :user-dropdown-open?
   (fn [db _]
     (:user-dropdown-open? db)))
+
+(reg-sub
+  :bounties-order
+  (fn [db _]
+    (:bounties-order db)))

src/less/style.less

@@ -413,6 +413,53 @@
         font-weight: 500;
         color: #42505c;
     }
+
+    .open-bounties-filter-and-sort {
+        margin-top: 24px;
+        display: flex;
+        justify-content: space-between;
+    }
+
+    .open-bounties-filter {
+        display: flex;
+    }
+
+    .open-bounties-filter-element {
+        position: relative;
+        font-size: 15px;
+        font-weight: 500;
+        line-height: 1.0;
+        color: #8d99a4;
+        padding: 8px 12px;
+        border-radius: 8px;
+        border: solid 1px rgba(151, 151, 151, 0.2);
+        margin-right: 10px;
+    }
+
+    .open-bounties-filter-element:focus {
+        background-color: #57a7ed;
+    }
+
+    .open-bounties-filter-tooltip {
+        position: absolute;
+    }
+
+    .open-bounties-sort {
+        font-size: 15px;
+        font-weight: 500;
+        line-height: 1.0;
+        color: #8d99a4;
+        display: flex;
+        align-items: center;
+    }
+
+    .icon-forward-white-box {
+        width: 24px;
+        height: 24px;
+        display: flex;
+        justify-content: center;
+        align-content: center;
+    }
 }
 
 .open-bounty-item {