some filter markup and behaviour
This commit is contained in:
pablodip
parent
bdbdc2e2d2
commit
11e4a00ac6
|
|
@ -45,26 +45,68 @@
|
|||
[:div.ui.tiny.circular.image
|
||||
[:img {:src avatar-url}]]]]))
|
||||
|
||||
(defn bounties-filter [name]
|
||||
(defn bounties-filter-tooltip [& content]
|
||||
[:div.open-bounties-filter-element-tooltip
|
||||
content])
|
||||
|
||||
(defn bounties-filter-tooltip-value-input [label tooltip-open?]
|
||||
[:div.open-bounties-filter-element-tooltip-value-input-container
|
||||
[:div.:input.open-bounties-filter-element-tooltip-value-input-label
|
||||
label]
|
||||
[:input.open-bounties-filter-element-tooltip-value-input
|
||||
{:type "range"
|
||||
:min 0
|
||||
:max 1000
|
||||
:step 10
|
||||
:on-focus #(reset! tooltip-open? true)}]])
|
||||
|
||||
(defn bounties-filter-tooltip-value [tooltip-open?]
|
||||
[bounties-filter-tooltip
|
||||
"$0 - $1000+"
|
||||
[bounties-filter-tooltip-value-input "Min" tooltip-open?]
|
||||
[bounties-filter-tooltip-value-input "Max" tooltip-open?]])
|
||||
|
||||
(defn bounties-filter-tooltip-currency []
|
||||
[bounties-filter-tooltip "CURRENCY"])
|
||||
|
||||
(defn bounties-filter-tooltip-date []
|
||||
[bounties-filter-tooltip
|
||||
[:div.open-bounties-filter-list
|
||||
(for [t ["Last week" "Last month" "Last 3 months"]]
|
||||
[:div.open-bounties-filter-list-option
|
||||
t])]])
|
||||
|
||||
(defn bounties-filter-tooltip-owner [tooltip-open?]
|
||||
[bounties-filter-tooltip
|
||||
[:div.open-bounties-filter-list
|
||||
(for [t ["status-im" "aragon"]]
|
||||
[:div.open-bounties-filter-list-option-checkbox
|
||||
[:label
|
||||
[:input
|
||||
{:type "checkbox"
|
||||
:on-focus #(reset! tooltip-open? true)}]
|
||||
[:div.text t]]])]])
|
||||
|
||||
(defn bounties-filter [name tooltip]
|
||||
(let [open? (r/atom false)]
|
||||
(fn [name]
|
||||
(fn [name tooltip]
|
||||
[:div.open-bounties-filter-element-container
|
||||
{:tab-index 0
|
||||
:on-focus #(reset! open? true)
|
||||
:on-blur #(reset! open? false)}
|
||||
[:div.open-bounties-filter-element
|
||||
{:on-click #(swap! open? not)
|
||||
{:on-mouse-down #(swap! open? not)
|
||||
:class (when @open? "open-bounties-filter-element-active")}
|
||||
name]
|
||||
(when @open?
|
||||
[:div.open-bounties-filter-element-tooltip
|
||||
"TOOLTIP"])])))
|
||||
[tooltip open?])])))
|
||||
|
||||
(defn bounties-filters []
|
||||
[:div.open-bounties-filter
|
||||
[bounties-filter "Value"]
|
||||
[bounties-filter "Currency"]
|
||||
[bounties-filter "Date"]
|
||||
[bounties-filter "Owner"]])
|
||||
[bounties-filter "Value" bounties-filter-tooltip-value]
|
||||
[bounties-filter "Currency" bounties-filter-tooltip-currency]
|
||||
[bounties-filter "Date" bounties-filter-tooltip-date]
|
||||
[bounties-filter "Owner" bounties-filter-tooltip-owner]])
|
||||
|
||||
(defn bounties-sort []
|
||||
(let [open? (r/atom false)]
|
||||
|
|
|
|||
|
|
@ -425,6 +425,7 @@
|
|||
}
|
||||
|
||||
.open-bounties-filter-element {
|
||||
font-family: "PostGrotesk-Book";
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
line-height: 1.0;
|
||||
|
|
@ -451,11 +452,175 @@
|
|||
|
||||
.open-bounties-filter-element-tooltip {
|
||||
position: absolute;
|
||||
min-width: 227px;
|
||||
margin-top: 12px;
|
||||
padding: 16px 24px;
|
||||
padding: 24px 16px;
|
||||
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);
|
||||
font-family: "PostGrotesk-Book";
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
|
||||
.open-bounties-filter-element-tooltip-value-input-container {
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.open-bounties-filter-element-tooltip-value-input-label {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.open-bounties-filter-element-tooltip-value-input {
|
||||
margin-top: 24px;
|
||||
width: 288.5px;
|
||||
height: 4px;
|
||||
background-color: #55a5ea;
|
||||
}
|
||||
|
||||
// generated with http://danielstern.ca/range.css/#/
|
||||
input[type=range] {
|
||||
-webkit-appearance: none;
|
||||
//width: 100%;
|
||||
margin: 14.5px 0;
|
||||
}
|
||||
input[type=range]:focus {
|
||||
outline: none;
|
||||
}
|
||||
input[type=range]::-webkit-slider-runnable-track {
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
|
||||
background: #55a5ea;
|
||||
border-radius: 0px;
|
||||
border: 0px solid #010101;
|
||||
}
|
||||
input[type=range]::-webkit-slider-thumb {
|
||||
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
|
||||
border: 0px solid #000000;
|
||||
height: 33px;
|
||||
width: 33px;
|
||||
border-radius: 50px;
|
||||
background: #55a5ea;
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
margin-top: -14.5px;
|
||||
}
|
||||
input[type=range]:focus::-webkit-slider-runnable-track {
|
||||
background: #5aa7eb;
|
||||
}
|
||||
input[type=range]::-moz-range-track {
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
|
||||
background: #55a5ea;
|
||||
border-radius: 0px;
|
||||
border: 0px solid #010101;
|
||||
}
|
||||
input[type=range]::-moz-range-thumb {
|
||||
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
|
||||
border: 0px solid #000000;
|
||||
height: 33px;
|
||||
width: 33px;
|
||||
border-radius: 50px;
|
||||
background: #55a5ea;
|
||||
cursor: pointer;
|
||||
}
|
||||
input[type=range]::-ms-track {
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
color: transparent;
|
||||
}
|
||||
input[type=range]::-ms-fill-lower {
|
||||
background: #50a3e9;
|
||||
border: 0px solid #010101;
|
||||
border-radius: 0px;
|
||||
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
|
||||
}
|
||||
input[type=range]::-ms-fill-upper {
|
||||
background: #55a5ea;
|
||||
border: 0px solid #010101;
|
||||
border-radius: 0px;
|
||||
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
|
||||
}
|
||||
input[type=range]::-ms-thumb {
|
||||
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
|
||||
border: 0px solid #000000;
|
||||
height: 33px;
|
||||
width: 33px;
|
||||
border-radius: 50px;
|
||||
background: #55a5ea;
|
||||
cursor: pointer;
|
||||
height: 4px;
|
||||
}
|
||||
input[type=range]:focus::-ms-fill-lower {
|
||||
background: #55a5ea;
|
||||
}
|
||||
input[type=range]:focus::-ms-fill-upper {
|
||||
background: #5aa7eb;
|
||||
}
|
||||
|
||||
.open-bounties-filter-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.open-bounties-filter-list-option {
|
||||
font-family: "PostGrotesk-Book";
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
line-height: 1.0;
|
||||
color: #42505c;
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
border: solid 1px rgba(151, 151, 151, 0.2);
|
||||
}
|
||||
|
||||
.open-bounties-filter-list-option:not(:first-child) {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.open-bounties-filter-list-option:hover {
|
||||
cursor: pointer;
|
||||
background-color: #57a7ed;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.open-bounties-filter-list-option-checkbox {
|
||||
label {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
label:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input {
|
||||
background: green;
|
||||
transform: scale(1.3);
|
||||
}
|
||||
|
||||
input:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
line-height: 1.0;
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.open-bounties-filter-list-option-checkbox:not(:first-child) {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.open-bounties-sort {
|
||||
|
|
@ -488,7 +653,7 @@
|
|||
min-width: 200px;
|
||||
border-radius: 8px;
|
||||
background-color: #1e3751;
|
||||
font-family: "PostGrotesk-Medium";
|
||||
font-family: "PostGrotesk-Book";
|
||||
font-size: 15px;
|
||||
line-height: 1.0;
|
||||
text-align: left;
|
||||
|
|
|
|||
Loading…
Reference in New Issue