status-im
/
open-bounty
mirror of https://github.com/status-im/open-bounty.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

WIP: SOB UX 

beginnings of new UX for status open bounty
* manage repos view changes
* new header + tabs style
* flash/error messages as modal overlay
* SOB favicon
* general css changes
This commit is contained in:
Teemu Patja 2017-10-26 17:27:51 +03:00
parent 785d5fb8e5
commit 35bef82b6e
No known key found for this signature in database
GPG Key ID: F5B7035E6580FD4C
6 changed files with 107 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
resources/public/img/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 361 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

2
resources/templates/home.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Commit ETH</title> <title>Status Open Bounty</title>
<meta name="description" content=""> <meta name="description" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">

43
src/cljs/commiteth/core.cljs
View File

@ -26,16 +26,19 @@
(let [flash-message (rf/subscribe [:flash-message])] (let [flash-message (rf/subscribe [:flash-message])]
(fn [] (fn []
(when-let [[type message] @flash-message] (when-let [[type message] @flash-message]
(do
(println "flash-message-pane" type message)
[:div.ui.active.modal
[:div.flash-message {:class (name type)} [:div.flash-message {:class (name type)}
[:i.close.icon {:on-click #(rf/dispatch [:clear-flash-message])}] [:i.close.icon {:on-click #(rf/dispatch [:clear-flash-message])}]
[:p message]])))) [:p message]]])))))
(def user-dropdown-open? (r/atom false)) (def user-dropdown-open? (r/atom false))
(defn user-dropdown [user items] (defn user-dropdown [user items]
(let [menu (if @user-dropdown-open? (let [menu (if @user-dropdown-open?
[:div.ui.menu.transition.visible] [:div.ui.menu.transition.visible {:tab-index 0}]
[:div.ui.menu]) [:div.ui.menu.transition.hidden])
avatar-url (:avatar_url user)] avatar-url (:avatar_url user)]
[:div.ui.left.item.dropdown [:div.ui.left.item.dropdown
{:on-click #(swap! user-dropdown-open? not)} {:on-click #(swap! user-dropdown-open? not)}
@ -70,8 +73,8 @@
(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 [[:activity "Activity"] (let [tabs (apply conj [[:bounties "Bounties"]
[:bounties "Open bounties"]] [:activity "Activity"]]
(when @user (when @user
[[:repos "Repositories"] [[:repos "Repositories"]
[:manage-payouts "Manage Payouts"] [:manage-payouts "Manage Payouts"]
@ -91,22 +94,21 @@
(fn [] (fn []
[:div.vertical.segment.commiteth-header [:div.vertical.segment.commiteth-header
[:div.ui.grid.container [:div.ui.grid.container
[:div.twelve.wide.column
[:div.ui.image.lef.aligned
[svg/app-logo]]]
[:div.four.wide.column [:div.four.wide.column
(if @flash-message [:div.ui.grid
[flash-message-pane] [:div.ui.four.wide.column
[user-component @user])] [:div.ui.circular.image.status-logo
(when-not @user [svg/status-logo]]]
[:div.ui.text.content [:div.ui.twelve.wide.column.left.aligned
[:div.ui.divider.hidden] [:div.logo-header "Status"]
[:h2.ui.header (if (config/on-testnet?) [:div.logo-subheader "Open Bounty"]]]]
"Commit ETH (Testnet)" [:div.eight.wide.column
"Commit ETH")] [tabs]]
[:h2.ui.subheader "Earn ETH by committing to open source projects"] [:div.four.wide.column
[:div.ui.divider.hidden]]) [user-component @user]]
[tabs]]]))) (when @flash-message
[flash-message-pane])]])))
(def pages (def pages
{:activity #'activity-page {:activity #'activity-page
@ -147,7 +149,6 @@
[:div.ui.container [:div.ui.container
[:h3 "Top hunters"] [:h3 "Top hunters"]
[top-hunters]]]] [top-hunters]]]]
[:div.ui.divider]
[:div.commiteth-footer "Built by " [:a {:href "https://status.im"} "Status"] [:div.commiteth-footer "Built by " [:a {:href "https://status.im"} "Status"]
(when-not (= "unknown" version) (when-not (= "unknown" version)
[:div.version-footer "version " [:a {:href (str "https://github.com/status-im/commiteth/commit/" version)} version]])]]]])) [:div.version-footer "version " [:a {:href (str "https://github.com/status-im/commiteth/commit/" version)} version]])]]]]))

6
src/cljs/commiteth/repos.cljs
View File

@ -9,15 +9,15 @@
button (if enabled button (if enabled
[:div.ui.button.small.repo-added-button (add-busy-styles {}) [:div.ui.button.small.repo-added-button (add-busy-styles {})
[:i.icon.check] [:i.icon.check]
"Added"] "ADDED"]
[:div.ui.button.small [:div.ui.button.small
(add-busy-styles {:on-click on-click}) (add-busy-styles {:on-click on-click})
"Add"])] "ADD"])]
[:div.ui.two.column.container [:div.ui.two.column.container
button button
(when enabled (when enabled
[:a.ui.item.remove-link {:on-click on-click} "Remove"])])) [:a.ui.item.remove-link {:on-click on-click} "REMOVE"])]))
(defn repo-card [repo] (defn repo-card [repo]

11
src/cljs/commiteth/svg.cljs
View File

@ -53,3 +53,14 @@
{:fill-rule "evenodd" {:fill-rule "evenodd"
:fill "#a8aab1" :fill "#a8aab1"
:d "M8 1a1.993 1.993 0 0 0-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 0 0 2 1a1.993 1.993 0 0 0-1 3.72V6.5l3 3v1.78A1.993 1.993 0 0 0 5 15a1.993 1.993 0 0 0 1-3.72V9.5l3-3V4.72A1.993 1.993 0 0 0 8 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"}]]) :d "M8 1a1.993 1.993 0 0 0-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 0 0 2 1a1.993 1.993 0 0 0-1 3.72V6.5l3 3v1.78A1.993 1.993 0 0 0 5 15a1.993 1.993 0 0 0 1-3.72V9.5l3-3V4.72A1.993 1.993 0 0 0 8 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"}]])
(defn status-logo []
[:svg
{:width "50"
:height "50"
:viewBox "0 0 50 50"}
[:path
{:fill "#fff"
:fill-rule "evenodd"
:d "M17 0h16c5.542 0 7.308 0 9.808.833 2.917 1.042 5.317 3.438 6.359 6.355C50 9.688 50 11.457 50 17v16c0 5.542 0 7.313-.833 9.813a10.5 10.5 0 0 1-6.355 6.354C40.313 50 38.543 50 33 50H17c-5.542 0-7.313 0-9.813-.833a10.505 10.505 0 0 1-6.354-6.355C0 40.313 0 38.543 0 33V17c0-5.542 0-7.313.833-9.813A10.5 10.5 0 0 1 7.188.833C9.688 0 11.457 0 17 0zm3.672 23.59c3.5 0 5.156.665 8.656.665 4.74 0 7.99-1.908 7.99-5.86 0-3.95-2.707-5.859-6.658-5.859A12.65 12.65 0 0 0 18.083 23.81a14.416 14.416 0 0 1 2.59-.22zm0 2.3c-4.74 0-7.99 1.909-7.99 5.86 0 3.951 2.707 5.86 6.658 5.86a12.65 12.65 0 0 0 12.577-11.273c-.855.15-1.721.224-2.59.22-3.499 0-5.155-.666-8.655-.666z"}]])

100
src/less/style.less
View File

@ -13,8 +13,8 @@
.ui.button { .ui.button {
color: #2f3f44; color: #fff;
background-color: #b0f1ee; background-color: #57a7ed;
white-space: nowrap; white-space: nowrap;
padding: 0.9em 1.2em 0.9em; padding: 0.9em 1.2em 0.9em;
&:hover { &:hover {
@ -30,12 +30,12 @@
} }
} }
.ui.small.button { .ui.small.button {
font-size: 15px!important; font-size: 13px!important;
} }
.commiteth-header { .commiteth-header {
background-color: #2f3f44!important; background-color: #57a7ed!important;
border-radius: 0em; border-radius: 0em;
padding-top: 1.5em; padding-top: 1.5em;
} }
@ -44,6 +44,31 @@
padding-top: 1.8em; padding-top: 1.8em;
} }
.status-logo {
width: 42px;
height: 42px;
object-fit: contain;
box-shadow: 0 2px 4px 0 rgba(22, 51, 81, 0.14);
}
.logo-header {
color: #fff;
font-family: PostGrotesk;
font-size: 21px;
font-weight: 500;
text-align: left;
}
.logo-subheader {
color: #fff;
opacity: 0.4;
font-family: PostGrotesk;
font-size: 15px;
line-height: 1.0;
text-align: left;
}
.top-hunters { .top-hunters {
.header { .header {
color: #474951!important; color: #474951!important;
@ -77,9 +102,6 @@
font-weight: normal; font-weight: normal;
} }
.ui.card a {
color: #848e91;
}
.user-component { .user-component {
margin-top: 0px!important; margin-top: 0px!important;
@ -92,13 +114,16 @@
} }
} }
.ui.dropdown .item { .ui.dropdown {
.item {
color: #fff!important; color: #fff!important;
opacity: 0.98; }
} }
.ui.menu .ui.dropdown .menu>.item:hover, .ui.menu .ui.dropdown .menu>.selected.item { .ui.menu .ui.dropdown {
background-color: #fff!important; .menu> {
background-color: #1e3751;
}
} }
.ui.input.address-input { .ui.input.address-input {
@ -111,42 +136,45 @@
color: #e7e7e7; color: #e7e7e7;
background-color: yellow!important; background-color: yellow!important;
} }
.ui.menu.transition.visible { .ui.menu.transition.visible {
font-family: 'postgrotesk'; font-family: 'postgrotesk';
font-size: 1em; font-size: 1em;
border-radius: 8px; border-radius: 8px;
border: none; border: none;
padding: .5em; padding: .5em;
overflow: visible!important;
.item>a { .item>a {
&:hover { // &:hover {
color:#1bb5c1; // color:#1bb5c1;
} // }
color: #474951; color: #fff;
} }
} }
.logout-link { .logout-link {
color: #e96868!important; color: #fff!important;
} }
.ui.attached.tabular { .ui.attached.tabular {
background-color: #2f3f44; background-color: #57a7ed;
border-bottom: none; border-bottom: none;
height: 80%;
.ui.item { .ui.item {
padding: 1em; padding: 0.6em;
color: #fff; color: #fff;
opacity: 0.98;
cursor: pointer; cursor: pointer;
font-family: 'postgrotesk'; font-family: 'postgrotesk';
font-size: 16px; font-size: 15px;
font-weight: normal; font-weight: normal;
} }
.ui.item.active { .ui.item.active {
border-radius: .8rem .8rem 0 0!important; border-radius: 8px!important;
color: #b0f1ee; border-width: 0;
color: #fff;
background-color: fade(#fff, 10%); background-color: fade(#fff, 10%);
border-width: 0em;
cursor: default; cursor: default;
height: 80%;
} }
} }
@ -159,16 +187,17 @@
} }
.repo-label { .repo-label {
color: #1bb5c1; color: #42505c;
font-family: 'postgrotesk-medium'; font-family: 'postgrotesk-medium';
font-size: 16px; font-size: 18px;
a { color: #42505c; }
} }
.repo-description { .repo-description {
color: #474951; color: #8d99a4;
font-size: 15px; font-size: 15px;
font-weight: normal; font-weight: normal;
line-height: 24px; line-height: 22px;
margin-top: 16px; margin-top: 16px;
margin-bottom: 16px; margin-bottom: 16px;
} }
@ -182,6 +211,7 @@
a { a {
padding: 1em; padding: 1em;
font-size: 15px; font-size: 15px;
color: #42505c;
} }
.remove-link:hover { .remove-link:hover {
color: #e96868; color: #e96868;
@ -189,8 +219,8 @@
} }
.ui.button.repo-added-button { .ui.button.repo-added-button {
color: white; color: #42505c;
background-color: #61deb0; background-color: #eaecee;
cursor: default; cursor: default;
} }
@ -200,6 +230,7 @@
} }
.activity-item { .activity-item {
background-color: #fff!important;
.left-column { .left-column {
margin: 0; margin: 0;
padding-left: 12px; padding-left: 12px;
@ -252,9 +283,6 @@
h3 { h3 {
color: #474951; color: #474951;
} }
a:not(.ui) {
color: #1bb5c1;
}
.label { .label {
background-color: #61deb0; background-color: #61deb0;
color: #fff; color: #fff;
@ -331,7 +359,7 @@
} }
.commiteth-footer { .commiteth-footer {
color: #a8aab1; background-color: #4a5c69;
line-height: 1.8em; line-height: 1.8em;
a { a {
&:hover { &:hover {
@ -339,6 +367,7 @@
} }
color: #a8aab1!important; color: #a8aab1!important;
} }
&.group-title { color: #fff; opacity: 0.6; }
} }
@ -352,6 +381,11 @@
} }
} }
.ui { .ui {
font-family: 'postgrotesk'!important; font-family: 'postgrotesk'!important;
} }
body {
background-color: #eaecee;
}