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>
}
}

4
internal/view/page/movie_search.templ
View File

@@ -14,7 +14,7 @@ templ Movies() {
name="search"
type="text"
placeholder="Search movies..."
class="flex-grow p-2 border rounded-lg
class="grow p-2 border rounded-lg
bg-mantle border-surface2 shadow-sm
focus:outline-none focus:ring-2 focus:ring-blue"
/>
@@ -24,7 +24,7 @@ templ Movies() {
hover:cursor-pointer hover:bg-green/75"
>Search</button>
</div>
<div id="search-movies-results" class="space-y-4"></div>
<div id="search-movies-results" class="space-y-4 pt-4"></div>
</form>
</div>
}

5
pkg/contexts/keys.go
View File

@@ -5,8 +5,3 @@ type contextKey string
func (c contextKey) String() string {
return "projectreshoot context key " + string(c)
}
var (
contextKeyAuthorizedUser = contextKey("auth-user")
contextKeyRequestTime = contextKey("req-time")
)

21
pkg/contexts/request_timer.go
View File

@@ -1,21 +0,0 @@
package contexts
import (
"context"
"errors"
"time"
)
// Set the start time of the request
func SetStart(ctx context.Context, time time.Time) context.Context {
return context.WithValue(ctx, contextKeyRequestTime, time)
}
// Get the start time of the request
func GetStartTime(ctx context.Context) (time.Time, error) {
start, ok := ctx.Value(contextKeyRequestTime).(time.Time)
if !ok {
return time.Time{}, errors.New("Failed to get start time of request")
}
return start, nil
}

82
pkg/embedfs/files/css/output.css
View File

@@ -273,6 +273,9 @@
.ms-3 {
margin-inline-start: calc(var(--spacing) * 3);
}
.mt-0 {
margin-top: calc(var(--spacing) * 0);
}
.mt-0\.5 {
margin-top: calc(var(--spacing) * 0.5);
}
@@ -446,12 +449,21 @@
.flex-1 {
flex: 1;
}
.flex-shrink {
flex-shrink: 1;
}
.shrink-0 {
flex-shrink: 0;
}
.flex-grow {
flex-grow: 1;
}
.grow {
flex-grow: 1;
}
.border-collapse {
border-collapse: collapse;
}
.translate-x-0 {
--tw-translate-x: calc(var(--spacing) * 0);
translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -463,6 +475,12 @@
.transform {
transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
}
.cursor-pointer {
cursor: pointer;
}
.resize {
resize: both;
}
.flex-col {
flex-direction: column;
}
@@ -695,6 +713,9 @@
.pt-3 {
padding-top: calc(var(--spacing) * 3);
}
.pt-4 {
padding-top: calc(var(--spacing) * 4);
}
.pt-9 {
padding-top: calc(var(--spacing) * 9);
}
@@ -831,6 +852,10 @@
--tw-shadow-color: color-mix(in oklab, var(--color-black) var(--tw-shadow-alpha), transparent);
}
}
.outline {
outline-style: var(--tw-outline-style);
outline-width: 1px;
}
.transition {
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -903,6 +928,16 @@
border-color: var(--overlay1);
}
}
.hover\:scale-105 {
&:hover {
@media (hover: hover) {
--tw-scale-x: 105%;
--tw-scale-y: 105%;
--tw-scale-z: 105%;
scale: var(--tw-scale-x) var(--tw-scale-y);
}
}
}
.hover\:cursor-pointer {
&:hover {
@media (hover: hover) {
@@ -1036,6 +1071,29 @@
}
}
}
.hover\:shadow-xl {
&:hover {
@media (hover: hover) {
--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
}
}
.hover\:outline {
&:hover {
@media (hover: hover) {
outline-style: var(--tw-outline-style);
outline-width: 1px;
}
}
}
.hover\:outline-green {
&:hover {
@media (hover: hover) {
outline-color: var(--green);
}
}
}
.focus\:border-blue {
&:focus {
border-color: var(--blue);
@@ -1572,6 +1630,11 @@
inherits: false;
initial-value: 0 0 #0000;
}
@property --tw-outline-style {
syntax: "*";
inherits: false;
initial-value: solid;
}
@property --tw-duration {
syntax: "*";
inherits: false;
@@ -1585,6 +1648,21 @@
initial-value: "";
inherits: false;
}
@property --tw-scale-x {
syntax: "*";
inherits: false;
initial-value: 1;
}
@property --tw-scale-y {
syntax: "*";
inherits: false;
initial-value: 1;
}
@property --tw-scale-z {
syntax: "*";
inherits: false;
initial-value: 1;
}
@layer properties {
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
*, ::before, ::after, ::backdrop {
@@ -1617,9 +1695,13 @@
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-offset-shadow: 0 0 #0000;
--tw-outline-style: solid;
--tw-duration: initial;
--tw-ease: initial;
--tw-content: "";
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-scale-z: 1;
}
}
}