add projects search styles

This commit is contained in:
Juan de la Cruz 2016-02-18 16:33:54 +01:00
parent b131dea579
commit 5d0e57acb7
2 changed files with 37 additions and 18 deletions

View file

@ -28,22 +28,44 @@
}
.dashboard-search {
align-items: center;
display: flex;
margin-left: $small;
.input-text {
background: rgba(255,255,255,.4);
border: 0;
color: $dark-ui-text;
padding: 4px 8px;
margin: 0;
max-width: 160px;
}
.clear-search {
align-items: center;
background: rgba(255,255,255,.4);
cursor: pointer;
margin-left: $big;
display: flex;
height: 28px;
padding: 0 5px;
svg {
fill: $color-gray-dark;
height: 20px;
width: 20px;
fill: $light-ui-icons;
height: 15px;
transform: rotate(45deg);
width: 15px;
&:hover {
fill: $color-gray-darker;
fill: $color-danger;
}
}
}
}
&.library-gap {
padding: $small $medium $small 270px;
}

View file

@ -192,16 +192,16 @@
(let [change-term #(rs/emit! (dd/set-project-filtering (.-value (.-target %))))
clear-term #(rs/emit! (dd/clear-project-filtering))]
(html
[:form
[:input
[:form.dashboard-search
[:input.input-text
{:type "text"
:on-change change-term
:auto-focus true
:placeholder "Search..."
:value (rum/react project-filtering-l)}]
[:input
{:type "button"
:on-click clear-term
:value "X"}]])))
[:div.clear-search
{:on-click clear-term}
i/close]])))
(def project-search
(mx/component
@ -218,9 +218,7 @@
[:div.dashboard-info
[:span.dashboard-projects (tr "ds.num-projects" (t/c pcount))]
(project-sorting)
(project-search)]
[:div.dashboard-search
i/search]])))
(project-search)]])))
(def menu
(mx/component
@ -299,4 +297,3 @@
{:render grid-render
:name "grid"
:mixins [rum/reactive]}))