Add image styles
This commit is contained in:
parent
1c1333f4d6
commit
d157dc0ee6
5 changed files with 20 additions and 0 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
@ -1,2 +1,3 @@
|
||||||
*.ez
|
*.ez
|
||||||
build
|
build
|
||||||
|
.DS_Store
|
||||||
|
|
|
@ -69,6 +69,7 @@ fn item_view(
|
||||||
div(
|
div(
|
||||||
[
|
[
|
||||||
attribute.id("album-list-" <> int.to_string(album_id)),
|
attribute.id("album-list-" <> int.to_string(album_id)),
|
||||||
|
attribute.class("library-item album-item"),
|
||||||
attribute.type_("button"),
|
attribute.type_("button"),
|
||||||
event.on_click(StartPlay(tracks, 0)),
|
event.on_click(StartPlay(tracks, 0)),
|
||||||
attribute.attribute("role", "button"),
|
attribute.attribute("role", "button"),
|
||||||
|
@ -85,6 +86,7 @@ fn item_view(
|
||||||
artwork.S300,
|
artwork.S300,
|
||||||
)),
|
)),
|
||||||
attribute.attribute("loading", "lazy"),
|
attribute.attribute("loading", "lazy"),
|
||||||
|
attribute.width(300),
|
||||||
])
|
])
|
||||||
_, _ ->
|
_, _ ->
|
||||||
div([attribute.class("artist-image-placeholder")], [text(album.name)])
|
div([attribute.class("artist-image-placeholder")], [text(album.name)])
|
||||||
|
|
|
@ -72,6 +72,7 @@ fn item_view(
|
||||||
div(
|
div(
|
||||||
[
|
[
|
||||||
attribute.id("artist-list-" <> int.to_string(artist_id)),
|
attribute.id("artist-list-" <> int.to_string(artist_id)),
|
||||||
|
attribute.class("library-item artist-item"),
|
||||||
attribute.type_("button"),
|
attribute.type_("button"),
|
||||||
event.on_click(StartPlay(tracks, 0)),
|
event.on_click(StartPlay(tracks, 0)),
|
||||||
attribute.attribute("role", "button"),
|
attribute.attribute("role", "button"),
|
||||||
|
@ -84,6 +85,7 @@ fn item_view(
|
||||||
attribute.alt("artist.name"),
|
attribute.alt("artist.name"),
|
||||||
attribute.src(artwork.url(s.artwork_server, id, artwork.S300)),
|
attribute.src(artwork.url(s.artwork_server, id, artwork.S300)),
|
||||||
attribute.attribute("loading", "lazy"),
|
attribute.attribute("loading", "lazy"),
|
||||||
|
attribute.width(300),
|
||||||
])
|
])
|
||||||
_, _ ->
|
_, _ ->
|
||||||
div(
|
div(
|
||||||
|
|
|
@ -60,6 +60,7 @@ fn item_view(
|
||||||
div(
|
div(
|
||||||
[
|
[
|
||||||
attribute.id("track-list-" <> int.to_string(track_id)),
|
attribute.id("track-list-" <> int.to_string(track_id)),
|
||||||
|
attribute.class("library-item track-item"),
|
||||||
attribute.type_("button"),
|
attribute.type_("button"),
|
||||||
event.on_click(StartPlay(items, index)),
|
event.on_click(StartPlay(items, index)),
|
||||||
attribute.attribute("role", "button"),
|
attribute.attribute("role", "button"),
|
||||||
|
|
14
style.css
14
style.css
|
@ -64,3 +64,17 @@ main {
|
||||||
#search-bar-input-wrapper input {
|
#search-bar-input-wrapper input {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#artists-view .library-list,
|
||||||
|
#albums-view .library-list {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.library-item img {
|
||||||
|
}
|
||||||
|
|
||||||
|
.library-item h3 {
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in a new issue