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

58
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,37 +41,28 @@ 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")], [
} input([
attribute.id(search_bar_input_id),
div( attribute.class("glass-input"),
[attribute.id("search-bar")], attribute.type_("search"),
[ attribute.placeholder("Search"),
div( attribute.attribute("aria-label", "Search through content"),
[attribute.id("search-bar-input-wrapper")], event.on_input(UpdateSearch),
[ ]),
input([ ])
attribute.id(search_bar_input_id), }),
attribute.class("glass-input"), button.view(
attribute.type_(input_type), "button-small",
attribute.placeholder("Search"), [
attribute.attribute("aria-label", "Search through content"), attribute.attribute("aria-controls", search_bar_input_id),
event.on_input(UpdateSearch), event.on_click(ToggleShow),
]), ],
], [icon("search", Alt("Toggle search"))],
), ),
button.view( ])
"button-small",
[
attribute.attribute("aria-controls", search_bar_input_id),
event.on_click(ToggleShow),
],
[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);