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:
259
design/tasks_mobile/code.html
Normal file
259
design/tasks_mobile/code.html
Normal file
@@ -0,0 +1,259 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&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"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"surface-bright": "#f7f9fb",
|
||||
"on-tertiary-container": "#ffffff",
|
||||
"tertiary-fixed-dim": "#930013",
|
||||
"tertiary-fixed": "#b91a24",
|
||||
"surface-container": "#eceef0",
|
||||
"on-tertiary-fixed": "#ffffff",
|
||||
"inverse-primary": "#bec6e0",
|
||||
"surface": "#f7f9fb",
|
||||
"primary-container": "#333b50",
|
||||
"surface-variant": "#e0e3e5",
|
||||
"on-tertiary": "#ffdad7",
|
||||
"surface-dim": "#d8dadc",
|
||||
"on-secondary-container": "#0b1c30",
|
||||
"inverse-surface": "#2d3133",
|
||||
"secondary-fixed": "#b7c8e1",
|
||||
"background": "#f7f9fb",
|
||||
"on-primary-fixed": "#ffffff",
|
||||
"outline-variant": "#c6c6c6",
|
||||
"primary": "#000000",
|
||||
"on-secondary-fixed-variant": "#2d3c51",
|
||||
"on-error": "#ffffff",
|
||||
"primary-fixed-dim": "#3f465c",
|
||||
"on-primary-fixed-variant": "#dae2fd",
|
||||
"surface-container-high": "#e6e8ea",
|
||||
"secondary": "#505f76",
|
||||
"on-surface": "#191c1e",
|
||||
"secondary-container": "#c5d6f0",
|
||||
"inverse-on-surface": "#eff1f3",
|
||||
"error-container": "#ffdad6",
|
||||
"on-secondary": "#ffffff",
|
||||
"surface-tint": "#565e74",
|
||||
"on-tertiary-fixed-variant": "#ffdad7",
|
||||
"on-surface-variant": "#474747",
|
||||
"on-secondary-fixed": "#0b1c30",
|
||||
"on-primary": "#dae2fd",
|
||||
"surface-container-low": "#f2f4f6",
|
||||
"tertiary": "#7d000f",
|
||||
"outline": "#777777",
|
||||
"error": "#ba1a1a",
|
||||
"on-background": "#191c1e",
|
||||
"tertiary-container": "#da3437",
|
||||
"on-primary-container": "#ffffff",
|
||||
"on-error-container": "#410002",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"surface-container-highest": "#e0e3e5",
|
||||
"primary-fixed": "#565e74",
|
||||
"secondary-fixed-dim": "#9cacc5"
|
||||
},
|
||||
"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;
|
||||
}
|
||||
.ease-monolith {
|
||||
transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface font-body text-on-surface min-h-screen">
|
||||
<!-- TopAppBar -->
|
||||
<header class="bg-[#f7f9fb] dark:bg-[#020617] text-slate-900 dark:text-slate-50 w-full sticky top-0 z-50 flex items-center justify-between px-6 py-4">
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="hover:bg-slate-200/50 dark:hover:bg-slate-800/50 transition-colors p-2 rounded-md">
|
||||
<span class="material-symbols-outlined" data-icon="menu">menu</span>
|
||||
</button>
|
||||
<h1 class="text-xl font-bold tracking-tighter text-slate-900 dark:text-slate-50">MONOLITH</h1>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button class="hover:bg-slate-200/50 dark:hover:bg-slate-800/50 transition-colors p-2 rounded-md">
|
||||
<span class="material-symbols-outlined" data-icon="search">search</span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Main Content -->
|
||||
<main class="max-w-2xl mx-auto px-6 pt-8 pb-32">
|
||||
<div class="mb-12">
|
||||
<span class="font-headline font-semibold tracking-[0.05em] uppercase text-[13px] text-secondary">Task Manager</span>
|
||||
<h2 class="text-4xl font-semibold tracking-tight text-primary mt-1">Productivity</h2>
|
||||
</div>
|
||||
<!-- Section: High Priority -->
|
||||
<section class="mb-12">
|
||||
<div class="mb-6">
|
||||
<span class="font-headline font-semibold tracking-[0.05em] uppercase text-[13px] text-tertiary">Urgent Action</span>
|
||||
<h3 class="text-xl font-semibold tracking-[-0.01em] text-primary">High Priority</h3>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<!-- Task Card -->
|
||||
<div class="bg-surface-container-lowest p-5 rounded-md flex items-start gap-4 transition-all hover:bg-surface-container-low group">
|
||||
<input class="mt-1 w-5 h-5 rounded border-outline-variant text-primary focus:ring-0" type="checkbox"/>
|
||||
<div class="flex-1">
|
||||
<h4 class="text-lg font-bold leading-tight">Review Q3 Revenue Projections</h4>
|
||||
<p class="text-sm text-secondary mt-1">Ensure alignment with current growth trajectory before board meeting.</p>
|
||||
<div class="flex items-center gap-3 mt-3">
|
||||
<span class="text-[11px] font-semibold uppercase tracking-wider bg-tertiary-container/10 text-tertiary px-2 py-0.5 rounded">Due Today</span>
|
||||
<span class="text-[11px] text-outline font-medium">Finance</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Task Card -->
|
||||
<div class="bg-surface-container-lowest p-5 rounded-md flex items-start gap-4 transition-all hover:bg-surface-container-low group">
|
||||
<input class="mt-1 w-5 h-5 rounded border-outline-variant text-primary focus:ring-0" type="checkbox"/>
|
||||
<div class="flex-1">
|
||||
<h4 class="text-lg font-bold leading-tight">Finalize Acquisition Terms</h4>
|
||||
<p class="text-sm text-secondary mt-1">Review legal documents for Project Phoenix.</p>
|
||||
<div class="flex items-center gap-3 mt-3 text-secondary">
|
||||
<span class="material-symbols-outlined text-[18px]" data-icon="attach_file">attach_file</span>
|
||||
<span class="text-[11px] font-medium uppercase tracking-wider">3 Attachments</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Section: Product Development -->
|
||||
<section class="mb-12">
|
||||
<div class="mb-6">
|
||||
<span class="font-headline font-semibold tracking-[0.05em] uppercase text-[13px] text-secondary">Roadmap</span>
|
||||
<h3 class="text-xl font-semibold tracking-[-0.01em] text-primary">Product Development</h3>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div class="bg-surface-container-lowest p-5 rounded-md flex items-start gap-4 transition-all hover:bg-surface-container-low">
|
||||
<input class="mt-1 w-5 h-5 rounded border-outline-variant text-primary focus:ring-0" type="checkbox"/>
|
||||
<div class="flex-1">
|
||||
<h4 class="text-lg font-bold leading-tight">Implement Bento Grid Components</h4>
|
||||
<p class="text-sm text-secondary mt-1">Modular layout system for the main dashboard views.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-container-lowest p-5 rounded-md flex items-start gap-4 transition-all hover:bg-surface-container-low">
|
||||
<input class="mt-1 w-5 h-5 rounded border-outline-variant text-primary focus:ring-0" type="checkbox"/>
|
||||
<div class="flex-1">
|
||||
<h4 class="text-lg font-bold leading-tight">Define Tonal Layering Spec</h4>
|
||||
<p class="text-sm text-secondary mt-1">Documenting the no-line rule for design-engineering handoff.</p>
|
||||
<div class="flex -space-x-2 mt-4">
|
||||
<div class="w-7 h-7 rounded-full border-2 border-surface overflow-hidden">
|
||||
<img class="w-full h-full object-cover" data-alt="portrait of a professional creative woman with short hair in natural morning light" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBRyRcaHyH2_pACB82fgL600bz8HSk-DBnErdlc7fAuuWlp0runfDwuKzYE7uXDcmCX95G7ly9LS14w05mjCmQPBa_08FrTXUqi0M2QJICAWF43M70gT0_7_L4ZztPGlNdKkdL9S7Ai7ZonDAo2BVIP3nYTqsz5OZPgbijqy-vhNUNN49U9QD0XEQandEmLM_z2ltsnTgt0ZubUnQ56rybuUtq5ehjR2wfTKb6x1bsMcyraH8dlhyYyGwyaWah16Wlc4Ilvjk7XsoqL"/>
|
||||
</div>
|
||||
<div class="w-7 h-7 rounded-full border-2 border-surface overflow-hidden">
|
||||
<img class="w-full h-full object-cover" data-alt="headshot of a focused male product manager in a minimal office setting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBZ9VvHQs7z_UKDWn0VpTDHCCuoEBLmBx-hIRcDqqNeHUrpFEYok56yU5mNfIUo1SD-cFWH4FgSG6gSmAecXUu_j1AYPLVhixheYNt0LHI6gzcYMM4SnQgQYaI6kfTVZrraqm_iugVw02Ab-Gmbe0ye07BoWz1ilkm58XL8H5de54ALBcjdNvGBkV1pn4EGG8V3Lw30TNtKScITPkcq07zI05JFcrJbq_GfsDyNgKvXuLjQa1_-2UJ99P-ovDPhFGAxVIi43aKS4oQ5"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Section: Backlog -->
|
||||
<section>
|
||||
<div class="mb-6">
|
||||
<span class="font-headline font-semibold tracking-[0.05em] uppercase text-[13px] text-secondary">Future Focused</span>
|
||||
<h3 class="text-xl font-semibold tracking-[-0.01em] text-primary">Backlog</h3>
|
||||
</div>
|
||||
<div class="space-y-3 opacity-80">
|
||||
<div class="bg-surface-container-low p-5 rounded-md flex items-start gap-4">
|
||||
<input class="mt-1 w-5 h-5 rounded border-outline-variant text-primary focus:ring-0" type="checkbox"/>
|
||||
<div class="flex-1">
|
||||
<h4 class="text-lg font-bold leading-tight">Explore VR Interface Paradigms</h4>
|
||||
<p class="text-sm text-secondary mt-1">Research phase for spatial editorial content.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-container-low p-5 rounded-md flex items-start gap-4">
|
||||
<input class="mt-1 w-5 h-5 rounded border-outline-variant text-primary focus:ring-0" type="checkbox"/>
|
||||
<div class="flex-1">
|
||||
<h4 class="text-lg font-bold leading-tight">Legacy CSS Audit</h4>
|
||||
<p class="text-sm text-secondary mt-1">Removing unused utility classes from v1.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- Sticky Bottom Input -->
|
||||
<div class="fixed bottom-0 left-0 right-0 z-50">
|
||||
<div class="bg-surface/80 backdrop-blur-xl px-6 py-6 border-none shadow-[0px_-10px_30px_rgba(15,23,42,0.04)]">
|
||||
<div class="max-w-2xl mx-auto">
|
||||
<!-- Quick Chips -->
|
||||
<div class="flex gap-2 mb-4">
|
||||
<button class="px-4 py-1.5 rounded-full bg-slate-200 text-xs font-semibold hover:bg-slate-900 hover:text-white transition-colors">Daily</button>
|
||||
<button class="px-4 py-1.5 rounded-full bg-slate-200 text-xs font-semibold hover:bg-slate-900 hover:text-white transition-colors">Weekly</button>
|
||||
<button class="px-4 py-1.5 rounded-full bg-slate-200 text-xs font-semibold hover:bg-slate-900 hover:text-white transition-colors">Urgent</button>
|
||||
</div>
|
||||
<!-- Input Field -->
|
||||
<div class="relative flex items-center bg-surface-container-low rounded-md px-4 py-3 group transition-all focus-within:bg-surface-container-high">
|
||||
<span class="material-symbols-outlined text-outline group-focus-within:text-primary transition-colors" data-icon="add">add</span>
|
||||
<input class="w-full bg-transparent border-none focus:ring-0 text-primary placeholder:text-outline text-base ml-2" placeholder="Add task to Tasks..." type="text"/>
|
||||
<button class="ml-2 p-1 text-primary-fixed hover:text-primary">
|
||||
<span class="material-symbols-outlined" data-icon="arrow_upward">arrow_upward</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Hidden NavigationDrawer (Structural Placeholder) -->
|
||||
<div class="fixed inset-y-0 left-0 z-[60] flex flex-col py-8 bg-[#f7f9fb] dark:bg-[#020617] h-full w-80 rounded-r-none shadow-[0px_20px_40px_rgba(15,23,42,0.06)] transform -translate-x-full transition-transform duration-300 ease-monolith">
|
||||
<div class="px-8 mb-12">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-12 h-12 rounded-full bg-slate-200 overflow-hidden">
|
||||
<img class="w-full h-full object-cover" data-alt="professional editorial lead portrait with clean background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA6_GWLgnPuE73WUEf4U-WmrM8sd41FnEcrwSJMcoHDHyCLeEVT3ymT5k3jEUWR3OwgVrTfgIDz9ACSxY-dYPWFf02g4803-LXx051H68U6-yNCrRIXXKx2Hy3lQ-8Szu397lu6JzWshaDtNT_5ePrEcQeo2k-7sz3MyMd8nklKvGMkJhdnbL464viJ2lq20y_pvt4CBCxwqWvQxXS8GBxtuOB1ta5ZSIzeDpJxhVsjKiiXiN6OW17lhlk2oihqn77idqxDXpEbKoJb"/>
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-bold text-slate-900 dark:text-slate-50">Editorial Lead</div>
|
||||
<div class="text-[13px] text-slate-500">monolith.editorial@app.com</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="flex-1 space-y-1">
|
||||
<div class="text-slate-600 dark:text-slate-400 mx-4 my-1 px-4 py-3 hover:bg-slate-200 dark:hover:bg-slate-800 transition-colors flex items-center gap-4 cursor-pointer">
|
||||
<span class="material-symbols-outlined" data-icon="format_list_bulleted">format_list_bulleted</span>
|
||||
<span class="font-['Inter'] text-[16px] font-normal">Lists</span>
|
||||
</div>
|
||||
<div class="bg-slate-900 dark:bg-slate-50 text-slate-50 dark:text-slate-900 rounded-md mx-4 my-1 px-4 py-3 flex items-center gap-4 cursor-pointer">
|
||||
<span class="material-symbols-outlined" data-icon="check_circle">check_circle</span>
|
||||
<span class="font-['Inter'] text-[16px] font-normal">Tasks</span>
|
||||
</div>
|
||||
<div class="text-slate-600 dark:text-slate-400 mx-4 my-1 px-4 py-3 hover:bg-slate-200 dark:hover:bg-slate-800 transition-colors flex items-center gap-4 cursor-pointer">
|
||||
<span class="material-symbols-outlined" data-icon="description">description</span>
|
||||
<span class="font-['Inter'] text-[16px] font-normal">Notes</span>
|
||||
</div>
|
||||
<div class="text-slate-600 dark:text-slate-400 mx-4 my-1 px-4 py-3 hover:bg-slate-200 dark:hover:bg-slate-800 transition-colors flex items-center gap-4 cursor-pointer">
|
||||
<span class="material-symbols-outlined" data-icon="search">search</span>
|
||||
<span class="font-['Inter'] text-[16px] font-normal">Search</span>
|
||||
</div>
|
||||
<div class="text-slate-600 dark:text-slate-400 mx-4 my-1 px-4 py-3 hover:bg-slate-200 dark:hover:bg-slate-800 transition-colors flex items-center gap-4 cursor-pointer mt-auto">
|
||||
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
||||
<span class="font-['Inter'] text-[16px] font-normal">User Settings</span>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</body></html>
|
||||
BIN
design/tasks_mobile/screen.png
Normal file
BIN
design/tasks_mobile/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 145 KiB |
Reference in New Issue
Block a user