From 1812870dd33af2c5ae2807dd5f807c288faf1ae9 Mon Sep 17 00:00:00 2001 From: Ochenstarik Date: Sat, 26 Sep 2026 12:58:51 +0700 Subject: [PATCH] feat(portal): align workspace with Krona library --- src/app.ts | 1 + src/portal-design.ts | 21 ++++++++++++ src/portal-ui.ts | 66 ++++++++++++++++++++++++++++-------- tests/unit/portal-ui.test.ts | 28 +++++++++++++++ 4 files changed, 102 insertions(+), 14 deletions(-) create mode 100644 src/portal-design.ts create mode 100644 tests/unit/portal-ui.test.ts diff --git a/src/app.ts b/src/app.ts index 5063848..4539504 100644 --- a/src/app.ts +++ b/src/app.ts @@ -141,6 +141,7 @@ export async function buildApp({ app.get('/staff/manifest.webmanifest', async (_request, reply) => reply.type('application/manifest+json').send(portalManifest)); app.get('/staff/icon-192.svg', async (_request, reply) => reply.type('image/svg+xml').send(portalIcon192)); app.get('/staff/icon-512.svg', async (_request, reply) => reply.type('image/svg+xml').send(portalIcon512)); + app.get('/staff/*', async (_request, reply) => reply.type('text/html; charset=utf-8').send(portalHtml)); app.addHook('onClose', async () => database.close()); return app; diff --git a/src/portal-design.ts b/src/portal-design.ts new file mode 100644 index 0000000..cfeb362 --- /dev/null +++ b/src/portal-design.ts @@ -0,0 +1,21 @@ +export const portalDesignCss = ` +:root{--omni-space-1:4px;--omni-space-2:8px;--omni-space-3:12px;--omni-space-4:16px;--omni-space-5:20px;--omni-space-6:24px;--omni-space-8:32px;--omni-radius-xs:6px;--omni-radius-sm:8px;--omni-radius-md:10px;--omni-radius-lg:12px;--omni-radius-xl:16px;--omni-radius-pill:999px;--omni-touch-target:44px;--omni-z-sticky:1100;--omni-z-modal:1300;--omni-font-family-sans:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--omni-font-family-serif:Georgia,Cambria,"Times New Roman",serif;--omni-text-label:.75rem;--omni-text-body-small:.875rem;--omni-motion-hover:140ms cubic-bezier(.4,0,.2,1);--omni-motion-tabs:180ms cubic-bezier(.4,0,.2,1);--omni-control-height:36px;--omni-control-height-sm:30px;--omni-control-padding-x:12px;--omni-layout-gap:12px;--omni-row-height:40px} +[data-omni-theme="parchment-light"]{--omni-bg-app:#EFE3CC;--omni-bg-workspace:#F3EAD7;--omni-bg-section:#F1E6D2;--omni-surface:#F8F2E6;--omni-surface-raised:#FCF8EF;--omni-surface-muted:#E9DDC5;--omni-surface-hover:#EDE0C7;--omni-surface-selected:#E2D0AD;--omni-text-primary:#302A23;--omni-text-secondary:#756A5B;--omni-text-muted:#9A8E7D;--omni-text-inverse:#FFFFFF;--omni-border:#D9C9AC;--omni-border-subtle:#E5D8C0;--omni-border-strong:#CBB99B;--omni-border-focus:#9A743D;--omni-primary:#9A743D;--omni-primary-hover:#7D5B2D;--omni-primary-active:#684923;--omni-primary-soft:#EADBC1;--omni-gold:#B78335;--omni-gold-soft:#EFE0C2;--omni-success:#657255;--omni-success-soft:#E1E6D8;--omni-warning:#A8752F;--omni-warning-soft:#F2E3C8;--omni-danger:#A44E3F;--omni-danger-soft:#F1DDD5;--omni-info:#5F7480;--omni-info-soft:#DFE6E5;--omni-shadow-soft:0 1px 3px rgba(72,55,34,.06);--omni-shadow-medium:0 6px 18px rgba(72,55,34,.1);--omni-shadow-strong:0 14px 36px rgba(52,39,24,.16)} +[data-omni-theme="noble-green"]{--omni-bg-app:#EDE5D3;--omni-bg-workspace:#F2EAD9;--omni-bg-section:#ECE2CE;--omni-surface:#F8F2E6;--omni-surface-raised:#FCF8EF;--omni-surface-muted:#E6DBC5;--omni-surface-hover:#E3E9DE;--omni-surface-selected:#DCE5D7;--omni-text-primary:#2E302A;--omni-text-secondary:#6B6C60;--omni-text-muted:#8B8C80;--omni-text-inverse:#FFFFFF;--omni-border:#D2CCB9;--omni-border-subtle:#E2DAC8;--omni-border-strong:#9DAA98;--omni-border-focus:#315F46;--omni-primary:#315F46;--omni-primary-hover:#294F3B;--omni-primary-active:#213F30;--omni-primary-soft:#DDE7DB;--omni-gold:#B78335;--omni-gold-soft:#EFE0C2;--omni-success:#3F7557;--omni-success-soft:#DDE9E0;--omni-warning:#A8752F;--omni-warning-soft:#F2E3C8;--omni-danger:#A44E3F;--omni-danger-soft:#F1DDD5;--omni-info:#527286;--omni-info-soft:#DFE7EA;--omni-shadow-soft:0 1px 3px rgba(72,55,34,.06);--omni-shadow-medium:0 6px 18px rgba(72,55,34,.1);--omni-shadow-strong:0 14px 36px rgba(52,39,24,.16)} +[data-omni-theme="graphite-forest-dark"]{--omni-bg-app:#171A18;--omni-bg-workspace:#1D211E;--omni-bg-section:#202620;--omni-surface:#252A26;--omni-surface-raised:#2B312C;--omni-surface-muted:#212621;--omni-surface-hover:#2B342D;--omni-surface-selected:#29382E;--omni-text-primary:#EEE7DA;--omni-text-secondary:#B7B3A8;--omni-text-muted:#888E87;--omni-text-inverse:#171A18;--omni-border:#39423A;--omni-border-subtle:#303831;--omni-border-strong:#465249;--omni-border-focus:#6F9A79;--omni-primary:#527D60;--omni-primary-hover:#648E70;--omni-primary-active:#426A50;--omni-primary-soft:#29382E;--omni-gold:#C99A4D;--omni-gold-soft:#403522;--omni-success:#78916F;--omni-success-soft:#29372D;--omni-warning:#C08A45;--omni-warning-soft:#403422;--omni-danger:#C06B5F;--omni-danger-soft:#432B28;--omni-info:#7693A0;--omni-info-soft:#29363B;--omni-shadow-soft:0 1px 3px rgba(0,0,0,.18);--omni-shadow-medium:0 8px 22px rgba(0,0,0,.24);--omni-shadow-strong:0 16px 40px rgba(0,0,0,.34)} +[data-omni-density="workspace"]{--omni-bg-app:rgb(239 232 216);--omni-bg-workspace:rgb(239 232 218);--omni-bg-section:rgb(233 225 207);--omni-surface:rgb(247 241 227);--omni-surface-raised:rgb(250 245 234);--omni-surface-muted:rgb(238 231 214);--omni-surface-hover:rgb(231 230 211);--omni-surface-selected:rgb(221 231 211);--omni-text-primary:rgb(28 39 34);--omni-text-secondary:rgb(93 109 101);--omni-text-muted:rgb(108 123 116);--omni-border:rgb(211 204 184);--omni-border-subtle:rgb(225 217 198);--omni-border-focus:rgb(35 123 91);--omni-primary:rgb(31 117 85);--omni-primary-hover:rgb(24 96 69);--omni-primary-soft:rgb(230 243 236)} +[data-omni-theme="parchment-light"][data-omni-density="workspace"]{--omni-bg-app:rgb(244 237 220);--omni-bg-workspace:rgb(244 237 222);--omni-surface:rgb(250 245 232);--omni-surface-raised:rgb(252 247 235);--omni-surface-muted:rgb(242 234 216);--omni-surface-selected:rgb(236 221 190);--omni-primary:rgb(133 99 50);--omni-primary-hover:rgb(107 76 33);--omni-primary-soft:rgb(246 239 225)} +[data-omni-theme="graphite-forest-dark"][data-omni-density="workspace"]{--omni-bg-app:rgb(19 24 22);--omni-bg-workspace:rgb(20 26 23);--omni-bg-section:rgb(27 34 30);--omni-surface:rgb(26 33 29);--omni-surface-raised:rgb(35 44 39);--omni-surface-muted:rgb(29 38 33);--omni-surface-hover:rgb(38 49 42);--omni-surface-selected:rgb(39 64 49);--omni-text-primary:rgb(237 243 239);--omni-text-secondary:rgb(171 189 179);--omni-text-muted:rgb(143 164 152);--omni-border:rgb(60 76 66);--omni-border-subtle:rgb(42 54 47);--omni-border-focus:rgb(111 185 144);--omni-primary:rgb(77 147 105);--omni-primary-hover:rgb(93 163 122);--omni-primary-soft:rgb(37 59 45)} +*{box-sizing:border-box}html{background:var(--omni-bg-workspace);color-scheme:light}[data-omni-theme="graphite-forest-dark"]{color-scheme:dark}body{margin:0;min-width:320px;min-height:100vh;background:var(--omni-bg-workspace);color:var(--omni-text-primary);font:400 var(--omni-text-body-small)/1.45 var(--omni-font-family-sans)}button,input,select{font:inherit}button,input,select,.nav-item{outline:none}button:focus-visible,input:focus-visible,select:focus-visible,.nav-item:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--omni-border-focus) 30%,transparent);border-color:var(--omni-border-focus)}button{min-height:var(--omni-control-height);padding:0 var(--omni-control-padding-x);border:1px solid var(--omni-primary);border-radius:var(--omni-radius-sm);background:var(--omni-primary);color:var(--omni-text-inverse);font-weight:650;cursor:pointer;transition:background var(--omni-motion-hover),border-color var(--omni-motion-hover)}button:hover{background:var(--omni-primary-hover);border-color:var(--omni-primary-hover)}button:disabled{opacity:.55;cursor:not-allowed}button.quiet,.quiet{background:var(--omni-surface-raised);border-color:var(--omni-border);color:var(--omni-text-primary)}button.quiet:hover{background:var(--omni-surface-hover);border-color:var(--omni-border-strong)}.compact{min-height:var(--omni-control-height-sm);padding-inline:var(--omni-space-2);font-size:var(--omni-text-label)} +.topbar{position:sticky;top:0;z-index:var(--omni-z-sticky);min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:var(--omni-space-4);padding:var(--omni-space-2) max(var(--omni-space-5),calc((100vw - 1440px)/2));background:color-mix(in srgb,var(--omni-surface-raised) 94%,transparent);border-bottom:1px solid var(--omni-border-subtle);backdrop-filter:blur(14px)}.brand{display:flex;align-items:center;gap:var(--omni-space-3);color:var(--omni-primary);text-decoration:none;white-space:nowrap;font-size:1.08rem}.mark{width:38px;height:38px;display:grid;place-items:center;border-radius:var(--omni-radius-lg);background:var(--omni-primary);color:var(--omni-text-inverse);font:700 1.25rem/1 var(--omni-font-family-serif)}.actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--omni-space-2)}.status,.live,.tag{display:inline-flex;align-items:center;gap:var(--omni-space-1);min-height:26px;padding:0 var(--omni-space-2);border-radius:var(--omni-radius-pill);background:var(--omni-surface-muted);color:var(--omni-text-secondary);font-size:var(--omni-text-label);white-space:nowrap}.status.ok,.live{background:var(--omni-success-soft);color:var(--omni-success)}.status.offline,.anomaly{color:var(--omni-warning)}.theme-control{display:flex;align-items:center;gap:var(--omni-space-2);color:var(--omni-text-secondary);font-size:var(--omni-text-label)}.theme-control select,.period-control input,input,select{min-height:var(--omni-control-height);border:1px solid var(--omni-border);border-radius:var(--omni-radius-sm);background:var(--omni-surface-raised);color:var(--omni-text-primary);padding:0 var(--omni-space-3)} +.section-nav{position:sticky;top:64px;z-index:calc(var(--omni-z-sticky) - 1);display:flex;align-items:center;gap:var(--omni-space-1);padding:var(--omni-space-2) max(var(--omni-space-5),calc((100vw - 1440px)/2));overflow-x:auto;background:color-mix(in srgb,var(--omni-surface) 96%,transparent);border-bottom:1px solid var(--omni-border-subtle);scrollbar-width:thin}.nav-item{flex:0 0 auto;min-height:var(--omni-control-height);border-color:transparent;background:transparent;color:var(--omni-text-secondary)}.nav-item:hover{background:var(--omni-surface-hover);border-color:transparent;color:var(--omni-text-primary)}.nav-item.selected{background:var(--omni-primary-soft);border-color:var(--omni-border);color:var(--omni-primary)}.period-control{display:flex;align-items:center;gap:var(--omni-space-2);margin-left:auto;color:var(--omni-text-secondary);font-size:var(--omni-text-label);white-space:nowrap} +main{width:min(100%,1480px);margin:0 auto;padding:var(--omni-space-5)}.app-view{animation:view-enter var(--omni-motion-tabs)}.hero,.view-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--omni-space-6);margin-bottom:var(--omni-space-4)}.hero{padding:var(--omni-space-5) var(--omni-space-6);border:1px solid var(--omni-border-subtle);border-radius:var(--omni-radius-lg);background:var(--omni-bg-section)}.hero h1,.view-head h1{margin:var(--omni-space-1) 0;font:700 clamp(1.65rem,3vw,2.3rem)/1.1 var(--omni-font-family-sans);letter-spacing:-.025em}.hero p,.view-head p{margin:0;color:var(--omni-text-secondary)}.eyebrow{margin:0;color:var(--omni-primary);font-size:var(--omni-text-label);font-weight:750;letter-spacing:.04em;text-transform:uppercase}.today{min-width:190px;padding-left:var(--omni-space-5);border-left:1px solid var(--omni-border)}.today span,.today small{display:block;color:var(--omni-text-secondary)}.today strong{display:block;margin:var(--omni-space-1) 0;font-size:1.1rem}.message,.login-error{margin-bottom:var(--omni-space-3);padding:var(--omni-space-3) var(--omni-space-4);border:1px solid var(--omni-warning);border-radius:var(--omni-radius-md);background:var(--omni-warning-soft);color:var(--omni-text-primary)} +.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--omni-layout-gap);margin-bottom:var(--omni-layout-gap)}.stats article,.panel{border:1px solid var(--omni-border-subtle);border-radius:var(--omni-radius-lg);background:var(--omni-surface-raised);box-shadow:var(--omni-shadow-soft)}.stats article{position:relative;min-height:96px;padding:var(--omni-space-4);overflow:hidden}.stats article:before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--omni-primary)}.stats span{display:block;color:var(--omni-text-secondary)}.stats strong{display:block;margin-top:var(--omni-space-2);font-size:clamp(1.55rem,3vw,2.1rem);font-variant-numeric:tabular-nums}.panel{padding:var(--omni-space-4)}.layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.75fr);gap:var(--omni-layout-gap)}.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--omni-space-3);margin-bottom:var(--omni-space-3)}.panel-head h2{margin:var(--omni-space-1) 0 0;font-size:1.05rem}.feed,.people{display:grid;gap:var(--omni-space-2)}.event,.person{display:grid;align-items:center;gap:var(--omni-space-3);min-height:56px;padding:var(--omni-space-2) var(--omni-space-3);border:1px solid var(--omni-border-subtle);border-radius:var(--omni-radius-md);background:var(--omni-surface)}.event{grid-template-columns:38px minmax(0,1fr) auto}.person{grid-template-columns:38px minmax(0,1fr) auto auto}.event:hover,.person:hover{background:var(--omni-surface-hover)}.avatar,.event-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:var(--omni-radius-pill);background:var(--omni-primary-soft);color:var(--omni-primary);font-weight:750}.event-icon{border-radius:var(--omni-radius-sm)}.event strong,.person strong,.event small,.person small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.event small,.person small,.event time{color:var(--omni-text-secondary);font-size:var(--omni-text-label)}.empty{padding:var(--omni-space-6);text-align:center;color:var(--omni-text-secondary);background:var(--omni-surface-muted);border-radius:var(--omni-radius-md)}.directory-toolbar{display:flex;align-items:center;gap:var(--omni-space-2);margin-bottom:var(--omni-space-3)}.directory-toolbar input{flex:1;min-width:180px}.directory-list .person{min-height:64px} +.timesheet-panel{margin-top:var(--omni-layout-gap)}.table-wrap{width:100%;overflow:auto;border:1px solid var(--omni-border-subtle);border-radius:var(--omni-radius-md)}table{width:100%;min-width:760px;border-collapse:collapse;background:var(--omni-surface-raised)}th,td{height:var(--omni-row-height);padding:var(--omni-space-2) var(--omni-space-3);border-bottom:1px solid var(--omni-border-subtle);text-align:left;vertical-align:middle}th{position:sticky;top:0;z-index:1;background:var(--omni-surface-muted);color:var(--omni-text-secondary);font-size:var(--omni-text-label);font-weight:700;white-space:nowrap}tbody tr:hover{background:var(--omni-surface-hover)}td{font-variant-numeric:tabular-nums}td input,td select{width:100%}.timesheet-create{display:grid;grid-template-columns:repeat(4,minmax(110px,1fr)) minmax(180px,2fr) auto;align-items:end;gap:var(--omni-space-2);padding:var(--omni-space-3);margin-bottom:var(--omni-space-3);background:var(--omni-surface-muted);border-radius:var(--omni-radius-md)}.timesheet-create label,.stack-form label,.inline-form label,.employee-dialog label{display:grid;gap:var(--omni-space-1);color:var(--omni-text-secondary);font-size:var(--omni-text-label);font-weight:650} +.finance-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,.7fr);gap:var(--omni-layout-gap);margin-bottom:var(--omni-layout-gap)}.stack-form{display:grid;gap:var(--omni-space-3)}.inline-form{display:grid;grid-template-columns:repeat(6,minmax(110px,1fr)) auto;align-items:end;gap:var(--omni-space-2)}.finance-chart{min-height:280px}.finance-chart svg{display:block;width:100%;height:280px}.chart-legend{display:flex;gap:var(--omni-space-4);color:var(--omni-text-secondary);font-size:var(--omni-text-label)}.legend-dot{display:inline-block;width:9px;height:9px;margin-right:var(--omni-space-1);border-radius:var(--omni-radius-pill)}.income-dot{background:var(--omni-primary)}.expense-dot{background:var(--omni-gold)}.calendar-panel{overflow:auto}.calendar-weekdays,.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(140px,1fr));min-width:980px}.calendar-weekdays span{padding:var(--omni-space-2);color:var(--omni-text-secondary);text-align:center;font-size:var(--omni-text-label);font-weight:700}.calendar-day{min-height:132px;padding:var(--omni-space-2);border-top:1px solid var(--omni-border-subtle);border-right:1px solid var(--omni-border-subtle);background:var(--omni-surface-raised)}.calendar-day:hover{background:var(--omni-surface-hover)}.calendar-day.outside{opacity:.55}.calendar-day.today{box-shadow:inset 0 0 0 2px var(--omni-border-focus)}.day-number{display:block;margin-bottom:var(--omni-space-2);font-weight:750}.shift-card{margin:var(--omni-space-1) 0;padding:var(--omni-space-2);border-left:3px solid var(--omni-primary);border-radius:var(--omni-radius-xs);background:var(--omni-primary-soft);font-size:var(--omni-text-label)}.shift-card.actual{border-left-color:var(--omni-gold);background:var(--omni-gold-soft)}.shift-card strong,.shift-card span{display:block}.positive{color:var(--omni-success)}.negative{color:var(--omni-danger)} +.employee-dialog{width:min(92vw,620px);max-height:90vh;padding:0;overflow:auto;border:1px solid var(--omni-border);border-radius:var(--omni-radius-xl);background:var(--omni-surface-raised);color:var(--omni-text-primary);box-shadow:var(--omni-shadow-strong)}.employee-dialog::backdrop{background:rgb(10 16 13 / 52%);backdrop-filter:blur(3px)}.employee-dialog form{display:grid;gap:var(--omni-space-3);padding:var(--omni-space-6)}.dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--omni-space-3)}.dialog-head h2{margin:var(--omni-space-1) 0;font-size:1.5rem}.dialog-actions{display:flex;justify-content:flex-end;gap:var(--omni-space-2)}.icon-button{min-width:var(--omni-control-height);padding:0;background:var(--omni-surface-raised);border-color:var(--omni-border);color:var(--omni-text-primary)}.role-note,.employee-dialog small{color:var(--omni-text-secondary)}.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--omni-space-3)}.pay-profile-section{display:grid;gap:var(--omni-space-3);padding:var(--omni-space-3);background:var(--omni-surface-muted);border-radius:var(--omni-radius-md)}.payroll-warnings{background:var(--omni-warning-soft)}.session-actions{display:flex;gap:var(--omni-space-1)}.anomaly{display:block;margin-top:var(--omni-space-1);font-size:var(--omni-text-label)}footer{padding:var(--omni-space-6);color:var(--omni-text-muted);text-align:center;font-size:var(--omni-text-label)} +.auth-screen{min-height:100vh;display:grid;place-items:center;padding:var(--omni-space-6);background:var(--omni-bg-workspace)}.auth-card{width:min(100%,460px);padding:var(--omni-space-8);border:1px solid var(--omni-border);border-radius:var(--omni-radius-xl);background:var(--omni-surface-raised);box-shadow:var(--omni-shadow-strong)}.auth-brand{display:flex;align-items:center;gap:var(--omni-space-3);margin-bottom:var(--omni-space-8);font-size:1.2rem}.auth-card h1{margin:var(--omni-space-1) 0 var(--omni-space-3);font-size:1.875rem}.auth-copy{margin:0 0 var(--omni-space-5);color:var(--omni-text-secondary)}.auth-card form{display:grid;gap:var(--omni-space-2)}.auth-card label{font-size:var(--omni-text-label);font-weight:700}.auth-card input,.auth-card button{width:100%;min-height:48px}.auth-card small{display:block;margin-top:var(--omni-space-4);color:var(--omni-text-secondary)}@keyframes view-enter{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}} +@media(max-width:900px){:root{--omni-control-height:44px;--omni-control-height-sm:40px;--omni-row-height:48px}.topbar{align-items:flex-start;flex-wrap:wrap;padding:var(--omni-space-3) var(--omni-space-4)}.actions{width:100%;justify-content:flex-start;overflow-x:auto}.section-nav{top:108px;padding-inline:var(--omni-space-4)}.period-control{margin-left:var(--omni-space-2)}main{padding:var(--omni-space-4)}.layout,.finance-layout{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.inline-form{grid-template-columns:repeat(2,minmax(0,1fr))}.inline-form button{grid-column:1/-1}.timesheet-create{grid-template-columns:repeat(2,minmax(0,1fr))}.timesheet-create .grow,.timesheet-create button{grid-column:1/-1}} +@media(max-width:600px){.status,.theme-control{display:none}.section-nav{top:112px}.nav-item{min-height:var(--omni-touch-target)}main{padding:var(--omni-space-3)}.hero,.view-head{display:block}.hero{padding:var(--omni-space-4)}.today{margin-top:var(--omni-space-4);padding:var(--omni-space-3) 0 0;border-left:0;border-top:1px solid var(--omni-border)}.view-head button,.view-head .actions{margin-top:var(--omni-space-3)}.stats{grid-template-columns:1fr}.panel{padding:var(--omni-space-3)}.event{grid-template-columns:36px minmax(0,1fr)}.event time{grid-column:2}.person{grid-template-columns:36px minmax(0,1fr)}.person button{grid-column:2;width:100%}.directory-toolbar{align-items:stretch;flex-direction:column}.timesheet-create,.inline-form,.form-row-2{grid-template-columns:1fr}.calendar-weekdays,.calendar-grid{min-width:840px;grid-template-columns:repeat(7,120px)}.employee-dialog form{padding:var(--omni-space-4)}} +@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}} +`; diff --git a/src/portal-ui.ts b/src/portal-ui.ts index 1620026..ed48987 100644 --- a/src/portal-ui.ts +++ b/src/portal-ui.ts @@ -1,3 +1,5 @@ +import { portalDesignCss } from './portal-design.js'; + export const portalHtml = ` @@ -12,7 +14,6 @@ export const portalHtml = ` -
@@ -36,10 +37,11 @@ export const portalHtml = `
Подключение…
@@ -61,6 +63,11 @@ export const portalHtml = `

Сверка терминала

Рабочие смены

ДатаСотрудникПодразделениеИнтервалЧасыСостояниеПричина правки

Учёт времени

Табель за 40 дней

Изменения сохраняет руководитель
ДатаСотрудникЧасыСтатусПримечание
+