oier/collective-lists
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
0e4ada008399de521a4825fa594da561a26bfbe6
collective-lists/design/tasks_view/code.html
Oier Bravo Urtasun ee962991e1 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>
2026-04-13 13:36:52 +02:00

256 lines
15 KiB
HTML
Raw Blame History

<!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&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"secondary": "#505f76",
"surface-container-lowest": "#ffffff",
"primary-fixed": "#565e74",
"primary": "#000000",
"secondary-fixed": "#b7c8e1",
"on-primary-fixed-variant": "#dae2fd",
"primary-fixed-dim": "#3f465c",
"on-surface": "#191c1e",
"tertiary-fixed": "#b91a24",
"surface-bright": "#f7f9fb",
"on-primary": "#dae2fd",
"on-tertiary-fixed": "#ffffff",
"inverse-surface": "#2d3133",
"on-tertiary-fixed-variant": "#ffdad7",
"inverse-primary": "#bec6e0",
"on-error": "#ffffff",
"primary-container": "#333b50",
"on-error-container": "#410002",
"background": "#f7f9fb",
"error": "#ba1a1a",
"surface-container-highest": "#e0e3e5",
"surface-container": "#eceef0",
"surface-dim": "#d8dadc",
"surface-container-low": "#f2f4f6",
"on-secondary-container": "#0b1c30",
"secondary-container": "#c5d6f0",
"outline": "#777777",
"surface": "#f7f9fb",
"on-tertiary": "#ffdad7",
"outline-variant": "#c6c6c6",
"on-surface-variant": "#474747",
"error-container": "#ffdad6",
"on-primary-fixed": "#ffffff",
"secondary-fixed-dim": "#9cacc5",
"on-primary-container": "#ffffff",
"inverse-on-surface": "#eff1f3",
"tertiary-container": "#da3437",
"on-tertiary-container": "#ffffff",
"surface-variant": "#e0e3e5",
"on-secondary-fixed": "#0b1c30",
"on-secondary-fixed-variant": "#2d3c51",
"on-secondary": "#ffffff",
"tertiary": "#7d000f",
"tertiary-fixed-dim": "#930013",
"surface-tint": "#565e74",
"surface-container-high": "#e6e8ea",
"on-background": "#191c1e"
},
"borderRadius": {
"DEFAULT": "0.125rem",
"lg": "0.25rem",
"xl": "0.5rem",
"full": "0.75rem"
},
"fontFamily": {
"headline": ["Inter"],
"body": ["Inter"],
"label": ["Inter"]
}
},
},
}
</script>
<style>
body { font-family: 'Inter', sans-serif; }
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
</style>
</head>
<body class="bg-surface text-on-surface antialiased selection:bg-slate-200">
<aside class="hidden lg:flex flex-col border-r-0 h-full w-64 fixed left-0 top-0 bg-slate-50 dark:bg-slate-950 z-40">
<div class="p-6">
<div class="flex items-center gap-3 mb-8">
<div class="w-8 h-8 rounded-lg bg-slate-900 flex items-center justify-center text-white text-xs font-bold">C</div>
<div>
<h1 class="text-xl font-semibold tracking-tight text-slate-900 dark:text-slate-50">Colectivo</h1>
<p class="text-[10px] uppercase tracking-widest text-slate-500 font-medium">Shared Workspace</p>
</div>
</div>
<nav class="space-y-1">
<a class="flex items-center gap-3 px-3 py-2 text-slate-500 dark:text-slate-400 hover:bg-slate-200 dark:hover:bg-slate-800 transition-colors rounded-md scale-95 duration-150 ease-in-out group" href="#">
<span class="material-symbols-outlined text-[20px]">shopping_cart</span>
<span class="text-[13px] normal-case">Lists</span>
</a>
<a class="flex items-center gap-3 px-3 py-2 text-slate-900 dark:text-slate-50 font-semibold bg-slate-200/50 dark:bg-slate-800/50 rounded-md scale-95 duration-150 ease-in-out" href="#">
<span class="material-symbols-outlined text-[20px]" style="font-variation-settings: 'FILL' 1;">check_box</span>
<span class="text-[13px] normal-case">Tasks</span>
</a>
<a class="flex items-center gap-3 px-3 py-2 text-slate-500 dark:text-slate-400 hover:bg-slate-200 dark:hover:bg-slate-800 transition-colors rounded-md scale-95 duration-150 ease-in-out group" href="#">
<span class="material-symbols-outlined text-[20px]">description</span>
<span class="text-[13px] normal-case">Notes</span>
</a>
<a class="flex items-center gap-3 px-3 py-2 text-slate-500 dark:text-slate-400 hover:bg-slate-200 dark:hover:bg-slate-800 transition-colors rounded-md scale-95 duration-150 ease-in-out group" href="#">
<span class="material-symbols-outlined text-[20px]">search</span>
<span class="text-[13px] normal-case">Search</span>
</a>
</nav>
</div>
<div class="mt-auto p-6 border-t border-slate-200/10">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-full bg-slate-200 overflow-hidden">
<img class="w-full h-full object-cover" data-alt="professional portrait of a creative director in a minimalist studio with soft natural lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAQ6aSavkZyVTuU4XnJejAjUgex0Z6akdteALzjOo1-wAfhEx6ZNxQ3BWWjlCy3NSGSs8qcuR0hB3RscX13XawCVHkJqbg8zpLYSEfqffDLdVQi2ev_-OsQxTW1mMI2yzB48zHdJvwdBUvbk7i4Ec7_2neByGxfFhhUUVjuSeMrjngqFAKtcOByUnFw7X7joXyg93G5K_NtReENJBW5Hwd1KZxdbwZDAiW6-quqOyWEUmv2U4F-KxXvjL85xjHEly8GU1m3AeyrvdV2"/>
</div>
<div class="flex-1 min-w-0">
<p class="text-xs font-semibold text-slate-900 truncate">Alex Rivera</p>
<p class="text-[10px] text-slate-500 truncate">Pro Plan</p>
</div>
<span class="material-symbols-outlined text-slate-400 text-[18px]">settings</span>
</div>
</div>
</aside>
<main class="lg:ml-64 min-h-screen flex flex-col relative pb-32">
<header class="sticky top-0 z-30 bg-slate-50/90 backdrop-blur-md flex justify-between items-center h-14 px-4 lg:px-12 w-full">
<div class="flex items-center gap-4 lg:hidden">
<span class="material-symbols-outlined">menu</span>
<span class="text-lg font-bold">Colectivo</span>
</div>
<div class="hidden lg:block">
<p class="text-[11px] font-semibold uppercase tracking-[0.15em] text-slate-400 mb-0.5">Project Atlas</p>
<h2 class="text-xl font-semibold text-slate-900 tracking-tight">Tasks</h2>
</div>
<div class="flex items-center gap-2">
<div class="flex -space-x-2 mr-4">
<img class="w-6 h-6 rounded-full border-2 border-slate-50 object-cover" data-alt="portrait of a man with glasses smiling in a bright office environment" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAbuQiMzOaaE_DIq4WEyWsj-vicDlV1NKtgWk36mWJhLZVPUGNEu4Y9iyPx9-QG6Rzvhd3e-qzw13oJbKnztNkuJPonJPNyibE99sde22SHj-mZa6CW1mswmC_cFlZP2Vg9uWnyLI-Ma5bIBOd3lQebVXym1GemjzWCRBxzohu4MHGZvX6Lv-i8S3zxcQTQJL7x5DBf07NHRLblbPCqwU838sveBlr24dUN3yTfpw_2lBoLz88OQPeOpJjW2g-prx2jaO5yc0GbXK4U"/>
<img class="w-6 h-6 rounded-full border-2 border-slate-50 object-cover" data-alt="portrait of a woman laughing in a garden with warm golden sunlight" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAOJMxmAKi84xZwAmIsTVFR3I6dDakUqS1dEsUuMwjt47PTqwc5odkmXCf9Z4JxyeR1HsehHId5BeXiGueOyKGQFLKauHSbGb7okscCeJh3EhHHwwHvQZW5EcYtXPe0nfp5k-z5Pq6ARIK9ovfp6bls10dv0087W7R7FWEGluLpu2j5BUge1fj6jFDw25S1amcmGVDyvfvBtGq6ioHrMDVpWkhU7Efq9nplBENr9g53dK6zaK1rKMuCaLxir25whfdQSVCPq4wcTknh"/>
<div class="w-6 h-6 rounded-full border-2 border-slate-50 bg-slate-200 flex items-center justify-center text-[10px] font-bold">+3</div>
</div>
<button class="p-2 text-slate-500 hover:text-slate-900 transition-colors opacity-80 active:opacity-100">
<span class="material-symbols-outlined">more_vert</span>
</button>
</div>
</header>
<section class="max-w-4xl w-full mx-auto px-6 py-8 flex-grow">
<div class="mb-10">
<h3 class="text-[13px] font-semibold uppercase tracking-widest text-slate-400 mb-4">High Priority</h3>
<div class="space-y-1">
<div class="group flex items-center py-3 px-4 hover:bg-white transition-all rounded-xl border border-transparent hover:border-slate-100 hover:shadow-sm">
<span class="material-symbols-outlined text-slate-300 opacity-0 group-hover:opacity-100 cursor-grab active:cursor-grabbing mr-4 transition-opacity text-[20px]">drag_indicator</span>
<div class="flex-grow flex items-center gap-4">
<input class="w-5 h-5 rounded border-slate-300 text-slate-900 focus:ring-slate-900/10" type="checkbox"/>
<span class="text-[15px] text-slate-800 font-medium">Finalize Q4 strategy deck for stakeholders</span>
</div>
<div class="hidden md:flex items-center gap-3">
<span class="text-[11px] font-semibold text-slate-400 bg-slate-100 px-2 py-0.5 rounded-full uppercase tracking-wider">Today</span>
</div>
</div>
<div class="group flex items-center py-3 px-4 hover:bg-white transition-all rounded-xl border border-transparent hover:border-slate-100 hover:shadow-sm">
<span class="material-symbols-outlined text-slate-300 opacity-0 group-hover:opacity-100 cursor-grab mr-4 text-[20px]">drag_indicator</span>
<div class="flex-grow flex items-center gap-4">
<input class="w-5 h-5 rounded border-slate-300 text-slate-900" type="checkbox"/>
<span class="text-[15px] text-slate-800 font-medium">Coordinate with design on monolith brand tokens</span>
</div>
<div class="hidden md:flex items-center gap-3">
<span class="text-[11px] font-semibold text-slate-400 px-2 py-0.5 uppercase tracking-wider">Urgent</span>
</div>
</div>
</div>
</div>
<div class="mb-10">
<h3 class="text-[13px] font-semibold uppercase tracking-widest text-slate-400 mb-4">Product Development</h3>
<div class="space-y-1">
<div class="group flex items-center py-3 px-4 hover:bg-white transition-all rounded-xl border border-transparent hover:border-slate-100">
<span class="material-symbols-outlined text-slate-300 opacity-0 group-hover:opacity-100 cursor-grab mr-4 text-[20px]">drag_indicator</span>
<div class="flex-grow flex items-center gap-4">
<input class="w-5 h-5 rounded border-slate-300 text-slate-900" type="checkbox"/>
<span class="text-[15px] text-slate-800 font-medium">Core API Integration</span>
</div>
</div>
<div class="ml-12 border-l-2 border-slate-100 pl-4 space-y-1">
<div class="group flex items-center py-2 px-4 hover:bg-white transition-all rounded-xl border border-transparent hover:border-slate-100">
<div class="flex-grow flex items-center gap-4">
<input class="w-4 h-4 rounded border-slate-300 text-slate-900" type="checkbox"/>
<span class="text-[14px] text-slate-600">Review documentation for Auth endpoints</span>
</div>
</div>
<div class="group flex items-center py-2 px-4 hover:bg-white transition-all rounded-xl border border-transparent hover:border-slate-100">
<div class="flex-grow flex items-center gap-4">
<input checked="" class="w-4 h-4 rounded border-slate-300 text-slate-900" type="checkbox"/>
<span class="text-[14px] text-slate-400 line-through">Map database schema to editorial structure</span>
</div>
</div>
</div>
<div class="group flex items-center py-3 px-4 hover:bg-white transition-all rounded-xl border border-transparent hover:border-slate-100">
<span class="material-symbols-outlined text-slate-300 opacity-0 group-hover:opacity-100 cursor-grab mr-4 text-[20px]">drag_indicator</span>
<div class="flex-grow flex items-center gap-4">
<input class="w-5 h-5 rounded border-slate-300 text-slate-900" type="checkbox"/>
<span class="text-[15px] text-slate-800 font-medium">User testing: Editorial workflow</span>
</div>
</div>
</div>
</div>
<div>
<h3 class="text-[13px] font-semibold uppercase tracking-widest text-slate-400 mb-4">Backlog</h3>
<div class="space-y-1">
<div class="group flex items-center py-3 px-4 hover:bg-white transition-all rounded-xl border border-transparent hover:border-slate-100">
<span class="material-symbols-outlined text-slate-300 opacity-0 group-hover:opacity-100 cursor-grab mr-4 text-[20px]">drag_indicator</span>
<div class="flex-grow flex items-center gap-4">
<input class="w-5 h-5 rounded border-slate-300 text-slate-900" type="checkbox"/>
<span class="text-[15px] text-slate-800 font-medium">Update dependency libraries</span>
</div>
</div>
</div>
</div>
</section>
</main>
<div class="fixed bottom-0 left-0 right-0 lg:left-64 z-50 p-4 lg:p-8">
<div class="max-w-3xl mx-auto space-y-4">
<div class="flex gap-2 justify-center">
<button class="px-4 py-1.5 rounded-full text-[11px] font-semibold uppercase tracking-wider transition-all bg-slate-900 text-white scale-100">Daily</button>
<button class="px-4 py-1.5 rounded-full text-[11px] font-semibold uppercase tracking-wider transition-all bg-slate-200 text-slate-600 hover:bg-slate-300">Weekly</button>
<button class="px-4 py-1.5 rounded-full text-[11px] font-semibold uppercase tracking-wider transition-all bg-slate-200 text-slate-600 hover:bg-slate-300">Urgent</button>
</div>
<div class="bg-slate-50/80 dark:bg-slate-950/80 backdrop-blur-xl rounded-2xl shadow-[0px_20px_40px_rgba(15,23,42,0.12)] border border-slate-200/50 dark:border-slate-800/50 p-2 flex items-center gap-3">
<div class="p-2 ml-1">
<span class="material-symbols-outlined text-slate-400">add_circle</span>
</div>
<input class="flex-grow bg-transparent border-none focus:ring-0 text-[15px] placeholder:text-slate-400 py-3" placeholder="Add task to Tasks..." type="text"/>
<button class="bg-slate-900 text-white px-4 py-2 rounded-xl text-sm font-semibold hover:bg-black transition-colors mr-1">
Save
</button>
</div>
</div>
</div>
<nav class="lg:hidden fixed bottom-0 left-0 w-full z-50 flex justify-around items-center h-16 px-6 bg-slate-50/80 dark:bg-slate-950/80 backdrop-blur-xl border-t border-slate-200/20 dark:border-slate-800/20">
<a class="text-slate-400 active:scale-90 transition-transform" href="#">
<span class="material-symbols-outlined text-[26px]">shopping_cart</span>
</a>
<a class="text-slate-900 active:scale-90 transition-transform" href="#">
<span class="material-symbols-outlined text-[26px]" style="font-variation-settings: 'FILL' 1;">check_box</span>
</a>
<a class="text-slate-400 active:scale-90 transition-transform" href="#">
<span class="material-symbols-outlined text-[26px]">description</span>
</a>
<a class="text-slate-400 active:scale-90 transition-transform" href="#">
<span class="material-symbols-outlined text-[26px]">search</span>
</a>
</nav>
</body></html>
Reference in New Issue View Git Blame Copy Permalink