fix course and video tags, fix some mobile styles

This commit is contained in:
austinkelsay 2024-10-12 15:39:50 -05:00
parent b7d5c758c7
commit f730519f83
5 changed files with 17 additions and 12 deletions

View File

@ -78,7 +78,7 @@ export function CourseTemplate({ course }) {
</div> </div>
</CardHeader> </CardHeader>
</div> </div>
<CardContent className={`${isMobile ? "px-2" : ""} pt-6 pb-2 w-full flex flex-row justify-between items-center`}> <CardContent className={`${isMobile ? "px-3" : ""} pt-6 pb-2 w-full flex flex-row justify-between items-center`}>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
{course && course.topics && course.topics.map((topic, index) => ( {course && course.topics && course.topics.map((topic, index) => (
<Tag key={index} className="px-3 py-1 text-sm text-[#f8f8ff]"> <Tag key={index} className="px-3 py-1 text-sm text-[#f8f8ff]">
@ -88,7 +88,7 @@ export function CourseTemplate({ course }) {
</div> </div>
<p className="font-bold text-gray-300 min-w-[5%]">{lessonCount} {lessonCount === 1 ? "lesson" : "lessons"}</p> <p className="font-bold text-gray-300 min-w-[5%]">{lessonCount} {lessonCount === 1 ? "lesson" : "lessons"}</p>
</CardContent> </CardContent>
<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`} <CardDescription className={`${isMobile ? "p-3" : "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={{ style={{
overflow: "hidden", overflow: "hidden",
display: "-webkit-box", display: "-webkit-box",
@ -102,7 +102,7 @@ export function CourseTemplate({ course }) {
<div className="flex flex-col items-end"> <div className="flex flex-col items-end">
{ {
course?.price && course?.price > 0 ? ( course?.price && course?.price > 0 ? (
<Message className={`${isMobile ? "py-1 text-sm" : "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={`${course.price} sats`} />
) : ( ) : (
<Message className={`${isMobile ? "py-1 text-sm" : "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" />
) )

View File

@ -67,7 +67,7 @@ export function DocumentTemplate({ document }) {
</div> </div>
</CardHeader> </CardHeader>
</div> </div>
<CardContent className={`${isMobile ? "px-2" : ""} pt-6 pb-2 w-full flex flex-row justify-between items-center`}> <CardContent className={`${isMobile ? "px-3" : ""} pt-6 pb-2 w-full flex flex-row justify-between items-center`}>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
{document?.topics?.map((topic, index) => ( {document?.topics?.map((topic, index) => (
<Tag key={index} className="px-3 py-1 text-sm text-[#f8f8ff]"> <Tag key={index} className="px-3 py-1 text-sm text-[#f8f8ff]">
@ -75,9 +75,9 @@ export function DocumentTemplate({ document }) {
</Tag> </Tag>
))} ))}
</div> </div>
<p className="font-bold text-gray-300 min-w-[12%]">{document?.readTime || "5 min"} read</p> <p className="font-bold text-gray-300 min-w-[5%]">{document?.readTime || "5 min"} read</p>
</CardContent> </CardContent>
<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`} <CardDescription className={`${isMobile ? "p-3" : "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={{ style={{
overflow: "hidden", overflow: "hidden",
display: "-webkit-box", display: "-webkit-box",
@ -91,7 +91,7 @@ export function DocumentTemplate({ document }) {
<div className="flex flex-col items-end"> <div className="flex flex-col items-end">
{ {
document?.price && document?.price > 0 ? ( document?.price && document?.price > 0 ? (
<Message className={`${isMobile ? "py-1 text-sm" : "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={`${document.price} sats`} />
) : ( ) : (
<Message className={`${isMobile ? "py-1 text-sm" : "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" />
) )

View File

@ -69,7 +69,7 @@ export function VideoTemplate({ video }) {
</div> </div>
</CardHeader> </CardHeader>
</div> </div>
<CardContent className={`${isMobile ? "px-2" : ""} pt-6 pb-2 w-full flex flex-row justify-between items-center`}> <CardContent className={`${isMobile ? "px-3" : ""} pt-6 pb-2 w-full flex flex-row justify-between items-center`}>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
{video?.topics?.map((topic, index) => ( {video?.topics?.map((topic, index) => (
<Tag key={index} className="px-3 py-1 text-sm text-[#f8f8ff]"> <Tag key={index} className="px-3 py-1 text-sm text-[#f8f8ff]">
@ -77,9 +77,9 @@ export function VideoTemplate({ video }) {
</Tag> </Tag>
))} ))}
</div> </div>
<p className="font-bold text-gray-300 min-w-[12%]">{video?.duration || "5 min"} watch</p> <p className="font-bold text-gray-300 min-w-[5%]">{video?.duration || "5 min"} watch</p>
</CardContent> </CardContent>
<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`} <CardDescription className={`${isMobile ? "p-3" : "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={{ style={{
overflow: "hidden", overflow: "hidden",
display: "-webkit-box", display: "-webkit-box",
@ -93,7 +93,7 @@ export function VideoTemplate({ video }) {
<div className="flex flex-col items-end"> <div className="flex flex-col items-end">
{ {
video?.price && video?.price > 0 ? ( video?.price && video?.price > 0 ? (
<Message className={`${isMobile ? "py-1 text-sm" : "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={`${video.price} sats`} />
) : ( ) : (
<Message className={`${isMobile ? "py-1 text-sm" : "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" />
) )

View File

@ -233,8 +233,9 @@ export default function DraftCourseDetails({ processedEvent, draftId, lessons })
['picture', coverImage], ['picture', coverImage],
['image', coverImage], ['image', coverImage],
['description', summary], ['description', summary],
['l', "Education"], ['l', "course"],
['price', price.toString()], ['price', price.toString()],
...processedEvent?.topics?.map(topic => ['t', topic]),
// map out the lessons by order of the index property which is on each lesson // map out the lessons by order of the index property which is on each lesson
...lessons.sort((a, b) => a.index - b.index).map((lesson) => ['a', `${lesson.kind}:${lesson.pubkey}:${lesson.d}`]), ...lessons.sort((a, b) => a.index - b.index).map((lesson) => ['a', `${lesson.kind}:${lesson.pubkey}:${lesson.d}`]),
]; ];

View File

@ -112,6 +112,7 @@ export const parseEvent = (event) => {
case 't': case 't':
if (tag[1] === 'video') { if (tag[1] === 'video') {
eventData.type = 'video'; eventData.type = 'video';
eventData.topics.push(tag[1]);
} else if (tag[1] !== "plebdevs") { } else if (tag[1] !== "plebdevs") {
eventData.topics.push(tag[1]); eventData.topics.push(tag[1]);
} }
@ -184,6 +185,9 @@ export const parseCourseEvent = (event) => {
case 'r': case 'r':
eventData.additionalLinks.push(tag[1]); eventData.additionalLinks.push(tag[1]);
break; break;
case 't':
eventData.topics.push(tag[1]);
break;
default: default:
break; break;
} }