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
|
||||
build
|
||||
.DS_Store
|
||||
|
|
|
@ -69,6 +69,7 @@ fn item_view(
|
|||
div(
|
||||
[
|
||||
attribute.id("album-list-" <> int.to_string(album_id)),
|
||||
attribute.class("library-item album-item"),
|
||||
attribute.type_("button"),
|
||||
event.on_click(StartPlay(tracks, 0)),
|
||||
attribute.attribute("role", "button"),
|
||||
|
@ -85,6 +86,7 @@ fn item_view(
|
|||
artwork.S300,
|
||||
)),
|
||||
attribute.attribute("loading", "lazy"),
|
||||
attribute.width(300),
|
||||
])
|
||||
_, _ ->
|
||||
div([attribute.class("artist-image-placeholder")], [text(album.name)])
|
||||
|
|
|
@ -72,6 +72,7 @@ fn item_view(
|
|||
div(
|
||||
[
|
||||
attribute.id("artist-list-" <> int.to_string(artist_id)),
|
||||
attribute.class("library-item artist-item"),
|
||||
attribute.type_("button"),
|
||||
event.on_click(StartPlay(tracks, 0)),
|
||||
attribute.attribute("role", "button"),
|
||||
|
@ -84,6 +85,7 @@ fn item_view(
|
|||
attribute.alt("artist.name"),
|
||||
attribute.src(artwork.url(s.artwork_server, id, artwork.S300)),
|
||||
attribute.attribute("loading", "lazy"),
|
||||
attribute.width(300),
|
||||
])
|
||||
_, _ ->
|
||||
div(
|
||||
|
|
|
@ -60,6 +60,7 @@ fn item_view(
|
|||
div(
|
||||
[
|
||||
attribute.id("track-list-" <> int.to_string(track_id)),
|
||||
attribute.class("library-item track-item"),
|
||||
attribute.type_("button"),
|
||||
event.on_click(StartPlay(items, index)),
|
||||
attribute.attribute("role", "button"),
|
||||
|
|
14
style.css
14
style.css
|
@ -64,3 +64,17 @@ main {
|
|||
#search-bar-input-wrapper input {
|
||||
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