docs(fase-5): plan mobile UX rewrite ("Monolith Editorial")
- Add plan/fase-5-mobile-ux.md with 7-chunk breakdown:
5.0 mobile tests (Playwright mobile-shell/masthead/swipe-delete + Vitest helpers)
5.1 responsive shell (MobileTopBar + BottomTabBar + MobileDrawer)
5.2 ScreenMasthead + px-4/md:px-6 pass
5.3 /lists mobile cards
5.4 /lists/[id] rows + red-zone swipe-delete
5.5 undoQueue store + UndoToast
5.6 scrollable frequency chips
5.7 tasks/notes/search shell + masthead
5.Z verify 211 + new M-series green
- Explicit gap analysis vs. current app + deliberate exclusions
(no priority badges, no voice search, no fake meta like "Dairy · Weekly")
- Index design/ directory: Stitch mockups per screen (mobile + desktop variants),
plus the "Monolith Editorial" DESIGN.md directing tonal shifts, masthead
typography, glassmorphism, and the no-line rule
- Relocate DESIGN.md under design/slate_collective/DESIGN.md (old entry point) —
the current design direction lives at design/DESIGN.md
- Reference design/ from CLAUDE.md + add Fase 5 to README phase index
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
246
design/grocery_list_crud/code.html
Normal file
246
design/grocery_list_crud/code.html
Normal file
@@ -0,0 +1,246 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"surface-tint": "#565e74",
|
||||
"on-tertiary-fixed-variant": "#ffdad7",
|
||||
"error-container": "#ffdad6",
|
||||
"surface-container": "#eceef0",
|
||||
"primary-fixed-dim": "#3f465c",
|
||||
"outline-variant": "#c6c6c6",
|
||||
"inverse-on-surface": "#eff1f3",
|
||||
"tertiary-container": "#da3437",
|
||||
"on-tertiary-container": "#ffffff",
|
||||
"surface": "#f7f9fb",
|
||||
"on-primary": "#dae2fd",
|
||||
"tertiary": "#7d000f",
|
||||
"inverse-primary": "#bec6e0",
|
||||
"on-surface": "#191c1e",
|
||||
"on-secondary": "#ffffff",
|
||||
"tertiary-fixed-dim": "#930013",
|
||||
"secondary-container": "#c5d6f0",
|
||||
"on-background": "#191c1e",
|
||||
"tertiary-fixed": "#b91a24",
|
||||
"secondary-fixed": "#b7c8e1",
|
||||
"surface-container-low": "#f2f4f6",
|
||||
"on-tertiary-fixed": "#ffffff",
|
||||
"on-secondary-fixed-variant": "#2d3c51",
|
||||
"secondary-fixed-dim": "#9cacc5",
|
||||
"background": "#f7f9fb",
|
||||
"surface-dim": "#d8dadc",
|
||||
"surface-container-high": "#e6e8ea",
|
||||
"on-error": "#ffffff",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"error": "#ba1a1a",
|
||||
"on-tertiary": "#ffdad7",
|
||||
"primary-fixed": "#565e74",
|
||||
"on-surface-variant": "#474747",
|
||||
"inverse-surface": "#2d3133",
|
||||
"surface-container-highest": "#e0e3e5",
|
||||
"on-primary-fixed-variant": "#dae2fd",
|
||||
"on-error-container": "#410002",
|
||||
"on-primary-container": "#ffffff",
|
||||
"outline": "#777777",
|
||||
"on-secondary-container": "#0b1c30",
|
||||
"surface-bright": "#f7f9fb",
|
||||
"primary": "#000000",
|
||||
"on-secondary-fixed": "#0b1c30",
|
||||
"primary-container": "#333b50",
|
||||
"on-primary-fixed": "#ffffff",
|
||||
"surface-variant": "#e0e3e5",
|
||||
"secondary": "#505f76"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline": ["Inter"],
|
||||
"body": ["Inter"],
|
||||
"label": ["Inter"]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.swipe-reveal {
|
||||
clip-path: inset(0 0 0 15%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface text-on-surface font-body selection:bg-primary selection:text-white">
|
||||
<!-- SideNavBar Anchor -->
|
||||
<aside class="h-screen w-64 fixed left-0 top-0 bg-slate-50 dark:bg-slate-900 flex flex-col py-8 px-4 z-50">
|
||||
<div class="mb-12 px-2">
|
||||
<h1 class="text-xl font-semibold tracking-tighter text-slate-900 dark:text-slate-50">Colectivo</h1>
|
||||
<p class="text-[10px] font-semibold uppercase tracking-[0.1em] text-slate-400 mt-1">The Monolith Editorial</p>
|
||||
</div>
|
||||
<nav class="flex-1 space-y-2">
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 rounded-md hover:bg-slate-200 transition-colors text-slate-500 dark:text-slate-400" href="#">
|
||||
<span class="material-symbols-outlined">home</span>
|
||||
<span class="text-sm font-semibold uppercase tracking-wider">Home</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 rounded-md text-slate-900 dark:text-white font-semibold" href="#">
|
||||
<span class="material-symbols-outlined">list_alt</span>
|
||||
<span class="text-sm font-semibold uppercase tracking-wider">My Lists</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 rounded-md hover:bg-slate-200 transition-colors text-slate-500 dark:text-slate-400" href="#">
|
||||
<span class="material-symbols-outlined">group</span>
|
||||
<span class="text-sm font-semibold uppercase tracking-wider">Shared</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 rounded-md hover:bg-slate-200 transition-colors text-slate-500 dark:text-slate-400" href="#">
|
||||
<span class="material-symbols-outlined">inventory_2</span>
|
||||
<span class="text-sm font-semibold uppercase tracking-wider">Pantry</span>
|
||||
</a>
|
||||
<div class="pt-8 mt-8 border-t border-slate-200/0">
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 rounded-md hover:bg-slate-200 transition-colors text-slate-500 dark:text-slate-400" href="#">
|
||||
<span class="material-symbols-outlined">settings</span>
|
||||
<span class="text-sm font-semibold uppercase tracking-wider">Settings</span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="mt-auto px-2 flex items-center gap-3">
|
||||
<img alt="User profile" class="w-8 h-8 rounded-full grayscale object-cover" data-alt="Professional portrait of a curator in a minimalist art gallery setting, soft cinematic lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB8NCwueEiqM3xRmAaHO7D0d1WVXbCFX8Adj2KLyhXWYx4aiviqOGElFB1_zeEHgNzn82r1gduX73pRMJr0jKKePNBi-GJOj4Ip0VIn5N0aBxGq9UEh3HFckbaMYIJltDWk0Q8F2iRJckUWVkRQfMwjqja3g5_kn3-HQIIqKoWiSTeaDIuCJ-qFH9GjNBSlwcXDBVGM7STEa_zvRJMNVmP6sifR6NP9a7FqjmB7UsXVfGAIfmF3p-wgl4l8BtULSG9Q-niTOwmTaOek"/>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-xs font-semibold text-slate-900">Julian Voss</span>
|
||||
<span class="text-[10px] text-slate-400">Editor-in-Chief</span>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content Wrapper -->
|
||||
<main class="ml-64 min-h-screen flex flex-col bg-surface relative">
|
||||
<!-- TopNavBar Anchor -->
|
||||
<header class="flex justify-between items-center w-full px-12 py-10 bg-surface">
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[11px] font-semibold uppercase tracking-[0.15em] text-slate-500 mb-1">Active Ledger</span>
|
||||
<h2 class="text-2xl font-semibold text-slate-900">Grocery List</h2>
|
||||
</div>
|
||||
<!-- Presence Avatars -->
|
||||
<div class="flex -space-x-2 ml-4">
|
||||
<img alt="Collaborator 1" class="w-7 h-7 rounded-full border-2 border-surface object-cover grayscale" data-alt="Close-up portrait of a designer with glasses in a bright studio environment, modern editorial style" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD0eRUROmFcjE8Kzk9zsM9bzJQNnOTvBIfMdm16VR-GvHWI4ZzdoIqyMWd9nCjlz8kGvPiTxe6XKtrB55v4hIgyq2oNJMea_-wCIUc1pt8j3QI_3c-Pis1vTdsK_zMly7r-HnAIvceIzLBVZP28tCX7648-MlxF1p2DsZs7NQZeigU3onCzUychQdFW48Pw4dr9DQQgL4sXH1foh_DWmjg5J3g7X5WXFRZNPrNeWImPcOMImAtimeCe3wfBIy6isOajg0BVIPUGAuaH"/>
|
||||
<img alt="Collaborator 2" class="w-7 h-7 rounded-full border-2 border-surface object-cover grayscale" data-alt="Portrait of a young creative professional woman with a minimalist aesthetic, warm natural light" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBhzT61n3rWO0T1OLsXd-CX2q33i5jw9tTpXT3QWFts2l9re6oaRFMdd2C6QUQ7tWVtqyD0HRnv_JCcU4HS6u_qG3txMLpOCSZNIJHzyG8JuSx_mgM_IDuxKwd7HAy2mOqhdi8oA9c61wfWtf26dAwTlHLM2IbABje2k1ZDl2gbstHfv1K3M9PyQ-mZnqHggHfmx8I3r0tV-OXeYxfGxpH0PjR5LIu1mRAX_J4jx2o8UB5Ujd7b_ASvIq594fdRUroyS7V2ocUT6H1Y"/>
|
||||
<div class="w-7 h-7 rounded-full border-2 border-surface bg-slate-200 flex items-center justify-center text-[10px] font-bold text-slate-600">+1</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="p-2 hover:opacity-70 transition-opacity flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-slate-900">more_vert</span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<!-- List Content (The Canvas) -->
|
||||
<div class="flex-1 px-12 pb-48 max-w-4xl">
|
||||
<!-- Category: Produce -->
|
||||
<section class="mb-12">
|
||||
<div class="mb-4">
|
||||
<span class="text-[11px] font-semibold uppercase tracking-[0.15em] text-slate-400">Section 01</span>
|
||||
<h3 class="text-lg font-semibold text-slate-900">Produce</h3>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<div class="group flex items-center py-4 px-2 hover:bg-surface-container-low rounded-lg transition-colors">
|
||||
<input class="w-5 h-5 rounded border-slate-300 text-slate-900 focus:ring-0" type="checkbox"/>
|
||||
<div class="flex flex-1 justify-between items-center ml-4">
|
||||
<span class="text-slate-800">Honeycrisp Apples</span>
|
||||
<span class="text-sm font-semibold text-slate-400 uppercase tracking-tighter">6 Units</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group flex items-center py-4 px-2 hover:bg-surface-container-low rounded-lg transition-colors">
|
||||
<input class="w-5 h-5 rounded border-slate-300 text-slate-900 focus:ring-0" type="checkbox"/>
|
||||
<div class="flex flex-1 justify-between items-center ml-4">
|
||||
<span class="text-slate-800">Organic Baby Spinach</span>
|
||||
<span class="text-sm font-semibold text-slate-400 uppercase tracking-tighter">2 Bags</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Category: Dairy -->
|
||||
<section class="mb-12">
|
||||
<div class="mb-4">
|
||||
<span class="text-[11px] font-semibold uppercase tracking-[0.15em] text-slate-400">Section 02</span>
|
||||
<h3 class="text-lg font-semibold text-slate-900">Dairy</h3>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<!-- Swipe-to-delete demonstration -->
|
||||
<div class="relative overflow-hidden rounded-lg group">
|
||||
<div class="absolute inset-0 bg-red-500 flex items-center justify-end px-6">
|
||||
<span class="material-symbols-outlined text-white">restore_from_trash</span>
|
||||
</div>
|
||||
<div class="relative flex items-center py-4 px-2 bg-surface hover:bg-surface-container-low transition-colors transform -translate-x-12">
|
||||
<input class="w-5 h-5 rounded border-slate-300 text-slate-900 focus:ring-0" type="checkbox"/>
|
||||
<div class="flex flex-1 justify-between items-center ml-4">
|
||||
<span class="text-slate-800 font-medium">Whole milk 1L</span>
|
||||
<span class="text-sm font-semibold text-slate-400 uppercase tracking-tighter">2 Cartons</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group flex items-center py-4 px-2 hover:bg-surface-container-low rounded-lg transition-colors">
|
||||
<input class="w-5 h-5 rounded border-slate-300 text-slate-900 focus:ring-0" type="checkbox"/>
|
||||
<div class="flex flex-1 justify-between items-center ml-4">
|
||||
<span class="text-slate-800">Salted Butter</span>
|
||||
<span class="text-sm font-semibold text-slate-400 uppercase tracking-tighter">250g</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Category: Bakery -->
|
||||
<section class="mb-12">
|
||||
<div class="mb-4">
|
||||
<span class="text-[11px] font-semibold uppercase tracking-[0.15em] text-slate-400">Section 03</span>
|
||||
<h3 class="text-lg font-semibold text-slate-900">Bakery</h3>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<div class="group flex items-center py-4 px-2 hover:bg-surface-container-low rounded-lg transition-colors">
|
||||
<input class="w-5 h-5 rounded border-slate-300 text-slate-900 focus:ring-0" type="checkbox"/>
|
||||
<div class="flex flex-1 justify-between items-center ml-4">
|
||||
<span class="text-slate-800">Sourdough Loaf</span>
|
||||
<span class="text-sm font-semibold text-slate-400 uppercase tracking-tighter">1 Unit</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<!-- Sticky Bottom Input Shell -->
|
||||
<div class="fixed bottom-0 left-64 right-0 p-8 z-40">
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<!-- Frequency Chips -->
|
||||
<div class="flex flex-wrap gap-2 mb-4 justify-center">
|
||||
<button class="px-4 py-1.5 rounded-full bg-slate-200 text-slate-600 text-xs font-semibold uppercase tracking-widest hover:bg-slate-300 transition-colors">Milk</button>
|
||||
<button class="px-4 py-1.5 rounded-full bg-slate-900 text-white text-xs font-semibold uppercase tracking-widest transition-colors">Bread</button>
|
||||
<button class="px-4 py-1.5 rounded-full bg-slate-200 text-slate-600 text-xs font-semibold uppercase tracking-widest hover:bg-slate-300 transition-colors">Eggs</button>
|
||||
<button class="px-4 py-1.5 rounded-full bg-slate-200 text-slate-600 text-xs font-semibold uppercase tracking-widest hover:bg-slate-300 transition-colors">Coffee</button>
|
||||
<button class="px-4 py-1.5 rounded-full bg-slate-200 text-slate-600 text-xs font-semibold uppercase tracking-widest hover:bg-slate-300 transition-colors">Apples</button>
|
||||
</div>
|
||||
<!-- The Monolith Input -->
|
||||
<div class="bg-surface/80 backdrop-blur-xl p-2 rounded-xl flex items-center gap-3 shadow-2xl shadow-slate-200">
|
||||
<div class="flex-1 relative">
|
||||
<input class="w-full bg-slate-100 border-none rounded-lg py-4 px-6 focus:ring-2 focus:ring-slate-900 text-slate-900 placeholder:text-slate-400 font-medium" placeholder="Add Item (e.g. Greek Yogurt 500g)" type="text"/>
|
||||
<div class="absolute right-4 top-1/2 -translate-y-1/2 flex items-center gap-2">
|
||||
<span class="text-[10px] font-bold text-slate-300 uppercase tracking-widest mr-2">Cmd + N</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="bg-slate-900 text-white p-4 rounded-lg flex items-center justify-center hover:scale-[0.98] transition-transform">
|
||||
<span class="material-symbols-outlined">add</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body></html>
|
||||
Reference in New Issue
Block a user