Phase 8: Project Management, find bar, presence and motion
The Project Management screen (/pm, view only) with Overview, Projects & units, Bottlenecks & aging, Hours vs target, Quality & issues and Find jobs, the period picker, health per unit and per project, drill down, Excel (CSV) per table and for all, and the PESCO production status report PDF with the controlled-copy stamp; every export logged as "report exported". The find bar on every home screen: the full search set, the dropdowns, quick flags with Mine, the flag kinds, Board and List with sorts, filters saved per browser; every filter applied by the server on the list and the boards, with facets. Presence in packets with role, lock and revoke drop; the motion switch with reduced motion honoured, card glides, glow and count-up; Back restores the scroll spot; sheet placement and the iPad layout pass. The data book compared page by page with the old build and six layout differences fixed. Tests for the PM aggregates, search, filters, presence and exports; Playwright scenarios for the PM screen, the find bar and presence at desktop and iPad viewports. Docs updated; PLAN.md questions 38 to 42. Co-Authored-By: Claude Fable 5.1 <[email protected]>
This commit is contained in:
Claude Fable 5.1
@@ -639,3 +639,119 @@ a.itpcard { flex-direction: row; text-align: left; }
|
||||
.ck-item.prow .t .small { display: block; margin-top: 2px; font-weight: 400; }
|
||||
.prints { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
|
||||
.callout .acts .grow { min-width: 240px; }
|
||||
|
||||
/* Phase 8: Project Management. From .pmtabs, .pmscope, .pmk, .pmsum, .pmbars, .pmbar, .slowtag, .pmtable. */
|
||||
.pmtabs { position: static; margin: 14px 0 10px; }
|
||||
.pmtabs button { font-size: 15px; }
|
||||
.pmscope { margin: -6px 0 14px; }
|
||||
.pmk { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
|
||||
.pmk .kpi .n { font-size: 38px; }
|
||||
.pmsum h3 { margin-bottom: 6px; }
|
||||
.pmsum ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; color: var(--near); }
|
||||
.pmbars { display: flex; flex-direction: column; gap: 6px; }
|
||||
.pmbar { display: grid; grid-template-columns: minmax(150px, 240px) minmax(0, 1fr) minmax(130px, 200px); gap: 12px; align-items: center; font-size: 13.5px; }
|
||||
.pmbar .lb { color: var(--body); }
|
||||
.pmbar .tr { height: 14px; background: var(--line); border-radius: 3px; overflow: hidden; }
|
||||
.pmbar .tr i { display: block; height: 100%; background: var(--cyan); border-radius: 0 4px 4px 0; min-width: 0; }
|
||||
.pmbar.hot .tr i { background: var(--pink); }
|
||||
.pmbar.zero { opacity: .5; }
|
||||
.pmbar .v { color: var(--near); font-variant-numeric: tabular-nums; }
|
||||
.slowtag { color: var(--pink); font-weight: 700; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
|
||||
.pmtable td { font-size: 13.5px; }
|
||||
.pmtable tr.flag td { color: #ffb3d6; }
|
||||
.pmtable tr.sub td { background: rgba(255, 255, 255, .02); font-size: 13px; }
|
||||
.pmtable tr.rowlink:hover td { background: rgba(73, 192, 222, .08); }
|
||||
.motion .m-enter .pmbar .tr i { transform-origin: left center; animation: mgrow .6s .15s cubic-bezier(.2, .7, .2, 1) both; }
|
||||
/* New: the period select's width, the note under a table heading, sideways scroll for wide report tables. */
|
||||
.pmper { min-width: 170px; }
|
||||
.pmnote { margin: -4px 0 8px; }
|
||||
.pmtable { min-width: 720px; }
|
||||
@media (max-width: 640px) {
|
||||
.pmbar { grid-template-columns: 1fr; gap: 4px; }
|
||||
.pmbar .v { font-size: 12.5px; }
|
||||
}
|
||||
|
||||
/* Phase 8: find bar, motion, layout. From the old .fltbar, .fltrow, .fltadv, .fltbtns, .fltn, .fltrow2 .chip,
|
||||
.projsum, .joblist rows, .mbtn, .mdot, .m-enter, .m-tab, .m-bump and the motion keyframes. Then the sheet
|
||||
placement and the iPad and phone widths, which are new in the rebuild. */
|
||||
.fltrow .f { flex: 1 1 160px; min-width: 130px; }
|
||||
.fltrow .f select, .fltrow .f input { width: 100%; }
|
||||
.fltrow .fltq { flex: 3 1 320px; }
|
||||
.fltrow .fltp { flex: 1.4 1 260px; }
|
||||
.fltbtns { flex-wrap: wrap; }
|
||||
.fltbtns .btn { min-height: 44px; }
|
||||
.fltbtns .btn.on { border-color: var(--cyan); color: var(--cyan); }
|
||||
.fltn { display: inline-grid; place-items: center; min-width: 20px; height: 20px; border-radius: 10px; background: var(--cyan); color: #06222b; font-size: 12px; padding: 0 5px; }
|
||||
.fltadv { padding-top: 2px; }
|
||||
.fltrow2 .chip { min-height: 36px; padding: 5px 12px; font-size: 13px; }
|
||||
.fltbar .projsum { padding: 8px 10px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
|
||||
.joblist-sec .sec-h { flex-wrap: wrap; align-items: flex-end; }
|
||||
.jlsort { display: flex; flex-direction: column; gap: 4px; min-width: 200px; }
|
||||
.jlsort > span { font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
|
||||
.joblist tr.rowlink:focus td { background: rgba(73, 192, 222, .08); }
|
||||
.cardw { border-radius: 10px; }
|
||||
.cardw > .card { height: 100%; }
|
||||
.presence { flex-wrap: wrap; }
|
||||
|
||||
/* The Motion switch in the top bar. */
|
||||
.mbtn { display: inline-flex; align-items: center; gap: 6px; }
|
||||
.mbtn .mdot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
|
||||
|
||||
/* Motion, only under body.motion. Reduced motion never gets the class, and the rule at the top stops it anyway. */
|
||||
@keyframes menter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
|
||||
@keyframes mtab { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
|
||||
@keyframes mgrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
|
||||
@keyframes mglow { 0% { box-shadow: 0 0 0 0 rgba(73, 192, 222, 0); } 15% { box-shadow: 0 0 0 3px rgba(73, 192, 222, .75), 0 0 22px rgba(73, 192, 222, .45); } 100% { box-shadow: 0 0 0 0 rgba(73, 192, 222, 0); } }
|
||||
@keyframes mlive { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
|
||||
@keyframes mbump { 30% { color: var(--cyan); } }
|
||||
.motion .m-enter > * { animation: menter .32s cubic-bezier(.2, .7, .2, 1) both; }
|
||||
.motion .m-enter > *:nth-child(2) { animation-delay: .04s; }
|
||||
.motion .m-enter > *:nth-child(3) { animation-delay: .08s; }
|
||||
.motion .m-enter > *:nth-child(4) { animation-delay: .12s; }
|
||||
.motion .m-enter > *:nth-child(5) { animation-delay: .16s; }
|
||||
.motion .m-enter > *:nth-child(n+6) { animation-delay: .2s; }
|
||||
.motion .m-enter .bar i, .motion .m-enter .pbar i { transform-origin: left center; animation: mgrow .6s .15s cubic-bezier(.2, .7, .2, 1) both; }
|
||||
.motion .m-tab { animation: mtab .2s cubic-bezier(.2, .7, .2, 1) both; }
|
||||
.motion .m-changed { animation: mglow 1.7s ease-out; }
|
||||
.motion .m-bump .n { animation: mbump .5s ease-out; }
|
||||
.motion .card, .motion .kpi, .motion .projhit, .motion .chip, .motion .btn { transition: border-color .15s, background-color .15s, transform .15s, box-shadow .15s; }
|
||||
.motion .card:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 0, 0, .28); }
|
||||
.motion .tabs button { transition: color .15s, border-color .2s; }
|
||||
.motion .mbtn .mdot { background: var(--cyan); animation: mlive 2.2s ease-in-out infinite; }
|
||||
|
||||
/* Sheets on phones: at least 8 px to every edge, sitting low where the thumb is, scrolling inside when tall.
|
||||
Above 700 px the sheet stays centred with 16 px to every edge (the .scrim and .sheet rules above). */
|
||||
@media (max-width: 700px) {
|
||||
.scrim { align-items: flex-end; padding: 8px 8px max(8px, env(safe-area-inset-bottom, 0px)); }
|
||||
.sheet { margin: auto 0 0; width: 100%; max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); padding: 16px; }
|
||||
.sheet.narrow { width: 100%; }
|
||||
}
|
||||
|
||||
/* iPad landscape and narrow desktop windows. */
|
||||
@media (max-width: 1024px) {
|
||||
.board { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
|
||||
.whboard { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
|
||||
.kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
.tw { overflow-x: auto; -webkit-overflow-scrolling: touch; }
|
||||
.joblist { min-width: 860px; }
|
||||
.pmtable { min-width: 720px; }
|
||||
.fltrow .fltq { flex-basis: 100%; }
|
||||
}
|
||||
/* iPad portrait: the board columns stack, each with its own heading and scroll frame. */
|
||||
@media (max-width: 820px) {
|
||||
.board, .whboard { grid-template-columns: minmax(0, 1fr); }
|
||||
.col { max-height: min(var(--col-max, 520px), calc(100vh - var(--toph, 64px) - 40px)); }
|
||||
}
|
||||
/* Phones. */
|
||||
@media (max-width: 700px) {
|
||||
.kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.col { max-height: none; }
|
||||
.fltrow .f { flex: 1 1 calc(50% - 8px); min-width: 0; }
|
||||
.fltrow .fltq, .fltrow .fltp { flex-basis: 100%; }
|
||||
.fltbtns { flex: 1 1 100%; }
|
||||
.fltbtns .seg { margin-left: auto; }
|
||||
.fltrow2 .grow { display: none; }
|
||||
.jlsort { min-width: 0; flex: 1 1 100%; }
|
||||
.kpi .n { font-size: 34px; }
|
||||
button.kpi::after { display: none; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user