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

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) => {
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">
<Image
alt="resource thumbnail"
@ -36,7 +36,7 @@ export default function CoursesCarousel() {
className="w-full h-full object-cover object-center"
/>
</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>
<p className='truncate'>{course.summary}</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}) {
return (
<div className="w-full">
<div className="w-[100%]">
<TabMenu
className='w-full bg-transparent border-none'
model={items}

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

@ -12,7 +12,7 @@ const Sidebar = () => {
};
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' : ''}`}>
<p className="p-2 my-2 pl-5 rounded-md font-bold"><i className="pi pi-home" /> Home</p>
</div>

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

@ -8,41 +8,36 @@ import { parseEvent } from '@/utils/nostr';
import { formatTimestampToHowLongAgo } from '@/utils/time';
export default function WorkshopsCarousel() {
const resources = useSelector((state) => state.events.resources);
console.log(resources);
const [processedResources, setProcessedResources] = useState([]);
const workshops = useSelector((state) => state.events.resources);
const [processedWorkshops, setProcessedWorkshops] = useState([]);
const { returnImageProxy } = useImageProxy();
const router = useRouter();
useEffect(() => {
const processResources = resources.map(resource => {
const { id, content, title, summary, image, published_at } = parseEvent(resource);
const processWorkshops = workshops.map(workshop => {
const { id, content, title, summary, image, published_at } = parseEvent(workshop);
return { id, content, title, summary, image, published_at };
});
setProcessedResources(processResources);
}, [resources]);
setProcessedWorkshops(processWorkshops);
}, [workshops]);
const resourceTemplate = (resource) => {
const workshopTemplate = (workshop) => {
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">
<Image
alt="resource thumbnail"
src={returnImageProxy(resource.image)}
src={returnImageProxy(workshop.image)}
width={344}
height={194}
className="w-full h-full object-cover object-center"
/>
</div>
<div className='flex flex-col justify-start w-[426px]'>
<h4 className="mb-1 font-bold text-xl">{resource.title}</h4>
<p className='truncate'>{resource.summary}</p>
<p className="text-sm mt-1 text-gray-400">Published: {formatTimestampToHowLongAgo(resource.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 className='flex flex-col justify-start max-w-[426px]'>
<h4 className="mb-1 font-bold text-xl">{workshop.title}</h4>
<p className='truncate'>{workshop.summary}</p>
<p className="text-sm mt-1 text-gray-400">Published: {formatTimestampToHowLongAgo(workshop.published_at)}</p>
</div>
</div>
);
@ -51,7 +46,7 @@ export default function WorkshopsCarousel() {
return (
<>
<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>
<div className="flex flex-col min-h-screen">
<Navbar />
<div style={{ display: 'flex', flex: '1' }}>
<div className='flex'>
<Sidebar />
<div style={{ flex: 1 }}>
<div className='max-w-[85vw]'>
<Component {...pageProps} />
</div>
</div>

2
src/styles/globals.css
View File

@ -25,4 +25,4 @@
.p-button .pi.pi-bolt {
color: yellow;
}
}