From e2d66fc26d76d9ac7a51a906df9d349dab92e41e Mon Sep 17 00:00:00 2001
From: Haelnorr <lockedonohoe@gmail.com>
Date: Mon, 24 Feb 2025 10:21:31 +1100
Subject: [PATCH] Basic movie page layout created

---
 handler/movie.go                       |  2 +-
 tmdb/functions.go                      | 23 --------------
 tmdb/movie_functions.go                | 35 +++++++++++++++++++++
 view/component/account/container.templ |  2 +-
 view/layout/global.templ               |  2 +-
 view/page/movie.templ                  | 43 ++++++++++++++++----------
 6 files changed, 65 insertions(+), 42 deletions(-)
 delete mode 100644 tmdb/functions.go
 create mode 100644 tmdb/movie_functions.go

diff --git a/handler/movie.go b/handler/movie.go
index 6deeee3..66f4762 100644
--- a/handler/movie.go
+++ b/handler/movie.go
@@ -31,7 +31,7 @@ func Movie(
 					Msg("Error occured getting the movie")
 				return
 			}
-			page.Movie(movie).Render(r.Context(), w)
+			page.Movie(movie, &config.TMDBConfig.Image).Render(r.Context(), w)
 		},
 	)
 }
diff --git a/tmdb/functions.go b/tmdb/functions.go
deleted file mode 100644
index 52663fe..0000000
--- a/tmdb/functions.go
+++ /dev/null
@@ -1,23 +0,0 @@
-package tmdb
-
-import (
-	"fmt"
-	"net/url"
-	"path"
-)
-
-func FormatRuntime(minutes int) string {
-	hours := minutes / 60
-	mins := minutes % 60
-	return fmt.Sprintf("%dh %02dm", hours, mins)
-}
-
-func GetPoster(image *Image, size, imgpath string) string {
-	base, err := url.Parse(image.SecureBaseURL)
-	if err != nil {
-		return ""
-	}
-	fullPath := path.Join(base.Path, size, imgpath)
-	base.Path = fullPath
-	return base.String()
-}
diff --git a/tmdb/movie_functions.go b/tmdb/movie_functions.go
new file mode 100644
index 0000000..a73f3bf
--- /dev/null
+++ b/tmdb/movie_functions.go
@@ -0,0 +1,35 @@
+package tmdb
+
+import (
+	"fmt"
+	"net/url"
+	"path"
+)
+
+func (movie *Movie) FRuntime() string {
+	hours := movie.Runtime / 60
+	mins := movie.Runtime % 60
+	return fmt.Sprintf("%dh %02dm", hours, mins)
+}
+
+func (movie *Movie) GetPoster(image *Image, size string) string {
+	base, err := url.Parse(image.SecureBaseURL)
+	if err != nil {
+		return ""
+	}
+	fullPath := path.Join(base.Path, size, movie.Poster)
+	base.Path = fullPath
+	return base.String()
+}
+
+func (movie *Movie) ReleaseYear() string {
+	return movie.ReleaseDate[:4]
+}
+
+func (movie *Movie) FGenres() string {
+	genres := ""
+	for _, genre := range movie.Genres {
+		genres += genre.Name + ", "
+	}
+	return genres[:len(genres)-2]
+}
diff --git a/view/component/account/container.templ b/view/component/account/container.templ
index f065949..199396f 100644
--- a/view/component/account/container.templ
+++ b/view/component/account/container.templ
@@ -3,7 +3,7 @@ package account
 templ AccountContainer(subpage string) {
 	<div
 		id="account-container"
-		class="flex max-w-200 min-h-100 mx-auto bg-mantle mt-10 rounded-xl"
+		class="flex max-w-200 min-h-100 mx-5 md:mx-auto bg-mantle mt-5 rounded-xl"
 		x-data="{big:window.innerWidth >=768, open:false}"
 		@resize.window="big = window.innerWidth >= 768"
 	>
diff --git a/view/layout/global.templ b/view/layout/global.templ
index 2469f00..a632894 100644
--- a/view/layout/global.templ
+++ b/view/layout/global.templ
@@ -97,7 +97,7 @@ templ Global() {
 				class="flex flex-col h-screen justify-between"
 			>
 				@nav.Navbar()
-				<div id="page-content" class="mb-auto px-5">
+				<div id="page-content" class="mb-auto md:px-5 md:pt-5">
 					{ children... }
 				</div>
 				@footer.Footer()
diff --git a/view/page/movie.templ b/view/page/movie.templ
index 740bc3f..8cdb550 100644
--- a/view/page/movie.templ
+++ b/view/page/movie.templ
@@ -2,27 +2,38 @@ package page
 
 import "projectreshoot/tmdb"
 import "projectreshoot/view/layout"
-import "fmt"
 
-func formatRuntime(minutes int) string {
-	hours := minutes / 60
-	mins := minutes % 60
-	return fmt.Sprintf("%dh %02dm", hours, mins)
-}
-
-templ Movie(movie *tmdb.Movie) {
+templ Movie(movie *tmdb.Movie, image *tmdb.Image) {
 	@layout.Global() {
-		<div class="bg-surface0">
-			<div class="">
-				<div class="bg-overlay2">{ movie.Poster }</div>
-				<div class="">
-					<span class="">
+		<div class="bg-surface0 md:p-2 md:rounded-lg">
+			<div class="flex items-center">
+				<div class="bg-overlay2 rounded-lg">
+					<img
+						class="object-cover aspect-[2/3] w-[154px] md:w-[300px] 
+                        transition-all md:rounded-md shadow-crust shadow-2xl"
+						src={ movie.GetPoster(image, "w300") }
+						alt="Poster"
+					/>
+				</div>
+				<div class="flex flex-col flex-1 text-center px-4">
+					<span class="text-xl md:text-3xl font-semibold">
 						{ movie.Title }
 					</span>
-					<span class="">
-						{ formatRuntime(movie.Runtime) }
-						- { movie.ReleaseDate[:4] }
+					<span class="text-sm md:text-lg text-subtext1">
+						{ movie.FGenres() }
+						- { movie.FRuntime() }
+						- { movie.ReleaseYear() }
 					</span>
+					<div class="flex justify-center gap-2 mt-2">
+						<div
+							class="w-20 h-20 md:w-30 md:h-30 bg-overlay2 
+                            transition-all rounded-sm"
+						></div>
+						<div
+							class="w-20 h-20 md:w-30 md:h-30 bg-overlay2 
+                            transition-all rounded-sm"
+						></div>
+					</div>
 				</div>
 			</div>
 		</div>