dwindown/meet-hub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix public header mobile menu and content formatting

Browse Source 
Public Header Mobile Menu:
- Added hamburger menu for non-logged-in visitors on mobile
- Desktop shows full navigation, mobile shows slide-out menu with icons
- Cart icon remains visible on mobile alongside hamburger

Tiptap Editor List Formatting:
- Added visual styling for bullet lists (disc markers, padding, spacing)
- Added visual styling for ordered lists (decimal markers, padding, spacing)
- List markers now use primary color for better visibility

Product Content HTML Formatting:
- Enhanced prose styling with proper heading sizes (h1, h2, h3)
- Improved list formatting with proper indentation and markers
- Added blockquote styling with left border and italic text
- Added code and preformatted text styling
- Ensures all formatted content displays properly on product detail pages

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
dwindown
2025-12-25 13:11:04 +07:00
parent 52190ff26d
commit f407723a8c
3 changed files with 97 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/components/AppLayout.tsx
View File

@@ -113,7 +113,9 @@ export function AppLayout({ children }: AppLayoutProps) {
)}
<span>{brandName}</span>
</Link>
<nav className="flex items-center gap-4">
{/* Desktop Navigation */}
<nav className="hidden md:flex items-center gap-4">
<Link to="/products" className="hover:underline font-medium">Produk</Link>
<Link to="/calendar" className="hover:underline font-medium">Kalender</Link>
<Link to="/auth">
@@ -133,6 +135,43 @@ export function AppLayout({ children }: AppLayoutProps) {
</Button>
</Link>
</nav>
{/* Mobile Menu Trigger */}
<div className="md:hidden flex items-center gap-2">
<Link to="/checkout">
<Button variant="outline" size="sm" className="relative border-2">
<ShoppingCart className="w-4 h-4" />
{items.length > 0 && (
<span className="absolute -top-2 -right-2 bg-primary text-primary-foreground text-xs w-5 h-5 flex items-center justify-center">
{items.length}
</span>
)}
</Button>
</Link>
<Sheet>
<SheetTrigger asChild>
<Button variant="ghost" size="sm">
<Menu className="w-6 h-6" />
</Button>
</SheetTrigger>
<SheetContent side="right" className="border-l-2 border-border">
<nav className="flex flex-col space-y-4 mt-8">
<Link to="/products" className="flex items-center gap-3 text-lg font-medium">
<Package className="w-5 h-5" />
Produk
</Link>
<Link to="/calendar" className="flex items-center gap-3 text-lg font-medium">
<Calendar className="w-5 h-5" />
Kalender
</Link>
<Link to="/auth" className="flex items-center gap-3 text-lg font-medium">
<User className="w-5 h-5" />
Login
</Link>
</nav>
</SheetContent>
</Sheet>
</div>
</div>
</header>
<main className="flex-1">{children}</main>

2
src/components/RichTextEditor.tsx
View File

@@ -628,7 +628,7 @@ export function RichTextEditor({ content, onChange, placeholder = 'Tulis konten.
<div onPaste={handlePaste}>
<EditorContent
editor={editor}
className="prose prose-sm max-w-none p-4 min-h-[200px] focus:outline-none [&_.ProseMirror]:outline-none [&_.ProseMirror]:min-h-[180px] [&_img]:cursor-pointer [&_img.ProseMirror-selectednode]:ring-2 [&_img.ProseMirror-selectednode]:ring-primary [&_h1]:font-bold [&_h1]:text-2xl [&_h1]:mb-4 [&_h1]:mt-6 [&_h2]:font-bold [&_h2]:text-xl [&_h2]:mb-3 [&_h2]:mt-5 [&_blockquote]:border-l-4 [&_blockquote]:border-primary [&_blockquote]:pl-4 [&_blockquote]:italic [&_blockquote]:text-muted-foreground [&_blockquote]:my-4"
className="prose prose-sm max-w-none p-4 min-h-[200px] focus:outline-none [&_.ProseMirror]:outline-none [&_.ProseMirror]:min-h-[180px] [&_img]:cursor-pointer [&_img.ProseMirror-selectednode]:ring-2 [&_img.ProseMirror-selectednode]:ring-primary [&_h1]:font-bold [&_h1]:text-2xl [&_h1]:mb-4 [&_h1]:mt-6 [&_h2]:font-bold [&_h2]:text-xl [&_h2]:mb-3 [&_h2]:mt-5 [&_blockquote]:border-l-4 [&_blockquote]:border-primary [&_blockquote]:pl-4 [&_blockquote]:italic [&_blockquote]:text-muted-foreground [&_blockquote]:my-4 [&_ul]:list-disc [&_ul]:pl-6 [&_ul]:space-y-1 [&_ol]:list-decimal [&_ol]:pl-6 [&_ol]:space-y-1 [&_li]:marker:text-primary"
/>
</div>
{uploading && (

56
src/index.css
View File

@@ -165,4 +165,60 @@ All colors MUST be HSL.
.bg-brand-accent {
background-color: var(--brand-accent, hsl(var(--accent)));
}
}
/* Enhanced prose styling for better content formatting */
@layer base {
/* Headings */
.prose h1 {
@apply text-2xl font-bold mt-6 mb-4;
}
.prose h2 {
@apply text-xl font-bold mt-5 mb-3;
}
.prose h3 {
@apply text-lg font-bold mt-4 mb-2;
}
/* Lists */
.prose ul {
@apply list-disc pl-6 space-y-1 my-4;
}
.prose ol {
@apply list-decimal pl-6 space-y-1 my-4;
}
.prose li {
@apply marker:text-primary;
}
/* Blockquotes */
.prose blockquote {
@apply border-l-4 border-primary pl-4 italic text-muted-foreground my-4;
}
/* Links */
.prose a {
@apply text-primary underline;
}
/* Strong/Bold */
.prose strong, .prose b {
@apply font-bold;
}
/* Emphasis/Italic */
.prose em, .prose i {
@apply italic;
}
/* Code */
.prose code {
@apply bg-muted px-1.5 py-0.5 rounded text-sm font-mono;
}
.prose pre {
@apply bg-muted p-4 rounded-lg overflow-x-auto my-4;
}
.prose pre code {
@apply bg-transparent p-0;
}
}