Activity feed view

* beginnings of activity feed reagent UI
* uses place holder data for now
* CSS + other UI tweaks

src/cljs/commiteth/activity.cljs

@@ -1,7 +1,26 @@
 (ns commiteth.activity
   (:require [re-frame.core :as rf]))
 
+
+
+(defn activity-item [{{image-url :profile-image-url
+                       display-name :display-name} :user
+                      timestamp :timestamp
+                      description :description} item]
+
+  [:div.item.activity-item
+   [:div.ui.mini.circular.image
+    [:img {:src image-url}]]
+   [:div.content
+    [:div.header display-name]
+    [:div.description
+     [:p description]]
+    [:div.time timestamp]]])
+
 (defn activity-page []
+  (let [activity-items (rf/subscribe [:activity-feed])]
     (fn []
       [:div.ui.container
-     [:div.ui.text "This will be the activity view"]]))
+       (into [:div.ui.items]
+             (for [item @activity-items]
+               [activity-item item]))])))

src/cljs/commiteth/core.cljs

@@ -22,53 +22,21 @@
             [re-frisk.core :refer [enable-re-frisk!]])
   (:import goog.History))
 
-#_(defn error-pane
+(def user-dropdown-open? (r/atom false))
-    []
-    (let [error (rf/subscribe [:error])]
-      (fn []
-        (when @error
-          [:div.container
-           {:style    {:background-color "#faeaea"
-                       :padding          "10px"
-                       :color            "red"}
-            :on-click #(rf/dispatch [:clear-error])}
-           (str @error)]))))
-
-#_(defn save-address
-    [user-id address]
-    (fn [_]
-      (rf/dispatch [:save-user-address user-id address])))
-
-#_(defn address-settings []
-    (let [user    (rf/subscribe [:user])
-          user-id (:id @user)
-          address (rf/subscribe [:get-in [:user :address]])]
-      (fn []
-        [:div.tabnav-actions.float-right
-         [:div.tabnav-actions.logged-in
-          [:button.btn.tabnav-button
-           {:type     "submit", :aria-haspopup "true"
-            :on-click (save-address user-id @address)}
-           "Update"]
-          [:div.auto-search-group
-           [(input {:placeholder  "0x0000000000000000000000000000000000000000",
-                    :autoComplete "off",
-                    :size         55
-                    :type         "text"
-                    :value-path   [:user :address]})]
-           [svg/octicon-broadcast]]]])))
-
 
 (defn user-dropdown [user items]
-  (let [dropdown-open? (r/atom false)]
+  (let [menu (if @user-dropdown-open?
-    (fn []
-      (let [menu (if @dropdown-open?
                   [:div.ui.menu.transition.visible]
-                   [:div.ui.menu])]
+                  [:div.ui.menu])
-        [:div.ui.browse.item.dropdown
+        avatar-url (:avatar_url user)]
-         {:on-click #(swap! dropdown-open? not)}
+    [:div.ui.left.item.dropdown
-         (:login user)
+     {:on-click #(swap! user-dropdown-open? not)}
-         [:span.dropdown.icon]
+     [:div.item
+      [:img.ui.mini.circular.image {:src avatar-url}]]
+     [:div.item
+      (:login user)]
+     [:div.item
+      [:span.dropdown.icon]]
      (into menu
            (for [[target caption] items]
              ^{:key target} [:div.item
@@ -76,18 +44,18 @@
                               (if (keyword? target)
                                 {:on-click #(rf/dispatch [target])}
                                 {:href target})
-                                  caption]]))]))))
+                              caption]]))]))
 
 
 (defn user-component [user]
-  (if user
+  (let [user (rf/subscribe [:user])]
-    (let [login (:login user)]
+    (fn []
+      (if @user
         [:div.ui.text.menu.user-component
          [:div.item
-        [:img.ui.mini.circular.image {:src (:avatar_url user)}]]
+          [user-dropdown @user [[:update-address "Update address"]
-       [user-dropdown user [[:update-address "Update address"]
+                                ["/logout" "Sign out"]]]]]
-                            ["/logout" "Sign out"]]]])
+        [:a.ui.button.small {:href js/authorizeUrl} "Sign in"]))))
-    [:a.ui.button.small {:href js/authorizeUrl} "Sign in"]))
 
 (defn tabs []
   (let [user (rf/subscribe [:user])
@@ -97,7 +65,7 @@
                         (when @user
                           [[:repos "Repositories"]
                            [:bounties "Bounties"]]))]
-        (into [:div.ui.attached.tabular.menu.tiny]
+        (into [:div.ui.attached.tabular.menu.tiny.commiteth-tabs]
               (for [[page caption] tabs]
                 (let [props {:class (str "ui item"
                                          (when (= @current-page page) " active"))
@@ -153,13 +121,14 @@
      [:div.ui.vertical.segment
       [:div.ui.container
        [:div.ui.grid.stackable
-        [:div.twelve.wide.column
+        [:div.ten.wide.column
          [:div.ui.container.page-content
           [(pages @(rf/subscribe [:page]))]]]
-        [:div.four.wide.column.computer.only
+        [:div.six.wide.column.computer.only
          [:div.ui.container.page-content
           [:h3 "Top hunters"]
-          [top-hunters]]]]]]]))
+          [top-hunters]]]]
+       [:div.ui.divider]]]]))
 
 (secretary/set-config! :prefix "#")
 

src/cljs/commiteth/db.cljs

@@ -16,4 +16,14 @@
                   :eth-earned "11 000.00"}
                  {:profile-image-url "https://randomuser.me/api/portraits/men/6.jpg"
                   :display-name "Dummy User"
-                  :eth-earned "8 400.00"}]})
+                  :eth-earned "8 400.00"}]
+   :activity-feed [{:type :submit-claim
+                    :user {:display-name "Dummy User"
+                           :profile-image-url "https://randomuser.me/api/portraits/men/6.jpg"}
+                    :description "Submitted a claim for X"
+                    :timestamp "1 day ago"}
+                   {:type :submit-claim
+                    :user {:display-name "Place Holder"
+                           :profile-image-url "https://randomuser.me/api/portraits/men/4.jpg"}
+                    :description "Posted ETH 15 bounty to Y"
+                    :timestamp "2 days ago"}]})

src/cljs/commiteth/subscriptions.cljs

@@ -46,6 +46,11 @@
   (fn [db _]
     (:top-hunters db)))
 
+(reg-sub
+  :activity-feed
+  (fn [db _]
+    (:activity-feed db)))
+
 (reg-sub
   :get-in
   (fn [db [_ path]]

src/cljs/commiteth/update_address.cljs

@@ -16,7 +16,7 @@
     (fn []
       (println "web3-accounts" web3-accounts)
       [:div.ui.container.grid
-       [:div.ui.form.eight.wide.column
+       [:div.ui.form.sixteen.wide.column
         [:h3 "Update address"]
         [:p "Placeholder text for explaining what an Ethereum address is."]
         [:div.field
@@ -26,7 +26,7 @@
             (into []
                   (for [acc web3-accounts]
                     acc))]
-           [:div.ui.input
+           [:div.ui.input.address-input
             [input address {:placeholder  "0x0000000000000000000000000000000000000000"
                             :auto-complete "off"
                             :max-length 42}]])]

src/less/style.less

@@ -25,12 +25,11 @@
 .commiteth-header {
     background-color: #2f3f44!important;
     border-radius: 0em;
-    padding-top: 3em;
+    padding-top: 1.5em;
 }
 
-.ui.text.menu .item {
+.commiteth-tabs {
-    color: #fff;
+    padding-top: 1.8em;
-    opacity: 0.98;
 }
 
 .top-hunters {
@@ -54,6 +53,7 @@
 
 .ui.mini.circular.image {
     height: 35px;
+    width: 35px!important;
 }
 
 .ui.header {
@@ -76,6 +76,7 @@ span.dropdown.icon {
 .user-component {
     margin-top: 0px!important;
 }
+
 .ui.text.menu {
     .item:hover {
         color: #fff;
@@ -83,12 +84,39 @@ span.dropdown.icon {
     }
 }
 
-.ui.menu .ui.dropdown .menu>.item a {
+.ui.dropdown .item {
-    color: #474951!important;
+    color: #fff!important;
+    opacity: 0.98;
+
 }
 
-.ui {
+.ui.menu .ui.dropdown .menu>.item:hover, .ui.menu .ui.dropdown .menu>.selected.item {
+    background-color: #fff!important;
+}
+
+.ui.input.address-input {
+    font-size: .8em;
+    width: 360px!important;
+}
+
+
+.ui.menu.transition.visible {
     font-family: 'postgrotesk';
+    font-size: 1em;
+    border-radius: 8px;
+    border: none;
+    padding: .5em;
+    .item  {
+        :hover {
+            color: #e96868;
+        }
+        a {
+            &:hover {
+                color: #e96868;
+            }
+            color: #474951;
+        }
+    }
 }
 
 .ui.attached.tabular {
@@ -154,12 +182,23 @@ span.dropdown.icon {
     cursor: default;
 }
 
+.activity-item {
+    border: #e7e7e7 solid 0.1em!important;
+    box-shadow: none!important;
+    border-radius: 0.3em!important;
+    padding: 0.8em 1em 1.1em!important;
+
+    flex-direction: row!important;
+    // .ui.mini.circular.image {
+    //     margin: 0;
+    // }
+}
+
 .ui.cards>.card  {
     border: #e7e7e7 solid 0.1em;
     box-shadow: none;
     border-radius: 0.3em;
     padding: 0.8em 1em 1.1em;
-
 }
 .ui.segment {
     border: #e7e7e7 solid 0.1em;
@@ -182,7 +221,14 @@ span.dropdown.icon {
     }
 }
 
+.ui.divider.hidden {
+    padding: 1em;
+}
 
 .time {
     color: #a8aab1;
 }
+
+.ui {
+    font-family: 'postgrotesk'!important;
+}