changes
This commit is contained in:
@@ -0,0 +1,179 @@
|
||||
<h2>Hybrid: C's columns + A's card style</h2>
|
||||
<p class="subtitle">Status columns, but each project is a full card with progress bar, %, hours, and task count.</p>
|
||||
|
||||
<style>
|
||||
.preview-page { background:#f3f4f6; padding:18px; border-radius:8px; min-height:340px; font-size:12px;}
|
||||
.preview-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; color:#6b7280;}
|
||||
.preview-head .crumbs { display:flex; gap:6px; align-items:center; color:#374151; font-weight:500;}
|
||||
.preview-head .controls { display:flex; gap:6px;}
|
||||
.ctrl { background:white; border:1px solid #d8dadd; padding:3px 10px; border-radius:6px; font-size:11px;}
|
||||
|
||||
.pill { display:inline-block; padding:2px 8px; border-radius:999px; font-size:10px; font-weight:600;}
|
||||
.pill.green { background:#dcfce7; color:#166534;}
|
||||
.pill.blue { background:#dbeafe; color:#1d4ed8;}
|
||||
.pill.amber { background:#fef3c7; color:#92400e;}
|
||||
.pill.gray { background:#e5e7eb; color:#374151;}
|
||||
|
||||
.cols { display:grid; grid-template-columns: 1fr 1fr 1fr; gap:14px;}
|
||||
.col { background:transparent; }
|
||||
.col-head { display:flex; justify-content:space-between; align-items:center; padding:0 4px 8px; border-bottom:2px solid #e5e7eb; margin-bottom:10px;}
|
||||
.col-head .label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#374151; display:flex; align-items:center; gap:6px;}
|
||||
.dot { width:8px; height:8px; border-radius:99px;}
|
||||
.dot.green { background:#22c55e;}
|
||||
.dot.amber { background:#f59e0b;}
|
||||
.dot.gray { background:#9ca3af;}
|
||||
.col-count { font-size:10px; font-weight:700; color:#6b7280; background:#e5e7eb; padding:2px 7px; border-radius:99px;}
|
||||
|
||||
/* card pulled from option A */
|
||||
.pcard { background:white; border:1px solid #d8dadd; border-radius:10px; padding:11px; margin-bottom:8px; box-shadow:0 1px 0 rgba(15,23,42,.02);}
|
||||
.pcard:hover { border-color:#93c5fd; box-shadow:0 2px 8px rgba(59,130,246,.08);}
|
||||
.pcard .ptitle { font-weight:600; color:#0f172a; margin-bottom:4px; font-size:12px; line-height:1.3;}
|
||||
.pcard .pmeta-row { display:flex; justify-content:space-between; align-items:center; color:#6b7280; font-size:10px; margin-bottom:6px;}
|
||||
.pcard .pbar { height:5px; background:#e5e7eb; border-radius:99px; overflow:hidden; margin-bottom:7px;}
|
||||
.pcard .pbar > span { display:block; height:100%; background:#22c55e;}
|
||||
.pcard .pbar.amber > span { background:#f59e0b;}
|
||||
.pcard .pfooter { display:flex; justify-content:space-between; align-items:center; font-size:10px; color:#6b7280;}
|
||||
.pcard .pfooter .stats { display:flex; gap:5px;}
|
||||
|
||||
.empty { color:#9ca3af; font-size:11px; text-align:center; padding:24px 0; background:white; border:1px dashed #d8dadd; border-radius:10px;}
|
||||
</style>
|
||||
|
||||
<div class="preview-page">
|
||||
<div class="preview-head">
|
||||
<span class="crumbs">🏠 / Projects</span>
|
||||
<div class="controls">
|
||||
<span class="ctrl">🔎 Search…</span>
|
||||
<span class="ctrl">Group: Status ▾</span>
|
||||
<span class="ctrl">Sort: Name ▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cols">
|
||||
|
||||
<!-- ACTIVE -->
|
||||
<div class="col">
|
||||
<div class="col-head">
|
||||
<span class="label"><span class="dot green"></span> Active</span>
|
||||
<span class="col-count">2</span>
|
||||
</div>
|
||||
|
||||
<div class="pcard">
|
||||
<div class="ptitle">S29824</div>
|
||||
<div class="pmeta-row">
|
||||
<span>Westin Healthcare</span>
|
||||
<span>62%</span>
|
||||
</div>
|
||||
<div class="pbar"><span style="width:62%"></span></div>
|
||||
<div class="pfooter">
|
||||
<span class="stats"><span class="pill blue">50 tasks</span><span class="pill green">31 done</span></span>
|
||||
<span>42.5 / 65h</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pcard">
|
||||
<div class="ptitle">S29824 - Internal</div>
|
||||
<div class="pmeta-row">
|
||||
<span>Internal QA</span>
|
||||
<span>0%</span>
|
||||
</div>
|
||||
<div class="pbar amber"><span style="width:8%"></span></div>
|
||||
<div class="pfooter">
|
||||
<span class="stats"><span class="pill blue">1 task</span></span>
|
||||
<span>—</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- IDLE -->
|
||||
<div class="col">
|
||||
<div class="col-head">
|
||||
<span class="label"><span class="dot amber"></span> Idle</span>
|
||||
<span class="col-count">3</span>
|
||||
</div>
|
||||
|
||||
<div class="pcard">
|
||||
<div class="ptitle">Customer Care</div>
|
||||
<div class="pmeta-row">
|
||||
<span>No tasks yet</span>
|
||||
<span>—</span>
|
||||
</div>
|
||||
<div class="pbar"><span style="width:0%"></span></div>
|
||||
<div class="pfooter">
|
||||
<span class="stats"><span class="pill gray">0 tasks</span></span>
|
||||
<span>—</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pcard">
|
||||
<div class="ptitle">Field Service</div>
|
||||
<div class="pmeta-row">
|
||||
<span>No tasks yet</span>
|
||||
<span>—</span>
|
||||
</div>
|
||||
<div class="pbar"><span style="width:0%"></span></div>
|
||||
<div class="pfooter">
|
||||
<span class="stats"><span class="pill gray">0 tasks</span></span>
|
||||
<span>—</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pcard">
|
||||
<div class="ptitle">Internal</div>
|
||||
<div class="pmeta-row">
|
||||
<span>No tasks yet</span>
|
||||
<span>—</span>
|
||||
</div>
|
||||
<div class="pbar"><span style="width:0%"></span></div>
|
||||
<div class="pfooter">
|
||||
<span class="stats"><span class="pill gray">0 tasks</span></span>
|
||||
<span>—</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- DONE -->
|
||||
<div class="col">
|
||||
<div class="col-head">
|
||||
<span class="label"><span class="dot gray"></span> Done</span>
|
||||
<span class="col-count">0</span>
|
||||
</div>
|
||||
<div class="empty">Completed projects will appear here.</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section" style="margin-top:22px">
|
||||
<h3>Open question: how do we decide which column?</h3>
|
||||
<p class="subtitle">Same card design either way; this just determines column placement.</p>
|
||||
|
||||
<div class="options" style="margin-top:12px">
|
||||
|
||||
<div class="option" data-choice="grouping-activity" onclick="toggleSelect(this)">
|
||||
<div class="letter">1</div>
|
||||
<div class="content">
|
||||
<h3>By activity (computed)</h3>
|
||||
<p><b>Active</b> = at least one open task. <b>Idle</b> = no open tasks but project is still open. <b>Done</b> = project is archived/closed. No new fields needed.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="option" data-choice="grouping-status" onclick="toggleSelect(this)">
|
||||
<div class="letter">2</div>
|
||||
<div class="content">
|
||||
<h3>By project status field</h3>
|
||||
<p>Use Odoo's <code>last_update_status</code> (On Track / At Risk / Off Track / On Hold / Done). Five columns is too many for a portal — we'd collapse into 3 buckets.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="option" data-choice="grouping-stage" onclick="toggleSelect(this)">
|
||||
<div class="letter">3</div>
|
||||
<div class="content">
|
||||
<h3>By a custom field on project</h3>
|
||||
<p>Add <code>x_fc_portal_status</code> with three values you control (e.g. Active/Idle/Done). Most flexible, but someone has to maintain it.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="subtitle" style="margin-top:14px">My recommendation: <b>Option 1 — by activity</b>. Zero new fields, columns reflect reality automatically, and it matches what the screenshot already shows ("S29824 has 50 tasks, others have 0").</p>
|
||||
@@ -0,0 +1,151 @@
|
||||
<h2>Pick a layout direction for /my/projects</h2>
|
||||
<p class="subtitle">Click a card to select. We'll iterate on the chosen direction next.</p>
|
||||
|
||||
<style>
|
||||
.preview-page { background: #f3f4f6; padding: 14px; border-radius: 6px; min-height: 240px; font-size: 12px; }
|
||||
.preview-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; color:#6b7280;}
|
||||
.preview-head .crumbs { display:flex; gap:6px; align-items:center;}
|
||||
.pill { display:inline-block; padding:2px 8px; border-radius:999px; font-size:10px; font-weight:600;}
|
||||
.pill.green { background:#dcfce7; color:#166534;}
|
||||
.pill.blue { background:#dbeafe; color:#1d4ed8;}
|
||||
.pill.amber { background:#fef3c7; color:#92400e;}
|
||||
.pill.gray { background:#e5e7eb; color:#374151;}
|
||||
|
||||
/* Option A: card grid */
|
||||
.a-grid { display:grid; grid-template-columns: 1fr 1fr; gap:8px;}
|
||||
.a-card { background:white; border:1px solid #d8dadd; border-radius:8px; padding:10px; }
|
||||
.a-card .a-title { font-weight:600; color:#111827; margin-bottom:4px;}
|
||||
.a-card .a-meta { display:flex; justify-content:space-between; align-items:center; color:#6b7280; font-size:10px;}
|
||||
.a-bar { height:4px; background:#e5e7eb; border-radius:99px; margin-top:6px; overflow:hidden;}
|
||||
.a-bar > span { display:block; height:100%; background:#22c55e;}
|
||||
|
||||
/* Option B: enhanced rows */
|
||||
.b-row { display:flex; align-items:center; padding:9px 12px; background:white; border:1px solid #d8dadd; border-radius:6px; margin-bottom:4px;}
|
||||
.b-row .icon { width:28px; height:28px; border-radius:6px; background:#dbeafe; display:flex;align-items:center;justify-content:center; color:#1d4ed8; font-weight:700; margin-right:10px; font-size:11px;}
|
||||
.b-row .name { flex-grow:1; font-weight:600; color:#111827;}
|
||||
.b-row .stats { display:flex; gap:6px;}
|
||||
.b-row .barwrap { width:80px; height:4px; background:#e5e7eb; border-radius:99px; margin-right:8px;}
|
||||
.b-row .barwrap > span { display:block; height:100%; background:#22c55e;}
|
||||
|
||||
/* Option C: kanban columns */
|
||||
.c-cols { display:grid; grid-template-columns: 1fr 1fr 1fr; gap:8px;}
|
||||
.c-col { background:#fafafa; border:1px solid #e5e7eb; border-radius:8px; padding:8px;}
|
||||
.c-col h4 { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#6b7280; margin:0 0 8px;}
|
||||
.c-card { background:white; border:1px solid #d8dadd; border-radius:6px; padding:8px; margin-bottom:6px; font-size:11px;}
|
||||
.c-card .ct { font-weight:600; color:#111827; margin-bottom:2px;}
|
||||
.c-card .cm { color:#6b7280; font-size:10px;}
|
||||
</style>
|
||||
|
||||
<div class="cards">
|
||||
|
||||
<div class="card" data-choice="a" onclick="toggleSelect(this)">
|
||||
<div class="card-image">
|
||||
<div class="preview-page">
|
||||
<div class="preview-head">
|
||||
<span class="crumbs">🏠 / Projects</span>
|
||||
<span>Sort: Name ▾</span>
|
||||
</div>
|
||||
<div class="a-grid">
|
||||
<div class="a-card">
|
||||
<div class="a-title">S29824</div>
|
||||
<div class="a-meta"><span class="pill blue">50 tasks</span><span>62%</span></div>
|
||||
<div class="a-bar"><span style="width:62%"></span></div>
|
||||
</div>
|
||||
<div class="a-card">
|
||||
<div class="a-title">Customer Care</div>
|
||||
<div class="a-meta"><span class="pill gray">0 tasks</span><span>—</span></div>
|
||||
<div class="a-bar"><span style="width:0%"></span></div>
|
||||
</div>
|
||||
<div class="a-card">
|
||||
<div class="a-title">Field Service</div>
|
||||
<div class="a-meta"><span class="pill gray">0 tasks</span><span>—</span></div>
|
||||
<div class="a-bar"><span style="width:0%"></span></div>
|
||||
</div>
|
||||
<div class="a-card">
|
||||
<div class="a-title">S29824 - Internal</div>
|
||||
<div class="a-meta"><span class="pill blue">1 task</span><span>0%</span></div>
|
||||
<div class="a-bar"><span style="width:0%"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h3>A — Card grid</h3>
|
||||
<p>Each project is a card with name, task count, % complete, and a tiny progress bar. 2-up on desktop, 1-up on mobile. Most "modern dashboard" feel.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" data-choice="b" onclick="toggleSelect(this)">
|
||||
<div class="card-image">
|
||||
<div class="preview-page">
|
||||
<div class="preview-head">
|
||||
<span class="crumbs">🏠 / Projects</span>
|
||||
<span>Sort: Name ▾</span>
|
||||
</div>
|
||||
<div class="b-row">
|
||||
<div class="icon">S2</div>
|
||||
<div class="name">S29824</div>
|
||||
<div class="barwrap"><span style="width:62%"></span></div>
|
||||
<div class="stats"><span class="pill green">62%</span><span class="pill blue">50</span></div>
|
||||
</div>
|
||||
<div class="b-row">
|
||||
<div class="icon" style="background:#fef3c7;color:#92400e">CC</div>
|
||||
<div class="name">Customer Care</div>
|
||||
<div class="barwrap"><span style="width:0%"></span></div>
|
||||
<div class="stats"><span class="pill gray">0%</span><span class="pill gray">0</span></div>
|
||||
</div>
|
||||
<div class="b-row">
|
||||
<div class="icon" style="background:#dcfce7;color:#166534">FS</div>
|
||||
<div class="name">Field Service</div>
|
||||
<div class="barwrap"><span style="width:0%"></span></div>
|
||||
<div class="stats"><span class="pill gray">0%</span><span class="pill gray">0</span></div>
|
||||
</div>
|
||||
<div class="b-row">
|
||||
<div class="icon">S2</div>
|
||||
<div class="name">S29824 - Internal</div>
|
||||
<div class="barwrap"><span style="width:0%"></span></div>
|
||||
<div class="stats"><span class="pill amber">0%</span><span class="pill blue">1</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h3>B — Enhanced rows</h3>
|
||||
<p>Same vertical list, but each row gets an avatar/initials chip, inline progress bar, and badge stats. Closest to the current page; quickest to scan with many projects.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" data-choice="c" onclick="toggleSelect(this)">
|
||||
<div class="card-image">
|
||||
<div class="preview-page">
|
||||
<div class="preview-head">
|
||||
<span class="crumbs">🏠 / Projects</span>
|
||||
<span>Group: Status ▾</span>
|
||||
</div>
|
||||
<div class="c-cols">
|
||||
<div class="c-col">
|
||||
<h4>● Active</h4>
|
||||
<div class="c-card"><div class="ct">S29824</div><div class="cm">50 tasks · 62%</div></div>
|
||||
<div class="c-card"><div class="ct">S29824 - Internal</div><div class="cm">1 task · 0%</div></div>
|
||||
</div>
|
||||
<div class="c-col">
|
||||
<h4>● Idle</h4>
|
||||
<div class="c-card"><div class="ct">Customer Care</div><div class="cm">0 tasks</div></div>
|
||||
<div class="c-card"><div class="ct">Field Service</div><div class="cm">0 tasks</div></div>
|
||||
<div class="c-card"><div class="ct">Internal</div><div class="cm">0 tasks</div></div>
|
||||
</div>
|
||||
<div class="c-col">
|
||||
<h4>● Done</h4>
|
||||
<div style="color:#9ca3af;font-size:10px;text-align:center;padding:16px 0">Nothing here yet</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h3>C — Status columns (kanban-ish)</h3>
|
||||
<p>Projects grouped into columns by activity (Active / Idle / Done). Visually striking but unusual for a customer portal where users mainly browse to drill into one project.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<p class="subtitle" style="margin-top:18px">My recommendation: <b>A — Card grid</b>. It's the most "modern" feel you asked for, scales gracefully to a few or many projects, and gives room for the data we already compute (task counts, % done, hours). B is a strong runner-up if you have lots of projects (20+); C feels overengineered for a portal landing page.</p>
|
||||
@@ -0,0 +1,3 @@
|
||||
<div style="display:flex;align-items:center;justify-content:center;min-height:60vh">
|
||||
<p class="subtitle">Implementing in terminal — check back here only if I push another mockup.</p>
|
||||
</div>
|
||||
@@ -0,0 +1 @@
|
||||
{"reason":"idle timeout","timestamp":1777430092232}
|
||||
@@ -0,0 +1 @@
|
||||
791
|
||||
Reference in New Issue
Block a user