nicd/elektrofoni
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix not being able to press shuffle all under search field

Browse source
This commit is contained in:
Mikko Ahlroth 2024-03-01 00:07:13 +02:00
parent b107d3e6b8
commit d067370071
2 changed files with 31 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/elekf/web/components/search.gleam
View file

@ -29,7 +29,10 @@ pub fn update(model: Model, msg) {
case msg { case msg {
ToggleShow -> { ToggleShow -> {
let show_search = !model.show_search let show_search = !model.show_search
lustre.after_next_render(focus) case show_search {
True -> lustre.after_next_render(focus)
False -> Nil
}
Model(..model, show_search: show_search) Model(..model, show_search: show_search)
} }
@ -38,27 +41,19 @@ pub fn update(model: Model, msg) {
} }
pub fn view(model: Model) { pub fn view(model: Model) {
let input_type = case model.show_search { div([attribute.id("search-bar")], [
True -> "search" lustre.if_(model.show_search, fn() {
False -> "hidden" div([attribute.id("search-bar-input-wrapper")], [
}
div(
[attribute.id("search-bar")],
[
div(
[attribute.id("search-bar-input-wrapper")],
[
input([ input([
attribute.id(search_bar_input_id), attribute.id(search_bar_input_id),
attribute.class("glass-input"), attribute.class("glass-input"),
attribute.type_(input_type), attribute.type_("search"),
attribute.placeholder("Search"), attribute.placeholder("Search"),
attribute.attribute("aria-label", "Search through content"), attribute.attribute("aria-label", "Search through content"),
event.on_input(UpdateSearch), event.on_input(UpdateSearch),
]), ]),
], ])
), }),
button.view( button.view(
"button-small", "button-small",
[ [
@ -67,8 +62,7 @@ pub fn view(model: Model) {
], ],
[icon("search", Alt("Toggle search"))], [icon("search", Alt("Toggle search"))],
), ),
], ])
)
} }
fn focus() { fn focus() {

11
style.css
View file

@ -368,13 +368,11 @@ single-album-view {
#search-bar { #search-bar {
position: absolute; position: absolute;
top: calc(var(--library-top-nav-height) + var(--side-margin) * 3); top: calc(var(--library-top-nav-height) + var(--side-margin) * 3);
left: 50%; right: var(--double-margin);
transform: translateX(-50%);
width: calc(100vw - 20px);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: flex-end;
align-items: stretch; align-items: stretch;
gap: var(--double-margin); gap: var(--double-margin);
} }
@ -388,11 +386,12 @@ single-album-view {
} }
#search-bar-input-wrapper { #search-bar-input-wrapper {
flex: 1 1; flex: 1 0;
} }
#search-bar-input-wrapper input { #search-bar-input-wrapper input {
width: 100%; /* 3 double margins: left side, flex gap, right side */
width: calc(100vw - var(--double-margin) * 3 - var(--search-size) * 2);
height: 100%; height: 100%;
font-size: var(--search-size); font-size: var(--search-size);