saulteafarmer/plebdevs
1
0
Fork 0
mirror of https://github.com/AustinKelsay/plebdevs.git synced 2025-04-19 19:01:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

styling improvements on course header and course tab

Browse Source
This commit is contained in:
austinkelsay 2025-04-13 17:04:31 -05:00
parent 31e2828029
commit ad6d0fd373
No known key found for this signature in database
GPG Key ID: 5A763922E5BA08EE
4 changed files with 29 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/content/courses/CourseDetails.js
View File

@ -202,7 +202,7 @@ export default function CourseDetails({
}
return (
<div className="w-full">
<div className="w-full bg-gray-800 p-4 rounded-lg">
<Toast ref={toastRef} />
<WelcomeModal />

47
src/components/content/courses/CourseHeader.js
View File

@ -1,14 +1,11 @@
import React from 'react';
import { Tag } from 'primereact/tag';
import { useRouter } from 'next/router';
import GenericButton from '@/components/buttons/GenericButton';
import Image from 'next/image';
import 'primeicons/primeicons.css';
const CourseHeader = ({
course,
isMobileView,
isCompleted,
navbarHeight,
isNavbarMode = false
}) => {
@ -42,30 +39,16 @@ const CourseHeader = ({
e.stopPropagation();
router.push('/');
}}
className="mr-2 pl-0 p-button-rounded p-button-text text-gray-300 hover:text-white"
className="mr-2 p-button-rounded p-button-text text-gray-300 hover:text-white"
rounded={true}
text={true}
aria-label="Go back to home"
/>
{course.image && (
<div className="relative h-8 w-8 mr-3 rounded-md overflow-hidden flex-shrink-0 border border-gray-700/50">
<img
src={course.image}
alt={course.name}
className="object-cover w-full h-full"
/>
</div>
)}
<div className="flex items-center">
<h1 className={`text-white font-semibold truncate ${isMobileView ? 'text-base max-w-[120px]' : 'text-lg max-w-[240px]'}`}>
<div className="flex items-center pb-1">
<h2 className={`text-white font-semibold truncate ${isMobileView ? 'text-base max-w-[160px]' : 'text-lg max-w-[300px]'}`}>
{course.name}
</h1>
{isCompleted && !isMobileView && (
<Tag severity="success" value="Completed" size="small" className="ml-2 py-0.5 text-xs" />
)}
</h2>
</div>
</div>
);
@ -74,10 +57,10 @@ const CourseHeader = ({
// Standard mode - for course page content
return (
<div
className="bg-transparent backdrop-blur-sm mb-0 p-3 px-4 sticky z-20 flex items-center justify-between"
className="bg-transparent backdrop-blur-sm mb-0 p-3 px-4 sticky z-20 flex items-center"
style={{ top: `${navbarHeight}px` }}
>
<div className="flex items-center max-w-[80%]">
<div className="flex items-center max-w-[90%]">
<GenericButton
icon="pi pi-arrow-left"
onClick={handleBackNavigation}
@ -88,23 +71,9 @@ const CourseHeader = ({
text={true}
aria-label="Go back"
/>
{!isMobileView && course.image && (
<div className="relative w-8 h-8 mr-3 rounded-md overflow-hidden flex-shrink-0 border border-gray-700/50">
<img
src={course.image}
alt={course.name}
className="object-cover w-full h-full"
/>
</div>
)}
<h1 className={`font-medium text-gray-100 ${isMobileView ? 'text-sm' : 'text-base'} truncate`}>
<h2 className={`font-medium text-gray-100 ${isMobileView ? 'text-sm' : 'text-base'} truncate`}>
{course.name}
</h1>
</div>
<div className="flex items-center">
{isCompleted && (
<Tag severity="success" value="Completed" size="small" className="ml-2 py-1 text-xs" />
)}
</h2>
</div>
</div>
);

1
src/components/menutab/MenuTab.js
View File

@ -42,6 +42,7 @@ export default function MenuTab({ items, activeIndex, onTabChange, sidebarVisibl
tooltip={sidebarVisible ? "Hide lessons" : "Show lessons"}
tooltipOptions={{ position: 'bottom' }}
aria-label="Toggle course lessons"
size="small"
/>
</div>
)}

26
src/pages/course/[slug]/index.js
View File

@ -348,13 +348,25 @@ const Course = () => {
// Render the QA section (empty for now)
const renderQASection = () => {
return (
<div className="rounded-lg border p-8 mt-4">
<div className="rounded-lg p-8 mt-4 bg-gray-800">
<h2 className="text-xl font-bold mb-4">Comments</h2>
<ZapThreadsWrapper
anchor={course?.d}
user={session?.user?.pubkey ? nip19.npubEncode(session?.user?.pubkey) : null}
relays="wss://nos.lol/, wss://relay.damus.io/, wss://relay.snort.social/, wss://relay.nostr.band/, wss://relay.primal.net/, wss://nostrue.com/, wss://purplerelay.com/, wss://relay.devs.tools/"
/>
{nAddress !== null ? (
<ZapThreadsWrapper
anchor={nAddress}
user={session?.user?.pubkey ? nip19.npubEncode(session?.user?.pubkey) : null}
relays="wss://nos.lol/, wss://relay.damus.io/, wss://relay.snort.social/, wss://relay.nostr.band/, wss://relay.primal.net/, wss://nostrue.com/, wss://purplerelay.com/, wss://relay.devs.tools/"
disable="zaps"
/>
) : course?.d ? (
<ZapThreadsWrapper
anchor={course.d}
user={session?.user?.pubkey ? nip19.npubEncode(session?.user?.pubkey) : null}
relays="wss://nos.lol/, wss://relay.damus.io/, wss://relay.snort.social/, wss://relay.nostr.band/, wss://relay.primal.net/, wss://nostrue.com/, wss://purplerelay.com/, wss://relay.devs.tools/"
disable="zaps"
/>
) : (
<p>Loading comments...</p>
)}
</div>
);
};
@ -364,7 +376,7 @@ const Course = () => {
const isCompleted = completedLessons.length > 0;
return (
<div className={`bg-gray-900 rounded-lg border border-gray-800 shadow-md ${isMobileView ? 'p-4' : 'p-6'}`}>
<div className={`bg-gray-800 rounded-lg border border-gray-800 shadow-md ${isMobileView ? 'p-4' : 'p-6'}`}>
{isMobileView && course && (
<div className="mb-2">
{/* Completed tag above image in mobile view */}