WIP: more SOB UX changes

* make bounties view default
* new top hunters look
* only show top hunters for bounties and activity views
* misc css tweaks
This commit is contained in:
Teemu Patja 2017-10-27 17:47:35 +03:00
parent aba6f5b604
commit a153caeab8
No known key found for this signature in database
GPG Key ID: F5B7035E6580FD4C
3 changed files with 63 additions and 43 deletions

View File

@ -67,13 +67,13 @@
[:div.item [:div.item
[user-dropdown @user [[:update-address "Update address" {}] [user-dropdown @user [[:update-address "Update address" {}]
["/logout" "Sign out" {:class "logout-link"}]]]]] ["/logout" "Sign out" {:class "logout-link"}]]]]]
[:a.ui.button.small {:href js/authorizeUrl} "Sign in"])))) [:a.ui.button.small {:href js/authorizeUrl} "LOG IN ->"]))))
(defn tabs [] (defn tabs []
(let [user (rf/subscribe [:user]) (let [user (rf/subscribe [:user])
current-page (rf/subscribe [:page])] current-page (rf/subscribe [:page])]
(fn [] (fn []
(let [tabs (apply conj [[:bounties "Bounties"] (let [tabs (apply conj [[:bounties (str (when-not @user "Open ") "Bounties")]
[:activity "Activity"]] [:activity "Activity"]]
(when @user (when @user
[[:repos "Repositories"] [[:repos "Repositories"]
@ -124,39 +124,45 @@
(fn [] (fn []
(if (empty? @top-hunters) (if (empty? @top-hunters)
[:div.ui.text "No data"] [:div.ui.text "No data"]
(into [:div.ui.items.top-hunters] (into [:div.ui.items]
(map-indexed (fn [idx hunter] (map-indexed (fn [idx hunter]
[:div.item [:div.item
[:div.leader-ordinal (str (inc idx))] [:div.ui.mini.circular.image
[:div.ui..mini.circular.image
[:img {:src (:avatar-url hunter)}]] [:img {:src (:avatar-url hunter)}]]
[:div.content [:div.leader-ordinal (str (inc idx) ".")]
[:div.header (:display-name hunter)] [:div.header.leader-name (:display-name hunter)]
[:div.description (str "USD " (:total-usd hunter))]]]) [:div.leader-amount (str "$" (:total-usd hunter))]])
@top-hunters)))))) @top-hunters))))))
(defn footer []
[:div.commiteth-footer "Built by " [:a {:href "https://status.im"} "Status"]
(when-not (= "unknown" version)
[:div.version-footer "version " [:a {:href (str "https://github.com/status-im/commiteth/commit/" version)} version]])])
(defn page [] (defn page []
(fn [] (let [current-page (rf/subscribe [:page])
[:div.ui.pusher show-top-hunters? #(contains? #{:bounties :activity} @current-page)]
[page-header] (fn []
[:div.ui.vertical.segment [:div.ui.pusher
[:div.ui.container [page-header]
[:div.ui.grid.stackable [:div.ui.vertical.segment
[:div.ten.wide.computer.sixteen.wide.tablet.column [:div.ui.container
[:div.ui.container [:div.ui.grid.stackable
[(pages @(rf/subscribe [:page]))]]] [:div.ten.wide.computer.sixteen.wide.tablet.column
[:div.six.wide.column.computer.only [:div.ui.container
[:div.ui.container [(pages @current-page)]]]
[:h3 "Top hunters"] (when (show-top-hunters?)
[top-hunters]]]] [:div.six.wide.column.computer.only
[:div.commiteth-footer "Built by " [:a {:href "https://status.im"} "Status"] [:div.ui.container.top-hunters
(when-not (= "unknown" version) [:h3.top-hunters-header "Top hunters"]
[:div.version-footer "version " [:a {:href (str "https://github.com/status-im/commiteth/commit/" version)} version]])]]]])) [:div.top-hunters-subheader "All time"]
[top-hunters]]])]
[footer]]]])))
(secretary/set-config! :prefix "#") (secretary/set-config! :prefix "#")
(secretary/defroute "/" [] (secretary/defroute "/" []
(rf/dispatch [:set-active-page :activity])) (rf/dispatch [:set-active-page :bounties]))
(secretary/defroute "/repos" [] (secretary/defroute "/repos" []
(if js/user (if js/user

View File

@ -1,7 +1,7 @@
(ns commiteth.db) (ns commiteth.db)
(def default-db (def default-db
{:page :activity {:page :bounties
:user nil :user nil
:repos-loading? false :repos-loading? false
:repos {} :repos {}

View File

@ -18,7 +18,6 @@
white-space: nowrap; white-space: nowrap;
padding: 0.9em 1.2em 0.9em; padding: 0.9em 1.2em 0.9em;
&:hover { &:hover {
background-color: #bdf8f5;
} }
&:active,&:focus { &:active,&:focus {
background-color: #97ebe7; background-color: #97ebe7;
@ -31,9 +30,10 @@
} }
.ui.small.button { .ui.small.button {
font-size: 13px!important; font-size: 13px!important;
background-color: rgba(255,255,255,0.2);
color: #fff!important;
} }
.commiteth-header { .commiteth-header {
background-color: #57a7ed!important; background-color: #57a7ed!important;
border-radius: 0em; border-radius: 0em;
@ -68,23 +68,40 @@
text-align: left; text-align: left;
} }
.top-hunters-header {
margin-bottom: 0;
}
.top-hunters-subheader {
margin-top: 0;
color: #8d99a4;
}
.test {
background-color: #f00;
}
.top-hunters { .top-hunters {
.header { background-color: #fff;
color: #474951!important; transform: translate(0, -30px);
font-size: 1.1em!important; border-radius: 10px;
opacity: .98!important; padding: 10px;
}
.description {
color: #a8aab1!important;
}
.leader-ordinal { .leader-ordinal {
font-size: 1.5em; font-size: 15px;
float: none; float: none;
margin-top: 8px; margin-top: 8px;
margin-left: 15px;
margin-right: 15px; margin-right: 15px;
color: #a8aab1; color: #57a7ed;
opacity: .45; }
.leader-name {
margin-top: 8px;
}
.leader-amount {
margin-top: 8px;
margin-left: 15px;
text-align: right;
color: #8d99a4;
} }
} }
@ -143,12 +160,9 @@
border-radius: 8px; border-radius: 8px;
border: none; border: none;
padding: .5em; padding: .5em;
overflow: visible!important;
.item>a { .item>a {
// &:hover {
// color:#1bb5c1;
// }
color: #fff; color: #fff;
pointer: default;
} }
} }