Wodey/woedii
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance mobile responsiveness and layout adjustments across components; implement resize event handling in CreatorLayout, update Recent_Creation and Recent_Card for improved styling and structure. #5

Merged
Yussif merged 1 commits from hot-fit/responsiviness-layout into main 2025-04-29 18:02:58 +00:00
Conversation 0 Commits 1 Files Changed 6 +83 -106
6 changed files with 83 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit e7c2303da4 - Show all commits

32
app/creator/(home)/layout.tsx
View File

@ -1,26 +1,48 @@
'use client' 'use client'
import { useState } from "react"; import { useState, useEffect } from 'react';
import SideNav from "@/components/custom/Side_Nav"; import SideNav from "@/components/custom/Side_Nav";
import Navbar from "@/components/custom/Nav_bar"; import Navbar from "@/components/custom/Nav_bar";
export default function CreatorLayout({ export default function CreatorLayout({
children, children,
}: Readonly<{ }: Readonly<{
children: React.ReactNode; children: React.ReactNode;
}>) { }>) {
const [isMobile, setIsMobile] = useState(false);
const [drawerOpen, setDrawerOpen] = useState(false); const [drawerOpen, setDrawerOpen] = useState(false);
useEffect(() => {
// Function to handle resize and set mobile state
const handleResize = () => {
setIsMobile(window.innerWidth < 768);
};
// Set initial state
handleResize();
// Add event listener
window.addEventListener("resize", handleResize);
// Cleanup
return () => window.removeEventListener("resize", handleResize);
}, []);
return ( return (
<html lang="en"> <html lang="en">
<div className="flex min-h-screen"> <div className="flex min-h-screen">
<div className="fixed left-0 top-0 h-screen w-[280px] lg:w-[380px]"> {/* SideNav - hidden on mobile, fixed on desktop */}
<div className={`${isMobile ? 'fixex' : 'fixed'} left-0 top-0 h-screen`}>
<SideNav drawerOpen={drawerOpen} setDrawerOpen={setDrawerOpen} /> <SideNav drawerOpen={drawerOpen} setDrawerOpen={setDrawerOpen} />
</div> </div>
<div className="flex flex-col w-full ml-0 lg:ml-[280px] xl:ml-[380px]">
<div className="fixed top-0 right-0 left-0 lg:left-[280px] xl:left-[380px] z-10"> {/* Main content - full width on mobile, with margin on desktop */}
<div className={`flex flex-col w-full ${isMobile ? '' : 'ml-[280px] md:ml-[320px] lg:ml-[380px]'}`}>
<div className={`fixed top-0 right-0 z-10 ${isMobile ? 'left-0' : 'left-[280px] md:left-[320px] lg:left-[380px]'}`}>
<Navbar setDrawerOpen={setDrawerOpen} /> <Navbar setDrawerOpen={setDrawerOpen} />
</div> </div>
<main className="flex-1 p-4 lg:p-6 bg-[#F3F3F3] mt-[75px] pb-[60px] md:pb-0">{children}</main> <main className="flex-1 p-3 md:p-6 bg-[#F3F3F3] mt-[75px]">{children}</main>
</div> </div>
</div> </div>
</html> </html>

6
app/creator/(home)/page.tsx
View File

@ -1,17 +1,13 @@
import { Home_Banner } from "@/components/Home_Banner"; import { Home_Banner } from "@/components/Home_Banner";
import Recent_Creation from "@/components/Recent_Creation"; import Recent_Creation from "@/components/Recent_Creation";
const CreatorPage: React.FC = () => { const CreatorPage: React.FC = () => {
return ( return (
<div className="w-full h-[80vh] flex flex-col items-center justify-start bg-[#F3F3F3]"> <div className="w-full h-auto min-h-[80vh] flex flex-col items-center justify-start bg-[#F3F3F3]">
<Home_Banner /> <Home_Banner />
<Recent_Creation /> <Recent_Creation />
</div> </div>
); );
}; };
export default CreatorPage; export default CreatorPage;

14
app/globals.css
View File

@ -131,12 +131,6 @@
background-position: center center; background-position: center center;
background-blend-mode: multiply; background-blend-mode: multiply;
border-radius: 10px; border-radius: 10px;
padding: 8px;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 40px;
padding-right: 40px;
} }
.hero_text { .hero_text {
@ -235,13 +229,7 @@
border-radius: 2px; border-radius: 2px;
} }
.recent_container {
display: flex;
flex-direction: column;
width: 100%;
height: 237px;
margin-top: 30px;
}
.recent_title { .recent_title {
display: flex; display: flex;

20
components/Home_Banner.tsx
View File

@ -2,19 +2,21 @@ import React from "react";
export const Home_Banner: React.FC = () => { export const Home_Banner: React.FC = () => {
return ( return (
<div className="hero_img flex flex-wrap gap-3 md:flex-nowrap h-fit md:h-[170px] w-full px-4 md:px-6 py-6 md:py-0 bg-gradient-to-r from-blue-500 to-purple-600"> <div className="hero_img w-full flex flex-wrap gap-4 p-4 md:p-6 lg:p-8">
<div className="hero_text w-full md:w-1/2 flex flex-col justify-center"> <div className="hero_text max-w-md mx-auto md:mx-0">
<h3 className="text-2xl md:text-3xl font-bold mb-2 text-white">Bring Your Story to Life</h3> <h3 className="text-xl md:text-2xl lg:text-3xl font-bold mb-2">Bring Your Story to Life</h3>
<p className="text-sm md:text-base mb-4 text-white opacity-90 max-w-md"> <p className="text-sm md:text-base mb-4">
Start creating your own ebook today — share your voice, inspire Start creating your own ebook today — share your voice, inspire
readers, and publish to the world in just a few clicks. readers, and publish to the world in just a few clicks.
</p> </p>
<button className="bg-white text-blue-600 hover:bg-blue-50 transition-colors rounded-md py-2 px-4 text-sm md:text-base font-medium w-fit">Create an ebook</button> <button className="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md text-sm md:text-base">
Create an ebook
</button>
</div> </div>
<div className="hero_cards w-full md:w-1/2"> <div className="hero_cards flex flex-wrap gap-4 mt-6">
<div className="card_1 "></div> <div className="card_1 w-full sm:w-1/2 md:w-1/3 lg:w-1/4 h-32 md:h-40 bg-white rounded-lg shadow"></div>
<div className="card_2 "></div> <div className="card_2 w-full sm:w-1/2 md:w-1/3 lg:w-1/4 h-32 md:h-40 bg-white rounded-lg shadow "></div>
<div className="card_3"></div> <div className="card_3 w-full sm:w-1/2 md:w-1/3 lg:w-1/4 h-32 md:h-40 bg-white rounded-lg shadow "></div>
</div> </div>
</div> </div>
); );

61
components/Recent_Card.tsx
View File

@ -1,64 +1,33 @@
import React, { forwardRef } from "react";
import Image from "next/image"; import Image from "next/image";
import React from "react";
export interface Recent_CardProps { interface RecentCardProps {
image: string; image: string;
title: string; title: string;
tag: string; tag: string;
description: string; description: string;
// Add additional props for event handlers
onClick?: React.MouseEventHandler<HTMLDivElement>;
onTouchStart?: React.TouchEventHandler<HTMLDivElement>;
onTouchEnd?: React.TouchEventHandler<HTMLDivElement>;
onTouchMove?: React.TouchEventHandler<HTMLDivElement>;
} }
const Recent_Card = forwardRef<HTMLDivElement, Recent_CardProps>(({ const Recent_Card: React.FC<RecentCardProps> = ({ image, title, tag, description }) => {
image,
title,
tag,
description,
onClick,
onTouchStart,
onTouchEnd,
onTouchMove,
...props
}, ref) => {
return ( return (
<div <div className="flex flex-col justify-start items-start w-full bg-white rounded-lg overflow-hidden">
ref={ref} <div className="recent_card flex justify-center items-center w-full h-32 sm:h-36 md:h-40 overflow-hidden">
className="w-full h-full flex flex-col bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow cursor-pointer"
onClick={onClick}
onTouchStart={onTouchStart}
onTouchEnd={onTouchEnd}
onTouchMove={onTouchMove}
{...props}
>
{/* Image container with consistent aspect ratio */}
<div className="relative w-full pt-[75%]">
<Image <Image
src={image} src={image}
alt={title} alt={title}
fill className="card_img object-cover w-full h-32 sm:h-36 md:h-40"
className="object-cover" width={250}
sizes="(max-width: 640px) 100vw, (max-width: 768px) 50vw, (max-width: 1024px) 33vw, 20vw" height={150}
/> />
<div className="absolute top-2 left-2">
<span className="bg-black text-white text-xs px-2 py-1 rounded">
{tag}
</span>
</div>
</div>
{/* Content section */}
<div className="p-3 flex flex-col flex-grow">
<h4 className="font-medium text-sm mb-1 line-clamp-1">{title}</h4>
<p className="text-xs text-gray-500">{description}</p>
</div> </div>
<h3 className="text-xs sm:text-sm md:text-base font-medium text-slate-900 mt-2 truncate w-full p-2">
{title}
</h3>
<p className="text-xs font-normal text-slate-400 w-full p-2">
{tag} <span className="ml-1">{description}</span>
</p>
</div> </div>
); );
}); };
Recent_Card.displayName = "Recent_Card";
export default Recent_Card; export default Recent_Card;

36
components/Recent_Creation.tsx
View File

@ -1,4 +1,3 @@
'use client'
import React from "react"; import React from "react";
import { FaSlidersH } from "react-icons/fa"; import { FaSlidersH } from "react-icons/fa";
import Recent_Card from "./Recent_Card"; import Recent_Card from "./Recent_Card";
@ -9,36 +8,34 @@ import {
ContextMenuTrigger, ContextMenuTrigger,
} from "@/components/ui/context-menu" } from "@/components/ui/context-menu"
import Link from "next/link"; import Link from "next/link";
import { useContextMenuTriggers } from "@/hooks/useContextMenuTriggers";
const Recent_Creation: React.FC = () => { const Recent_Creation: React.FC = () => {
// Use our custom hook for the first card with context menu
const { handlers } = useContextMenuTriggers({
longPressDelay: 500, // 500ms for long press
doubleClickDelay: 300 // 300ms for double click detection
});
return ( return (
<div className="recent_container w-full"> <div className="recent_container w-full px-4 md:px-6 py-6">
<div className="recent_title w-full"> <div className="recent_title flex justify-between items-center mb-4">
<h3 className="text-[16px] font-[700]">Recent creations</h3> <h3 className="text-base md:text-lg font-bold">Recent creations</h3>
<FaSlidersH className="text-[20px] recent_icon" /> <FaSlidersH className="text-lg md:text-xl recent_icon cursor-pointer" />
</div> </div>
<div className="grid sm:grid-cols-2 md:grid-cols-5 gap-4 mt-2 w-full">
<div className="grid grid-cols-1 xs:grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3 md:gap-4">
<ContextMenu> <ContextMenu>
<ContextMenuTrigger asChild> <ContextMenuTrigger asChild>
<div className="cursor-pointer">
<Recent_Card <Recent_Card
image="/images/aa31529b95af9b43380b88b11692b0a6f7999878.png" image="/images/aa31529b95af9b43380b88b11692b0a6f7999878.png"
title="Good morning Gabe Hager!" title="Good morning Gabe Hager!"
tag="Ebook" tag="Ebook"
description="Edited 13 mins ago" description="Edited 13 mins ago"
// Add our event handlers for mobile support
{...handlers}
/> />
</div>
</ContextMenuTrigger> </ContextMenuTrigger>
<ContextMenuContent> <ContextMenuContent>
<ContextMenuItem><Link href="/creator/reader">View as Reader</Link></ContextMenuItem> <ContextMenuItem>
<ContextMenuItem><Link href="/creator/studio">Continue editing</Link></ContextMenuItem> <Link href="/creator/reader" className="w-full">View as Reader</Link>
</ContextMenuItem>
<ContextMenuItem>
<Link href="/creator/studio" className="w-full">Continue editing</Link>
</ContextMenuItem>
</ContextMenuContent> </ContextMenuContent>
</ContextMenu> </ContextMenu>
@ -48,18 +45,21 @@ const Recent_Creation: React.FC = () => {
tag="Ebook" tag="Ebook"
description="Edited 5 hours ago" description="Edited 5 hours ago"
/> />
<Recent_Card <Recent_Card
image="/images/d3cf3b09c1fd3dc0d6a997a7a479337fdf8caa69.png" image="/images/d3cf3b09c1fd3dc0d6a997a7a479337fdf8caa69.png"
title="Good morning Gabe Hager!" title="Good morning Gabe Hager!"
tag="Ebook" tag="Ebook"
description="Edited 10 mins ago" description="Edited 10 mins ago"
/> />
<Recent_Card <Recent_Card
image="/images/96c1b745b59fe1512c73f653d7b5e7be3ee54e58.png" image="/images/96c1b745b59fe1512c73f653d7b5e7be3ee54e58.png"
title="A fantastic saga, the super..." title="A fantastic saga, the super..."
tag="Ebook" tag="Ebook"
description="Edited 1 month ago" description="Edited 1 month ago"
/> />
<Recent_Card <Recent_Card
image="/images/292c2c8f2ea3276c44dc6ade84e687b9cae3d267.png" image="/images/292c2c8f2ea3276c44dc6ade84e687b9cae3d267.png"
title="Good morning Gabe Hager!" title="Good morning Gabe Hager!"
@ -69,6 +69,6 @@ const Recent_Creation: React.FC = () => {
</div> </div>
</div> </div>
); );
}; }
export default Recent_Creation; export default Recent_Creation;