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

Fixed responsiveness conflicts between sidebar and carousels

Browse Source
This commit is contained in:
austinkelsay 2024-03-17 16:16:47 -05:00
parent 0ab56b009c
commit 2e8a5ec807
6 changed files with 21 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/courses/CoursesCarousel.js
View File

@ -26,7 +26,7 @@ export default function CoursesCarousel() {
const courseTemplate = (course) => { const courseTemplate = (course) => {
return ( return (
<div onClick={() => router.push(`/details/${course.id}`)} className="flex flex-col items-center w-full px-4 cursor-pointer mt-8"> <div onClick={() => router.push(`/details/${course.id}`)} className="flex flex-col items-center w-full mx-auto px-4 cursor-pointer mt-8">
<div className="w-86 h-60 bg-gray-200 overflow-hidden rounded-md shadow-lg"> <div className="w-86 h-60 bg-gray-200 overflow-hidden rounded-md shadow-lg">
<Image <Image
alt="resource thumbnail" alt="resource thumbnail"
@ -36,7 +36,7 @@ export default function CoursesCarousel() {
className="w-full h-full object-cover object-center" className="w-full h-full object-cover object-center"
/> />
</div> </div>
<div className='flex flex-col justify-start w-[426px]'> <div className='flex flex-col justify-start max-w-[426px]'>
<h4 className="mb-1 font-bold text-xl">{course.title}</h4> <h4 className="mb-1 font-bold text-xl">{course.title}</h4>
<p className='truncate'>{course.summary}</p> <p className='truncate'>{course.summary}</p>
<p className="text-sm mt-1 text-gray-400">Published: {formatTimestampToHowLongAgo(course.published_at)}</p> <p className="text-sm mt-1 text-gray-400">Published: {formatTimestampToHowLongAgo(course.published_at)}</p>

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

@ -3,7 +3,7 @@ import { TabMenu } from 'primereact/tabmenu';
export default function MenuTab({items}) { export default function MenuTab({items}) {
return ( return (
<div className="w-full"> <div className="w-[100%]">
<TabMenu <TabMenu
className='w-full bg-transparent border-none' className='w-full bg-transparent border-none'
model={items} model={items}

2
src/components/sidebar/Sidebar.js
View File

@ -12,7 +12,7 @@ const Sidebar = () => {
}; };
return ( return (
<div className='max-mob:hidden max-tab:hidden w-72 bg-gray-800 p-4'> <div className='max-mob:hidden max-tab:hidden w-[15vw] bg-gray-800 p-4 h-screen'>
<div onClick={() => router.push('/')} className={`w-full cursor-pointer hover:bg-gray-700 rounded-lg ${isActive('/') ? 'bg-gray-700' : ''}`}> <div onClick={() => router.push('/')} className={`w-full cursor-pointer hover:bg-gray-700 rounded-lg ${isActive('/') ? 'bg-gray-700' : ''}`}>
<p className="p-2 my-2 pl-5 rounded-md font-bold"><i className="pi pi-home" /> Home</p> <p className="p-2 my-2 pl-5 rounded-md font-bold"><i className="pi pi-home" /> Home</p>
</div> </div>

33
src/components/workshops/WorkshopsCarousel.js
View File

@ -8,41 +8,36 @@ import { parseEvent } from '@/utils/nostr';
import { formatTimestampToHowLongAgo } from '@/utils/time'; import { formatTimestampToHowLongAgo } from '@/utils/time';
export default function WorkshopsCarousel() { export default function WorkshopsCarousel() {
const resources = useSelector((state) => state.events.resources); const workshops = useSelector((state) => state.events.resources);
console.log(resources); const [processedWorkshops, setProcessedWorkshops] = useState([]);
const [processedResources, setProcessedResources] = useState([]);
const { returnImageProxy } = useImageProxy(); const { returnImageProxy } = useImageProxy();
const router = useRouter(); const router = useRouter();
useEffect(() => { useEffect(() => {
const processResources = resources.map(resource => { const processWorkshops = workshops.map(workshop => {
const { id, content, title, summary, image, published_at } = parseEvent(resource); const { id, content, title, summary, image, published_at } = parseEvent(workshop);
return { id, content, title, summary, image, published_at }; return { id, content, title, summary, image, published_at };
}); });
setProcessedResources(processResources); setProcessedWorkshops(processWorkshops);
}, [resources]); }, [workshops]);
const resourceTemplate = (resource) => { const workshopTemplate = (workshop) => {
return ( return (
<div onClick={() => router.push(`/details/${resource.id}`)} className="flex flex-col items-center w-full px-4 cursor-pointer mt-8"> <div onClick={() => router.push(`/details/${workshop.id}`)} className="flex flex-col items-center w-full mx-auto px-4 cursor-pointer mt-8">
<div className="w-86 h-60 bg-gray-200 overflow-hidden rounded-md shadow-lg"> <div className="w-86 h-60 bg-gray-200 overflow-hidden rounded-md shadow-lg">
<Image <Image
alt="resource thumbnail" alt="resource thumbnail"
src={returnImageProxy(resource.image)} src={returnImageProxy(workshop.image)}
width={344} width={344}
height={194} height={194}
className="w-full h-full object-cover object-center" className="w-full h-full object-cover object-center"
/> />
</div> </div>
<div className='flex flex-col justify-start w-[426px]'> <div className='flex flex-col justify-start max-w-[426px]'>
<h4 className="mb-1 font-bold text-xl">{resource.title}</h4> <h4 className="mb-1 font-bold text-xl">{workshop.title}</h4>
<p className='truncate'>{resource.summary}</p> <p className='truncate'>{workshop.summary}</p>
<p className="text-sm mt-1 text-gray-400">Published: {formatTimestampToHowLongAgo(resource.published_at)}</p> <p className="text-sm mt-1 text-gray-400">Published: {formatTimestampToHowLongAgo(workshop.published_at)}</p>
{/* <div className="flex flex-row items-center justify-center gap-2">
<Button icon="pi pi-search" rounded />
<Button icon="pi pi-star-fill" rounded severity="success" />
</div> */}
</div> </div>
</div> </div>
); );
@ -51,7 +46,7 @@ export default function WorkshopsCarousel() {
return ( return (
<> <>
<h1 className="text-2xl ml-[6%] mt-4">workshops</h1> <h1 className="text-2xl ml-[6%] mt-4">workshops</h1>
<Carousel value={processedResources} numVisible={3} itemTemplate={resourceTemplate} /> <Carousel value={processedWorkshops} numVisible={2} itemTemplate={workshopTemplate} />
</> </>
); );
} }

4
src/pages/_app.js
View File

@ -18,9 +18,9 @@ export default function MyApp({
<Layout> <Layout>
<div className="flex flex-col min-h-screen"> <div className="flex flex-col min-h-screen">
<Navbar /> <Navbar />
<div style={{ display: 'flex', flex: '1' }}> <div className='flex'>
<Sidebar /> <Sidebar />
<div style={{ flex: 1 }}> <div className='max-w-[85vw]'>
<Component {...pageProps} /> <Component {...pageProps} />
</div> </div>
</div> </div>