h/projectreshoot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changed cards on movie search

Browse Source
This commit is contained in:
Haelnorr
2026-01-10 17:10:26 +11:00
parent a0cd269466
commit 6e03c98ae8
5 changed files with 97 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
internal/view/component/search/movies_results.templ
View File

@@ -5,9 +5,11 @@ import "git.haelnorr.com/h/golib/tmdb"
templ MovieResults(movies *tmdb.ResultMovies, image *tmdb.Image) {
for _, movie := range movies.Results {
<div
<a
href={ templ.SafeURL(fmt.Sprintf("/movie/%v", movie.ID)) }
class="bg-surface0 p-4 rounded-lg shadow-lg flex
items-start space-x-4"
items-start space-x-4 cursor-pointer transition-all
hover:outline hover:outline-green hover:shadow-xl hover:scale-105"
>
<img
src={ movie.GetPoster(image, "w92") }
@@ -18,17 +20,15 @@ templ MovieResults(movies *tmdb.ResultMovies, image *tmdb.Image) {
onerror="this.onerror=null; setFallbackColor(this);"
/>
<script>
function setFallbackColor(img) {
const baseColor = getComputedStyle(document.documentElement).
getPropertyValue('--base').trim();
img.src = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='144'%3E%3Crect width='100%' height='100%' fill='${baseColor}'/%3E%3C/svg%3E`;
}
</script>
function setFallbackColor(img) {
const baseColor = getComputedStyle(document.documentElement)
.getPropertyValue("--base")
.trim();
img.src = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='144'%3E%3Crect width='100%' height='100%' fill='${baseColor}'/%3E%3C/svg%3E`;
}
</script>
<div>
<a
href={ templ.SafeURL(fmt.Sprintf("/movie/%v", movie.ID)) }
class="text-xl font-semibold transition hover:text-green"
>{ movie.Title } { movie.ReleaseYear() }</a>
<h3 class="text-xl font-semibold">{ movie.Title } { movie.ReleaseYear() }</h3>
<p class="text-subtext0">
Released:
<span class="font-medium">{ movie.ReleaseDate }</span>
@@ -39,6 +39,6 @@ templ MovieResults(movies *tmdb.ResultMovies, image *tmdb.Image) {
</p>
<p class="text-subtext0">{ movie.Overview }</p>
</div>
</div>
</a>
}
}