fernando/music-to-go
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: improve ui of album cards

Browse Source
This commit is contained in:
Araozu 2024-12-08 17:29:04 -05:00
parent 004d3de8d7
commit f354b76cc3
3 changed files with 41 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/modules/album/album.go
View File

@ -43,10 +43,10 @@ func allAlbumsPage(c echo.Context) error {
if isHtmxRequest { if isHtmxRequest {
// return just a fragment // return just a fragment
return utils.RenderTempl(c, http.StatusOK, albumsFragment(albums)) return utils.RenderTempl(c, http.StatusOK, albumsFragment(albums, searchQuery))
} else { } else {
// return a full-blown html page // return a full-blown html page
return utils.RenderTempl(c, http.StatusOK, allAlbumsTempl(albums)) return utils.RenderTempl(c, http.StatusOK, allAlbumsTempl(albums, searchQuery))
} }
} }

72
src/modules/album/album.templ
View File

@ -8,30 +8,41 @@ import (
) )
// Renders a page with all albums passed to it // Renders a page with all albums passed to it
templ allAlbumsTempl(albums []utils.Album) { templ allAlbumsTempl(albums []utils.Album, query string) {
@utils.SkeletonTempl() { @utils.SkeletonTempl() {
<div> @albumsFragment(albums, query)
<h1 class="font-bold pt-4 pb-2 text-2xl"> }
Albums }
</h1>
<div class="px-2"> templ albumsFragment(albums []utils.Album, query string) {
<form <div id="album-list">
action="/album/" <h1 class="font-bold pt-4 pb-2 text-2xl">
method="GET" Albums
hx-boost="true" </h1>
hx-target="#album-list" <div class="px-2">
hx-trigger="keyup changed delay:500ms from:input, search" <form
> action="/album/"
<input method="GET"
class="inline-block w-full py-1 px-2 border border-sky-600 rounded-md text-sky-600" hx-boost="true"
type="search" hx-target="#album-list"
placeholder="Search albums" hx-trigger="keyup changed delay:500ms from:input, search"
name="s" >
/> <input
</form> class="inline-block w-full py-1 px-2 border border-sky-600 rounded-md text-sky-600"
</div> type="search"
<br/> placeholder="Search albums"
<div id="album-list" class="grid grid-cols-3 gap-2 px-2"> value={ query }
name="s"
/>
</form>
</div>
<br/>
<div id="album-list" class="flex flex-wrap justify-evenly gap-2 px-2">
if len(albums) == 0 {
<p>
No albums found
</p>
} else {
for _, album := range albums { for _, album := range albums {
@index.AlbumCard(album) @index.AlbumCard(album)
} }
@ -40,20 +51,9 @@ templ allAlbumsTempl(albums []utils.Album) {
No albums found No albums found
</p> </p>
} }
</div> }
</div> </div>
} </div>
}
templ albumsFragment(albums []utils.Album) {
for _, album := range albums {
@index.AlbumCard(album)
}
if len(albums) == 0 {
<p>
No albums found
</p>
}
} }
// Renders the page of a single Album // Renders the page of a single Album

4
src/modules/index/index.templ
View File

@ -29,7 +29,9 @@ templ IndexTempl(albums []utils.Album) {
templ AlbumCard(album utils.Album) { templ AlbumCard(album utils.Album) {
<div class="inline-block p-1 rounded bg-zinc-200 dark:bg-zinc-800"> <div class="inline-block p-1 rounded bg-zinc-200 dark:bg-zinc-800">
<div class="h-30 w-28 relative"> <div class="h-30 w-28 relative">
<img class="w-full" src={ fmt.Sprintf("/covers/%s", album.ID) }/> <div class="text-center">
<img class="inline-block w-[6.75rem] h-[6.75rem] min-h-26 overflow-hidden rounded" src={ fmt.Sprintf("/covers/%s", album.ID) }/>
</div>
<a <a
href={ templ.URL(fmt.Sprintf("/album/%s", album.ID)) } href={ templ.URL(fmt.Sprintf("/album/%s", album.ID)) }
class="inline-block w-full overflow-hidden whitespace-nowrap overflow-ellipsis hover:underline" class="inline-block w-full overflow-hidden whitespace-nowrap overflow-ellipsis hover:underline"