From b7d5c758c76673a24a36c8e7a9628d145ee90c10 Mon Sep 17 00:00:00 2001
From: austinkelsay <austinkelsay@yahoo.com>
Date: Sat, 12 Oct 2024 14:41:23 -0500
Subject: [PATCH] Improve template obile styles

---
 .../carousels/templates/CourseTemplate.js     | 11 ++++++----
 .../carousels/templates/DocumentTemplate.js   | 20 +++++++++++--------
 .../carousels/templates/VideoTemplate.js      | 12 +++++++----
 3 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/src/components/content/carousels/templates/CourseTemplate.js b/src/components/content/carousels/templates/CourseTemplate.js
index 07e700a..36418af 100644
--- a/src/components/content/carousels/templates/CourseTemplate.js
+++ b/src/components/content/carousels/templates/CourseTemplate.js
@@ -11,6 +11,7 @@ import { useRouter } from "next/router";
 import { formatTimestampToHowLongAgo } from "@/utils/time";
 import { ProgressSpinner } from "primereact/progressspinner";
 import { Message } from "primereact/message";
+import useWindowWidth from "@/hooks/useWindowWidth";
 import GenericButton from "@/components/buttons/GenericButton";
 import appConfig from "@/config/appConfig";
 
@@ -21,6 +22,8 @@ export function CourseTemplate({ course }) {
   const [nAddress, setNAddress] = useState(null);
   const router = useRouter();
   const { returnImageProxy } = useImageProxy();
+  const windowWidth = useWindowWidth();
+  const isMobile = windowWidth < 768;
 
   useEffect(() => {
     if (zaps.length > 0) {
@@ -75,7 +78,7 @@ export function CourseTemplate({ course }) {
           </div>
         </CardHeader>
       </div>
-      <CardContent className="pt-6 pb-2 w-full flex flex-row justify-between items-center">
+      <CardContent className={`${isMobile ? "px-2" : ""} pt-6 pb-2 w-full flex flex-row justify-between items-center`}>
         <div className="flex flex-wrap gap-2">
           {course && course.topics && course.topics.map((topic, index) => (
             <Tag key={index} className="px-3 py-1 text-sm text-[#f8f8ff]">
@@ -85,7 +88,7 @@ export function CourseTemplate({ course }) {
         </div>
         <p className="font-bold text-gray-300 min-w-[5%]">{lessonCount} {lessonCount === 1 ? "lesson" : "lessons"}</p>
       </CardContent>
-      <CardDescription className="p-6 py-2 pt-0 text-base text-neutral-50/90 dark:text-neutral-900/90 overflow-hidden min-h-[4em] flex items-center"
+      <CardDescription className={`${isMobile ? "p-2" : "p-6"} py-2 pt-0 text-base text-neutral-50/90 dark:text-neutral-900/90 overflow-hidden min-h-[4em] flex items-center`}
         style={{
           overflow: "hidden",
           display: "-webkit-box",
@@ -99,9 +102,9 @@ export function CourseTemplate({ course }) {
           <div className="flex flex-col items-end">
             {
               course?.price && course?.price > 0 ? (
-                <Message className="py-2" icon="pi pi-lock" severity="info" text={`Price: ${course.price} sats`} />
+                <Message className={`${isMobile ? "py-1 text-sm" : "py-2"}`} icon="pi pi-lock" severity="info" text={`Price: ${course.price} sats`} />
               ) : (
-                <Message className="py-2" icon="pi pi-lock-open" severity="success" text="Free" />
+                <Message className={`${isMobile ? "py-1 text-sm" : "py-2"}`} icon="pi pi-lock-open" severity="success" text="Free" />
               )
             }
           </div>
diff --git a/src/components/content/carousels/templates/DocumentTemplate.js b/src/components/content/carousels/templates/DocumentTemplate.js
index 35bf436..b4f8d14 100644
--- a/src/components/content/carousels/templates/DocumentTemplate.js
+++ b/src/components/content/carousels/templates/DocumentTemplate.js
@@ -10,6 +10,7 @@ import { formatTimestampToHowLongAgo } from "@/utils/time";
 import { nip19 } from "nostr-tools";
 import { Tag } from "primereact/tag";
 import { Message } from "primereact/message";
+import useWindowWidth from "@/hooks/useWindowWidth";
 import GenericButton from "@/components/buttons/GenericButton";
 import appConfig from "@/config/appConfig";
 
@@ -19,6 +20,8 @@ export function DocumentTemplate({ document }) {
     const [zapAmount, setZapAmount] = useState(0);
     const router = useRouter();
     const { returnImageProxy } = useImageProxy();
+    const windowWidth = useWindowWidth();
+    const isMobile = windowWidth < 768;
 
     useEffect(() => {
         if (document && document?.id) {
@@ -64,7 +67,7 @@ export function DocumentTemplate({ document }) {
                     </div>
                 </CardHeader>
             </div>
-            <CardContent className="pt-6 pb-2 w-full flex flex-row justify-between items-center">
+            <CardContent className={`${isMobile ? "px-2" : ""} pt-6 pb-2 w-full flex flex-row justify-between items-center`}>
                 <div className="flex flex-wrap gap-2">
                     {document?.topics?.map((topic, index) => (
                         <Tag key={index} className="px-3 py-1 text-sm text-[#f8f8ff]">
@@ -74,11 +77,12 @@ export function DocumentTemplate({ document }) {
                 </div>
                 <p className="font-bold text-gray-300 min-w-[12%]">{document?.readTime || "5 min"} read</p>
             </CardContent>
-            <CardDescription className="p-6 py-2 pt-0 text-base text-neutral-50/90 dark:text-neutral-900/90 overflow-hidden min-h-[4em] flex items-center" style={{
-                overflow: "hidden",
-                display: "-webkit-box",
-                WebkitBoxOrient: "vertical",
-                WebkitLineClamp: "2"
+            <CardDescription className={`${isMobile ? "p-2" : "p-6"} py-2 pt-0 text-base text-neutral-50/90 dark:text-neutral-900/90 overflow-hidden min-h-[4em] flex items-center`}
+                style={{
+                    overflow: "hidden",
+                    display: "-webkit-box",
+                    WebkitBoxOrient: "vertical",
+                    WebkitLineClamp: "2"
             }}>
                 <div className="w-full flex flex-row justify-between items-center">
                     {(document.summary || document.description)?.split('\n').map((line, index) => (
@@ -87,9 +91,9 @@ export function DocumentTemplate({ document }) {
                     <div className="flex flex-col items-end">
                         {
                             document?.price && document?.price > 0 ? (
-                                <Message className="py-2" icon="pi pi-lock" severity="info" text={`Price: ${document.price} sats`} />
+                                <Message className={`${isMobile ? "py-1 text-sm" : "py-2"}`} icon="pi pi-lock" severity="info" text={`Price: ${document.price} sats`} />
                             ) : (
-                                <Message className="py-2" icon="pi pi-lock-open" severity="success" text="Free" />
+                                <Message className={`${isMobile ? "py-1 text-sm" : "py-2"}`} icon="pi pi-lock-open" severity="success" text="Free" />
                             )
                         }
                     </div>
diff --git a/src/components/content/carousels/templates/VideoTemplate.js b/src/components/content/carousels/templates/VideoTemplate.js
index 0e8d5cf..33daeb2 100644
--- a/src/components/content/carousels/templates/VideoTemplate.js
+++ b/src/components/content/carousels/templates/VideoTemplate.js
@@ -9,6 +9,7 @@ import { useImageProxy } from "@/hooks/useImageProxy";
 import { useRouter } from "next/router";
 import { nip19 } from "nostr-tools";
 import { formatTimestampToHowLongAgo } from "@/utils/time";
+import useWindowWidth from "@/hooks/useWindowWidth";
 import { Tag } from "primereact/tag";
 import { Message } from "primereact/message";
 import GenericButton from "@/components/buttons/GenericButton";
@@ -19,8 +20,11 @@ export function VideoTemplate({ video }) {
     const [zapAmount, setZapAmount] = useState(0);
     const [nAddress, setNAddress] = useState(null);
     const router = useRouter();
+    const windowWidth = useWindowWidth();
     const { returnImageProxy } = useImageProxy();
 
+    const isMobile = windowWidth < 768;
+
     useEffect(() => {
         if (video && video?.pubkey && video?.kind && video?.id) {
             const addr = nip19.naddrEncode({
@@ -65,7 +69,7 @@ export function VideoTemplate({ video }) {
                     </div>
                 </CardHeader>
             </div>
-            <CardContent className="pt-6 pb-2">
+            <CardContent className={`${isMobile ? "px-2" : ""} pt-6 pb-2 w-full flex flex-row justify-between items-center`}>
                 <div className="flex flex-wrap gap-2">
                     {video?.topics?.map((topic, index) => (
                         <Tag key={index} className="px-3 py-1 text-sm text-[#f8f8ff]">
@@ -75,7 +79,7 @@ export function VideoTemplate({ video }) {
                 </div>
                 <p className="font-bold text-gray-300 min-w-[12%]">{video?.duration || "5 min"} watch</p>
             </CardContent>
-            <CardDescription className="p-6 py-2 pt-0 text-base text-neutral-50/90 dark:text-neutral-900/90 overflow-hidden min-h-[4em] flex items-center"
+            <CardDescription className={`${isMobile ? "p-2" : "p-6"} py-2 pt-0 text-base text-neutral-50/90 dark:text-neutral-900/90 overflow-hidden min-h-[4em] flex items-center`}
                 style={{
                     overflow: "hidden",
                     display: "-webkit-box",
@@ -89,9 +93,9 @@ export function VideoTemplate({ video }) {
                     <div className="flex flex-col items-end">
                         {
                             video?.price && video?.price > 0 ? (
-                                <Message className="py-2" icon="pi pi-lock" severity="info" text={`Price: ${video.price} sats`} />
+                                <Message className={`${isMobile ? "py-1 text-sm" : "py-2"}`} icon="pi pi-lock" severity="info" text={`Price: ${video.price} sats`} />
                             ) : (
-                                <Message className="py-2" icon="pi pi-lock-open" severity="success" text="Free" />
+                                <Message className={`${isMobile ? "py-1 text-sm" : "py-2"}`} icon="pi pi-lock-open" severity="success" text="Free" />
                             )
                         }
                     </div>