feat: overview 2-column layout — fits on one screen without scroll

This commit is contained in:
wasrusgen 2026-05-29 16:17:20 +03:00
parent acc34cb148
commit 039983a19c

View File

@ -97,7 +97,7 @@ body{font-family:'Inter',sans-serif;background:var(--body-bg);color:var(--text);
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px} .two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
/* ── Stage 0 — Overview Dashboard ───────────────────── */ /* ── Stage 0 — Overview Dashboard ───────────────────── */
.ov-top{background:var(--white);border:1.5px solid var(--border);border-radius:16px;padding:20px 22px;margin-bottom:20px;flex-shrink:0} .ov-top{background:var(--white);border:1.5px solid var(--border);border-radius:13px;padding:14px 18px;margin-bottom:12px;flex-shrink:0}
.ov-top-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px} .ov-top-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.ov-top-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#9CA3AF} .ov-top-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#9CA3AF}
.ov-top-pct{font-size:24px;font-weight:800;color:var(--primary);letter-spacing:-1px} .ov-top-pct{font-size:24px;font-weight:800;color:var(--primary);letter-spacing:-1px}
@ -109,16 +109,16 @@ body{font-family:'Inter',sans-serif;background:var(--body-bg);color:var(--text);
.ov-next-btn{font-size:12px;font-weight:700;color:var(--primary);background:none;border:none;cursor:pointer;font-family:'Inter',sans-serif;white-space:nowrap;padding:0} .ov-next-btn{font-size:12px;font-weight:700;color:var(--primary);background:none;border:none;cursor:pointer;font-family:'Inter',sans-serif;white-space:nowrap;padding:0}
.ov-next-btn:hover{text-decoration:underline} .ov-next-btn:hover{text-decoration:underline}
.ov-stages{display:flex;flex-direction:column;gap:0;position:relative;flex-shrink:0} .ov-stages{display:grid;grid-template-columns:1fr 1fr;gap:10px;flex-shrink:0}
.ov-stages::before{content:'';position:absolute;left:27px;top:20px;bottom:20px;width:2px;background:var(--border);z-index:0} .ov-stage{display:flex;align-items:flex-start;gap:12px;background:var(--white);border:1.5px solid var(--border);border-radius:13px;padding:13px 15px;position:relative;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.ov-stage{display:flex;align-items:flex-start;gap:14px;background:var(--white);border:1.5px solid var(--border);border-radius:14px;padding:16px 18px;margin-bottom:10px;position:relative;cursor:pointer;transition:border-color .15s,box-shadow .15s;z-index:1} .ov-stage:last-child{grid-column:1/-1}
.ov-stage:hover{border-color:#D1D5DB;box-shadow:0 2px 8px rgba(0,0,0,.06)} .ov-stage:hover{border-color:#D1D5DB;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.ov-stage.done{border-color:rgba(16,185,129,.2)} .ov-stage.done{border-color:rgba(16,185,129,.2)}
.ov-stage.active{border-color:var(--primary);box-shadow:0 0 0 3px rgba(4,120,87,.08),0 4px 12px rgba(4,120,87,.12)} .ov-stage.active{border-color:var(--primary);box-shadow:0 0 0 3px rgba(4,120,87,.08),0 4px 12px rgba(4,120,87,.12)}
.ov-stage.locked{opacity:.5;cursor:default} .ov-stage.locked{opacity:.5;cursor:default}
.ov-stage.locked:hover{border-color:var(--border);box-shadow:none} .ov-stage.locked:hover{border-color:var(--border);box-shadow:none}
.ov-num{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;flex-shrink:0} .ov-num{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex-shrink:0}
.ov-stage.done .ov-num{background:var(--light);color:var(--primary);font-size:18px} .ov-stage.done .ov-num{background:var(--light);color:var(--primary);font-size:18px}
.ov-stage.active .ov-num{background:var(--primary);color:#fff;box-shadow:0 4px 10px rgba(4,120,87,.35)} .ov-stage.active .ov-num{background:var(--primary);color:#fff;box-shadow:0 4px 10px rgba(4,120,87,.35)}
.ov-stage.pending .ov-num{background:#FEF9C3;color:#854D0E} .ov-stage.pending .ov-num{background:#FEF9C3;color:#854D0E}
@ -128,7 +128,7 @@ body{font-family:'Inter',sans-serif;background:var(--body-bg);color:var(--text);
.ov-stage-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#9CA3AF;margin-bottom:2px} .ov-stage-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#9CA3AF;margin-bottom:2px}
.ov-stage.done .ov-stage-lbl{color:var(--primary)} .ov-stage.done .ov-stage-lbl{color:var(--primary)}
.ov-stage.active .ov-stage-lbl{color:var(--primary)} .ov-stage.active .ov-stage-lbl{color:var(--primary)}
.ov-stage-name{font-size:15px;font-weight:700;color:var(--text);margin-bottom:4px} .ov-stage-name{font-size:14px;font-weight:700;color:var(--text);margin-bottom:4px}
.ov-stage.locked .ov-stage-name{color:#9CA3AF} .ov-stage.locked .ov-stage-name{color:#9CA3AF}
.ov-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .ov-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ov-meta-tag{font-size:11px;color:#374151;background:var(--subtle);border:1px solid var(--border);border-radius:5px;padding:2px 7px;font-weight:500} .ov-meta-tag{font-size:11px;color:#374151;background:var(--subtle);border:1px solid var(--border);border-radius:5px;padding:2px 7px;font-weight:500}
@ -573,7 +573,6 @@ body{font-family:'Inter',sans-serif;background:var(--body-bg);color:var(--text);
<span class="ov-meta-tag" style="background:#EFF6FF;border-color:#BFDBFE;color:#1E40AF">8 из 12 вопросов</span> <span class="ov-meta-tag" style="background:#EFF6FF;border-color:#BFDBFE;color:#1E40AF">8 из 12 вопросов</span>
<span class="ov-meta-tag" style="background:#FEF3C7;border-color:#FDE68A;color:#92400E">Остался раздел Фёдор</span> <span class="ov-meta-tag" style="background:#FEF3C7;border-color:#FDE68A;color:#92400E">Остался раздел Фёдор</span>
</div> </div>
<div class="ov-mini-bar" style="margin-top:8px"><div class="ov-mini-fill blue" style="width:67%"></div></div>
</div> </div>
<div class="ov-right"> <div class="ov-right">
<span class="ov-status active">В процессе</span> <span class="ov-status active">В процессе</span>
@ -591,7 +590,6 @@ body{font-family:'Inter',sans-serif;background:var(--body-bg);color:var(--text);
<span class="ov-meta-tag">3 из 6 загружено</span> <span class="ov-meta-tag">3 из 6 загружено</span>
<span class="ov-meta-tag" style="background:#FEF3C7;border-color:#FDE68A;color:#92400E">Ждём Сидорова и Козлову</span> <span class="ov-meta-tag" style="background:#FEF3C7;border-color:#FDE68A;color:#92400E">Ждём Сидорова и Козлову</span>
</div> </div>
<div class="ov-mini-bar" style="margin-top:8px"><div class="ov-mini-fill yellow"></div></div>
</div> </div>
<div class="ov-right"> <div class="ov-right">
<span class="ov-status pending">⏳ Неполный</span> <span class="ov-status pending">⏳ Неполный</span>