saulteafarmer/plebdevs
1
0
Fork 0
mirror of https://github.com/AustinKelsay/plebdevs.git synced 2025-06-23 16:05:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Revert template styles to old template layout

Browse Source
This commit is contained in:
austinkelsay 2024-10-14 10:27:23 -05:00
parent c0c8f1618c
commit 540556fd62
3 changed files with 29 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/content/carousels/templates/CourseTemplate.js
View File

@ -57,13 +57,17 @@ export function CourseTemplate({ course }) {
return ( return (
<Card className="overflow-hidden group hover:shadow-xl transition-all duration-300 bg-gray-800 m-2 border-none"> <Card className="overflow-hidden group hover:shadow-xl transition-all duration-300 bg-gray-800 m-2 border-none">
<div className="relative h-48 sm:h-64"> <div
className="relative w-full h-0"
style={{ paddingBottom: "56.25%" }}
>
<Image <Image
alt="course thumbnail"
src={returnImageProxy(course.image)} src={returnImageProxy(course.image)}
alt="Course background"
quality={100} quality={100}
layout="fill" layout="fill"
className={`${router.pathname === "/content" ? "w-full h-full object-cover" : "w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"}`} objectFit="cover"
className="rounded-md"
/> />
<div className="absolute inset-0 bg-gradient-to-br from-primary/80 to-primary-foreground/50" /> <div className="absolute inset-0 bg-gradient-to-br from-primary/80 to-primary-foreground/50" />
<div className="absolute top-4 right-4 flex items-center gap-1 bg-black/50 text-white px-2 py-1 rounded-full z-10"> <div className="absolute top-4 right-4 flex items-center gap-1 bg-black/50 text-white px-2 py-1 rounded-full z-10">
@ -96,8 +100,8 @@ export function CourseTemplate({ course }) {
WebkitLineClamp: "2" WebkitLineClamp: "2"
}}> }}>
<div className="w-full flex flex-row justify-between items-start"> <div className="w-full flex flex-row justify-between items-start">
<p className="line-clamp-2 break-words">{(course.summary || course.description)?.split('\n').map((line, index) => ( <p className="line-clamp-2 text-wrap break-words">{(course.summary || course.description)?.split('\n').map((line, index) => (
<span className="break-words max-w-[70%]" key={index}>{line}</span> <span className="text-wrap break-words" key={index}>{line}</span>
))}</p> ))}</p>
<div className="flex flex-col items-end"> <div className="flex flex-col items-end">
{ {

18
src/components/content/carousels/templates/DocumentTemplate.js
View File

@ -45,14 +45,18 @@ export function DocumentTemplate({ document }) {
if (zapsError) return <div>Error: {zapsError}</div>; if (zapsError) return <div>Error: {zapsError}</div>;
return ( return (
<Card className="overflow-hidden group hover:shadow-xl transition-all duration-300 bg-gray-800 m-2 border-none"> <Card className="w-full overflow-hidden group hover:shadow-xl transition-all duration-300 bg-gray-800 m-2 border-none">
<div className="relative h-48 sm:h-64"> <div
className="relative w-full h-0"
style={{ paddingBottom: "56.25%" }}
>
<Image <Image
alt="document thumbnail"
src={returnImageProxy(document.image)} src={returnImageProxy(document.image)}
alt="Document background"
quality={100} quality={100}
layout="fill" layout="fill"
className={`${router.pathname === "/content" ? "w-full h-full object-cover" : "w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"}`} objectFit="cover"
className="rounded-md"
/> />
<div className="absolute inset-0 bg-gradient-to-br from-primary/80 to-primary-foreground/50" /> <div className="absolute inset-0 bg-gradient-to-br from-primary/80 to-primary-foreground/50" />
<div className="absolute top-4 right-4 flex items-center gap-1 bg-black/50 text-white px-3 py-1 rounded-full"> <div className="absolute top-4 right-4 flex items-center gap-1 bg-black/50 text-white px-3 py-1 rounded-full">
@ -84,9 +88,9 @@ export function DocumentTemplate({ document }) {
WebkitBoxOrient: "vertical", WebkitBoxOrient: "vertical",
WebkitLineClamp: "2" WebkitLineClamp: "2"
}}> }}>
<div className="w-full flex flex-row justify-between items-start"> <div className="w-full flex flex-row justify-between items-start break-words">
<p className="line-clamp-2 break-words">{(document.summary || document.description)?.split('\n').map((line, index) => ( <p className="line-clamp-2 text-wrap break-words overflow-hidden">{(document.summary || document.description)?.split('\n').map((line, index) => (
<span className="break-words max-w-[70%]" key={index}>{line}</span> <span className="text-wrap break-words overflow-hidden" key={index}>{line}</span>
))}</p> ))}</p>
<div className="flex flex-col items-end"> <div className="flex flex-col items-end">
{ {

14
src/components/content/carousels/templates/VideoTemplate.js
View File

@ -47,13 +47,17 @@ export function VideoTemplate({ video }) {
return ( return (
<Card className="overflow-hidden group hover:shadow-xl transition-all duration-300 bg-gray-800 m-2 border-none"> <Card className="overflow-hidden group hover:shadow-xl transition-all duration-300 bg-gray-800 m-2 border-none">
<div className="relative h-48 sm:h-64"> <div
className="relative w-full h-0"
style={{ paddingBottom: "56.25%" }}
>
<Image <Image
alt="video thumbnail"
src={returnImageProxy(video.image)} src={returnImageProxy(video.image)}
alt="Video background"
quality={100} quality={100}
layout="fill" layout="fill"
className={`${router.pathname === "/content" ? "w-full h-full object-cover" : "w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"}`} objectFit="cover"
className="rounded-md"
/> />
<div className="absolute inset-0 bg-gradient-to-br from-primary/80 to-primary-foreground/50" /> <div className="absolute inset-0 bg-gradient-to-br from-primary/80 to-primary-foreground/50" />
<div className="absolute top-4 right-4 flex items-center gap-1 bg-black/50 text-white px-3 py-1 rounded-full"> <div className="absolute top-4 right-4 flex items-center gap-1 bg-black/50 text-white px-3 py-1 rounded-full">
@ -86,8 +90,8 @@ export function VideoTemplate({ video }) {
WebkitLineClamp: "2" WebkitLineClamp: "2"
}}> }}>
<div className="w-full flex flex-row justify-between items-start"> <div className="w-full flex flex-row justify-between items-start">
<p className="line-clamp-2 break-words max-w-[70%]">{(video.summary || video.description)?.split('\n').map((line, index) => ( <p className="line-clamp-2 text-wrap break-words">{(video.summary || video.description)?.split('\n').map((line, index) => (
<span className="break-words" key={index}>{line}</span> <span className="text-wrap break-words" key={index}>{line}</span>
))}</p> ))}</p>
<div className="flex flex-col items-end"> <div className="flex flex-col items-end">
{ {