feat: improve ui of album cards

src/modules/album/album.go

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

src/modules/album/album.templ

@@ -8,9 +8,14 @@ import (
 )
 
 // Renders a page with all albums passed to it
-templ allAlbumsTempl(albums []utils.Album) {
+templ allAlbumsTempl(albums []utils.Album, query string) {
 	@utils.SkeletonTempl() {
-		<div>
+		@albumsFragment(albums, query)
+	}
+}
+
+templ albumsFragment(albums []utils.Album, query string) {
+	<div id="album-list">
 		<h1 class="font-bold pt-4 pb-2 text-2xl">
 			Albums
 		</h1>
@@ -26,12 +31,18 @@ templ allAlbumsTempl(albums []utils.Album) {
 					class="inline-block w-full py-1 px-2 border border-sky-600 rounded-md text-sky-600"
 					type="search"
 					placeholder="Search albums"
+					value={ query }
 					name="s"
 				/>
 			</form>
 		</div>
 		<br/>
-			<div id="album-list" class="grid grid-cols-3 gap-2 px-2">
+		<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 {
 					@index.AlbumCard(album)
 				}
@@ -40,20 +51,9 @@ templ allAlbumsTempl(albums []utils.Album) {
 						No albums found
 					</p>
 				}
+			}
 		</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

src/modules/index/index.templ

@@ -29,7 +29,9 @@ templ IndexTempl(albums []utils.Album) {
 templ AlbumCard(album utils.Album) {
 	<div class="inline-block p-1 rounded bg-zinc-200 dark:bg-zinc-800">
 		<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
 				href={ templ.URL(fmt.Sprintf("/album/%s", album.ID)) }
 				class="inline-block w-full overflow-hidden whitespace-nowrap overflow-ellipsis hover:underline"