180 lines
7.3 KiB
HTML
180 lines
7.3 KiB
HTML
<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>
|