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 {
ToggleShow -> {
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)
}
@ -38,37 +41,28 @@ pub fn update(model: Model, msg) {
}
pub fn view(model: Model) {
let input_type = case model.show_search {
True -> "search"
False -> "hidden"
}
div(
[attribute.id("search-bar")],
[
div(
[attribute.id("search-bar-input-wrapper")],
[
input([
attribute.id(search_bar_input_id),
attribute.class("glass-input"),
attribute.type_(input_type),
attribute.placeholder("Search"),
attribute.attribute("aria-label", "Search through content"),
event.on_input(UpdateSearch),
]),
],
),
button.view(
"button-small",
[
attribute.attribute("aria-controls", search_bar_input_id),
event.on_click(ToggleShow),
],
[icon("search", Alt("Toggle search"))],
),
],
)
div([attribute.id("search-bar")], [
lustre.if_(model.show_search, fn() {
div([attribute.id("search-bar-input-wrapper")], [
input([
attribute.id(search_bar_input_id),
attribute.class("glass-input"),
attribute.type_("search"),
attribute.placeholder("Search"),
attribute.attribute("aria-label", "Search through content"),
event.on_input(UpdateSearch),
]),
])
}),
button.view(
"button-small",
[
attribute.attribute("aria-controls", search_bar_input_id),
event.on_click(ToggleShow),
],
[icon("search", Alt("Toggle search"))],
),
])
}
fn focus() {

11
style.css
View file

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