status-im/open-bounty
2
0
Fork 0
mirror of https://github.com/status-im/open-bounty.git synced 2025-02-06 14:43:25 +00:00
Code Issues Projects Releases Wiki Activity

some more sort and filter markup and interface behaviour

Browse Source
This commit is contained in:
pablodip 2018-01-16 13:05:41 +01:00
parent ffa0cfa3bb
commit 26c740517b
2 changed files with 88 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/cljs/commiteth/bounties.cljs
View File

@ -1,5 +1,6 @@
(ns commiteth.bounties
(:require [re-frame.core :as rf]
(:require [reagent.core :as r]
[re-frame.core :as rf]
[commiteth.common :refer [moment-timestamp
issue-url]]))
@ -42,23 +43,51 @@
[:div.ui.tiny.circular.image
[:img {:src avatar-url}]]]]))
(defn bounties-filter [name]
(let [open? (r/atom false)]
(fn [name]
[:div.open-bounties-filter-element-container
{:tab-index 0
:on-blur #(reset! open? false)}
[:div.open-bounties-filter-element
{:on-click #(swap! open? not)
:class (when @open? "open-bounties-filter-element-active")}
name]
(when @open?
[:div.open-bounties-filter-element-tooltip
"TOOLTIP"])])))
(defn bounties-filters []
[:div.open-bounties-filter
[bounties-filter "Value"]
[bounties-filter "Type"]
[bounties-filter "Language"]
[bounties-filter "Date"]
[bounties-filter "More"]])
(defn bounties-sort []
(let [open? (r/atom false)]
(fn []
[:div.open-bounties-sort
{:tab-index 0
:on-blur #(reset! open? false)}
[:div.open-bounties-sort-element
{:on-click #(swap! open? not)}
"Most Recent"
[:div.icon-forward-white-box
[:img
{:src "icon-forward-white.svg"}]]]
(when @open?
[:div.open-bounties-sort-element-tooltip
"TOOLTIP"])])))
(defn bounties-list [open-bounties]
(let [order (rf/subscribe [:bounties-order])]
[:div.ui.container.open-bounties-container
[:div.open-bounties-header "Bounties"]
[:div.open-bounties-filter-and-sort
[:div.open-bounties-filter
[:a.open-bounties-filter-element {:href "javascript:;"} "Value"]
[:div.open-bounties-filter-tooltip "Lalala"]
[: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"}]]]]
[bounties-filters]
[bounties-sort]]
(if (empty? open-bounties)
[:div.view-no-data-container
[:p "No recent activity yet"]]

49
src/less/style.less
View File

@ -425,7 +425,6 @@
}
.open-bounties-filter-element {
position: relative;
font-size: 15px;
font-weight: 500;
line-height: 1.0;
@ -434,25 +433,69 @@
border-radius: 8px;
border: solid 1px rgba(151, 151, 151, 0.2);
margin-right: 10px;
position: relative;
}
.open-bounties-filter-element:focus {
.open-bounties-filter-element:hover {
cursor: pointer;
}
.open-bounties-filter-element-active {
background-color: #57a7ed;
color: #ffffff;
}
.open-bounties-filter-tooltip {
.open-bounties-filter-element-container:focus {
outline: none;
}
.open-bounties-filter-element-tooltip {
position: absolute;
margin-top: 12px;
padding: 16px 24px;
border-radius: 10px;
background-color: #ffffff;
box-shadow: 0 15px 12px 0 rgba(161, 174, 182, 0.53), 0 0 38px 0 rgba(0, 0, 0, 0.05);
}
.open-bounties-sort {
position: relative;
}
.open-bounties-sort:focus {
outline: none;
}
.open-bounties-sort-element {
display: flex;
font-size: 15px;
font-weight: 500;
line-height: 1.0;
color: #8d99a4;
padding: 8px 12px;
display: flex;
align-items: center;
}
.open-bounties-sort-element:hover {
cursor: pointer;
}
.open-bounties-sort-element-tooltip {
position: absolute;
right: 0;
//margin-top: 12px;
padding: 16px 24px;
min-width: 200px;
border-radius: 8px;
background-color: #1e3751;
font-family: "PostGrotesk-Medium";
font-size: 15px;
line-height: 1.0;
text-align: left;
color: #ffffff;
}
.icon-forward-white-box {
width: 24px;
height: 24px;