8d4ff3400e
Dogfood pe import + Trimiteri (mobil/tableta <1024px), pur CSS + markup, backend
trimitere neatins:
- Card compact real pentru .tabel-trimiteri (preview + Trimiteri): vehicul=titlu,
stare=pill dreapta-sus, operatie+cod, meta data/km muted, nota mica. Inlocuieste
stiva generica eticheta+valoare (carduri de ~450px -> ~135px). Anuleaza regula
desktop tr.trimitere-row > td{padding:11px} in blocul compact.
- FIX editare preview: OOB swap pe <tr> esua tacit in htmx 1.9 (un <tr> brut se
pierde la parsarea unui fragment fara context de tabel) -> randul ramanea cu
starea veche dupa salvare. Inlocuit cu reload complet al preview-ului prin
HX-Trigger:reincarcaPreview + detalii randSalvat. /editeaza si /confirma-review
folosesc helper-ul _raspuns_rand_salvat.
- Feedback post-salvare: toast global "Randul N actualizat · <stare>" + scroll +
flash pe randul actualizat (base.html window.arataToast + listener randSalvat).
- Modal editare: Salveaza + Anuleaza pe acelasi rand (sistem .act): desktop text,
mobil doua iconite Lucide 44px alaturate (save/x). Macro icon('x') + .act-primary.
- Randuri deja-trimise/duplicate colapsate implicit in preview + toggle "Arata N".
- Select "Operatii de mapat" full-width pe mobil (nu mai iese din viewport).
- Bara de filtre Trimiteri adaptata mobil: pills pe banda cu scroll orizontal,
cautare vehicul proeminenta (nu 8 butoane full-width stivuite).
- Nota preview = culoarea camp-fix (accent) ca sa atraga atentia; hint-urile
camp-fix per-camp scoase (campul Note e self-explanatory).
- Confirmare trimitere: scos campul email (Declarant); text mai clar
("Confirma numarul din N gata de trimis"). Backend confirmed_by ramane optional.
Teste: contractul OOB (rupt in browser) inlocuit cu noul contract
(reincarcaPreview + randSalvat) in test_web_preview_edit / test_preview_edit_ui /
test_import_review. Suita: 992 passed (exclus live).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
1185 lines
72 KiB
HTML
1185 lines
72 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ro">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>{% block title %}Gateway RAR AUTOPASS{% endblock %}</title>
|
||
<script src="/static/htmx.min.js"></script>
|
||
<script>
|
||
// Raspunsurile de editare-rand contin un <tr> (swap pe rand) PLUS
|
||
// elemente OOB non-rand (#preview-rezumat, #preview-ok-count). Fara fragmente-template,
|
||
// htmx parseaza raspunsul care incepe cu <tr> in context de tabel (<table><tbody>) si
|
||
// "foster-parent"-eaza div/span-urile OOB afara din fragment -> swapError + contoare pierdute.
|
||
// useTemplateFragments parseaza tot intr-un <template>, pastrand rand + OOB impreuna.
|
||
htmx.config.useTemplateFragments = true;
|
||
</script>
|
||
<script>
|
||
// Anti-FOUC: citeste preferinta tema din localStorage inainte de primul
|
||
// paint; seteaza data-theme pe <html> sincron, fara blink.
|
||
// Cunoaste toate cele 4 teme: light/dark/petrol/auto. Valoare legacy/necunoscuta -> auto.
|
||
// 'auto' se rezolva la 'light' sau 'dark' dupa prefers-color-scheme (fara blink).
|
||
(function() {
|
||
var VALID = {light:1, dark:1, petrol:1, auto:1};
|
||
try {
|
||
var t = localStorage.getItem('theme');
|
||
if (!t || !VALID[t]) t = 'auto'; // fallback: valoare lipsa sau legacy -> auto
|
||
if (t === 'auto') {
|
||
t = window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
|
||
}
|
||
document.documentElement.setAttribute('data-theme', t);
|
||
} catch(e) {
|
||
document.documentElement.setAttribute('data-theme', 'dark');
|
||
}
|
||
})();
|
||
</script>
|
||
<style>
|
||
/* IBM Plex Sans + Mono self-hosted (latin-ext pentru diacritice romanesti).
|
||
font-display:swap permite text vizibil inainte de incarcare (FOUT system-ui->IBM Plex);
|
||
reflow-ul vizibil pe VIN/coduri e acceptat explicit. */
|
||
@font-face {
|
||
font-family: "IBM Plex Sans";
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
font-display: swap;
|
||
src: url("/static/fonts/IBMPlexSans-Regular-latin-ext.woff2") format("woff2");
|
||
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF;
|
||
}
|
||
@font-face {
|
||
font-family: "IBM Plex Sans";
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
font-display: swap;
|
||
src: url("/static/fonts/IBMPlexSans-Regular-latin.woff2") format("woff2");
|
||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+20AC, U+2122, U+FEFF, U+FFFD;
|
||
}
|
||
@font-face {
|
||
font-family: "IBM Plex Sans";
|
||
font-style: normal;
|
||
font-weight: 500;
|
||
font-display: swap;
|
||
src: url("/static/fonts/IBMPlexSans-Medium-latin-ext.woff2") format("woff2");
|
||
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF;
|
||
}
|
||
@font-face {
|
||
font-family: "IBM Plex Sans";
|
||
font-style: normal;
|
||
font-weight: 500;
|
||
font-display: swap;
|
||
src: url("/static/fonts/IBMPlexSans-Medium-latin.woff2") format("woff2");
|
||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+20AC, U+2122, U+FEFF, U+FFFD;
|
||
}
|
||
@font-face {
|
||
font-family: "IBM Plex Sans";
|
||
font-style: normal;
|
||
font-weight: 700;
|
||
font-display: swap;
|
||
src: url("/static/fonts/IBMPlexSans-Bold-latin-ext.woff2") format("woff2");
|
||
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF;
|
||
}
|
||
@font-face {
|
||
font-family: "IBM Plex Sans";
|
||
font-style: normal;
|
||
font-weight: 700;
|
||
font-display: swap;
|
||
src: url("/static/fonts/IBMPlexSans-Bold-latin.woff2") format("woff2");
|
||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+20AC, U+2122, U+FEFF, U+FFFD;
|
||
}
|
||
@font-face {
|
||
font-family: "IBM Plex Mono";
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
font-display: swap;
|
||
src: url("/static/fonts/IBMPlexMono-Regular-latin-ext.woff2") format("woff2");
|
||
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF;
|
||
}
|
||
@font-face {
|
||
font-family: "IBM Plex Mono";
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
font-display: swap;
|
||
src: url("/static/fonts/IBMPlexMono-Regular-latin.woff2") format("woff2");
|
||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+20AC, U+2122, U+FEFF, U+FFFD;
|
||
}
|
||
/* Paleta dark (default) — accent azur ROMFAST */
|
||
:root { --bg:#0f1218; --card:#181c24; --ink:#e6e9ef; --muted:#8b93a7; --line:#262b36;
|
||
--ok:#2FBF8F; --warn:#E0A93B; --err:#E05D5D; --accent:#2E74D6; }
|
||
/* Paleta light — accent azur inchis pentru contrast AA pe alb (#1F66C9: 5.51:1 pe alb) */
|
||
[data-theme="light"] { --bg:#f5f7fa; --card:#ffffff; --ink:#1a1d24; --muted:#5c6473; --line:#e2e5ea;
|
||
--ok:#15803d; --warn:#b45309; --err:#dc2626; --accent:#1F66C9; }
|
||
/* Paleta Petrol — tema intunecata alternativa, accent teal #0E7C7B.
|
||
Wordmark-ul FAST #2E74D6 coexista armonios: ambele sunt reci/saturate, contrast AA pe --card #161e20. */
|
||
[data-theme="petrol"] { --bg:#0e1416; --card:#161e20; --ink:#e6e9ef; --muted:#8b93a7; --line:#232c2e;
|
||
--ok:#2FBF8F; --warn:#E0A93B; --err:#E05D5D; --accent:#0E7C7B; }
|
||
* { box-sizing:border-box; }
|
||
/* CONVENTIE BREAKPOINT: un singur prag mobil la 768px.
|
||
CSS custom properties NU functioneaza in `@media`, deci pragul nu poate fi o
|
||
variabila; folosim consecvent `@media (max-width:767px)` peste tot (mobil) si
|
||
`@media (max-width:1024px)` doar pentru densitatea tabelului. >=1024px = layout
|
||
desktop neschimbat (fara regresie). Orice regula mobila noua reutilizeaza 767px. */
|
||
body { margin:0; font:15px/1.5 "IBM Plex Sans",system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
|
||
background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; }
|
||
/* Grila 3 coloane — stanga (logo ROMFAST) | centru (titlu+env) | dreapta (controale). */
|
||
header { padding:16px 24px; border-bottom:1px solid var(--line);
|
||
display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; min-height:92px; }
|
||
.header-left { display:flex; align-items:center; }
|
||
.header-center { display:flex; flex-direction:column; align-items:center; text-align:center; }
|
||
.header-right { display:flex; align-items:center; justify-content:flex-end; gap:8px; }
|
||
/* Logo ROMFAST aliniat stanga; transparent, ok pe dark/light/petrol fara filtre de culoare. */
|
||
.brand-logo { height:60px; width:auto; display:block; margin:0; }
|
||
.header-center .env { font-size:11px; margin-top:2px; }
|
||
header h1 { font-size:20px; margin:0; font-weight:700; letter-spacing:-.01em; }
|
||
header .env { font-size:12px; color:var(--muted); border:1px solid var(--line); padding:2px 8px; border-radius:99px; }
|
||
main { padding:24px; max-width:1100px; margin:0 auto; }
|
||
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px 20px; margin-bottom:16px; }
|
||
.banner { border-left:3px solid var(--err); background:color-mix(in srgb, var(--err) 12%, var(--card)); }
|
||
.banner.hidden { display:none; }
|
||
/* Tabelele de date au multe coloane; pe ecrane inguste scroll IN card, nu
|
||
impinge layout-ul paginii (altfel toata pagina scrolleaza orizontal). */
|
||
.tablewrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
|
||
table { width:100%; border-collapse:collapse; font-size:14px; font-variant-numeric:tabular-nums; }
|
||
th,td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap; }
|
||
th { color:var(--muted); font-weight:500; font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
|
||
.empty { color:var(--muted); padding:24px; text-align:center; }
|
||
.pill { font-size:12px; padding:2px 8px; border-radius:99px; border:1px solid var(--line); }
|
||
/* Pill-uri de filtrare a starii (bara de filtre Trimiteri). Inactiv = contur+text pe
|
||
culoarea categoriei (injectata inline); activ = umplere pe acea culoare. */
|
||
.pills-categorii { display:inline-flex; gap:8px; flex-wrap:wrap; align-items:center; }
|
||
.pill-cat { display:inline-flex; align-items:center; gap:5px; padding:4px 11px; border-radius:99px;
|
||
font-size:12px; font-weight:600; cursor:pointer; background:transparent;
|
||
border:1.5px solid var(--line); color:var(--muted); min-height:30px;
|
||
transition:background .15s, color .15s; }
|
||
/* Hover: color-mix pe culoarea curenta a pill-ului (categoria sa), nu filter:brightness
|
||
(care producea rosu plin ilizibil pe pill-uri colorate). Activ suprima hover-ul. */
|
||
.pill-cat:hover { background:color-mix(in srgb, currentColor 12%, transparent); }
|
||
.pill-cat:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
|
||
.pill-cat-n { font-size:11px; font-weight:700; color:var(--card); padding:0 5px;
|
||
border-radius:99px; min-width:18px; text-align:center; }
|
||
/* Activ categorie: umplere cu culoarea categoriei (currentColor = var injectat inline) */
|
||
.pill-cat[aria-pressed="true"] { background:currentColor; color:var(--card); border-color:currentColor; }
|
||
.pill-cat[aria-pressed="true"] .pill-cat-n { background:var(--card) !important; color:currentColor; }
|
||
/* Activ suprima hover: pastram culoarea activa, nu o mixam din nou */
|
||
.pill-cat[aria-pressed="true"]:hover { background:currentColor; }
|
||
/* Reset "Toate" activ = --accent plin (nu culoarea categoriei) */
|
||
.pill-cat-reset[aria-pressed="true"] { background:var(--accent); color:#fff; border-color:var(--accent); }
|
||
.pill-cat-reset[aria-pressed="true"]:hover { background:var(--accent); }
|
||
.s-queued{color:var(--accent);} .s-sending{color:var(--warn);} .s-sent{color:var(--ok);}
|
||
.s-error,.s-needs_data,.s-needs_mapping{color:var(--err);}
|
||
.s-ok{color:var(--ok);}
|
||
.s-needs_review{color:var(--warn);}
|
||
.s-already_sent,.s-duplicate_in_file{color:var(--muted);}
|
||
.muted { color:var(--muted); }
|
||
a { color:var(--accent); }
|
||
/* Drop zone upload fisier */
|
||
.drop-zone { border:2px dashed var(--line); border-radius:8px; padding:32px 20px;
|
||
text-align:center; transition:border-color .15s,background .15s; }
|
||
.drop-zone.drag-over { border-color:var(--accent); background:rgba(91,141,239,.05); }
|
||
/* Banner varianta warn (nu eroare) */
|
||
.banner.warn { border-left-color:var(--warn); background:color-mix(in srgb, var(--warn) 12%, var(--card)); }
|
||
/* Bara confirmare sticky */
|
||
.sticky-bar { position:sticky; bottom:0; background:var(--card); border-top:1px solid var(--line);
|
||
padding:10px 14px; display:flex; align-items:flex-start; gap:12px;
|
||
flex-wrap:wrap; z-index:10; }
|
||
/* Indicator HTMX — ascuns pana la request */
|
||
.htmx-indicator { display:none; }
|
||
.htmx-indicator.htmx-request { display:inline; }
|
||
/* Link-uri de actiune in antetul cardurilor: zona de atins mai mare (>=36px) si
|
||
feedback la hover; pe ecrane inguste antetul se rupe curat sub titlu. */
|
||
.cardlink { font-size:13px; padding:7px 10px; border-radius:6px; display:inline-flex;
|
||
align-items:center; min-height:36px; white-space:nowrap; }
|
||
.cardlink:hover { background:var(--line); }
|
||
.flash { background:color-mix(in srgb, var(--ok) 12%, var(--card)); border-left:3px solid var(--ok); padding:8px 12px; border-radius:6px;
|
||
margin:0 0 12px; font-size:13px; }
|
||
.maprow { display:flex; gap:16px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line);
|
||
flex-wrap:wrap; }
|
||
.maprow:last-child { border-bottom:0; }
|
||
.mapcol.grow { flex:1 1 280px; min-width:240px; }
|
||
.sugg { color:var(--accent); }
|
||
select, button, input[type=text] { font:inherit; background:var(--bg); color:var(--ink);
|
||
border:1px solid var(--line); border-radius:6px; padding:6px 10px; }
|
||
select { max-width:340px; }
|
||
button { background:var(--accent); border-color:var(--accent); color:#fff; cursor:pointer; }
|
||
button:hover { filter:brightness(1.08); }
|
||
/* Sistem butoane unificat (design.md §5.1). Primarul = `button`/`.btn` (deja stilat). */
|
||
.btn-secondary { background:transparent; color:var(--ink); border:1px solid var(--line); border-radius:6px;
|
||
padding:8px 14px; font:inherit; font-weight:500; cursor:pointer; min-height:36px;
|
||
display:inline-flex; align-items:center; justify-content:center; gap:6px; }
|
||
.btn-secondary:hover { background:var(--line); filter:none; }
|
||
.btn-ghost { background:transparent; color:var(--accent); border:1px solid transparent; border-radius:6px;
|
||
padding:8px 14px; font:inherit; font-weight:500; cursor:pointer; min-height:36px;
|
||
display:inline-flex; align-items:center; justify-content:center; gap:6px; }
|
||
.btn-ghost:hover { background:var(--line); filter:none; }
|
||
.btn-danger { background:transparent; color:var(--err); border:1px solid var(--err); border-radius:6px;
|
||
padding:8px 14px; font:inherit; font-weight:500; cursor:pointer; min-height:36px;
|
||
display:inline-flex; align-items:center; justify-content:center; gap:6px; }
|
||
.btn-danger:hover, .btn-danger:focus-visible { background:var(--err); color:#fff; filter:none; }
|
||
.btn-sm { padding:5px 10px; min-height:32px; font-size:13px; }
|
||
button:focus-visible, .btn-secondary:focus-visible, .btn-ghost:focus-visible, .btn-danger:focus-visible {
|
||
outline:2px solid var(--accent); outline-offset:2px; }
|
||
/* Actiuni de rand (design.md §5.1): desktop = text, mobil = iconita patrata 44px.
|
||
act_btn randeaza si .act-tx (text) si .act-ic (svg); CSS ascunde unul per breakpoint. */
|
||
.act { display:inline-flex; align-items:center; justify-content:center; gap:6px; font:inherit; font-weight:500;
|
||
border-radius:7px; padding:6px 12px; min-height:36px; cursor:pointer; background:transparent;
|
||
border:1px solid var(--line); color:var(--ink); }
|
||
.act:hover { background:var(--line); filter:none; }
|
||
.act:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
|
||
.act .act-ic { width:18px; height:18px; display:none; }
|
||
.act .act-tx { display:inline; }
|
||
.act-save.dirty { background:var(--accent); color:#fff; border-color:var(--accent); }
|
||
.act-save.dirty:hover { filter:brightness(.92); }
|
||
/* Variant primar mereu-accent (ex. Salveaza in modalul de editare). */
|
||
.act-primary { background:var(--accent); color:#fff; border-color:var(--accent); }
|
||
.act-primary:hover { filter:brightness(.92); background:var(--accent); }
|
||
.act-del { color:var(--err); border-color:var(--err); }
|
||
.act-del:hover, .act-del:focus-visible { background:var(--err); color:#fff; }
|
||
.act-group { display:inline-flex; gap:8px; align-items:center; }
|
||
.btn-editeaza { white-space:nowrap; }
|
||
/* Toast global (feedback tranzitoriu post-actiune). */
|
||
#toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(8px);
|
||
z-index:1300; max-width:90vw; padding:11px 18px; border-radius:10px;
|
||
background:var(--ink); color:var(--card); font-size:14px; font-weight:500;
|
||
box-shadow:0 8px 28px rgba(0,0,0,.28); display:flex; align-items:center; gap:9px;
|
||
opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; }
|
||
#toast[hidden] { display:none; }
|
||
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
|
||
#toast::before { content:""; width:9px; height:9px; border-radius:50%; background:var(--ok); flex:0 0 auto; }
|
||
#toast.t-err::before, #toast.t-s-error::before, #toast.t-s-needs_data::before,
|
||
#toast.t-s-needs_mapping::before { background:var(--err); }
|
||
#toast.t-warn::before, #toast.t-s-needs_review::before { background:var(--warn); }
|
||
/* Rand de preview tocmai actualizat: flash scurt ca userul sa-l localizeze. */
|
||
@keyframes rand-flash { 0% { background:color-mix(in srgb, var(--accent) 26%, var(--card)); }
|
||
100% { background:transparent; } }
|
||
.tabel-trimiteri tr.rand-actualizat { animation:rand-flash 1.6s ease-out; }
|
||
/* Randuri deja-trimise / duplicate in preview: colapsate implicit (nu ocupa loc).
|
||
Reafisate cand userul apasa toggle-ul -> .preview-arata-trimise pe container.
|
||
!important fiindca regulile compacte mobil/tableta seteaza `tr{display:flex}`. */
|
||
.tabel-trimiteri tr.preview-sent-row { display:none !important; }
|
||
.tabel-trimiteri.preview-arata-trimise tr.preview-sent-row { display:table-row !important; }
|
||
/* Stepper import compact (design.md §5.4). >=1024px: bara slim. <1024px: "Pasul N din 4" + progres. */
|
||
.stepper { margin-bottom:16px; }
|
||
.stepper-track { display:flex; align-items:stretch; border:1px solid var(--line); border-radius:8px;
|
||
overflow:hidden; background:var(--card); }
|
||
.stepper-step { flex:1; display:flex; align-items:center; gap:8px; padding:10px 14px; min-height:44px;
|
||
border-right:1px solid var(--line); }
|
||
.stepper-step:last-child { border-right:none; }
|
||
.stepper-nr { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px;
|
||
border-radius:50%; font-size:11px; font-weight:700; flex-shrink:0;
|
||
background:var(--line); color:var(--muted); }
|
||
.stepper-tx { font-size:13px; color:var(--muted); white-space:nowrap; }
|
||
.stepper-step.is-active { background:color-mix(in srgb, var(--accent) 10%, transparent); }
|
||
.stepper-step.is-active .stepper-nr { background:var(--accent); color:#fff; }
|
||
.stepper-step.is-active .stepper-tx { color:var(--ink); font-weight:600; }
|
||
.stepper-step.is-done .stepper-nr { background:var(--ok); color:#fff; }
|
||
.stepper-step.is-done .stepper-tx { color:var(--ink); }
|
||
.stepper-help { margin:6px 2px 0; font-size:12px; color:var(--muted); }
|
||
.stepper-collapsed { display:none; }
|
||
.stepper-current { font-size:14px; font-weight:600; margin-bottom:6px; }
|
||
.stepper-current .muted { font-weight:400; }
|
||
.stepper-progress { height:5px; border-radius:99px; background:var(--line); overflow:hidden; }
|
||
.stepper-progress > span { display:block; height:100%; background:var(--accent); border-radius:99px; }
|
||
.chk { font-size:13px; color:var(--muted); display:flex; align-items:center; gap:6px; }
|
||
/* Tab-bar */
|
||
.tab-bar { display:flex; gap:2px; overflow-x:auto; -webkit-overflow-scrolling:touch;
|
||
border-bottom:1px solid var(--line); margin-bottom:16px; padding-bottom:0;
|
||
scrollbar-width:none; }
|
||
.tab-bar::-webkit-scrollbar { display:none; }
|
||
.tab-link { display:inline-flex; align-items:center; padding:8px 16px; font-size:14px;
|
||
font-weight:500; color:var(--muted); text-decoration:none; border-radius:6px 6px 0 0;
|
||
border:1px solid transparent; border-bottom:none; white-space:nowrap;
|
||
transition:color .12s, background .12s; margin-bottom:-1px; }
|
||
.tab-link:hover { color:var(--ink); background:var(--line); }
|
||
.tab-link.tab-activ { color:var(--ink); background:var(--card);
|
||
border-color:var(--line); border-bottom-color:var(--card); }
|
||
.tab-panel { min-height:120px; }
|
||
.status-bar { margin-bottom:12px; }
|
||
/* Eroare 3 niveluri */
|
||
.eroare-3n { margin-top:10px; }
|
||
.eroare-3n-item { padding:8px 10px; border-left:3px solid var(--err);
|
||
background:color-mix(in srgb, var(--err) 8%, var(--card));
|
||
border-radius:0 6px 6px 0; }
|
||
.eroare-3n-sep { margin-top:6px; }
|
||
.eroare-3n-problema { font-weight:600; color:var(--err); font-size:13px; }
|
||
.eroare-3n-camp { font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:12px; opacity:.85; }
|
||
.eroare-3n-cauza { color:var(--muted); font-size:12px; margin-top:3px; }
|
||
.eroare-3n-fix { color:var(--accent); font-size:12px; margin-top:3px; }
|
||
.eroare-3n-label { font-weight:500; }
|
||
/* Inline fix per camp in preview */
|
||
.camp-fix { color:var(--accent); font-size:11px; margin-top:2px; display:block; }
|
||
/* Meniu hamburger cont — dropdown ancorat dreapta-sus */
|
||
.cont-menu-wrap { position:relative; }
|
||
.icon-btn { background:transparent; border:1px solid var(--line); color:var(--ink); cursor:pointer;
|
||
border-radius:6px; min-height:36px; min-width:36px; font-size:16px; padding:4px 8px;
|
||
line-height:1; display:inline-flex; align-items:center; justify-content:center; }
|
||
.icon-btn:hover { background:var(--line); }
|
||
/* Variante icon-btn — dirty (modificari nesalvate) + danger (destructiv) */
|
||
.icon-btn.dirty { background:var(--accent); color:#fff; border-color:var(--accent); }
|
||
.icon-btn.dirty:hover { filter:brightness(0.9); }
|
||
.icon-btn.danger { color:var(--err); border-color:var(--err); }
|
||
.icon-btn.danger:hover, .icon-btn.danger:focus-visible { background:var(--err); color:#fff; }
|
||
.cont-menu { position:absolute; right:0; top:calc(100% + 8px); min-width:180px; z-index:50;
|
||
background:var(--card); border:1px solid var(--line); border-radius:8px; padding:6px;
|
||
box-shadow:0 8px 24px rgba(0,0,0,.18); display:flex; flex-direction:column; gap:2px; }
|
||
.cont-menu[hidden] { display:none; }
|
||
.cont-menu a, .cont-menu button { display:block; width:100%; text-align:left; background:transparent;
|
||
border:none; color:var(--ink); text-decoration:none; font:inherit; padding:8px 10px;
|
||
border-radius:6px; cursor:pointer; min-height:36px; }
|
||
.cont-menu a:hover, .cont-menu button:hover { background:var(--line); }
|
||
.cont-menu hr { border:none; border-top:1px solid var(--line); margin:4px 0; }
|
||
.cont-menu form { margin:0; }
|
||
/* Kebab partajat (actiuni per-rand in tabele). Meniul e position:fixed si pozitionat de JS:
|
||
altfel `.tablewrap { overflow-x:auto }` induce overflow-y:auto si TAIE dropdown-ul pe ultimul
|
||
rand. fixed scoate meniul din contextul de clipping al tabelului. */
|
||
.kebab { position:relative; display:inline-block; }
|
||
.kebab > summary { list-style:none; cursor:pointer; display:inline-flex; align-items:center;
|
||
justify-content:center; min-height:32px; min-width:32px; padding:4px 10px;
|
||
border-radius:6px; color:var(--ink); }
|
||
.kebab > summary::-webkit-details-marker { display:none; }
|
||
.kebab > summary:hover, .kebab[open] > summary { background:var(--line); }
|
||
.kebab-menu { position:fixed; z-index:1000; min-width:160px; background:var(--card);
|
||
border:1px solid var(--line); border-radius:8px; padding:6px;
|
||
box-shadow:0 8px 24px rgba(0,0,0,.18); display:flex; flex-direction:column; gap:2px; }
|
||
.kebab-menu form { margin:0; }
|
||
.kebab-menu button, .kebab-menu a { display:block; width:100%; text-align:left; background:transparent;
|
||
border:none; color:var(--ink); text-decoration:none; font:inherit; padding:7px 10px;
|
||
border-radius:6px; cursor:pointer; min-height:36px; white-space:nowrap; }
|
||
.kebab-menu button:hover, .kebab-menu a:hover { background:var(--line); }
|
||
.kebab-menu button.danger { color:var(--err); }
|
||
/* === Accordion import compact (US-006 — regiune CSS disjuncta) ===
|
||
<details id="import-details"> invelete stepper + upload pe Acasa.
|
||
Atribut `open` setat de server din `are_trimiteri`:
|
||
False (first-run) → open; True (returning) → colapsat.
|
||
Degradare fara JS: returning-user colapsat, first-run deschis — ambele corecte
|
||
fara toggle JS (un toggle JS pur ar lasa returning-user fara-JS cu ecranul deschis).
|
||
aria-expanded + focus: native <details> le gestioneaza automat. */
|
||
#import-details { margin-bottom:16px; border:1px solid var(--accent); border-radius:8px;
|
||
background:var(--card); overflow:hidden; }
|
||
#import-details > summary { display:flex; align-items:center; gap:8px; cursor:pointer;
|
||
user-select:none; list-style:none; padding:10px 16px;
|
||
font-weight:600; font-size:14px; color:var(--ink); }
|
||
#import-details > summary::-webkit-details-marker { display:none; }
|
||
#import-details > summary::marker { display:none; }
|
||
#import-details > summary::before { content:"▶"; font-size:10px; color:var(--accent);
|
||
flex-shrink:0; transition:transform .15s; }
|
||
#import-details[open] > summary::before { transform:rotate(90deg); }
|
||
#import-details[open] > summary { border-bottom:1px solid var(--line); }
|
||
#import-details > summary:hover { background:color-mix(in srgb, var(--accent) 8%, var(--card)); }
|
||
#import-details > summary:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
|
||
/* Continutul (stepper + card upload): padding si bordul cardului interior sunt suprastate
|
||
de bordul exterior al #import-details — scoatem border duplicat de pe .card intern. */
|
||
#import-details #import-section { padding:0; }
|
||
#import-details #import-section > .card { border-left:none; border-right:none;
|
||
border-bottom:none; border-radius:0;
|
||
margin-bottom:0; }
|
||
/* === Sfarsit regiune accordion import === */
|
||
/* === Inceput regiune nav links status-bar (US-005) ===
|
||
Linkuri Trimiteri + Mapari sub contoare; marcaj activ cu aria-current/status-nav-activ. */
|
||
.status-nav-link { color:var(--accent); text-decoration:none; padding:2px 6px; border-radius:4px;
|
||
transition:background .1s; }
|
||
.status-nav-link:hover { background:color-mix(in srgb, var(--accent) 10%, transparent); }
|
||
.status-nav-link.status-nav-activ { color:var(--ink); font-weight:600; }
|
||
.status-nav-link.status-nav-activ:hover { background:color-mix(in srgb, var(--ink) 8%, transparent); }
|
||
/* === Sfarsit regiune nav links status-bar === */
|
||
/* Tabel cu cautare + paginare client-side (data-dt). Maparile pot creste la sute de randuri;
|
||
filtram/paginez DOM-ul deja randat, fara cereri suplimentare. Vezi scriptul din base.html. */
|
||
input[type=search] { font:inherit; background:var(--bg); color:var(--ink); border:1px solid var(--line);
|
||
border-radius:6px; padding:6px 10px; width:100%; }
|
||
.dt-tools { display:flex; align-items:center; gap:8px; margin:0 0 10px; }
|
||
.dt-search { flex:1 1 auto; max-width:320px; }
|
||
.dt-empty { color:var(--muted); padding:16px; text-align:center; font-size:13px; }
|
||
.dt-pager { display:flex; align-items:center; justify-content:flex-end; gap:10px;
|
||
margin-top:10px; font-size:13px; color:var(--muted); }
|
||
.dt-pager button { background:transparent; color:var(--ink); border:1px solid var(--line);
|
||
padding:5px 12px; min-height:32px; }
|
||
.dt-pager button:disabled { opacity:.45; cursor:default; }
|
||
/* === Tabel trimiteri: fara scroll orizontal. SCOPAT prin
|
||
.tabel-trimiteri ca sa NU strice celelalte tabele (.tablewrap e partajat de
|
||
Mapari/Formate). Permitem wrap controlat pe coloanele text + latimi rezonabile. === */
|
||
.tabel-trimiteri table { table-layout:fixed; }
|
||
.tabel-trimiteri th, .tabel-trimiteri td { white-space:normal; word-break:break-word; vertical-align:top; }
|
||
.tabel-trimiteri .col-chk { width:30px; }
|
||
.tabel-trimiteri .col-id { width:48px; }
|
||
.tabel-trimiteri .col-stare { width:104px; }
|
||
.tabel-trimiteri .col-data { width:104px; }
|
||
.tabel-trimiteri .col-rar { width:96px; }
|
||
.tabel-trimiteri .col-actualizat { width:128px; }
|
||
.tabel-trimiteri .col-operatie > div { line-height:1.35; }
|
||
/* secundarul muted („cod RAR" / „nemapat") — >=12px, contrast pe var(--muted) >=4.5:1 */
|
||
.tabel-trimiteri .cod-rar-sub { font-size:12px; margin-top:2px; }
|
||
/* Codul RAR pe linia 2 — chip discret, fara prefixul „cod RAR:". */
|
||
.tabel-trimiteri .cod-rar-cod { display:inline-block; font-family:"IBM Plex Mono",ui-monospace,monospace;
|
||
font-size:12px; padding:1px 7px; border:1px solid var(--line);
|
||
border-radius:99px; color:var(--muted); }
|
||
/* Eticheta umana scurta sub pill — text mic; clasa `s-error` o coloreaza
|
||
(apare doar pe error/needs_*). Stare prin text, nu doar culoare. */
|
||
.tabel-trimiteri .eticheta-problema { font-size:12px; line-height:1.3; margin-top:3px; }
|
||
/* Randul e clickabil (deschide modalul) -> tinta de atins >=44px (touch) +
|
||
afordanta hover/focus. */
|
||
.tabel-trimiteri tr.trimitere-row { min-height:44px; }
|
||
.tabel-trimiteri tr.trimitere-row > td { padding-top:11px; padding-bottom:11px; }
|
||
.tabel-trimiteri tr.trimitere-row:hover { background:color-mix(in srgb, var(--accent) 6%, transparent); }
|
||
.tabel-trimiteri tr.trimitere-row:focus,
|
||
.tabel-trimiteri tr.trimitere-row:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
|
||
/* col-actualizat ca linie meta mica in carduri (decizie 5.13 #8). */
|
||
.tabel-trimiteri td.col-actualizat { font-size:12px; }
|
||
/* Stepper: sub 1024px ascunde track-ul slim, arata forma colapsata (decizie 5.13 #11). */
|
||
@media (max-width:1024px) {
|
||
.stepper-track { display:none; }
|
||
.stepper-collapsed { display:block; }
|
||
}
|
||
/* Tableta (768–1024px): header compact fara suprapuneri.
|
||
Grila 3-coloane se pastreaza; logo si titlu mai mici; versiunea ascunsa
|
||
(informatia secundara elibereaza spatiu in celula dreapta: comutator tema +
|
||
hamburger raman vizibili). min-height:92px din regula de baza e resetat —
|
||
inaltimea header-ului e determinata de continut, nu de un prag fix. */
|
||
@media (min-width:768px) and (max-width:1024px) {
|
||
header { min-height:0; padding:10px 16px; gap:6px; }
|
||
.brand-logo { height:44px; }
|
||
header h1 { font-size:16px; }
|
||
/* Versiunea (ex. "v0.9.3") este informatie secundara pe tableta:
|
||
ascunsa pentru a elibera spatiu in celula dreapta. */
|
||
.header-right > .muted { display:none; }
|
||
}
|
||
/* Tableta 768-1024px: listele actionabile raman O COLOANA, cardificate (nu tabel storcit,
|
||
nu 2/rand). Decizie 5.13 (premisa user). Tabelele dense read-only raman .tablewrap. */
|
||
@media (min-width:768px) and (max-width:1024px) {
|
||
.tabel-trimiteri table, .tabel-card table { table-layout:auto; }
|
||
.tabel-trimiteri thead, .tabel-card thead { display:none; }
|
||
.tabel-trimiteri table, .tabel-trimiteri tbody, .tabel-trimiteri tr, .tabel-trimiteri td,
|
||
.tabel-card table, .tabel-card tbody, .tabel-card tr, .tabel-card td { display:block; width:auto; }
|
||
.tabel-trimiteri tr, .tabel-card tr { border:1px solid var(--line); border-radius:8px;
|
||
padding:10px 12px; margin-bottom:10px; }
|
||
.tabel-trimiteri td, .tabel-card td { border-bottom:none; padding:3px 0; }
|
||
.tabel-trimiteri td::before, .tabel-card td::before { content:attr(data-eticheta); display:block;
|
||
color:var(--muted); font-size:12px; margin-bottom:2px; }
|
||
.tabel-trimiteri td.col-chk, .tabel-trimiteri td.col-id { display:none; }
|
||
.tabel-trimiteri td[data-eticheta=""]::before, .tabel-card td[data-eticheta=""]::before,
|
||
.tabel-card td:not([data-eticheta])::before { display:none; }
|
||
.tabel-card td select, .tabel-card td input[type=text], .tabel-card td input[type=search] {
|
||
width:100%; max-width:none; }
|
||
/* Card compact si pe tableta (acelasi layout ca pe mobil) pentru `.tabel-trimiteri`. */
|
||
.tabel-trimiteri tr { display:flex; flex-wrap:wrap; align-items:baseline; gap:1px 8px; }
|
||
.tabel-trimiteri td { padding:0; }
|
||
/* Regula desktop `tr.trimitere-row > td { padding:11px }` e mai specifica -> o anulam
|
||
in cardul compact, altfel randurile de Trimiteri raman inalte/aerisite. */
|
||
.tabel-trimiteri tr.trimitere-row > td { padding-top:0; padding-bottom:0; }
|
||
.tabel-trimiteri td::before { display:none; }
|
||
.tabel-trimiteri td.col-vehicul { order:1; flex:1 1 55%; min-width:0; font-weight:600; font-size:15px; line-height:1.25; }
|
||
.tabel-trimiteri td.col-vehicul .muted { font-weight:400; }
|
||
.tabel-trimiteri td.col-stare { order:2; flex:0 0 auto; margin-left:auto; align-self:flex-start; }
|
||
.tabel-trimiteri td.col-operatie { order:3; flex:1 1 100%; font-size:13px; line-height:1.3; margin-top:1px; }
|
||
.tabel-trimiteri td.col-data, .tabel-trimiteri td.col-km, .tabel-trimiteri td.col-rar { font-size:12px; color:var(--muted); }
|
||
.tabel-trimiteri td.col-data { order:4; } .tabel-trimiteri td.col-km { order:5; } .tabel-trimiteri td.col-rar { order:6; }
|
||
.tabel-trimiteri td.col-km::before { content:"· "; display:inline; color:var(--muted); }
|
||
.tabel-trimiteri td.col-actualizat { order:7; flex:1 1 100%; font-size:12px; color:var(--muted); }
|
||
.tabel-trimiteri td.col-note { order:8; flex:1 1 100%; font-size:12px; color:var(--accent); line-height:1.3; margin-top:1px; }
|
||
.tabel-trimiteri td.col-actiuni { order:9; flex:0 0 auto; margin-left:auto; margin-top:4px; text-align:right; }
|
||
.tabel-trimiteri td.col-actiuni button, .tabel-trimiteri td.col-actiuni .act { width:auto; min-height:32px; padding:5px 14px; }
|
||
.tabel-trimiteri.preview-arata-trimise tr.preview-sent-row { display:flex !important; }
|
||
}
|
||
/* === Preview import: coloane extra fata de tabelul Trimiteri.
|
||
SCOPAT prin .tabel-trimiteri (clasa partajata). Regiune separata —
|
||
nu atinge coloanele existente (col-chk/id/stare/data/rar/actualizat).
|
||
US-007: 8 coloane (coloana de verificare manuala eliminata).
|
||
Suma latimi fixe: col-id(48) + col-stare(104) + col-data(104) +
|
||
col-km(76) + col-note(176) + col-actiuni(92) = 600px.
|
||
Restul (~680px la 1280px) revine lui col-vehicul + col-operatie (fluid). === */
|
||
.tabel-trimiteri .col-km { width:76px; }
|
||
.tabel-trimiteri .col-note { width:176px; }
|
||
/* Nota preview = culoarea camp-fix (accent), ca sa atraga atentia (dogfood 5.13):
|
||
campul Note e self-explanatory, asa ca hint-urile per-camp au fost scoase. */
|
||
.tabel-trimiteri td.col-note { color:var(--accent); }
|
||
/* Pill-ul de stare nu se rupe pe doua randuri in cardul compact. */
|
||
.tabel-trimiteri td.col-stare .pill { white-space:nowrap; }
|
||
.tabel-trimiteri .col-actiuni { width:104px; }
|
||
/* Randul de editare inline iese din grila table-layout:fixed (display:block),
|
||
astfel formularul nu e constrans de latimile coloanelor individuale.
|
||
Salveaza/Anuleaza sunt mereu vizibile (overflow:visible, nu clip). */
|
||
.tabel-trimiteri tr.preview-edit { display:block; }
|
||
.tabel-trimiteri tr.preview-edit > td { display:block; width:100%; box-sizing:border-box; padding:0; border:none; }
|
||
/* Pe mobil (<768px): pseudo-eticheta goala (data-eticheta="") nu lasa spatiu gol. */
|
||
@media (max-width:767px) {
|
||
.tabel-trimiteri td[data-eticheta=""]::before { display:none; }
|
||
}
|
||
/* === Modal detaliu: fereastra modala globala, in afara zonei de poll
|
||
(#submissions-wrap). Backdrop + dialog centrat pe desktop; focus-trap +
|
||
scroll-lock + inert pe <main> sunt in JS. Varianta full-screen mobil: vezi blocul
|
||
`@media (max-width:767px)` de mai jos. === */
|
||
.modal-overlay { position:fixed; inset:0; z-index:1100; display:flex;
|
||
align-items:flex-start; justify-content:center; padding:40px 16px; overflow-y:auto; }
|
||
.modal-overlay[hidden] { display:none; }
|
||
.modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.55); }
|
||
.modal-dialog { position:relative; z-index:1; width:100%; max-width:680px;
|
||
background:var(--card); border:1px solid var(--line); border-radius:12px;
|
||
box-shadow:0 16px 48px rgba(0,0,0,.35); padding:18px 20px;
|
||
max-height:calc(100vh - 80px); overflow-y:auto; }
|
||
.modal-close { position:absolute; top:10px; right:10px; background:transparent;
|
||
border:1px solid var(--line); color:var(--muted); width:36px; height:36px;
|
||
border-radius:8px; font-size:20px; line-height:1; cursor:pointer;
|
||
display:inline-flex; align-items:center; justify-content:center; }
|
||
.modal-close:hover { background:var(--line); color:var(--ink); }
|
||
body.modal-open { overflow:hidden; }
|
||
.modal-eroare { padding:16px 4px; }
|
||
.modal-eroare .actiuni { margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; }
|
||
/* === Fundatie responsive mobil (<768px) ===
|
||
Breakpoint unic 767px (vezi conventia de sus). Cuprinde: card per rand pe tabelul
|
||
de trimiteri, modal full-screen, header/nav colapsat cu tinte touch
|
||
>=44px. Desktop (>=1024px) ramane neschimbat — regulile de baza nu se modifica. */
|
||
/* SENTINEL-TESTE-MOBIL: blocul mobil principal incepe mai jos; testele ancoreaza pe acest marker si feliaza pana la sfarsitul stilului. NU muta/sterge. */
|
||
@media (max-width:767px) {
|
||
/* Tabel trimiteri: card per rand (eticheta:valoare stivuit) -> fara scroll orizontal */
|
||
.tabel-trimiteri table { table-layout:auto; }
|
||
.tabel-trimiteri thead { display:none; }
|
||
.tabel-trimiteri table, .tabel-trimiteri tbody, .tabel-trimiteri tr, .tabel-trimiteri td { display:block; width:auto; }
|
||
.tabel-trimiteri tr { border:1px solid var(--line); border-radius:8px; padding:8px 12px; margin-bottom:10px; }
|
||
.tabel-trimiteri td { border-bottom:none; padding:3px 0; display:block; }
|
||
.tabel-trimiteri td::before { content:attr(data-eticheta); display:block; color:var(--muted);
|
||
font-size:12px; margin-bottom:2px; }
|
||
.tabel-trimiteri td.col-chk, .tabel-trimiteri td.col-id { display:none; }
|
||
|
||
/* === Card COMPACT (PRD 5.13, corectie dogfood) ===
|
||
Inlocuieste stiva generica eticheta+valoare (prea inalta) cu un card
|
||
scanabil la prima vedere: vehicul = titlu, stare = pill dreapta-sus,
|
||
operatie+cod pe rand, meta (data/km/rar) muted mic, nota mica. Fara
|
||
etichete-zgomot. Override DUPA regulile de baza (cascada: ultimul castiga). */
|
||
.tabel-trimiteri tr { display:flex; flex-wrap:wrap; align-items:baseline;
|
||
gap:1px 8px; padding:9px 12px; }
|
||
.tabel-trimiteri td { display:block; padding:0; }
|
||
.tabel-trimiteri tr.trimitere-row > td { padding-top:0; padding-bottom:0; }
|
||
.tabel-trimiteri td::before { display:none; } /* compact: fara etichete */
|
||
.tabel-trimiteri td.col-vehicul { order:1; flex:1 1 55%; min-width:0;
|
||
font-weight:600; font-size:15px; line-height:1.25; }
|
||
.tabel-trimiteri td.col-vehicul .muted { font-weight:400; }
|
||
.tabel-trimiteri td.col-stare { order:2; flex:0 0 auto; margin-left:auto;
|
||
align-self:flex-start; }
|
||
.tabel-trimiteri td.col-operatie { order:3; flex:1 1 100%; font-size:13px;
|
||
line-height:1.3; margin-top:1px; }
|
||
.tabel-trimiteri td.col-data,
|
||
.tabel-trimiteri td.col-km,
|
||
.tabel-trimiteri td.col-rar { font-size:12px; color:var(--muted); }
|
||
.tabel-trimiteri td.col-data { order:4; }
|
||
.tabel-trimiteri td.col-km { order:5; }
|
||
.tabel-trimiteri td.col-km::before { content:"· "; display:inline; color:var(--muted); }
|
||
.tabel-trimiteri td.col-rar { order:6; }
|
||
.tabel-trimiteri td.col-actualizat { order:7; flex:1 1 100%; font-size:12px;
|
||
color:var(--muted); }
|
||
.tabel-trimiteri td.col-note { order:8; flex:1 1 100%; font-size:12px;
|
||
color:var(--accent); line-height:1.3; margin-top:1px; }
|
||
.tabel-trimiteri td.col-actiuni { order:9; flex:0 0 auto; margin-left:auto;
|
||
margin-top:4px; text-align:right; }
|
||
.tabel-trimiteri td.col-actiuni button,
|
||
.tabel-trimiteri td.col-actiuni .act { width:auto; min-height:32px; padding:5px 14px; }
|
||
.tabel-trimiteri.preview-arata-trimise tr.preview-sent-row { display:flex !important; }
|
||
|
||
/* Modal full-screen: ocupa tot ecranul, fara backdrop lateral (overlay fara
|
||
padding, dialog la latime/inaltime pline, fara colturi/umbra). Scroll intern
|
||
pe dialog; butonul `x` la >=44px (tinta touch). Desktop pastreaza varianta
|
||
centrata cu `max-width:680px` din regula de baza de mai sus. */
|
||
.modal-overlay { padding:0; align-items:stretch; justify-content:stretch; }
|
||
.modal-dialog { width:100vw; max-width:none; min-height:100vh; max-height:100vh;
|
||
border:none; border-radius:0; box-shadow:none;
|
||
padding:16px; padding-top:56px; overflow-y:auto; }
|
||
.modal-close { width:44px; height:44px; top:8px; right:8px; font-size:24px; }
|
||
|
||
/* Actiunile de jos din detaliu (Re-pune / Sterge) full-width stivuit pe mobil. */
|
||
.detaliu-actiuni-jos button { width:100%; }
|
||
|
||
/* Header + nav colapsate: pe mobil trece de la grid la flex wrap.
|
||
Randul 1: [logo ROMFAST stanga] [controale dreapta] (margin-left:auto pe .header-right).
|
||
Randul 2: [titlu + env mic centrat, full-width]. Fara scroll orizontal, tinte >=44px. */
|
||
header { display:flex; flex-wrap:wrap; padding:12px 16px; gap:8px; align-items:center; min-height:0; }
|
||
.brand-logo { height:44px; }
|
||
.header-left { order:0; flex:0 0 auto; }
|
||
.header-center { order:2; width:100%; text-align:center; }
|
||
.header-right { order:1; margin-left:auto; flex:0 0 auto; }
|
||
header h1 { font-size:17px; }
|
||
main { padding:16px; }
|
||
.icon-btn { min-height:44px; min-width:44px; }
|
||
.tab-link { min-height:44px; padding:10px 14px; }
|
||
.cont-menu a, .cont-menu button { min-height:44px; }
|
||
|
||
/* === Paginile de continut pe mobil ===
|
||
Tabele ACTIONABILE (Mapari) -> card per rand. Clasa proprie `.tabel-card`,
|
||
scopata SEPARAT de `.tabel-trimiteri` ca sa NU strice cardurile de
|
||
trimiteri. Tabele DENSE read-only (Jurnal, Nomenclator) + Admin raman in
|
||
`.tablewrap` (scroll orizontal CONTAINED, definit global mai sus). */
|
||
.tabel-card table { table-layout:auto; }
|
||
.tabel-card thead { display:none; }
|
||
.tabel-card table, .tabel-card tbody, .tabel-card tr, .tabel-card td { display:block; width:auto; }
|
||
.tabel-card tr { border:1px solid var(--line); border-radius:8px; padding:10px 12px; margin-bottom:10px; }
|
||
.tabel-card td { border-bottom:none; padding:5px 0; }
|
||
.tabel-card td::before { content:attr(data-eticheta); display:block; color:var(--muted);
|
||
font-size:12px; margin-bottom:3px; }
|
||
/* Celulele fara eticheta (doar actiuni) nu primesc antet gol. */
|
||
.tabel-card td:not([data-eticheta])::before,
|
||
.tabel-card td[data-eticheta=""]::before { display:none; }
|
||
/* Controale full-width in card; butoanele primesc tinta touch >=44px. */
|
||
.tabel-card td select, .tabel-card td input[type=text],
|
||
.tabel-card td input[type=search] { width:100%; max-width:none; }
|
||
.tabel-card td button { width:100%; min-height:44px; }
|
||
|
||
/* Formulare de continut: o coloana, inputuri/selecturi full-width, butoane >=44px.
|
||
Scopat strict pe controalele de formular din sectiunile de continut (nu atinge
|
||
tabelul de trimiteri, modalul, taburile ARIA sau butoanele de copiere absolute). */
|
||
#card-cont input[type=email], #card-cont input[type=password],
|
||
#form-test-cheie input[type=password],
|
||
#jurnal-section select, #jurnal-section input[type=date],
|
||
#jurnal-section input[type=number] {
|
||
/* !important fiindca aceste inputuri au latimi inline (ex. width:280px / max-width:100px)
|
||
pe desktop; le suprascriem DOAR sub 767px, deci desktop ramane neschimbat. */
|
||
width:100% !important; max-width:none !important; box-sizing:border-box; }
|
||
#jurnal-section #filtre-jurnal > div { width:100%; }
|
||
#card-cont button, #form-test-cheie button,
|
||
#jurnal-section #filtre-jurnal button { min-height:44px; width:100%; }
|
||
|
||
/* === Acasa (upload, status, filtre) + login/signup pe mobil ===
|
||
Zona de upload, bara de status si bara de filtre (`_coada.html`) stiveaza pe O
|
||
coloana sub 767px; inputuri/butoane full-width cu tinta touch >=44px. Scopat pe
|
||
id-urile sectiunilor de pe Acasa ca sa NU atinga tabelul de trimiteri,
|
||
modalul sau paginile de continut. */
|
||
/* Bara de upload: zona slim (returning user) trece pe coloana; butonul full-width. */
|
||
#import-section .drop-zone { flex-direction:column; align-items:stretch; text-align:left; }
|
||
#import-section #upload-btn { width:100%; min-height:44px; }
|
||
/* Bara de status: contoarele/randurile raman aliniate la stanga, fara scroll orizontal. */
|
||
#status-bar > div { gap:10px; }
|
||
/* Bara de filtre trimiteri ADAPTATA pentru mobil (nu doar stivuita):
|
||
- cautarea vehicul = rand propriu prioritar (input + buton pe acelasi rand);
|
||
- grupurile de pill-uri (data + stare) = scroll orizontal, compacte (nu 8 butoane
|
||
full-width unul sub altul). !important suprascrie latimile inline doar pe mobil. */
|
||
#filtre-trimiteri { flex-direction:column; align-items:stretch; gap:8px; }
|
||
#filtre-trimiteri > div { width:100%; }
|
||
/* Cautarea vehicul: input creste, butonul Filtreaza compact langa el. */
|
||
#filtre-trimiteri input[type=text] { flex:1 1 auto; width:auto !important; max-width:none !important; min-height:44px; }
|
||
#filtre-trimiteri input[type=date] { width:100% !important; max-width:none !important; min-height:44px; }
|
||
#filtre-trimiteri button[type=submit] { flex:0 0 auto; width:auto; min-height:44px; }
|
||
/* Grupurile de pill-uri: o singura banda scrolabila orizontal, compacta. */
|
||
#filtre-trimiteri .pills-categorii { margin-left:0 !important; flex-wrap:nowrap;
|
||
overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:2px; }
|
||
#filtre-trimiteri .pill-cat { flex:0 0 auto; }
|
||
|
||
/* Operatii de mapat (preview import): randul de mapare stiva pe o coloana,
|
||
select-ul full-width (altfel max-width:340px global il scoate din viewport). */
|
||
.maprow { gap:6px 12px; padding:10px 0; }
|
||
.maprow .mapcol { flex:1 1 100%; min-width:0; }
|
||
.maprow select { width:100% !important; max-width:none !important; }
|
||
.maprow button { width:100%; min-height:44px; }
|
||
|
||
/* Card de autentificare (login/signup): centrat si nu depaseste viewport-ul pe mobil. */
|
||
.auth-card { max-width:100%; margin:24px auto; }
|
||
/* Versiunea ascunsa pe mobil (la fel ca pe tableta). */
|
||
.header-right > .muted { display:none; }
|
||
/* Actiuni .act pe mobil: iconita patrata 44px, textul ascuns. */
|
||
.act { min-width:44px; min-height:44px; width:44px; padding:0; }
|
||
.act .act-tx { display:none; }
|
||
.act .act-ic { display:inline-block; }
|
||
.act-group { gap:10px; }
|
||
/* Bara confirmare compacta pe mobil. */
|
||
.sticky-bar { padding:10px 12px; gap:10px; }
|
||
.sticky-bar button { width:100%; min-height:44px; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
{# Grila 3 coloane — stanga (logo ROMFAST) | centru (titlu+env) | dreapta (controale). #}
|
||
<header>
|
||
{# Celula stanga: logo ROMFAST #}
|
||
<div class="header-left">
|
||
{# Logo PNG real, RGBA transparent — ok pe toate temele fara filtre.
|
||
Invelit in <a href="/"> pentru a naviga la Trimiteri (Acasa) de pe orice pagina. #}
|
||
<a href="/" style="display:inline-flex; align-items:center; text-decoration:none;">
|
||
<img src="/static/romfast_logo.png" alt="ROMFAST" class="brand-logo">
|
||
</a>
|
||
</div>
|
||
{# Celula centru: titlu + badge env mic.
|
||
Titlul linkeaza la / (Trimiteri) ca si logo-ul. #}
|
||
<div class="header-center">
|
||
<a href="/" style="text-decoration:none; color:inherit;"><h1>Gateway RAR AUTOPASS</h1></a>
|
||
<span class="env">{{ rar_env }}</span>
|
||
</div>
|
||
{# Celula dreapta: comutator tema + versiune + meniu cont #}
|
||
<div class="header-right">
|
||
<button id="tema-toggle" class="icon-btn"
|
||
aria-label="Comuta tema (luminos/intunecat)"
|
||
title="Comuta tema">☀</button>
|
||
<span class="muted" style="font-size:13px;">v{{ version }}</span>
|
||
{% if is_authenticated|default(false) %}
|
||
{# Meniu cont: Cont/Integrare/Nomenclator + (admin) + logout.
|
||
Pe paginile neautentificate (login/signup) nu se randeaza deloc. #}
|
||
<div class="cont-menu-wrap">
|
||
<button id="cont-menu-toggle" class="icon-btn"
|
||
aria-haspopup="true" aria-expanded="false" aria-controls="cont-menu"
|
||
aria-label="Meniu cont" title="Meniu cont">☰</button>
|
||
<div id="cont-menu" class="cont-menu" role="menu" aria-labelledby="cont-menu-toggle" hidden>
|
||
{# Prima intrare: Trimiteri (Acasa) — pagina principala cu import + lista trimiterilor. #}
|
||
<a role="menuitem" href="/">Trimiteri</a>
|
||
{# Mapari, cu badge needs_mapping. #}
|
||
{% set _mapari_badge = (badges.mapari if (badges is defined and badges and badges.mapari) else 0) %}
|
||
<a role="menuitem" href="/?tab=mapari">Mapari{% if _mapari_badge %}<span class="tab-badge" aria-hidden="true" style="display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; margin-left:6px; padding:0 5px; border-radius:99px; background:var(--err); color:#fff; font-size:11px; font-weight:700;">{{ _mapari_badge }}</span>{% endif %}</a>
|
||
<hr>
|
||
<a role="menuitem" href="/?tab=cont">Cont</a>
|
||
<a role="menuitem" href="/?tab=integrare">Integrare</a>
|
||
<a role="menuitem" href="/?tab=nomenclator">Nomenclator</a>
|
||
<a role="menuitem" href="/?tab=jurnal">Jurnal</a>
|
||
{% if is_admin|default(false) %}<a role="menuitem" href="/admin">Conturi clienti</a>{% endif %}
|
||
<hr>
|
||
<form method="post" action="/logout">
|
||
<input type="hidden" name="csrf_token" value="{{ csrf_token|default('') }}">
|
||
<button role="menuitem" type="submit">Iesi din cont</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
</header>
|
||
{# aria-live pentru anuntarea schimbarilor de tema (accesibilitate) #}
|
||
<span id="tema-live" role="status" aria-live="polite"
|
||
style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;"></span>
|
||
{# Toast global: feedback tranzitoriu (ex. dupa salvarea unui rand de import).
|
||
aria-live=polite -> citit de screen-reader. window.arataToast(text, stareCss). #}
|
||
<div id="toast" role="status" aria-live="polite" hidden></div>
|
||
<main>{% block content %}{% endblock %}</main>
|
||
{# Modal detaliu trimitere: container global, SIBLING al <main> (nu descendent),
|
||
ca `inert`+`aria-hidden` pe <main> sa nu-l prinda si pe el. Corpul
|
||
#detaliu-modal-body e tinta de swap pentru fragment + rutele corectie/mapare/
|
||
lifecycle. Traieste in afara #submissions-wrap -> poll-ul nu-l atinge. #}
|
||
<div id="modal-detaliu" class="modal-overlay" role="dialog" aria-modal="true"
|
||
aria-labelledby="detaliu-modal-titlu" hidden>
|
||
<div class="modal-backdrop" data-modal-close></div>
|
||
<div class="modal-dialog" role="document">
|
||
<button type="button" class="modal-close" data-modal-close aria-label="Inchide detaliul">×</button>
|
||
<div id="detaliu-modal-body"></div>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
// Comutator tema ciclic: click cicleaza Light->Dark->Petrol->Auto.
|
||
// Separare init (sincronizare iconita/label) de persistenta (doar la click explicit).
|
||
// 'auto' se rezolva la paint prin anti-FOUC; aici setam data-theme rezolvat.
|
||
(function() {
|
||
var btn = document.getElementById('tema-toggle');
|
||
if (!btn) return;
|
||
var CYCLE = ['light', 'dark', 'petrol', 'auto'];
|
||
var VALID = {light:1, dark:1, petrol:1, auto:1};
|
||
// Iconite per tema: ☀ Light, ☾ Dark, ◐ Petrol, ◉ Auto
|
||
var ICONS = {light:'☀', dark:'☾', petrol:'◐', auto:'◙'};
|
||
var LABELS = {light:'Light', dark:'Dark', petrol:'Petrol', auto:'Auto'};
|
||
var NEXT = {light:'Dark', dark:'Petrol', petrol:'Auto', auto:'Light'};
|
||
function _stored() {
|
||
try { var v = localStorage.getItem('theme'); return (v && VALID[v]) ? v : 'auto'; } catch(e) { return 'auto'; }
|
||
}
|
||
function _resolved(stored) {
|
||
if (stored !== 'auto') return stored;
|
||
return window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
|
||
}
|
||
function _syncButton(stored) {
|
||
var s = VALID[stored] ? stored : 'auto';
|
||
btn.innerHTML = ICONS[s];
|
||
btn.setAttribute('aria-label', 'Tema: ' + LABELS[s] + ', apasa pentru ' + NEXT[s]);
|
||
btn.title = LABELS[s]; // doar numele temei (ex. "Petrol"), nu ciclul intreg
|
||
}
|
||
function _setTheme(t) {
|
||
document.documentElement.setAttribute('data-theme', _resolved(t));
|
||
try { localStorage.setItem('theme', t); } catch(e) {}
|
||
_syncButton(t);
|
||
var live = document.getElementById('tema-live');
|
||
if (live) live.textContent = 'Tema: ' + LABELS[t] + (t === 'auto' ? ' (urmeaza sistemul)' : '');
|
||
}
|
||
// Init: sincronizeaza iconita din starea stocata (fara a scrie in localStorage).
|
||
_syncButton(_stored());
|
||
btn.addEventListener('click', function() {
|
||
var cur = _stored();
|
||
var idx = CYCLE.indexOf(cur);
|
||
_setTheme(CYCLE[(idx + 1) % CYCLE.length]);
|
||
});
|
||
})();
|
||
</script>
|
||
<script>
|
||
// Meniu cont: dropdown ancorat dreapta-sus. Deschide/inchide la click,
|
||
// inchide la Esc (focus readus pe buton) si la click in afara. Fara dependente.
|
||
(function() {
|
||
var toggle = document.getElementById('cont-menu-toggle');
|
||
var menu = document.getElementById('cont-menu');
|
||
if (!toggle || !menu) return;
|
||
function open() {
|
||
menu.hidden = false;
|
||
toggle.setAttribute('aria-expanded', 'true');
|
||
document.addEventListener('click', onDocClick, true);
|
||
document.addEventListener('keydown', onKey, true);
|
||
}
|
||
function close(refocus) {
|
||
menu.hidden = true;
|
||
toggle.setAttribute('aria-expanded', 'false');
|
||
document.removeEventListener('click', onDocClick, true);
|
||
document.removeEventListener('keydown', onKey, true);
|
||
if (refocus) toggle.focus();
|
||
}
|
||
function onDocClick(e) {
|
||
if (!menu.contains(e.target) && e.target !== toggle) close(false);
|
||
}
|
||
function onKey(e) {
|
||
if (e.key === 'Escape') { e.preventDefault(); close(true); }
|
||
}
|
||
toggle.addEventListener('click', function(e) {
|
||
e.stopPropagation();
|
||
if (menu.hidden) open(); else close(false);
|
||
});
|
||
})();
|
||
</script>
|
||
<script>
|
||
// Kebab partajat (actiuni per-rand). `<details class="kebab">` + `.kebab-menu` position:fixed.
|
||
// Pozitionarea se face in JS la deschidere (eveniment `toggle`, captat pe document fiindca nu
|
||
// bubble-uie), ancorat sub buton si aliniat la dreapta; flip in sus daca nu incape jos. Delegare
|
||
// pe document → supravietuieste swap-urilor HTMX (#mapari-section se re-randeaza la fiecare salvare).
|
||
(function() {
|
||
function position(d) {
|
||
var btn = d.querySelector('summary');
|
||
var menu = d.querySelector('.kebab-menu');
|
||
if (!btn || !menu) return;
|
||
var r = btn.getBoundingClientRect();
|
||
menu.style.visibility = 'hidden';
|
||
var mw = menu.offsetWidth, mh = menu.offsetHeight;
|
||
var left = Math.max(8, r.right - mw);
|
||
var top = (r.bottom + mh > window.innerHeight - 8 && r.top - mh - 4 > 8)
|
||
? r.top - mh - 4 : r.bottom + 4;
|
||
menu.style.left = left + 'px';
|
||
menu.style.top = top + 'px';
|
||
menu.style.visibility = '';
|
||
}
|
||
function closeAll(except) {
|
||
document.querySelectorAll('details.kebab[open]').forEach(function(d) {
|
||
if (d !== except) d.removeAttribute('open');
|
||
});
|
||
}
|
||
// `toggle` nu bubble-uie -> ascultam in faza de capturare pe document.
|
||
document.addEventListener('toggle', function(e) {
|
||
var d = e.target;
|
||
if (!d.classList || !d.classList.contains('kebab')) return;
|
||
if (d.open) { closeAll(d); position(d); }
|
||
}, true);
|
||
document.addEventListener('click', function(e) {
|
||
if (!e.target.closest('details.kebab')) closeAll(null);
|
||
});
|
||
document.addEventListener('keydown', function(e) {
|
||
if (e.key === 'Escape') closeAll(null);
|
||
});
|
||
// La scroll/resize repozitionam meniul deschis (position:fixed nu urmareste ancora singur).
|
||
window.addEventListener('scroll', function() {
|
||
var open = document.querySelector('details.kebab[open]');
|
||
if (open) position(open);
|
||
}, true);
|
||
window.addEventListener('resize', function() { closeAll(null); });
|
||
})();
|
||
</script>
|
||
<script>
|
||
// Dirty state pentru butoanele de salvare din tabelele de mapari.
|
||
// Cand utilizatorul schimba un select dintr-un form de mapare, butonul de salvare
|
||
// legat prin data-dirty-form devine evidentiat (clasa "dirty" → fundal --accent).
|
||
// Starea "dirty" e efemera per-render: un swap outerHTML o reseteaza automat.
|
||
// Delegare pe document → supravietuieste swap-urilor HTMX (#mapari-section).
|
||
document.addEventListener('change', function(e) {
|
||
var el = e.target;
|
||
if (el.tagName !== 'SELECT' || !el.form || !el.form.id) return;
|
||
var saveBtn = document.querySelector('button[data-dirty-form="' + el.form.id + '"]');
|
||
if (saveBtn) saveBtn.classList.add('dirty');
|
||
});
|
||
</script>
|
||
<script>
|
||
// Toast global: feedback tranzitoriu vizibil + accesibil (aria-live).
|
||
// window.arataToast(text, stareCss) — stareCss (ex. "s-error"/"s-needs_review")
|
||
// coloreaza punctul indicator (rosu/galben/verde). Auto-dispare dupa ~3.2s.
|
||
(function() {
|
||
var t = document.getElementById('toast');
|
||
var timer = null;
|
||
window.arataToast = function(text, stareCss) {
|
||
if (!t) return;
|
||
t.className = '';
|
||
if (stareCss) t.classList.add('t-' + stareCss);
|
||
t.textContent = text;
|
||
t.hidden = false;
|
||
void t.offsetWidth; // reflow -> tranzitia porneste
|
||
t.classList.add('show');
|
||
if (timer) clearTimeout(timer);
|
||
timer = setTimeout(function() {
|
||
t.classList.remove('show');
|
||
setTimeout(function() { t.hidden = true; }, 220);
|
||
}, 3200);
|
||
};
|
||
})();
|
||
|
||
// Feedback dupa salvarea/confirmarea unui rand de import (HX-Trigger 'randSalvat').
|
||
// Toast imediat (ce rand + ce stare are acum); evidentierea randului se aplica dupa
|
||
// ce preview-ul se reincarca (reincarcaPreview), de scriptul din _preview_import.
|
||
document.body.addEventListener('randSalvat', function(e) {
|
||
var d = e.detail || {};
|
||
if (window.arataToast)
|
||
window.arataToast('Randul ' + d.nr + ' actualizat · ' + (d.stare || ''), d.stareCss || '');
|
||
window.__randSalvat = d;
|
||
});
|
||
</script>
|
||
<script>
|
||
// Cautare + paginare client-side pentru tabele mari (data-dt="<page_size>"). Filtreaza si
|
||
// pagineaza DOM-ul deja randat (fara cereri server) — potrivit pentru maparile care pot creste
|
||
// la sute de randuri. Re-init la full load SI dupa swap-urile HTMX (tab Mapari, salvare/stergere).
|
||
// Markup: <div data-dt="10"> [input data-dt-search] <table> [div data-dt-empty] [div data-dt-pager] </div>
|
||
(function() {
|
||
function enhance(scope) {
|
||
(scope || document).querySelectorAll('[data-dt]').forEach(function(wrap) {
|
||
if (wrap.__dt) return; // idempotent (afterSettle poate re-scana)
|
||
wrap.__dt = true;
|
||
var table = wrap.querySelector('table');
|
||
var tbody = table && table.tBodies[0];
|
||
if (!tbody) return;
|
||
var size = parseInt(wrap.getAttribute('data-dt'), 10) || 10;
|
||
var search = wrap.querySelector('[data-dt-search]');
|
||
var pager = wrap.querySelector('[data-dt-pager]');
|
||
var empty = wrap.querySelector('[data-dt-empty]');
|
||
var rows = Array.prototype.slice.call(tbody.rows);
|
||
var page = 1;
|
||
// Haystack-ul randului: atributul data-dt-row daca exista, altfel textContent. Necesar
|
||
// cand randul contine un <select> (optiunile lui ar pune tot nomenclatorul in textContent
|
||
// -> orice cautare ar potrivi orice rand). Vezi data-dt-row in _mapari.html.
|
||
function haystack(r) {
|
||
var h = r.getAttribute('data-dt-row');
|
||
return (h !== null ? h : r.textContent).toLowerCase();
|
||
}
|
||
function matched() {
|
||
var q = (search && search.value || '').trim().toLowerCase();
|
||
if (!q) return rows;
|
||
return rows.filter(function(r) { return haystack(r).indexOf(q) !== -1; });
|
||
}
|
||
function draw() {
|
||
var fr = matched();
|
||
var pages = Math.max(1, Math.ceil(fr.length / size));
|
||
if (page > pages) page = pages;
|
||
if (page < 1) page = 1;
|
||
var start = (page - 1) * size;
|
||
rows.forEach(function(r) { r.style.display = 'none'; });
|
||
fr.slice(start, start + size).forEach(function(r) { r.style.display = ''; });
|
||
if (empty) empty.style.display = fr.length ? 'none' : '';
|
||
if (!pager) return;
|
||
if (fr.length <= size && page === 1) { pager.style.display = 'none'; pager.innerHTML = ''; return; }
|
||
pager.style.display = '';
|
||
pager.innerHTML = '';
|
||
var info = document.createElement('span');
|
||
info.textContent = (fr.length ? start + 1 : 0) + '–' +
|
||
Math.min(start + size, fr.length) + ' din ' + fr.length;
|
||
var prev = document.createElement('button');
|
||
prev.type = 'button'; prev.textContent = 'Inapoi'; prev.disabled = page <= 1;
|
||
prev.addEventListener('click', function() { page--; draw(); });
|
||
var next = document.createElement('button');
|
||
next.type = 'button'; next.textContent = 'Inainte'; next.disabled = page >= pages;
|
||
next.addEventListener('click', function() { page++; draw(); });
|
||
pager.appendChild(info); pager.appendChild(prev); pager.appendChild(next);
|
||
}
|
||
if (search) search.addEventListener('input', function() { page = 1; draw(); });
|
||
draw();
|
||
});
|
||
}
|
||
document.addEventListener('DOMContentLoaded', function() { enhance(document); });
|
||
document.body.addEventListener('htmx:afterSettle', function(e) { enhance(e.target); });
|
||
})();
|
||
</script>
|
||
<script>
|
||
// Modal detaliu trimitere: detaliul se incarca prin HTMX in #detaliu-modal-body
|
||
// (in afara #submissions-wrap, deci poll-ul nu-l atinge). Aici: deschidere la click
|
||
// pe rand, inchidere (x/Esc/backdrop), focus-trap, scroll-lock, inert+aria-hidden pe
|
||
// <main>, stare de eroare la load esuat, inchidere pe succes corectie/sterge
|
||
// (HX-Trigger inchideModal).
|
||
(function() {
|
||
var overlay = document.getElementById('modal-detaliu');
|
||
if (!overlay) return;
|
||
var dialog = overlay.querySelector('.modal-dialog');
|
||
var body = document.getElementById('detaliu-modal-body');
|
||
var main = document.querySelector('main');
|
||
var trigger = null; // randul care a deschis modalul (focus return la inchidere)
|
||
var triggerId = null; // id-ul randului: re-query la inchidere daca poll-ul l-a re-swapuit
|
||
var onKeyTrap = null;
|
||
|
||
function focusable() {
|
||
return Array.prototype.filter.call(
|
||
dialog.querySelectorAll('a[href], button:not([disabled]), input:not([disabled]),' +
|
||
' select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'),
|
||
function(el) { return el.offsetParent !== null || el === document.activeElement; });
|
||
}
|
||
// focus-trap — Tab/Shift+Tab cicleaza in interiorul dialogului.
|
||
function trapFocus(e) {
|
||
if (e.key !== 'Tab') return;
|
||
var f = focusable();
|
||
if (!f.length) { e.preventDefault(); return; }
|
||
var first = f[0], last = f[f.length - 1];
|
||
if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }
|
||
else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
|
||
}
|
||
function isOpen() { return !overlay.hidden; }
|
||
|
||
function open(triggerRow) {
|
||
trigger = triggerRow || null;
|
||
triggerId = (triggerRow && triggerRow.id) || null;
|
||
body.innerHTML = '<div class="empty muted" style="padding:24px;">Se incarca…</div>';
|
||
overlay.hidden = false;
|
||
document.body.classList.add('modal-open'); // scroll-lock pe body
|
||
if (main) { main.setAttribute('inert', ''); main.setAttribute('aria-hidden', 'true'); }
|
||
onKeyTrap = trapFocus;
|
||
document.addEventListener('keydown', onKeyTrap, true);
|
||
var x = overlay.querySelector('.modal-close');
|
||
if (x) x.focus(); // focus initial in modal
|
||
}
|
||
function close() {
|
||
if (!isOpen()) return;
|
||
overlay.hidden = true;
|
||
body.innerHTML = '';
|
||
document.body.classList.remove('modal-open');
|
||
if (main) { main.removeAttribute('inert'); main.removeAttribute('aria-hidden'); }
|
||
if (onKeyTrap) { document.removeEventListener('keydown', onKeyTrap, true); onKeyTrap = null; }
|
||
var t = trigger; trigger = null;
|
||
if (t && t.focus) t.focus(); // focus readus pe rand
|
||
}
|
||
// API public: butonul „Inchide" din fragment + inchiderea pe succes corectie/sterge.
|
||
window.inchideDetaliu = function() { close(); };
|
||
|
||
// Inchidere: x si backdrop (elemente cu data-modal-close), Esc.
|
||
overlay.addEventListener('click', function(e) {
|
||
if (e.target && e.target.hasAttribute && e.target.hasAttribute('data-modal-close')) close();
|
||
});
|
||
document.addEventListener('keydown', function(e) {
|
||
if (e.key === 'Escape' && isOpen()) { e.preventDefault(); close(); }
|
||
});
|
||
|
||
// Deschidere la click pe rand (htmx:beforeRequest): arata modalul cu placeholder
|
||
// inainte ca raspunsul fragmentului sa fie swap-uit in corp.
|
||
// Trateaza atat .trimitere-row (Trimiteri) cat si .btn-editeaza (preview import)
|
||
// → open() instaleaza inert pe <main>, focus-trap si readuce focusul la inchidere (US-006).
|
||
document.body.addEventListener('htmx:beforeRequest', function(evt) {
|
||
var elt = evt.detail && evt.detail.elt;
|
||
if (!elt || !elt.classList) return;
|
||
if (elt.classList.contains('trimitere-row') || elt.classList.contains('btn-editeaza')) open(elt);
|
||
});
|
||
// Dupa swap-ul fragmentului (sau re-render corectie/mapare): muta focusul in modal.
|
||
body.addEventListener('htmx:afterSettle', function() {
|
||
if (!isOpen()) return;
|
||
var f = focusable();
|
||
if (f.length) f[0].focus();
|
||
});
|
||
// Load-error al fragmentului (GET esuat) -> stare Reincearca/Inchide, nu placeholder blocat.
|
||
body.addEventListener('htmx:responseError', function(evt) {
|
||
if (!isOpen()) return;
|
||
var elt = evt.detail && evt.detail.elt;
|
||
var url = (elt && elt.getAttribute && elt.getAttribute('hx-get')) || '';
|
||
body.innerHTML = '<div class="modal-eroare"><p>Nu s-a putut incarca detaliul.</p>' +
|
||
'<div class="actiuni">' +
|
||
(url ? '<button type="button" data-modal-retry="' + url + '">Reincearca</button>' : '') +
|
||
'<button type="button" data-modal-close' +
|
||
' style="background:var(--card); color:var(--muted); border-color:var(--line);">Inchide</button>' +
|
||
'</div></div>';
|
||
});
|
||
body.addEventListener('click', function(e) {
|
||
var r = e.target.closest && e.target.closest('[data-modal-retry]');
|
||
if (r && window.htmx) htmx.ajax('GET', r.getAttribute('data-modal-retry'),
|
||
{ target: body, swap: 'innerHTML' });
|
||
});
|
||
|
||
// Inchidere pe succes corectie/sterge — ruta emite HX-Trigger `inchideModal`.
|
||
// Lista se reincarca separat prin `trimiteriChanged` (#submissions-wrap). Maparea
|
||
// inline NU emite inchideModal -> modalul ramane deschis sa arate codul rezolvat.
|
||
document.body.addEventListener('inchideModal', function() { close(); });
|
||
|
||
// Tastatura pe rand (role=button): Enter/Space deschid modalul.
|
||
document.body.addEventListener('keydown', function(evt) {
|
||
var t = evt.target;
|
||
if (!(t && t.classList && t.classList.contains('trimitere-row'))) return;
|
||
if (evt.key === 'Enter' || evt.key === ' ' || evt.key === 'Spacebar') {
|
||
evt.preventDefault();
|
||
t.click();
|
||
}
|
||
});
|
||
})();
|
||
</script>
|
||
<script>
|
||
// Filtrare stare prin pill-uri + reincarcare a tabelului (manuala sau auto din poller).
|
||
// Reincarcarea trece prin form -> pastreaza filtrul/pagina curenta (hx-include).
|
||
(function() {
|
||
// Quick-pills de data (Azi/7 zile/30 zile/Custom): seteaza interval sau dezvaluie campuri manuale.
|
||
// NU modifica f-status — pastreaza pill-ul de stare activ curent.
|
||
window.setDataRange = function(btn, range) {
|
||
var form = document.getElementById('filtre-trimiteri');
|
||
if (!form) return;
|
||
var de = document.getElementById('f-data-de');
|
||
var pana = document.getElementById('f-data-pana');
|
||
var hp = document.getElementById('f-page'); if (hp) hp.value = '1';
|
||
var customPanel = document.getElementById('custom-date-fields');
|
||
// Marcheaza pill-ul de data activ, reseteaza celelalte quick-pills
|
||
document.querySelectorAll('.pill-data').forEach(function(b) {
|
||
b.setAttribute('aria-pressed', 'false');
|
||
});
|
||
if (btn) btn.setAttribute('aria-pressed', 'true');
|
||
// Custom: dezvaluie campurile manuale, asteapta inputul utilizatorului.
|
||
// NU face submit automat; form-ul submite la change (hx-trigger="change").
|
||
if (range === 'custom') {
|
||
// Goleste valorile ramase de la ultimul preset — utilizatorul porneste de la curat.
|
||
if (de) de.value = '';
|
||
if (pana) pana.value = '';
|
||
if (customPanel) customPanel.style.display = 'flex';
|
||
if (de) de.focus();
|
||
return;
|
||
}
|
||
// Preset-uri: ascunde campurile manuale, seteaza intervalul si trimite imediat.
|
||
if (customPanel) customPanel.style.display = 'none';
|
||
var azi = new Date();
|
||
// Formateaza data ca YYYY-MM-DD in zona locala (nu UTC, ca sa nu cada cu -1 zi noaptea)
|
||
function fmt(d) {
|
||
return d.getFullYear() + '-' +
|
||
String(d.getMonth() + 1).padStart(2, '0') + '-' +
|
||
String(d.getDate()).padStart(2, '0');
|
||
}
|
||
var from, to;
|
||
if (range === 'azi') { from = fmt(azi); to = fmt(azi); }
|
||
else if (range === '7zile') { var d7 = new Date(azi); d7.setDate(d7.getDate() - 6); from = fmt(d7); to = fmt(azi); }
|
||
else if (range === '30zile') { var d30 = new Date(azi); d30.setDate(d30.getDate() - 29); from = fmt(d30); to = fmt(azi); }
|
||
else { from = ''; to = ''; }
|
||
if (de) de.value = from;
|
||
if (pana) pana.value = to;
|
||
if (form.requestSubmit) form.requestSubmit(); else form.submit();
|
||
};
|
||
// Pill de stare: scrie campul hidden, reseteaza pagina la 1 si re-trimite filtrul.
|
||
window.filtreazaStare = function(btn, status) {
|
||
var form = document.getElementById('filtre-trimiteri');
|
||
if (!form) return;
|
||
var hs = document.getElementById('f-status'); if (hs) hs.value = status || '';
|
||
var hp = document.getElementById('f-page'); if (hp) hp.value = '1';
|
||
document.querySelectorAll('#pills-categorii .pill-cat').forEach(function(b) {
|
||
b.setAttribute('aria-pressed', 'false');
|
||
});
|
||
if (btn) btn.setAttribute('aria-pressed', 'true');
|
||
if (form.requestSubmit) form.requestSubmit(); else form.submit();
|
||
};
|
||
// Reincarca tabelul pastrand filtrul curent (hx-include #filtre-trimiteri).
|
||
window.reincarcaTrimiteri = function() {
|
||
if (window.htmx) htmx.trigger('#submissions-wrap', 'reincarcaTrimiteri');
|
||
};
|
||
|
||
// Poller auto-refresh: compara versiunea datelor cu cea cu care s-a randat tabelul.
|
||
// Daca difera (schimbari externe — ex. worker a procesat trimiteri), reincarca automat
|
||
// pastrand filtrul curent. Fara nudge "Date noi" — auto-refresh e mai consistent.
|
||
// Decizie: nudge eliminat; distinctia propriu vs extern e imposibila pe client
|
||
// fara sesiune dedicata — auto-refresh acoper ambele cazuri (US-008).
|
||
var INTERVAL = 20000;
|
||
function versiuneCurenta() {
|
||
var e = document.getElementById('trimiteri-versiune');
|
||
return e ? e.getAttribute('data-v') : null;
|
||
}
|
||
var _verifica_in_curs = false;
|
||
function verifica() {
|
||
if (versiuneCurenta() === null) return; // tabelul nu e pe ecran (alt tab)
|
||
if (_verifica_in_curs) return; // evita suprapuneri
|
||
_verifica_in_curs = true;
|
||
fetch('/_fragments/trimiteri-versiune', { headers: { 'X-Requested-With': 'fetch' } })
|
||
.then(function(r) { return r.ok ? r.json() : null; })
|
||
.then(function(d) {
|
||
if (d && d.v !== versiuneCurenta()) reincarcaTrimiteri();
|
||
})
|
||
.catch(function() {})
|
||
.finally(function() { _verifica_in_curs = false; });
|
||
}
|
||
setInterval(verifica, INTERVAL);
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|