From 6e03c98ae8f41eca3fee742574f80bf4b5b34600 Mon Sep 17 00:00:00 2001 From: Haelnorr Date: Sat, 10 Jan 2026 17:10:26 +1100 Subject: [PATCH] changed cards on movie search --- .../component/search/movies_results.templ | 26 +++--- internal/view/page/movie_search.templ | 4 +- pkg/contexts/keys.go | 5 -- pkg/contexts/request_timer.go | 21 ----- pkg/embedfs/files/css/output.css | 82 +++++++++++++++++++ 5 files changed, 97 insertions(+), 41 deletions(-) delete mode 100644 pkg/contexts/request_timer.go diff --git a/internal/view/component/search/movies_results.templ b/internal/view/component/search/movies_results.templ index 3dce75c..a9159af 100644 --- a/internal/view/component/search/movies_results.templ +++ b/internal/view/component/search/movies_results.templ @@ -5,9 +5,11 @@ import "git.haelnorr.com/h/golib/tmdb" templ MovieResults(movies *tmdb.ResultMovies, image *tmdb.Image) { for _, movie := range movies.Results { -
+ 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`; + } +
- { movie.Title } { movie.ReleaseYear() } +

{ movie.Title } { movie.ReleaseYear() }

Released: { movie.ReleaseDate } @@ -39,6 +39,6 @@ templ MovieResults(movies *tmdb.ResultMovies, image *tmdb.Image) {

{ movie.Overview }

-
+ } } diff --git a/internal/view/page/movie_search.templ b/internal/view/page/movie_search.templ index 65c23bc..d654b29 100644 --- a/internal/view/page/movie_search.templ +++ b/internal/view/page/movie_search.templ @@ -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 -
+
} diff --git a/pkg/contexts/keys.go b/pkg/contexts/keys.go index 0875c3c..6e8422d 100644 --- a/pkg/contexts/keys.go +++ b/pkg/contexts/keys.go @@ -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") -) diff --git a/pkg/contexts/request_timer.go b/pkg/contexts/request_timer.go deleted file mode 100644 index d5be372..0000000 --- a/pkg/contexts/request_timer.go +++ /dev/null @@ -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 -} diff --git a/pkg/embedfs/files/css/output.css b/pkg/embedfs/files/css/output.css index 6cfaf31..3942b82 100644 --- a/pkg/embedfs/files/css/output.css +++ b/pkg/embedfs/files/css/output.css @@ -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; } } }