PostERG/xamxam
1
0
Fork 0
mirror of https://codeberg.org/PostERG/xamxam.git synced 2026-08-10 07:11:18 +02:00
Code Issues Packages Projects Releases Wiki Activity

justfile: standardise test recipes to lint-php/lint-css/lint-js/test + add fix recipe

Browse Source 
- Removed ambiguous aliases: phpstan, cs-check, syntax
- Split lint-biome into lint-css and lint-js with correct paths
- Added lint meta-recipe and fix recipe (biome --unsafe + php-cs-fixer)
- Fixed FormBootstrap dead null check, CSS shorthand override bug
- Updated phpstan baseline, suppressed noDescendingSpecificity/noInnerDeclarations
- Applied ~74 biome auto-fixes across CSS/JS
This commit is contained in:
Pontoporeia
2026-07-05 11:07:41 +02:00
parent 34b5d3e585
commit 3e93150c76
59 changed files with 5459 additions and 5196 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/public/assets/css/admin.css
+1247 -1210
View File
File diff suppressed because it is too large Load Diff
app/public/assets/css/base.css
+49 -36
View File
@@ -5,72 +5,85 @@
============================================================ */
/* Full-height flex layout: header → main → (optional footer) */
html, body {
height: 100%;
overflow: hidden;
html,
body {
height: 100%;
overflow: hidden;
}
/* ── Discreet scrollbars ─────────────────────────────────────────── */
/* WebKit browsers */
::-webkit-scrollbar {
width: 5px;
height: 5px;
width: 5px;
height: 5px;
}
::-webkit-scrollbar-track {
background: transparent;
background: transparent;
}
::-webkit-scrollbar-thumb {
background: var(--text-tertiary);
border-radius: 3px;
background: var(--text-tertiary);
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--text-secondary);
background: var(--text-secondary);
}
/* Firefox */
* {
scrollbar-width: thin;
scrollbar-color: var(--text-tertiary) transparent;
scrollbar-width: thin;
scrollbar-color: var(--text-tertiary) transparent;
}
body {
font-family: var(--font-body);
font-weight: 300;
color: var(--text-primary);
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0) 92%,
rgba(149, 87, 181, 1) 100%
);
display: flex;
flex-direction: column;
font-family: var(--font-body);
font-weight: 300;
color: var(--text-primary);
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0) 92%,
rgba(149, 87, 181, 1) 100%
);
display: flex;
flex-direction: column;
}
main {
flex: 1;
min-height: 0;
overflow-wrap: anywhere;
flex: 1;
min-height: 0;
overflow-wrap: anywhere;
}
main * {
overflow-wrap: anywhere;
word-break: break-word;
overflow-wrap: anywhere;
word-break: break-word;
}
/* Global heading scale — used by admin + public pages */
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
h5 { font-size: var(--step-0); }
h6 { font-size: var(--step--1); }
h1 {
font-size: var(--step-4);
}
h2 {
font-size: var(--step-3);
}
h3 {
font-size: var(--step-2);
}
h4 {
font-size: var(--step-1);
}
h5 {
font-size: var(--step-0);
}
h6 {
font-size: var(--step--1);
}
:where(h1, h2, h3, h4, h5, h6) {
font-family: var(--font-display);
font-weight: 400;
margin: 0 0 var(--space-l) 0;
line-height: 1.15;
font-family: var(--font-display);
font-weight: 400;
margin: 0 0 var(--space-l) 0;
line-height: 1.15;
}
app/public/assets/css/colors.css
+66 -66
View File
@@ -4,80 +4,80 @@
============================================================ */
:root {
/* Backgrounds */
--bg-primary: #ffffff;
--bg-secondary: #f5f5f5;
--bg-tertiary: #e8e8e8;
--bg-active: #d0d0d0;
/* Backgrounds */
--bg-primary: #ffffff;
--bg-secondary: #f5f5f5;
--bg-tertiary: #e8e8e8;
--bg-active: #d0d0d0;
/* Text */
--text-primary: #111111;
--text-secondary: #666666;
--text-tertiary: #999999;
/* Text */
--text-primary: #111111;
--text-secondary: #666666;
--text-tertiary: #999999;
/* Borders */
--border-primary: #dddddd;
--border-secondary: #cccccc;
/* Borders */
--border-primary: #dddddd;
--border-secondary: #cccccc;
/* Border radius */
--radius: 10px;
/* Border radius */
--radius: 10px;
/* Status */
--success: #5cd69d;
--error: #f25a5a;
--warning: #fbca51;
/* Status */
--success: #5cd69d;
--error: #f25a5a;
--warning: #fbca51;
/* Accent */
--accent-primary: #9557b5;
--accent-secondary: #683d7f;
--accent-foreground: #ffffff;
--accent-muted: rgba(149, 87, 181, 0.12);
--accent-blue: #41adff;
--accent-green: #4caf50;
--accent-yellow: #f39c12;
--accent-red: #f25a5a;
/* Accent */
--accent-primary: #9557b5;
--accent-secondary: #683d7f;
--accent-foreground: #ffffff;
--accent-muted: rgba(149, 87, 181, 0.12);
--accent-blue: #41adff;
--accent-green: #4caf50;
--accent-yellow: #f39c12;
--accent-red: #f25a5a;
/* Gradient (header) */
--gradient-1: #42963f;
--gradient-2: #65e478;
--gradient-3: #57abc7;
--gradient-4: #db53ed;
/* Gradient (header) */
--gradient-1: #42963f;
--gradient-2: #65e478;
--gradient-3: #57abc7;
--gradient-4: #db53ed;
/* Header decorative */
--header-gradient-fade: rgba(149, 87, 181, 0);
--header-shadow-strong: rgba(119, 70, 145, 1);
--header-shadow-soft: rgba(119, 70, 145, 0.8);
--header-nav-active-border: rgba(255, 255, 255, 0.6);
/* Header decorative */
--header-gradient-fade: rgba(149, 87, 181, 0);
--header-shadow-strong: rgba(119, 70, 145, 1);
--header-shadow-soft: rgba(119, 70, 145, 0.8);
--header-nav-active-border: rgba(255, 255, 255, 0.6);
/* Search error block */
--search-error-bg: #fff0f0;
--search-error-border: #cc0000;
--search-error-color: #cc0000;
/* Search error block */
--search-error-bg: #fff0f0;
--search-error-border: #cc0000;
--search-error-color: #cc0000;
/* System page — log/config syntax highlight */
--sys-syntax-comment: #999999;
--sys-syntax-directive: #1a6fb5;
--sys-syntax-block: #7a2fa0;
--sys-syntax-value: #a05c00;
--sys-syntax-location: #1a7a6b;
--sys-syntax-notice: #3a6ea8;
--sys-syntax-crit: #c0392b;
/* System page — log/config syntax highlight */
--sys-syntax-comment: #999999;
--sys-syntax-directive: #1a6fb5;
--sys-syntax-block: #7a2fa0;
--sys-syntax-value: #a05c00;
--sys-syntax-location: #1a7a6b;
--sys-syntax-notice: #3a6ea8;
--sys-syntax-crit: #c0392b;
/* Muted alpha overlays — derived from semantic tokens */
--success-muted-bg: rgba(92, 214, 157, 0.12);
--success-muted-border: rgba(92, 214, 157, 0.35);
--warning-muted-bg: rgba(251, 202, 81, 0.12);
--warning-muted-border: rgba(251, 202, 81, 0.35);
--error-muted-bg: rgba(242, 90, 90, 0.12);
--error-muted-border: rgba(242, 90, 90, 0.35);
--blue-muted-bg: rgba(65, 173, 255, 0.12);
--blue-muted-border: rgba(65, 173, 255, 0.3);
--blue-muted-bg-hover: rgba(65, 173, 255, 0.22);
--yellow-muted-bg: rgba(243, 156, 18, 0.12);
--yellow-muted-border: rgba(243, 156, 18, 0.3);
--yellow-muted-bg-hover: rgba(243, 156, 18, 0.22);
--green-muted-bg: rgba(76, 175, 80, 0.12);
--green-muted-border: rgba(76, 175, 80, 0.3);
--green-muted-bg-hover: rgba(76, 175, 80, 0.22);
--danger-border-muted: rgba(242, 90, 90, 0.35);
/* Muted alpha overlays — derived from semantic tokens */
--success-muted-bg: rgba(92, 214, 157, 0.12);
--success-muted-border: rgba(92, 214, 157, 0.35);
--warning-muted-bg: rgba(251, 202, 81, 0.12);
--warning-muted-border: rgba(251, 202, 81, 0.35);
--error-muted-bg: rgba(242, 90, 90, 0.12);
--error-muted-border: rgba(242, 90, 90, 0.35);
--blue-muted-bg: rgba(65, 173, 255, 0.12);
--blue-muted-border: rgba(65, 173, 255, 0.3);
--blue-muted-bg-hover: rgba(65, 173, 255, 0.22);
--yellow-muted-bg: rgba(243, 156, 18, 0.12);
--yellow-muted-border: rgba(243, 156, 18, 0.3);
--yellow-muted-bg-hover: rgba(243, 156, 18, 0.22);
--green-muted-bg: rgba(76, 175, 80, 0.12);
--green-muted-border: rgba(76, 175, 80, 0.3);
--green-muted-bg-hover: rgba(76, 175, 80, 0.22);
--danger-border-muted: rgba(242, 90, 90, 0.35);
}
app/public/assets/css/components/badges.css
+23 -23
View File
@@ -4,45 +4,45 @@
============================================================ */
.status-badge {
display: inline-block;
padding: var(--space-3xs) var(--space-2xs);
border-radius: var(--radius);
font-size: var(--step--2);
font-weight: 500;
letter-spacing: 0.04em;
display: inline-block;
padding: var(--space-3xs) var(--space-2xs);
border-radius: var(--radius);
font-size: var(--step--2);
font-weight: 500;
letter-spacing: 0.04em;
}
.status-published {
background: var(--green-muted-bg);
color: var(--accent-green);
background: var(--green-muted-bg);
color: var(--accent-green);
}
.status-pending {
background: var(--warning-muted-bg);
color: var(--warning);
background: var(--warning-muted-bg);
color: var(--warning);
}
.status-access {
display: inline-block;
font-size: var(--step--2);
padding: var(--space-3xs) var(--space-3xs);
border-radius: var(--radius);
background: var(--bg-tertiary);
color: var(--text-secondary);
letter-spacing: 0.03em;
display: inline-block;
font-size: var(--step--2);
padding: var(--space-3xs) var(--space-3xs);
border-radius: var(--radius);
background: var(--bg-tertiary);
color: var(--text-secondary);
letter-spacing: 0.03em;
}
.status-access--libre {
background: var(--green-muted-bg);
color: var(--accent-green);
background: var(--green-muted-bg);
color: var(--accent-green);
}
.status-access--interne {
background: var(--blue-muted-bg);
color: var(--accent-blue);
background: var(--blue-muted-bg);
color: var(--accent-blue);
}
.status-access--interdit {
background: var(--error-muted-bg);
color: var(--error);
background: var(--error-muted-bg);
color: var(--error);
}
app/public/assets/css/components/buttons.css
+92 -69
View File
@@ -5,142 +5,165 @@
============================================================ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-3xs);
padding: var(--space-xs);
border-radius: var(--radius);
font-size: var(--step--1);
font-family: inherit;
font-weight: 500;
letter-spacing: 0.04em;
cursor: pointer;
text-decoration: none;
line-height: 1.3;
border: none;
transition: background 0.15s, opacity 0.15s, box-shadow 0.15s, filter 0.15s;
width: fit-content;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-3xs);
padding: var(--space-xs);
border-radius: var(--radius);
font-size: var(--step--1);
font-family: inherit;
font-weight: 500;
letter-spacing: 0.04em;
cursor: pointer;
text-decoration: none;
line-height: 1.3;
border: none;
transition:
background 0.15s,
opacity 0.15s,
box-shadow 0.15s,
filter 0.15s;
width: fit-content;
}
.btn:hover { filter: brightness(0.92); }
.btn:hover {
filter: brightness(0.92);
}
/* Primary: accent background, white text */
.btn--primary {
background: var(--accent-primary);
color: var(--accent-foreground);
border: 1px solid transparent;
background: var(--accent-primary);
color: var(--accent-foreground);
border: 1px solid transparent;
}
.btn--primary:hover {
background: var(--accent-secondary);
filter: none;
background: var(--accent-secondary);
filter: none;
}
/* Secondary: light background with border */
.btn--secondary {
background: var(--bg-primary);
color: var(--text-secondary);
border: 1px solid var(--border-primary);
background: var(--bg-primary);
color: var(--text-secondary);
border: 1px solid var(--border-primary);
}
.btn--secondary:hover {
border-color: var(--text-secondary);
color: var(--text-primary);
filter: none;
border-color: var(--text-secondary);
color: var(--text-primary);
filter: none;
}
/* Muted secondary: bg-secondary background */
.btn--muted {
background: var(--bg-secondary);
color: var(--text-secondary);
border: 1px solid var(--border-primary);
background: var(--bg-secondary);
color: var(--text-secondary);
border: 1px solid var(--border-primary);
}
.btn--muted:hover {
background: var(--bg-tertiary);
color: var(--text-primary);
filter: none;
background: var(--bg-tertiary);
color: var(--text-primary);
filter: none;
}
/* Ghost: transparent bg, border, for links styled as buttons */
.btn--ghost {
background: transparent;
color: var(--text-secondary);
border: 1px solid var(--border-primary);
background: transparent;
color: var(--text-secondary);
border: 1px solid var(--border-primary);
}
.btn--ghost:hover {
border-color: var(--text-secondary);
color: var(--text-primary);
filter: none;
border-color: var(--text-secondary);
color: var(--text-primary);
filter: none;
}
/* Danger: red background */
.btn--danger {
background: var(--accent-red);
color: var(--accent-foreground);
background: var(--accent-red);
color: var(--accent-foreground);
}
.btn--danger:hover { filter: brightness(0.9); }
.btn--danger:hover {
filter: brightness(0.9);
}
/* Warning: yellow background */
.btn--warning {
background: var(--accent-yellow);
color: var(--text-primary);
background: var(--accent-yellow);
color: var(--text-primary);
}
.btn--warning:hover { filter: brightness(0.9); }
.btn--warning:hover {
filter: brightness(0.9);
}
/* Success: green background */
.btn--success {
background: var(--accent-green);
color: var(--accent-foreground);
background: var(--accent-green);
color: var(--accent-foreground);
}
.btn--success:hover { filter: brightness(0.9); }
.btn--success:hover {
filter: brightness(0.9);
}
/* Small size modifier */
.btn--sm {
padding: var(--space-2xs) var(--space-xs);
font-size: var(--step--2);
padding: var(--space-2xs) var(--space-xs);
font-size: var(--step--2);
}
/* Large size modifier */
.btn--lg {
padding: var(--space-s) var(--space-m);
font-size: var(--step-0);
padding: var(--space-s) var(--space-m);
font-size: var(--step-0);
}
/* Semantic colour modifiers on muted base (for table/action buttons) */
.btn--blue {
background: var(--blue-muted-bg);
color: var(--accent-blue);
border: 1px solid var(--blue-muted-border);
background: var(--blue-muted-bg);
color: var(--accent-blue);
border: 1px solid var(--blue-muted-border);
}
.btn--blue:hover { background: var(--blue-muted-bg-hover); filter: none; }
.btn--blue:hover {
background: var(--blue-muted-bg-hover);
filter: none;
}
.btn--yellow {
background: var(--yellow-muted-bg);
color: var(--accent-yellow);
border: 1px solid var(--yellow-muted-border);
background: var(--yellow-muted-bg);
color: var(--accent-yellow);
border: 1px solid var(--yellow-muted-border);
}
.btn--yellow:hover { background: var(--yellow-muted-bg-hover); filter: none; }
.btn--yellow:hover {
background: var(--yellow-muted-bg-hover);
filter: none;
}
.btn--green {
background: var(--green-muted-bg);
color: var(--accent-green);
border: 1px solid var(--green-muted-border);
background: var(--green-muted-bg);
color: var(--accent-green);
border: 1px solid var(--green-muted-border);
}
.btn--green:hover { background: var(--green-muted-bg-hover); filter: none; }
.btn--green:hover {
background: var(--green-muted-bg-hover);
filter: none;
}
.btn--red {
background: var(--error-muted-bg);
color: var(--error);
border: 1px solid var(--danger-border-muted);
background: var(--error-muted-bg);
color: var(--error);
border: 1px solid var(--danger-border-muted);
}
.btn--red:hover { filter: brightness(0.9); }
.btn--red:hover {
filter: brightness(0.9);
}
app/public/assets/css/components/details.css
+21 -19
View File
@@ -4,41 +4,43 @@
============================================================ */
details > summary {
cursor: pointer;
list-style: none;
cursor: pointer;
list-style: none;
}
details > summary::-webkit-details-marker {
display: none;
display: none;
}
details {
border: 1px solid var(--border-color);
border-radius: var(--radius, 6px);
background: var(--bg-secondary, var(--surface));
overflow: hidden;
border: 1px solid var(--border-color);
border-radius: var(--radius, 6px);
background: var(--bg-secondary, var(--surface));
overflow: hidden;
}
details[open] {
padding-bottom: var(--space-s);
padding-bottom: var(--space-s);
}
details > :not(summary) {
padding-left: var(--space-s);
padding-right: var(--space-s);
padding-left: var(--space-s);
padding-right: var(--space-s);
}
summary {
font-family: var(--font-display);
font-weight: 600;
text-decoration: none;
color: var(--text-primary);
transition: color 0.15s, background 0.15s;
padding: var(--space-s);
cursor: pointer;
font-family: var(--font-display);
font-weight: 600;
text-decoration: none;
color: var(--text-primary);
transition:
color 0.15s,
background 0.15s;
padding: var(--space-s);
cursor: pointer;
}
summary:hover {
color: var(--accent-primary);
background: var(--hover-bg, rgba(0, 0, 0, 0.03));
color: var(--accent-primary);
background: var(--hover-bg, rgba(0, 0, 0, 0.03));
}
app/public/assets/css/components/dialog.css
+7 -7
View File
@@ -4,14 +4,14 @@
============================================================ */
dialog {
border: 1px solid var(--border-primary);
border-radius: var(--radius);
background: var(--bg-primary);
color: var(--text-primary);
padding: 0;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
border: 1px solid var(--border-primary);
border-radius: var(--radius);
background: var(--bg-primary);
color: var(--text-primary);
padding: 0;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}
dialog::backdrop {
background: rgba(0, 0, 0, 0.45);
background: rgba(0, 0, 0, 0.45);
}
app/public/assets/css/components/focus.css
+4 -4
View File
@@ -4,8 +4,8 @@
============================================================ */
:focus-visible {
outline: none;
box-shadow: 0 0 0 2px var(--accent-primary);
border-radius: var(--radius);
padding: var(--space-3xs) var(--space-xs);
outline: none;
box-shadow: 0 0 0 2px var(--accent-primary);
border-radius: var(--radius);
padding: var(--space-3xs) var(--space-xs);
}
app/public/assets/css/components/forms.css
+71 -59
View File
@@ -7,107 +7,119 @@
/* ── Labels ─────────────────────────────────────────────────────────── */
label {
display: block;
margin-bottom: var(--space-3xs);
font-weight: 400;
display: block;
margin-bottom: var(--space-3xs);
font-weight: 400;
}
/* ── Text inputs, selects, textareas ────────────────────────────────── */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="color"]),
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(
[type="hidden"]
):not([type="submit"]):not([type="button"]):not([type="reset"]):not(
[type="color"]
),
textarea {
font-family: inherit;
font-size: var(--step--1);
padding: var(--space-2xs) var(--space-xs);
border: 1px solid var(--border-primary);
border-radius: var(--radius);
background: transparent;
color: var(--text-primary);
transition: border-color 0.15s;
font-family: inherit;
font-size: var(--step--1);
padding: var(--space-2xs) var(--space-xs);
border: 1px solid var(--border-primary);
border-radius: var(--radius);
background: transparent;
color: var(--text-primary);
transition: border-color 0.15s;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="color"]):focus,
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(
[type="hidden"]
):not([type="submit"]):not([type="button"]):not([type="reset"]):not(
[type="color"]
):focus,
textarea:focus {
outline: none;
border: 2px solid var(--accent-primary);
outline: none;
border: 2px solid var(--accent-primary);
}
input::placeholder,
textarea::placeholder {
color: var(--text-tertiary);
font-size: var(--step--1);
color: var(--text-tertiary);
font-size: var(--step--1);
}
textarea {
resize: vertical;
min-height: 80px;
line-height: 1.5;
resize: vertical;
min-height: 80px;
line-height: 1.5;
}
/* ── Select ─────────────────────────────────────────────────────────── */
select {
font-family: inherit;
font-size: var(--step--1);
padding: var(--space-2xs) var(--space-xs);
padding-right: 1.75rem;
border: 1px solid var(--border-primary);
border-radius: var(--radius);
background: transparent;
color: var(--text-primary);
cursor: pointer;
background-image: url("/assets/icons/select-chevron.svg");
background-repeat: no-repeat;
background-position: right 0.55rem center;
-webkit-appearance: none;
appearance: none;
transition: border-color 0.15s;
font-family: inherit;
font-size: var(--step--1);
padding: var(--space-2xs) var(--space-xs);
padding-right: 1.75rem;
border: 1px solid var(--border-primary);
border-radius: var(--radius);
background: transparent;
color: var(--text-primary);
cursor: pointer;
background-image: url("/assets/icons/select-chevron.svg");
background-repeat: no-repeat;
background-position: right 0.55rem center;
-webkit-appearance: none;
appearance: none;
transition: border-color 0.15s;
}
select:focus {
outline: none;
border: 2px solid var(--accent-primary);
outline: none;
border: 2px solid var(--accent-primary);
}
/* ── Checkboxes & radios ────────────────────────────────────────────── */
input[type="checkbox"],
input[type="radio"] {
accent-color: var(--accent-primary);
width: 16px;
height: 16px;
cursor: pointer;
flex-shrink: 0;
margin: 0;
accent-color: var(--accent-primary);
width: 16px;
height: 16px;
cursor: pointer;
flex-shrink: 0;
margin: 0;
}
input[type="radio"] { border-radius: 50%; }
input[type="radio"] {
border-radius: 50%;
}
/* ── Fieldsets & legends ──────────────────────────────────────────────── */
fieldset {
border: 1px solid var(--border-primary);
border-radius: var(--radius);
padding: 0 var(--space-m) var(--space-m) var(--space-m);
margin: 0;
border: 1px solid var(--border-primary);
border-radius: var(--radius);
padding: 0 var(--space-m) var(--space-m) var(--space-m);
margin: 0;
}
fieldset > *:not(:last-child) { margin-bottom: var(--space-xs); }
fieldset > *:not(:last-child) {
margin-bottom: var(--space-xs);
}
legend {
font-size: var(--step--1);
font-weight: 400;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-secondary);
padding: 0 var(--space-2xs);
font-size: var(--step--1);
font-weight: 400;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-secondary);
padding: 0 var(--space-2xs);
}
/* ── Small / help text ──────────────────────────────────────────────────── */
small {
font-size: var(--step--2);
color: var(--text-secondary);
display: block;
margin-top: var(--space-3xs);
font-size: var(--step--2);
color: var(--text-secondary);
display: block;
margin-top: var(--space-3xs);
}
app/public/assets/css/components/header.css
+138 -138
View File
@@ -6,81 +6,81 @@
/* ── Header bar ─────────────────────────────────────────────────────── */
header {
vertical-align: center;
flex-shrink: 0;
background: linear-gradient(
0deg,
rgba(192, 93, 225, 1) 0%,
rgba(51, 191, 135, 1) 66%,
rgba(60, 133, 108, 1) 100%
);
vertical-align: center;
flex-shrink: 0;
background: linear-gradient(
0deg,
rgba(192, 93, 225, 1) 0%,
rgba(51, 191, 135, 1) 66%,
rgba(60, 133, 108, 1) 100%
);
}
/* ── Navigation ────────────────────────────────────────────────────── */
header nav {
padding: var(--space-s) var(--space-s);
display: flex;
align-items: center;
justify-content: space-between;
font-size: var(--step-0);
padding: var(--space-s) var(--space-s);
display: flex;
align-items: center;
justify-content: space-between;
font-size: var(--step-0);
}
header nav ul {
display: flex;
gap: var(--space-l);
align-items: center;
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: var(--space-l);
align-items: center;
list-style: none;
margin: 0;
padding: 0;
}
header nav ul a {
font-family: var(--font-display);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent-foreground);
text-decoration: none;
padding: var(--space-3xs) var(--space-xs);
text-shadow:
0 0 16px var(--header-shadow-strong),
0 0 32px var(--header-shadow-soft);
transition: opacity 0.15s;
font-family: var(--font-display);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent-foreground);
text-decoration: none;
padding: var(--space-3xs) var(--space-xs);
text-shadow:
0 0 16px var(--header-shadow-strong),
0 0 32px var(--header-shadow-soft);
transition: opacity 0.15s;
}
header nav ul a:hover {
color: var(--accent-primary);
color: var(--accent-primary);
}
header nav ul a[aria-current="page"] {
color: var(--accent-primary);
border-radius: 0;
border-bottom: 2px solid currentColor;
padding-bottom: 1px;
color: var(--accent-primary);
border-radius: 0;
border-bottom: 2px solid currentColor;
padding-bottom: 1px;
}
/* ── Logo ───────────────────────────────────────────────────────────── */
.nav-logo {
text-decoration: none;
text-decoration: none;
}
.nav-left-links,
.nav-right-links {
display: flex;
gap: var(--space-l);
align-items: center;
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: var(--space-l);
align-items: center;
list-style: none;
margin: 0;
padding: 0;
}
.nav-top-row {
display: contents;
display: contents;
}
.nav-mobile-links {
display: none;
display: none;
}
/* ── Hamburger menu (pure CSS, checkbox trick) ──────────────────────── */
@@ -94,132 +94,132 @@ header nav ul a[aria-current="page"] {
ul.nav-mobile-links ← full dropdown (hidden by default) */
.menu-btn {
position: absolute;
top: -9999px;
left: -9999px;
position: absolute;
top: -9999px;
left: -9999px;
}
.menu-icon {
display: none;
cursor: pointer;
padding: var(--space-2xs) var(--space-s);
align-items: center;
justify-content: center;
display: none;
cursor: pointer;
padding: var(--space-2xs) var(--space-s);
align-items: center;
justify-content: center;
}
/* Middle bar of the burger icon */
.navicon {
background: var(--accent-foreground);
display: block;
height: 2px;
width: 24px;
position: relative;
transition: all 0.3s ease-out;
background: var(--accent-foreground);
display: block;
height: 2px;
width: 24px;
position: relative;
transition: all 0.3s ease-out;
}
.navicon::before,
.navicon::after {
content: "";
background: var(--accent-foreground);
display: block;
height: 2px;
width: 100%;
position: absolute;
transition: all 0.3s ease-out;
content: "";
background: var(--accent-foreground);
display: block;
height: 2px;
width: 100%;
position: absolute;
transition: all 0.3s ease-out;
}
.navicon::before {
top: -7px;
top: -7px;
}
.navicon::after {
bottom: -7px;
bottom: -7px;
}
/* ── Mobile (≤ 640px) ───────────────────────────────────────────────── */
@media screen and (max-width: 640px) {
header nav[aria-label="Navigation principale"] {
display: flex;
flex-direction: column;
align-items: stretch;
padding: 0;
}
header nav[aria-label="Navigation principale"] {
display: flex;
flex-direction: column;
align-items: stretch;
padding: 0;
}
header nav[aria-label="Navigation principale"] .nav-top-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-s);
}
header nav[aria-label="Navigation principale"] .nav-top-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-s);
}
header nav[aria-label="Navigation principale"] .nav-right-links {
display: none;
}
header nav[aria-label="Navigation principale"] .nav-right-links {
display: none;
}
header nav[aria-label="Navigation principale"] .nav-left-links {
display: flex;
gap: 0;
}
header nav[aria-label="Navigation principale"] .nav-left-links {
display: flex;
gap: 0;
}
header nav[aria-label="Navigation principale"]
.nav-left-links
li:not(:first-child) {
display: none;
}
header
nav[aria-label="Navigation principale"]
.nav-left-links
li:not(:first-child) {
display: none;
}
.menu-icon {
display: flex;
}
.menu-icon {
display: flex;
}
header nav[aria-label="Navigation principale"] .nav-mobile-links {
display: block;
list-style: none;
margin: 0;
padding: 0;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
header nav[aria-label="Navigation principale"] .nav-mobile-links {
display: block;
list-style: none;
margin: 0;
padding: 0;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.menu-btn:checked
~ nav[aria-label="Navigation principale"]
.nav-mobile-links {
max-height: 300px;
}
.menu-btn:checked
~ nav[aria-label="Navigation principale"]
.nav-mobile-links {
max-height: 300px;
}
header nav[aria-label="Navigation principale"] .nav-mobile-links li {
border-top: 1px solid var(--header-nav-active-border);
text-align: left;
}
header nav[aria-label="Navigation principale"] .nav-mobile-links li {
border-top: 1px solid var(--header-nav-active-border);
text-align: left;
}
header nav[aria-label="Navigation principale"] .nav-mobile-links li a {
display: block;
width: 100%;
padding: var(--space-s) var(--space-s);
text-align: left;
}
header nav[aria-label="Navigation principale"] .nav-mobile-links li a {
display: block;
width: 100%;
padding: var(--space-s) var(--space-s);
text-align: left;
}
/* Animate burger → X */
.menu-btn:checked
~ nav[aria-label="Navigation principale"]
.menu-icon
.navicon {
background: transparent;
}
/* Animate burger → X */
.menu-btn:checked ~ nav[aria-label="Navigation principale"]
.menu-icon
.navicon {
background: transparent;
}
.menu-btn:checked
~ nav[aria-label="Navigation principale"]
.menu-icon
.navicon::before {
transform: rotate(-45deg);
top: 0;
}
.menu-btn:checked
~ nav[aria-label="Navigation principale"]
.menu-icon
.navicon::before {
transform: rotate(-45deg);
top: 0;
}
.menu-btn:checked
~ nav[aria-label="Navigation principale"]
.menu-icon
.navicon::after {
transform: rotate(45deg);
bottom: 0;
}
.menu-btn:checked
~ nav[aria-label="Navigation principale"]
.menu-icon
.navicon::after {
transform: rotate(45deg);
bottom: 0;
}
}
app/public/assets/css/components/links.css
+5 -5
View File
@@ -4,12 +4,12 @@
============================================================ */
a {
color: inherit;
text-decoration: none;
font-weight: 400;
color: inherit;
text-decoration: none;
font-weight: 400;
}
a:hover {
color: var(--accent-primary);
text-decoration: none;
color: var(--accent-primary);
text-decoration: none;
}
app/public/assets/css/components/media.css
+3 -3
View File
@@ -4,10 +4,10 @@
============================================================ */
:where(video, audio, iframe) {
border: 1px solid var(--bg-primary);
border-radius: 15px;
border: 1px solid var(--bg-primary);
border-radius: 15px;
}
audio::-webkit-media-controls-enclosure {
border-radius: var(--radius);
border-radius: var(--radius);
}
app/public/assets/css/components/pagination.css
+35 -33
View File
@@ -4,55 +4,57 @@
============================================================ */
.pagination-wrap {
display: flex;
justify-content: center;
align-items: center;
gap: var(--space-2xs);
padding: var(--space-m) 0 var(--space-2xs);
display: flex;
justify-content: center;
align-items: center;
gap: var(--space-2xs);
padding: var(--space-m) 0 var(--space-2xs);
}
.pagination-wrap ul {
display: flex;
gap: var(--space-3xs);
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: var(--space-3xs);
list-style: none;
margin: 0;
padding: 0;
}
.pagination-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.75rem;
min-height: 2.75rem;
padding: 0 var(--space-2xs);
border: 1px solid var(--border-secondary);
border-radius: var(--radius);
color: var(--text-primary);
font-size: var(--step--1);
font-weight: 400;
text-decoration: none;
transition: border-color 0.15s, color 0.15s;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.75rem;
min-height: 2.75rem;
padding: 0 var(--space-2xs);
border: 1px solid var(--border-secondary);
border-radius: var(--radius);
color: var(--text-primary);
font-size: var(--step--1);
font-weight: 400;
text-decoration: none;
transition:
border-color 0.15s,
color 0.15s;
}
.pagination-btn:hover:not(.disabled) {
border-color: var(--accent-primary);
color: var(--accent-primary);
border-color: var(--accent-primary);
color: var(--accent-primary);
}
.pagination-btn.disabled {
opacity: 0.3;
cursor: not-allowed;
pointer-events: none;
opacity: 0.3;
cursor: not-allowed;
pointer-events: none;
}
.pagination-info {
font-size: var(--step--1);
color: var(--text-secondary);
padding: 0 var(--space-2xs);
font-size: var(--step--1);
color: var(--text-secondary);
padding: 0 var(--space-2xs);
}
.page-current {
font-weight: 600;
color: var(--text-primary);
font-weight: 600;
color: var(--text-primary);
}
app/public/assets/css/components/search.css
+38 -32
View File
@@ -6,55 +6,61 @@
/* Public search bar icon (in partials/search-bar.php) */
/* Scoped to forms that are NOT inside .header-search-wrap */
.search-bar-icon {
width: 20px;
height: 20px;
flex-shrink: 0;
fill: var(--accent-primary);
margin-right: var(--space-2xs);
width: 20px;
height: 20px;
flex-shrink: 0;
fill: var(--accent-primary);
margin-right: var(--space-2xs);
}
form[role="search"]:not(.header-search-form) {
display: flex;
align-items: center;
display: flex;
align-items: center;
}
.header-search-wrap {
padding: 0;
flex-shrink: 0;
background: linear-gradient(180deg, rgba(192, 93, 225, 1) 0%, rgba(255, 255, 255, 1) 100%);
padding: 0;
flex-shrink: 0;
background: linear-gradient(
180deg,
rgba(192, 93, 225, 1) 0%,
rgba(255, 255, 255, 1) 100%
);
}
.header-search-form { width: 100%; }
.header-search-form {
width: 100%;
}
.header-search-input-wrap {
position: relative;
display: flex;
align-items: center;
position: relative;
display: flex;
align-items: center;
}
.header-search-icon {
position: absolute;
left: var(--space-s);
width: 18px;
height: 18px;
fill: var(--accent-primary);
pointer-events: none;
position: absolute;
left: var(--space-s);
width: 18px;
height: 18px;
fill: var(--accent-primary);
pointer-events: none;
}
.header-search-input-wrap input {
width: 100%;
padding: var(--space-2xs) var(--space-s) !important;
padding-left: calc(18px + var(--space-l)) !important;
border: 1px solid var(--accent-primary) !important;
border-radius: var(--radius) !important;
background: var(--bg-primary) !important;
font-size: var(--step-0) !important;
color: var(--text-primary) !important;
font-family: inherit !important;
width: 100%;
padding: var(--space-2xs) var(--space-s);
padding-left: calc(18px + var(--space-l));
border: 1px solid var(--accent-primary);
border-radius: var(--radius);
background: var(--bg-primary);
font-size: var(--step-0);
color: var(--text-primary);
font-family: inherit;
}
.header-search-input-wrap input::placeholder {
color: var(--accent-primary) !important;
font-family: var(--font-body);
font-weight: 300;
color: var(--accent-primary);
font-family: var(--font-body);
font-weight: 300;
}
app/public/assets/css/components/tables.css
+21 -21
View File
@@ -4,39 +4,39 @@
============================================================ */
table {
width: 100%;
border-collapse: collapse;
font-size: var(--step--1);
width: 100%;
border-collapse: collapse;
font-size: var(--step--1);
}
th {
text-align: left;
font-size: var(--step--2);
letter-spacing: 0.08em;
text-transform: uppercase;
padding: var(--space-3xs) var(--space-xs);
border-bottom: 1px solid var(--border-primary);
color: var(--text-secondary);
font-weight: 400;
white-space: nowrap;
text-align: left;
font-size: var(--step--2);
letter-spacing: 0.08em;
text-transform: uppercase;
padding: var(--space-3xs) var(--space-xs);
border-bottom: 1px solid var(--border-primary);
color: var(--text-secondary);
font-weight: 400;
white-space: nowrap;
}
td {
padding: var(--space-2xs) var(--space-xs);
border-bottom: 1px solid var(--border-primary);
vertical-align: top;
padding: var(--space-2xs) var(--space-xs);
border-bottom: 1px solid var(--border-primary);
vertical-align: top;
}
/* Sticky header — border-collapse:collapse blocks position:sticky in Chrome.
--sticky-top is set by JS when a bulk actions bar appears above the table. */
.admin-table--sticky {
border-collapse: separate;
border-spacing: 0;
border-collapse: separate;
border-spacing: 0;
}
.admin-table--sticky thead th {
position: sticky;
top: var(--sticky-top, 0px);
z-index: 5;
background: var(--bg-primary);
position: sticky;
top: var(--sticky-top, 0px);
z-index: 5;
background: var(--bg-primary);
}
app/public/assets/css/components/toast.css
+52 -40
View File
@@ -4,68 +4,80 @@
============================================================ */
#toast-region {
position: fixed;
bottom: var(--space-l);
left: 50%;
transform: translateX(-50%);
z-index: 10000;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-xs);
pointer-events: none;
width: max-content;
max-width: min(560px, calc(100vw - 2 * var(--space-l)));
position: fixed;
bottom: var(--space-l);
left: 50%;
transform: translateX(-50%);
z-index: 10000;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-xs);
pointer-events: none;
width: max-content;
max-width: min(560px, calc(100vw - 2 * var(--space-l)));
}
.toast {
padding: var(--space-s) var(--space-m);
border-radius: var(--radius);
font-size: var(--step-0);
border-left: 4px solid;
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
pointer-events: auto;
/* enter then fade out — total visible ~6.35s */
animation: toast-enter 0.35s ease-out,
toast-exit 0.5s ease-in 6s forwards;
padding: var(--space-s) var(--space-m);
border-radius: var(--radius);
font-size: var(--step-0);
border-left: 4px solid;
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
pointer-events: auto;
/* enter then fade out — total visible ~6.35s */
animation:
toast-enter 0.35s ease-out,
toast-exit 0.5s ease-in 6s forwards;
}
.toast--error {
background: var(--bg-secondary);
border-color: var(--error);
color: var(--text-primary);
background: var(--bg-secondary);
border-color: var(--error);
color: var(--text-primary);
}
.toast--success {
background: var(--bg-secondary);
border-color: var(--success);
color: var(--text-primary);
background: var(--bg-secondary);
border-color: var(--success);
color: var(--text-primary);
}
.toast--warning {
background: var(--bg-secondary);
border-color: var(--warning);
color: var(--text-primary);
animation: toast-enter 0.35s ease-out;
background: var(--bg-secondary);
border-color: var(--warning);
color: var(--text-primary);
animation: toast-enter 0.35s ease-out;
}
.toast--warning a {
color: inherit;
font-weight: 400;
text-decoration: none;
transition: color 0.15s;
color: inherit;
font-weight: 400;
text-decoration: none;
transition: color 0.15s;
}
.toast--warning a:hover {
color: var(--accent-primary);
color: var(--accent-primary);
}
@keyframes toast-enter {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes toast-exit {
from { opacity: 1; }
to { opacity: 0; pointer-events: none; }
from {
opacity: 1;
}
to {
opacity: 0;
pointer-events: none;
}
}
app/public/assets/css/components/toc.css
+73 -73
View File
@@ -8,138 +8,138 @@
/* ── Shared list styles (.toc-list) ─────────────────────────────────────── */
.toc-list,
.toc ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-3xs);
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-3xs);
}
.toc-list a,
.toc ul a {
display: block;
font-family: var(--font-body);
font-size: var(--step-0);
font-weight: 300;
color: var(--text-primary);
text-decoration: none;
padding: var(--space-3xs) 0;
transition: color 0.15s;
display: block;
font-family: var(--font-body);
font-size: var(--step-0);
font-weight: 300;
color: var(--text-primary);
text-decoration: none;
padding: var(--space-3xs) 0;
transition: color 0.15s;
}
.toc-list a:hover {
color: var(--accent-primary);
color: var(--accent-primary);
}
.toc-list a.toc-active,
.toc ul a.toc-active {
color: var(--accent-primary);
font-weight: 400;
color: var(--accent-primary);
font-weight: 400;
}
/* ── Public TOC (details/summary block) ─────────────────────────────────── */
.toc {
border: none;
border-radius: 0;
background: transparent;
overflow: visible;
border: none;
border-radius: 0;
background: transparent;
overflow: visible;
}
.toc[open] {
padding-bottom: 0;
padding-bottom: 0;
}
.toc > :not(summary) {
padding-left: 0;
padding-right: 0;
padding-left: 0;
padding-right: 0;
}
.toc summary {
font-family: var(--font-display);
font-size: var(--step-1);
font-weight: 400;
color: var(--text-primary);
padding: 0 0 var(--space-2xs) 0;
border-bottom: 1px solid var(--text-primary);
display: flex;
align-items: center;
gap: var(--space-2xs);
background: transparent;
cursor: pointer;
list-style: none;
font-family: var(--font-display);
font-size: var(--step-1);
font-weight: 400;
color: var(--text-primary);
padding: 0 0 var(--space-2xs) 0;
border-bottom: 1px solid var(--text-primary);
display: flex;
align-items: center;
gap: var(--space-2xs);
background: transparent;
cursor: pointer;
list-style: none;
}
.toc summary::-webkit-details-marker {
display: none;
display: none;
}
.toc summary:hover {
color: inherit;
background: transparent;
color: inherit;
background: transparent;
}
/* Caret icon inside summary — visible only on mobile */
.toc-caret {
flex-shrink: 0;
transition: transform 0.2s ease;
flex-shrink: 0;
transition: transform 0.2s ease;
}
.toc[open] > summary .toc-caret {
transform: rotate(180deg);
transform: rotate(180deg);
}
/* Sidebar links (about page — custom links below TOC) */
.toc-sidebar-link:first-of-type {
padding-top: var(--space-s);
border-top: 1px solid var(--border-primary);
padding-top: var(--space-s);
border-top: 1px solid var(--border-primary);
}
.toc-sidebar-link + .toc-sidebar-link {
padding-top: var(--space-xs);
padding-top: var(--space-xs);
}
.toc-sidebar-link a {
font-size: var(--step--2);
color: var(--accent-primary);
text-decoration: none;
transition: opacity 0.15s;
font-size: var(--step--2);
color: var(--accent-primary);
text-decoration: none;
transition: opacity 0.15s;
}
.toc-sidebar-link a:hover {
opacity: 0.8;
opacity: 0.8;
}
/* ── Desktop: sticky sidebar with independent scroll ──────────────────── */
@media (min-width: 768px) {
.toc {
position: sticky;
top: var(--space-l);
grid-column: 1;
max-height: calc(100vh - var(--space-xl) - var(--space-2xl));
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
}
.toc {
position: sticky;
top: var(--space-l);
grid-column: 1;
max-height: calc(100vh - var(--space-xl) - var(--space-2xl));
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
}
.toc summary {
pointer-events: none;
}
.toc summary {
pointer-events: none;
}
.toc-caret {
display: none;
}
.toc-caret {
display: none;
}
}
/* ── Mobile: collapsible TOC ────────────────────────────────────────────── */
@media (max-width: 767px) {
.toc {
position: static;
grid-column: 1;
}
.toc {
position: static;
grid-column: 1;
}
.toc summary {
cursor: pointer;
list-style: revert;
}
.toc summary {
cursor: pointer;
list-style: revert;
}
}
app/public/assets/css/content-page.css
+140 -140
View File
@@ -5,52 +5,52 @@
/* Override inherited padding on main-content */
#main-content {
padding-top: 0;
padding-top: 0;
}
.page-content {
flex: 1;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
scroll-behavior: smooth;
padding: var(--space-xl) var(--space-l) var(--space-2xl);
display: grid;
grid-template-columns: 180px 1fr;
gap: var(--space-2xl);
align-items: start;
flex: 1;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
scroll-behavior: smooth;
padding: var(--space-xl) var(--space-l) var(--space-2xl);
display: grid;
grid-template-columns: 180px 1fr;
gap: var(--space-2xl);
align-items: start;
}
/* ── TOC styles → components/toc.css (shared with admin) ───────────────── */
/* Grid column positioning for content pages with sidebar TOC */
@media (min-width: 768px) {
.page-content > article {
grid-column: 2;
min-width: 0;
max-width: 100%;
}
.page-content > article {
grid-column: 2;
min-width: 0;
max-width: 100%;
}
}
@media (max-width: 767px) {
.page-content {
grid-template-columns: 1fr;
gap: var(--space-l);
padding: var(--space-m) var(--space-s) var(--space-xl);
}
.page-content {
grid-template-columns: 1fr;
gap: var(--space-l);
padding: var(--space-m) var(--space-s) var(--space-xl);
}
.page-content > article {
grid-column: 1;
}
.page-content > article {
grid-column: 1;
}
.toc {
margin-top: var(--space-s);
}
.toc {
margin-top: var(--space-s);
}
}
/* ── First content child aligns with TOC heading top ───────────────────── */
.page-content > article > :first-child {
margin-top: 2.2rem;
margin-top: 2.2rem;
}
/* ------------------------------------------------------------------ */
@@ -58,107 +58,107 @@
/* ------------------------------------------------------------------ */
.page-content > article {
display: block;
max-width: 100%;
font-family: var(--font-body);
font-size: var(--step-0);
line-height: 1.6;
color: var(--text-primary);
font-weight: 300;
padding-bottom: var(--space-xl);
display: block;
max-width: 100%;
font-family: var(--font-body);
font-size: var(--step-0);
line-height: 1.6;
color: var(--text-primary);
font-weight: 300;
padding-bottom: var(--space-xl);
}
.page-content > article * {
max-width: 100%;
overflow-wrap: anywhere;
word-break: break-word;
max-width: 100%;
overflow-wrap: anywhere;
word-break: break-word;
}
.page-content > article p {
margin: 0 0 1em 0;
margin: 0 0 1em 0;
}
.page-content > article p:last-child {
margin-bottom: 0;
margin-bottom: 0;
}
.page-content > article :where(h1, h2, h3) {
margin: 1.5em 0 0.5em 0;
margin: 1.5em 0 0.5em 0;
}
.page-content > article a {
color: inherit;
text-decoration: none;
font-weight: 700;
color: inherit;
text-decoration: none;
font-weight: 700;
}
.page-content > article a:hover {
color: var(--accent-primary);
text-decoration: none;
color: var(--accent-primary);
text-decoration: none;
}
.page-content > article ul,
.page-content > article ol {
padding-left: var(--space-m);
margin-bottom: var(--space-s);
padding-left: var(--space-m);
margin-bottom: var(--space-s);
}
.page-content > article li {
margin-bottom: 0.3em;
margin-bottom: 0.3em;
}
.page-content > article strong {
font-weight: 700;
font-weight: 700;
}
.page-content > article em {
font-style: italic;
font-style: italic;
}
.page-content > article :where(pre, pre code, code) {
display: block;
max-width: 100%;
overflow-x: auto;
overflow-wrap: normal;
word-break: normal;
font-family: "Courier New", Courier, monospace;
font-size: 0.88em;
background: color-mix(in srgb, var(--bg-tertiary) 50%, transparent);
padding: 0.5em 0.75em;
border-radius: var(--radius);
white-space: pre-wrap;
word-wrap: break-word;
display: block;
max-width: 100%;
overflow-x: auto;
overflow-wrap: normal;
word-break: normal;
font-family: "Courier New", Courier, monospace;
font-size: 0.88em;
background: color-mix(in srgb, var(--bg-tertiary) 50%, transparent);
padding: 0.5em 0.75em;
border-radius: var(--radius);
white-space: pre-wrap;
word-wrap: break-word;
}
#apropos-intro *,
#apropos-contacts *,
#apropos-credits * {
overflow-wrap: anywhere;
word-break: break-word;
max-width: 100%;
overflow-wrap: anywhere;
word-break: break-word;
max-width: 100%;
}
/* Section separators (about page only) */
.page-content > article > section {
padding-bottom: var(--space-xl);
border-bottom: 1px solid var(--border-primary);
margin-bottom: var(--space-xl);
padding-bottom: var(--space-xl);
border-bottom: 1px solid var(--border-primary);
margin-bottom: var(--space-xl);
}
.page-content > article > section:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: var(--space-xl);
border-bottom: none;
margin-bottom: 0;
padding-bottom: var(--space-xl);
}
/* Scroll margin so anchor links account for the sticky header */
.page-content > article :where(h1, h2, h3) {
scroll-margin-top: var(--space-l);
scroll-margin-top: var(--space-l);
}
/* Hide CommonMark heading permalink anchors */
.heading-permalink {
display: none;
display: none;
}
/* ------------------------------------------------------------------ */
@@ -166,12 +166,12 @@
/* ------------------------------------------------------------------ */
.content-section-title {
font-family: var(--font-display);
font-size: var(--step-3);
font-weight: 400;
color: var(--text-primary);
margin: 0 0 var(--space-m) 0;
line-height: 1.1;
font-family: var(--font-display);
font-size: var(--step-3);
font-weight: 400;
color: var(--text-primary);
margin: 0 0 var(--space-m) 0;
line-height: 1.1;
}
/* ------------------------------------------------------------------ */
@@ -179,48 +179,48 @@
/* ------------------------------------------------------------------ */
.apropos-contacts-grid {
display: flex;
flex-direction: column;
gap: 0;
display: flex;
flex-direction: column;
gap: 0;
}
.apropos-contact-card {
font-style: normal;
padding: var(--space-s) 0;
border-bottom: 1px solid var(--border-primary);
font-style: normal;
padding: var(--space-s) 0;
border-bottom: 1px solid var(--border-primary);
}
.apropos-contact-card:first-child {
border-top: 1px solid var(--border-primary);
border-top: 1px solid var(--border-primary);
}
.apropos-contact-card strong {
display: block;
font-size: var(--step-0);
font-weight: 600;
color: var(--text-primary);
margin-bottom: var(--space-3xs);
display: block;
font-size: var(--step-0);
font-weight: 600;
color: var(--text-primary);
margin-bottom: var(--space-3xs);
}
.apropos-contact-card span {
display: block;
font-size: var(--step--1);
color: var(--text-secondary);
line-height: 1.4;
margin-bottom: var(--space-3xs);
display: block;
font-size: var(--step--1);
color: var(--text-secondary);
line-height: 1.4;
margin-bottom: var(--space-3xs);
}
.apropos-contact-card a {
font-size: var(--step--1);
color: inherit;
text-decoration: none;
font-weight: 700;
transition: color 0.15s;
font-size: var(--step--1);
color: inherit;
text-decoration: none;
font-weight: 700;
transition: color 0.15s;
}
.apropos-contact-card a:hover {
color: var(--accent-primary);
text-decoration: none;
color: var(--accent-primary);
text-decoration: none;
}
/* ------------------------------------------------------------------ */
@@ -228,39 +228,39 @@
/* ------------------------------------------------------------------ */
.apropos-credits-list {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0;
}
.apropos-credit-row {
display: grid;
grid-template-columns: 1fr 1.6fr;
gap: var(--space-s);
padding: var(--space-s) 0;
border-bottom: 1px solid var(--border-primary);
align-items: baseline;
display: grid;
grid-template-columns: 1fr 1.6fr;
gap: var(--space-s);
padding: var(--space-s) 0;
border-bottom: 1px solid var(--border-primary);
align-items: baseline;
}
.apropos-credit-row:first-child {
border-top: 1px solid var(--border-primary);
border-top: 1px solid var(--border-primary);
}
.apropos-credits-list dt {
font-size: var(--step--2);
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-tertiary);
font-size: var(--step--2);
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-tertiary);
}
.apropos-credits-list dd {
font-size: var(--step--1);
color: var(--text-primary);
margin: 0;
line-height: 1.5;
font-size: var(--step--1);
color: var(--text-primary);
margin: 0;
line-height: 1.5;
}
/* ------------------------------------------------------------------ */
@@ -268,7 +268,7 @@
/* ------------------------------------------------------------------ */
.apropos-single {
max-width: 720px;
max-width: 720px;
}
/* ------------------------------------------------------------------ */
@@ -276,20 +276,20 @@
/* ------------------------------------------------------------------ */
@media (max-width: 600px) {
.page-content {
padding: var(--space-m) var(--space-s) var(--space-xl);
}
.page-content {
padding: var(--space-m) var(--space-s) var(--space-xl);
}
.page-content > article {
font-size: var(--step-0);
}
.page-content > article {
font-size: var(--step-0);
}
.content-section-title {
font-size: var(--step-2);
}
.content-section-title {
font-size: var(--step-2);
}
.apropos-credit-row {
grid-template-columns: 1fr;
gap: var(--space-3xs);
}
.apropos-credit-row {
grid-template-columns: 1fr;
gap: var(--space-3xs);
}
}
app/public/assets/css/file-access.css
+124 -122
View File
@@ -3,245 +3,247 @@
============================================================ */
.access-req-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: var(--space-m);
margin-bottom: var(--space-l);
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: var(--space-m);
margin-bottom: var(--space-l);
}
.access-req-stat-card {
display: flex;
flex-direction: column;
align-items: center;
padding: var(--space-m);
background: var(--bg-secondary);
border: 1px solid var(--border-primary);
border-radius: var(--radius);
display: flex;
flex-direction: column;
align-items: center;
padding: var(--space-m);
background: var(--bg-secondary);
border: 1px solid var(--border-primary);
border-radius: var(--radius);
}
.access-req-stat-number {
font-size: var(--step-2);
font-weight: 700;
color: var(--text-primary);
line-height: 1;
font-size: var(--step-2);
font-weight: 700;
color: var(--text-primary);
line-height: 1;
}
.access-req-stat-label {
font-size: var(--step--1);
color: var(--text-secondary);
margin-top: var(--space-3xs);
font-size: var(--step--1);
color: var(--text-secondary);
margin-top: var(--space-3xs);
}
/* Tab navigation */
.access-req-tabs {
display: flex;
gap: var(--space-xs);
margin-bottom: var(--space-l);
border-bottom: 2px solid var(--border-primary);
display: flex;
gap: var(--space-xs);
margin-bottom: var(--space-l);
border-bottom: 2px solid var(--border-primary);
}
.access-req-tab {
padding: var(--space-2xs) var(--space-s);
color: var(--text-secondary);
text-decoration: none;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
transition: color 0.2s, border-color 0.2s;
padding: var(--space-2xs) var(--space-s);
color: var(--text-secondary);
text-decoration: none;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
transition:
color 0.2s,
border-color 0.2s;
}
.access-req-tab:hover {
color: var(--accent-primary);
color: var(--accent-primary);
}
.access-req-tab.active {
color: var(--accent-primary);
border-bottom-color: var(--accent-primary);
font-weight: 600;
color: var(--accent-primary);
border-bottom-color: var(--accent-primary);
font-weight: 600;
}
/* Empty state */
.access-req-empty {
background: var(--bg-secondary);
border: 1px solid var(--border-primary);
border-radius: var(--radius);
padding: var(--space-xl);
text-align: center;
color: var(--text-secondary);
background: var(--bg-secondary);
border: 1px solid var(--border-primary);
border-radius: var(--radius);
padding: var(--space-xl);
text-align: center;
color: var(--text-secondary);
}
/* Request list */
.access-req-list {
display: flex;
flex-direction: column;
gap: var(--space-m);
display: flex;
flex-direction: column;
gap: var(--space-m);
}
.access-req-card {
background: var(--bg-secondary);
border: 1px solid var(--border-primary);
border-radius: var(--radius);
padding: var(--space-m);
transition: box-shadow 0.2s;
background: var(--bg-secondary);
border: 1px solid var(--border-primary);
border-radius: var(--radius);
padding: var(--space-m);
transition: box-shadow 0.2s;
}
.access-req-card:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.access-req-card__header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: var(--space-m);
margin-bottom: var(--space-s);
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: var(--space-m);
margin-bottom: var(--space-s);
}
.access-req-card__thesis h3 {
font-weight: 600;
color: var(--text-primary);
margin: 0 0 var(--space-3xs) 0;
line-height: 1.3;
font-weight: 600;
color: var(--text-primary);
margin: 0 0 var(--space-3xs) 0;
line-height: 1.3;
}
.access-req-card__authors {
font-size: var(--step--1);
color: var(--text-secondary);
margin: 0;
font-size: var(--step--1);
color: var(--text-secondary);
margin: 0;
}
.access-req-card__meta {
flex-shrink: 0;
flex-shrink: 0;
}
.access-req-badge {
display: inline-block;
padding: var(--space-3xs) var(--space-2xs);
border-radius: 12px;
font-size: var(--step--2);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
display: inline-block;
padding: var(--space-3xs) var(--space-2xs);
border-radius: 12px;
font-size: var(--step--2);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.access-req-badge--pending {
background: #fef3c7;
color: #92400e;
background: #fef3c7;
color: #92400e;
}
.access-req-badge--approved {
background: #d1fae5;
color: #065f46;
background: #d1fae5;
color: #065f46;
}
.access-req-badge--rejected {
background: #fee2e2;
color: #991b1b;
background: #fee2e2;
color: #991b1b;
}
.access-req-card__body {
display: flex;
flex-direction: column;
gap: var(--space-s);
display: flex;
flex-direction: column;
gap: var(--space-s);
}
.access-req-card__info {
display: flex;
flex-wrap: wrap;
gap: var(--space-m);
font-size: var(--step--1);
color: var(--text-secondary);
display: flex;
flex-wrap: wrap;
gap: var(--space-m);
font-size: var(--step--1);
color: var(--text-secondary);
}
.access-req-card__info strong {
color: var(--text-primary);
margin-right: var(--space-3xs);
color: var(--text-primary);
margin-right: var(--space-3xs);
}
.access-req-card__info a {
color: var(--accent-primary);
text-decoration: none;
color: var(--accent-primary);
text-decoration: none;
}
.access-req-card__info a:hover {
color: var(--accent-primary);
text-decoration: none;
color: var(--accent-primary);
text-decoration: none;
}
.access-req-card__justification,
.access-req-card__admin-notes {
background: var(--bg-primary);
padding: var(--space-s);
border-radius: var(--radius);
font-size: var(--step--1);
line-height: 1.6;
background: var(--bg-primary);
padding: var(--space-s);
border-radius: var(--radius);
font-size: var(--step--1);
line-height: 1.6;
}
.access-req-card__justification strong,
.access-req-card__admin-notes strong {
display: block;
margin-bottom: var(--space-3xs);
color: var(--text-primary);
display: block;
margin-bottom: var(--space-3xs);
color: var(--text-primary);
}
.access-req-card__justification p,
.access-req-card__admin-notes p {
margin: 0;
margin: 0;
}
.access-req-card__actions {
display: flex;
gap: var(--space-s);
margin-top: var(--space-s);
display: flex;
gap: var(--space-s);
margin-top: var(--space-s);
}
.access-req-btn {
/* deprecated alias for .btn; kept for backward-compat */
/* deprecated alias for .btn; kept for backward-compat */
}
.access-req-btn--approve {
/* deprecated alias for .btn--primary */
/* deprecated alias for .btn--primary */
}
.access-req-btn--reject {
/* deprecated alias for .btn--danger */
/* deprecated alias for .btn--danger */
}
/* Pagination */
.access-req-pagination {
display: flex;
justify-content: center;
align-items: center;
gap: var(--space-m);
margin-top: var(--space-l);
padding: var(--space-s) 0;
display: flex;
justify-content: center;
align-items: center;
gap: var(--space-m);
margin-top: var(--space-l);
padding: var(--space-s) 0;
}
.access-req-pagination__link {
padding: var(--space-2xs) var(--space-s);
color: var(--accent-primary);
text-decoration: none;
font-weight: 600;
transition: color 0.2s;
padding: var(--space-2xs) var(--space-s);
color: var(--accent-primary);
text-decoration: none;
font-weight: 600;
transition: color 0.2s;
}
.access-req-pagination__link:hover {
color: var(--accent-primary);
color: var(--accent-primary);
}
.access-req-pagination__info {
font-size: var(--step--1);
color: var(--text-secondary);
font-size: var(--step--1);
color: var(--text-secondary);
}
/* Dialog textarea/label enhancements */
.admin-dialog textarea {
width: 100%;
padding: var(--space-2xs);
margin: var(--space-s) 0;
width: 100%;
padding: var(--space-2xs);
margin: var(--space-s) 0;
}
.admin-dialog label {
display: block;
font-weight: 400;
margin-bottom: var(--space-3xs);
display: block;
font-weight: 400;
margin-bottom: var(--space-3xs);
}
app/public/assets/css/form-admin.css
+155 -155
View File
@@ -7,293 +7,293 @@
/* ── Recap files table ─────────────────────────────────────────── */
.recap-files-table {
width: 100%;
border-collapse: collapse;
font-size: var(--step--1);
width: 100%;
border-collapse: collapse;
font-size: var(--step--1);
}
.recap-files-table thead th {
text-align: left;
font-weight: 600;
color: var(--text-secondary);
font-size: var(--step--2);
text-transform: uppercase;
letter-spacing: 0.05em;
padding: var(--space-xs) var(--space-s);
border-bottom: 2px solid var(--border-primary);
text-align: left;
font-weight: 600;
color: var(--text-secondary);
font-size: var(--step--2);
text-transform: uppercase;
letter-spacing: 0.05em;
padding: var(--space-xs) var(--space-s);
border-bottom: 2px solid var(--border-primary);
}
.recap-files-table tbody td {
padding: var(--space-xs) var(--space-s);
border-bottom: 1px solid var(--border-secondary);
vertical-align: middle;
padding: var(--space-xs) var(--space-s);
border-bottom: 1px solid var(--border-secondary);
vertical-align: middle;
}
.recap-files-table tbody tr:last-child td {
border-bottom: none;
border-bottom: none;
}
.recap-files-icon {
width: 1px;
white-space: nowrap;
width: 1px;
white-space: nowrap;
}
.recap-files-icon-emoji {
font-size: 1.3rem;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.2rem;
height: 2.2rem;
background: var(--accent-muted);
border-radius: var(--radius);
font-size: 1.3rem;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.2rem;
height: 2.2rem;
background: var(--accent-muted);
border-radius: var(--radius);
}
.recap-files-thumb {
max-width: 80px;
max-height: 60px;
object-fit: cover;
border-radius: var(--radius);
max-width: 80px;
max-height: 60px;
object-fit: cover;
border-radius: var(--radius);
}
.recap-files-name {
font-weight: 500;
font-weight: 500;
}
.recap-files-name a {
color: var(--text-primary);
text-decoration: none;
color: var(--text-primary);
text-decoration: none;
}
.recap-files-name a:hover {
color: var(--accent-primary);
color: var(--accent-primary);
}
.recap-files-peertube-id {
display: block;
font-size: var(--step--2);
color: var(--text-tertiary);
font-family: monospace;
display: block;
font-size: var(--step--2);
color: var(--text-tertiary);
font-family: monospace;
}
.recap-files-label {
display: block;
font-size: var(--step--2);
color: var(--text-secondary);
font-style: italic;
display: block;
font-size: var(--step--2);
color: var(--text-secondary);
font-style: italic;
}
.recap-files-type {
font-size: var(--step--2);
color: var(--text-tertiary);
white-space: nowrap;
font-size: var(--step--2);
color: var(--text-tertiary);
white-space: nowrap;
}
.recap-files-size {
font-size: var(--step--2);
color: var(--text-tertiary);
white-space: nowrap;
font-variant-numeric: tabular-nums;
font-size: var(--step--2);
color: var(--text-tertiary);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.recap-files-date {
font-size: var(--step--2);
color: var(--text-tertiary);
white-space: nowrap;
font-size: var(--step--2);
color: var(--text-tertiary);
white-space: nowrap;
}
/* ── File browser (relink) ──────────────────────────────────────── */
.file-browser-trigger {
margin-top: var(--space-2xs);
font-size: var(--step--2);
margin-top: var(--space-2xs);
font-size: var(--step--2);
}
.relink-modal {
width: min(90vw, 700px);
max-height: 80vh;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg-primary);
padding: 0;
overflow: hidden;
color: var(--text-primary);
width: min(90vw, 700px);
max-height: 80vh;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg-primary);
padding: 0;
overflow: hidden;
color: var(--text-primary);
}
.relink-modal::backdrop {
background: rgba(0,0,0,0.5);
background: rgba(0, 0, 0, 0.5);
}
.relink-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-s) var(--space-m);
border-bottom: 1px solid var(--border);
background: var(--bg-secondary);
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-s) var(--space-m);
border-bottom: 1px solid var(--border);
background: var(--bg-secondary);
}
.relink-modal-header h3 {
margin: 0;
font-size: var(--step-0);
margin: 0;
font-size: var(--step-0);
}
.relink-modal-footer {
padding: var(--space-xs) var(--space-m);
border-top: 1px solid var(--border);
background: var(--bg-secondary);
padding: var(--space-xs) var(--space-m);
border-top: 1px solid var(--border);
background: var(--bg-secondary);
}
#relink-modal-body {
padding: var(--space-s) var(--space-m);
overflow-y: auto;
max-height: 60vh;
padding: var(--space-s) var(--space-m);
overflow-y: auto;
max-height: 60vh;
}
/* ── File browser tree ─────────────────────────────────────────── */
.file-browser {
font-size: var(--step--1);
font-size: var(--step--1);
}
.file-browser-hint,
.file-browser-empty,
.file-browser-loading,
.file-browser-error {
color: var(--text-secondary);
text-align: center;
padding: var(--space-m);
color: var(--text-secondary);
text-align: center;
padding: var(--space-m);
}
.file-browser-error {
color: var(--error);
color: var(--error);
}
.file-browser-breadcrumb {
display: flex;
align-items: center;
gap: var(--space-2xs);
flex-wrap: wrap;
padding-bottom: var(--space-s);
margin-bottom: var(--space-s);
border-bottom: 1px solid var(--border);
font-size: var(--step--2);
display: flex;
align-items: center;
gap: var(--space-2xs);
flex-wrap: wrap;
padding-bottom: var(--space-s);
margin-bottom: var(--space-s);
border-bottom: 1px solid var(--border);
font-size: var(--step--2);
}
.file-browser-breadcrumb a {
color: var(--accent-blue, var(--link));
text-decoration: none;
color: var(--accent-blue, var(--link));
text-decoration: none;
}
.file-browser-breadcrumb a:hover {
color: var(--accent-primary);
color: var(--accent-primary);
}
.file-browser-sep {
color: var(--text-tertiary);
color: var(--text-tertiary);
}
.file-browser-list {
list-style: none;
margin: 0;
padding: 0;
list-style: none;
margin: 0;
padding: 0;
}
.file-browser-entry {
border-bottom: 1px solid var(--border-subtle);
border-bottom: 1px solid var(--border-subtle);
}
.file-browser-entry a,
.file-browser-select-btn {
display: flex;
align-items: center;
gap: var(--space-xs);
width: 100%;
padding: var(--space-xs) var(--space-2xs);
text-decoration: none;
color: var(--text-primary);
background: none;
border: none;
cursor: pointer;
font-size: var(--step--1);
text-align: left;
transition: background 0.15s;
display: flex;
align-items: center;
gap: var(--space-xs);
width: 100%;
padding: var(--space-xs) var(--space-2xs);
text-decoration: none;
color: var(--text-primary);
background: none;
border: none;
cursor: pointer;
font-size: var(--step--1);
text-align: left;
transition: background 0.15s;
}
.file-browser-entry a:hover,
.file-browser-select-btn:hover {
background: var(--bg-secondary);
background: var(--bg-secondary);
}
.file-browser-icon {
flex-shrink: 0;
font-size: var(--step-0);
flex-shrink: 0;
font-size: var(--step-0);
}
.file-browser-name {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.file-browser-size {
flex-shrink: 0;
color: var(--text-tertiary);
font-size: var(--step--2);
font-variant-numeric: tabular-nums;
flex-shrink: 0;
color: var(--text-tertiary);
font-size: var(--step--2);
font-variant-numeric: tabular-nums;
}
.file-browser-file .file-browser-select-btn {
color: var(--accent-green, var(--success));
color: var(--accent-green, var(--success));
}
.file-browser-file .file-browser-select-btn:hover {
background: var(--bg-secondary);
background: var(--bg-secondary);
}
/* ── Full-page editor (contenus-edit overtype) ─────────────────────── */
/* Make the main content area a flex column so the form fills remaining height */
.admin-body .full-editor-page {
display: flex;
flex-direction: column;
display: flex;
flex-direction: column;
}
.admin-form--full-editor {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
}
.admin-form--full-editor #editor {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.admin-form--full-editor #editor .n-container {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.admin-form--full-editor #editor .n-wrapper {
flex: 1;
min-height: 0;
overflow: hidden;
flex: 1;
min-height: 0;
overflow: hidden;
}
.admin-form--full-editor #editor .n-input {
height: 100% !important;
overflow-y: auto !important;
height: 100%;
overflow-y: auto;
}
.admin-form--full-editor #editor .n-preview {
height: 100% !important;
overflow-y: auto !important;
height: 100%;
overflow-y: auto;
}
.full-editor-toolbar {
display: flex;
align-items: center;
gap: var(--space-s);
padding-bottom: var(--space-s);
border-bottom: 1px solid var(--border-primary);
margin-bottom: var(--space-s);
flex-shrink: 0;
display: flex;
align-items: center;
gap: var(--space-s);
padding-bottom: var(--space-s);
border-bottom: 1px solid var(--border-primary);
margin-bottom: var(--space-s);
flex-shrink: 0;
}
.full-editor-label {
font-size: var(--step--1);
font-weight: 600;
color: var(--text-secondary);
font-size: var(--step--1);
font-weight: 600;
color: var(--text-secondary);
}
.full-editor-toolbar .btn--primary {
margin-left: auto;
margin-left: auto;
}
app/public/assets/css/form-base.css
+686 -682
View File
File diff suppressed because it is too large Load Diff
app/public/assets/css/public.css
+172 -172
View File
@@ -5,267 +5,267 @@
/* Cards grid — scrollable main area */
.home-main {
flex: 1;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
padding: 0;
flex: 1;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
padding: 0;
}
.cards-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-s);
list-style: none;
margin: 0;
padding: var(--space-xs) var(--space-s) var(--space-m);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-s);
list-style: none;
margin: 0;
padding: var(--space-xs) var(--space-s) var(--space-m);
}
@media (max-width: 768px) {
.cards-container {
grid-template-columns: repeat(2, 1fr);
}
.cards-container {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.cards-container {
grid-template-columns: 1fr;
}
.cards-container {
grid-template-columns: 1fr;
}
}
/* Each card = list item containing a block <a> link */
.card {
display: flex;
flex-direction: column;
cursor: pointer;
border: 1px solid var(--border-primary);
border-radius: var(--radius);
background: var(--bg-primary);
overflow: hidden;
transition:
box-shadow 0.2s ease,
transform 0.2s ease;
display: flex;
flex-direction: column;
cursor: pointer;
border: 1px solid var(--border-primary);
border-radius: var(--radius);
background: var(--bg-primary);
overflow: hidden;
transition:
box-shadow 0.2s ease,
transform 0.2s ease;
}
.card:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
transform: translateY(-2px);
}
.card > a {
text-decoration: none;
color: inherit;
display: flex;
flex-direction: column;
flex: 1;
border-radius: inherit;
text-decoration: none;
color: inherit;
display: flex;
flex-direction: column;
flex: 1;
border-radius: inherit;
}
/* Media wrapper: <figure> for real images/video, <div class="card__media--gradient"> for placeholders */
.home-body figure {
width: 100%;
aspect-ratio: 4/3;
overflow: hidden;
background: var(--bg-tertiary);
position: relative;
margin: 0; /* reset <figure> default margin */
border-radius: 7px 7px 0 0;
width: 100%;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--bg-tertiary);
position: relative;
margin: 0; /* reset <figure> default margin */
border-radius: 7px 7px 0 0;
}
.home-body figure img,
.home-body figure video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s ease;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s ease;
}
.card:hover figure img,
.card:hover figure video {
transform: scale(1.02);
transform: scale(1.02);
}
.card__media--placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-active));
display: flex;
align-items: center;
justify-content: center;
color: var(--text-tertiary);
font-size: var(--step-3);
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-active));
display: flex;
align-items: center;
justify-content: center;
color: var(--text-tertiary);
font-size: var(--step-3);
}
.card__media--gradient {
width: 100%;
aspect-ratio: 4/3;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-s);
text-align: center;
box-sizing: border-box;
border-radius: 7px 7px 0 0;
background: linear-gradient(
180deg,
rgba(60, 133, 108, 1) 0%,
rgba(51, 191, 135, 1) 25%,
rgba(192, 93, 225, 1) 75%,
rgba(149, 87, 181, 1) 100%
);
width: 100%;
aspect-ratio: 4 / 3;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-s);
text-align: center;
box-sizing: border-box;
border-radius: 7px 7px 0 0;
background: linear-gradient(
180deg,
rgba(60, 133, 108, 1) 0%,
rgba(51, 191, 135, 1) 25%,
rgba(192, 93, 225, 1) 75%,
rgba(149, 87, 181, 1) 100%
);
}
.card__gradient-author {
color: var(--accent-foreground);
font-size: var(--step--2);
opacity: 0.85;
margin-bottom: 0.25rem;
display: block;
color: var(--accent-foreground);
font-size: var(--step--2);
opacity: 0.85;
margin-bottom: 0.25rem;
display: block;
}
.card__gradient-title {
color: var(--accent-foreground);
font-size: var(--step--1);
font-weight: 600;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
color: var(--accent-foreground);
font-size: var(--step--1);
font-weight: 600;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Section label */
.home-section-label {
font-style: normal;
background: transparent;
color: var(--text-primary);
font-size: var(--step--2);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: var(--space-s) var(--space-s) var(--space-xs);
border-bottom: 1px solid var(--border-primary);
margin: 0;
font-style: normal;
background: transparent;
color: var(--text-primary);
font-size: var(--step--2);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: var(--space-s) var(--space-s) var(--space-xs);
border-bottom: 1px solid var(--border-primary);
margin: 0;
}
/* Card caption — <p> directly inside the card <a> link, below the media */
.home-body li > a > p {
padding: var(--space-2xs) var(--space-xs) var(--space-xs);
font-size: var(--step--1);
line-height: 1.35;
color: var(--text-primary);
margin: 0;
font-weight: 400;
border-top: 1px solid var(--border-primary);
padding: var(--space-2xs) var(--space-xs) var(--space-xs);
font-size: var(--step--1);
line-height: 1.35;
color: var(--text-primary);
margin: 0;
font-weight: 400;
border-top: 1px solid var(--border-primary);
}
/* Empty-state message shown when no cards exist */
.cards-empty {
padding: var(--space-l);
color: var(--text-tertiary);
font-size: var(--step--1);
list-style: none;
padding: var(--space-l);
color: var(--text-tertiary);
font-size: var(--step--1);
list-style: none;
}
/* Filter info */
.filter-info {
background: var(--accent-muted);
color: var(--accent-secondary);
padding: var(--space-3xs) var(--space-s);
font-size: var(--step--1);
display: flex;
align-items: center;
gap: var(--space-s);
flex-shrink: 0;
background: var(--accent-muted);
color: var(--accent-secondary);
padding: var(--space-3xs) var(--space-s);
font-size: var(--step--1);
display: flex;
align-items: center;
gap: var(--space-s);
flex-shrink: 0;
}
.clear-filter {
color: var(--accent-secondary);
text-decoration: none;
padding: var(--space-3xs) var(--space-2xs);
background: var(--accent-muted);
border-radius: var(--radius);
font-size: var(--step--1);
color: var(--accent-secondary);
text-decoration: none;
padding: var(--space-3xs) var(--space-2xs);
background: var(--accent-muted);
border-radius: var(--radius);
font-size: var(--step--1);
}
.clear-filter:hover {
background: var(--accent-secondary);
color: var(--accent-foreground);
background: var(--accent-secondary);
color: var(--accent-foreground);
}
/* Pagination */
.pagination-wrap {
border-top: 1px solid var(--border-secondary);
background: var(--bg-primary);
flex-shrink: 0;
border-top: 1px solid var(--border-secondary);
background: var(--bg-primary);
flex-shrink: 0;
}
.pagination-wrap ul {
display: flex;
justify-content: center;
align-items: center;
gap: var(--space-2xs);
padding: var(--space-s);
list-style: none;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
gap: var(--space-2xs);
padding: var(--space-s);
list-style: none;
margin: 0;
}
.pagination-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.75rem;
min-height: 2.75rem;
padding: 0 var(--space-2xs);
border: 1px solid var(--border-secondary);
border-radius: var(--radius);
color: var(--text-primary);
font-size: var(--step--1);
text-decoration: none;
font-weight: 400;
transition: all 0.15s;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.75rem;
min-height: 2.75rem;
padding: 0 var(--space-2xs);
border: 1px solid var(--border-secondary);
border-radius: var(--radius);
color: var(--text-primary);
font-size: var(--step--1);
text-decoration: none;
font-weight: 400;
transition: all 0.15s;
}
.pagination-btn:hover:not(.disabled) {
border-color: var(--accent-primary);
color: var(--accent-primary);
border-color: var(--accent-primary);
color: var(--accent-primary);
}
.pagination-btn.disabled {
opacity: 0.3;
cursor: not-allowed;
pointer-events: none;
opacity: 0.3;
cursor: not-allowed;
pointer-events: none;
}
.pagination-info {
font-size: var(--step--1);
color: var(--text-secondary);
padding: 0 var(--space-2xs);
font-size: var(--step--1);
color: var(--text-secondary);
padding: 0 var(--space-2xs);
}
.page-current {
font-weight: 600;
color: var(--text-primary);
font-weight: 600;
color: var(--text-primary);
}
/* Suppress card hover scale for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
.home-body figure img,
.home-body figure video {
transition: none;
}
.card:hover figure img,
.card:hover figure video {
transform: none;
}
.card__media--gradient {
transition: none;
}
.card {
transition: none;
}
.card:hover {
transform: none;
}
.home-body figure img,
.home-body figure video {
transition: none;
}
.card:hover figure img,
.card:hover figure video {
transform: none;
}
.card__media--gradient {
transition: none;
}
.card {
transition: none;
}
.card:hover {
transform: none;
}
}
app/public/assets/css/repertoire.css
+579 -571
View File
File diff suppressed because it is too large Load Diff
app/public/assets/css/reset.css
+74 -45
View File
@@ -3,102 +3,131 @@
originally used). Do not modify this file.
============================================================ */
*, ::before, ::after {
box-sizing: border-box;
*,
::before,
::after {
box-sizing: border-box;
}
html {
font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
line-height: 1.15;
-webkit-text-size-adjust: 100%;
tab-size: 4;
font-family:
system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
"Apple Color Emoji", "Segoe UI Emoji";
line-height: 1.15;
-webkit-text-size-adjust: 100%;
tab-size: 4;
}
body {
margin: 0;
margin: 0;
}
b, strong {
font-weight: bolder;
b,
strong {
font-weight: bolder;
}
code, kbd, pre, samp {
font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
font-size: 1em;
code,
kbd,
pre,
samp {
font-family:
ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
font-size: 1em;
}
small {
font-size: 80%;
font-size: 80%;
}
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub { bottom: -0.25em; }
sup { top: -0.5em; }
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
table {
border-color: currentcolor;
border-color: currentcolor;
}
button, input, optgroup, select, textarea {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
margin: 0;
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
margin: 0;
}
[type=button], [type=reset], [type=submit], button {
-webkit-appearance: button;
[type="button"],
[type="reset"],
[type="submit"],
button {
-webkit-appearance: button;
}
legend {
padding: 0;
padding: 0;
}
progress {
vertical-align: baseline;
vertical-align: baseline;
}
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
height: auto;
}
[type=search] {
-webkit-appearance: textfield;
outline-offset: -2px;
[type="search"] {
-webkit-appearance: textfield;
outline-offset: -2px;
}
::-webkit-search-decoration {
-webkit-appearance: none;
-webkit-appearance: none;
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit;
-webkit-appearance: button;
font: inherit;
}
summary {
display: list-item;
display: list-item;
}
/* Additional minimal resets not in modern-normalize */
img, svg, video, canvas, audio, iframe, embed, object {
display: block;
vertical-align: middle;
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block;
vertical-align: middle;
}
img, video {
max-width: 100%;
height: auto;
img,
video {
max-width: 100%;
height: auto;
}
[hidden] {
display: none;
display: none;
}
app/public/assets/css/system.css
+280 -233
View File
@@ -4,352 +4,399 @@
/* ── System page tabs ──────────────────────────────────────────────────── */
.sys-tabs {
display: flex;
gap: 0;
border-bottom: 1px solid var(--border-primary);
margin-bottom: var(--space-m);
display: flex;
gap: 0;
border-bottom: 1px solid var(--border-primary);
margin-bottom: var(--space-m);
}
.sys-tab {
display: inline-block;
padding: var(--space-3xs) var(--space-s);
font-size: var(--step--1);
font-weight: 500;
color: var(--text-secondary);
text-decoration: none;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: color .15s, border-color .15s;
display: inline-block;
padding: var(--space-3xs) var(--space-s);
font-size: var(--step--1);
font-weight: 500;
color: var(--text-secondary);
text-decoration: none;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition:
color 0.15s,
border-color 0.15s;
}
.sys-tab:hover {
color: var(--accent-primary);
color: var(--accent-primary);
}
.sys-tab.active {
color: var(--accent-primary);
border-bottom-color: var(--accent-primary);
color: var(--accent-primary);
border-bottom-color: var(--accent-primary);
}
/* ── Status section (always-visible panel above tabs) ─────────────────── */
.sys-status-section {
background: var(--bg-secondary);
border: 1px solid var(--border-primary);
border-radius: var(--radius);
padding: var(--space-s) var(--space-m);
margin-bottom: var(--space-m);
background: var(--bg-secondary);
border: 1px solid var(--border-primary);
border-radius: var(--radius);
padding: var(--space-s) var(--space-m);
margin-bottom: var(--space-m);
}
.sys-status-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-s);
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-s);
}
.sys-status-toggle {
background: none;
border: 1px solid var(--border-primary);
color: var(--text-secondary);
border-radius: var(--radius);
font-size: var(--step--2);
font-family: inherit;
padding: var(--space-3xs) var(--space-2xs);
cursor: pointer;
white-space: nowrap;
transition: color .15s, border-color .15s;
background: none;
border: 1px solid var(--border-primary);
color: var(--text-secondary);
border-radius: var(--radius);
font-size: var(--step--2);
font-family: inherit;
padding: var(--space-3xs) var(--space-2xs);
cursor: pointer;
white-space: nowrap;
transition:
color 0.15s,
border-color 0.15s;
}
.sys-status-toggle:hover {
color: var(--text-primary);
border-color: var(--border-secondary);
color: var(--text-primary);
border-color: var(--border-secondary);
}
.sys-status-meta {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-m) var(--space-l);
margin-top: var(--space-m);
padding-top: var(--space-m);
border-top: 1px solid var(--border-primary);
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-m) var(--space-l);
margin-top: var(--space-m);
padding-top: var(--space-m);
border-top: 1px solid var(--border-primary);
}
@media (max-width: 700px) {
.sys-status-meta { grid-template-columns: 1fr; }
.sys-status-meta {
grid-template-columns: 1fr;
}
}
/* ── Status cards ──────────────────────────────────────────────────────── */
.srv-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: var(--space-s);
margin-bottom: var(--space-l);
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: var(--space-s);
margin-bottom: var(--space-l);
}
.srv-card {
background: var(--bg-primary);
border: 1px solid var(--border-primary);
border-radius: var(--radius);
padding: var(--space-s) var(--space-m);
background: var(--bg-primary);
border: 1px solid var(--border-primary);
border-radius: var(--radius);
padding: var(--space-s) var(--space-m);
}
.srv-card__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-3xs);
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-3xs);
}
.srv-card__name {
font-size: var(--step--1);
text-transform: uppercase;
letter-spacing: .07em;
color: var(--text-secondary);
font-weight: 500;
font-size: var(--step--1);
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--text-secondary);
font-weight: 500;
}
.srv-card__detail {
font-size: var(--step--2);
color: var(--text-tertiary);
margin-top: var(--space-3xs);
font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
font-size: var(--step--2);
color: var(--text-tertiary);
margin-top: var(--space-3xs);
font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
}
.status-ok {
color: var(--accent-green);
font-weight: 600;
font-size: var(--step--1);
}
.status-warn {
color: var(--warning);
font-weight: 600;
font-size: var(--step--1);
}
.status-err {
color: var(--error);
font-weight: 600;
font-size: var(--step--1);
}
.status-unknown {
color: var(--text-tertiary);
font-weight: 600;
font-size: var(--step--1);
}
.status-ok { color: var(--accent-green); font-weight: 600; font-size: var(--step--1); }
.status-warn { color: var(--warning); font-weight: 600; font-size: var(--step--1); }
.status-err { color: var(--error); font-weight: 600; font-size: var(--step--1); }
.status-unknown { color: var(--text-tertiary); font-weight: 600; font-size: var(--step--1); }
.srv-section-title {
font-size: var(--step--1);
text-transform: uppercase;
letter-spacing: .1em;
color: var(--text-secondary);
border-bottom: 1px solid var(--border-primary);
padding-bottom: var(--space-3xs);
margin: 0 0 var(--space-s);
font-weight: 500;
font-size: var(--step--1);
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-secondary);
border-bottom: 1px solid var(--border-primary);
padding-bottom: var(--space-3xs);
margin: 0 0 var(--space-s);
font-weight: 500;
}
/* Compact variant: no border, no margin — used inside sys-status-header */
.srv-section-title--compact {
margin: 0;
border: none;
padding: 0;
margin: 0;
border: none;
padding: 0;
}
/* Sub-section variant: tighter bottom margin — used for PHP/disk sub-headings */
.srv-section-title--sub { margin-bottom: var(--space-xs); }
.srv-section-title--sub {
margin-bottom: var(--space-xs);
}
/* ── PHP info grid ─────────────────────────────────────────────────────── */
.php-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: var(--space-3xs) var(--space-xs);
margin-bottom: var(--space-l);
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: var(--space-3xs) var(--space-xs);
margin-bottom: var(--space-l);
}
/* Flush variant: no bottom margin — used inside sys-status-meta cell */
.php-grid--flush { margin-bottom: 0; }
.php-grid--flush {
margin-bottom: 0;
}
.php-item {
background: var(--bg-primary);
border: 1px solid var(--border-primary);
border-radius: var(--radius);
padding: var(--space-3xs) var(--space-xs);
background: var(--bg-primary);
border: 1px solid var(--border-primary);
border-radius: var(--radius);
padding: var(--space-3xs) var(--space-xs);
}
.php-item__key {
font-size: var(--step--2);
text-transform: uppercase;
letter-spacing: .06em;
color: var(--text-tertiary);
font-size: var(--step--2);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-tertiary);
}
.php-item__val {
font-size: var(--step--1);
font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
color: var(--text-primary);
margin-top: var(--space-3xs);
font-size: var(--step--1);
font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
color: var(--text-primary);
margin-top: var(--space-3xs);
}
/* ── Disk bar ──────────────────────────────────────────────────────────── */
.disk-bar-wrap {
background: var(--border-primary);
border-radius: var(--radius);
height: 6px;
margin-top: var(--space-2xs);
overflow: hidden;
background: var(--border-primary);
border-radius: var(--radius);
height: 6px;
margin-top: var(--space-2xs);
overflow: hidden;
}
.disk-bar {
height: 100%;
border-radius: var(--radius);
width: var(--disk-pct, 0%);
background: var(--disk-color, var(--accent-green));
transition: width .3s;
height: 100%;
border-radius: var(--radius);
width: var(--disk-pct, 0%);
background: var(--disk-color, var(--accent-green));
transition: width 0.3s;
}
.disk-stats {
display: flex;
justify-content: space-between;
font-size: var(--step--2);
color: var(--text-secondary);
margin-top: var(--space-3xs);
display: flex;
justify-content: space-between;
font-size: var(--step--2);
color: var(--text-secondary);
margin-top: var(--space-3xs);
}
/* ── Tab panel loading state ───────────────────────────────────────────── */
#sys-tab-panel {
min-height: 8rem;
position: relative;
min-height: 8rem;
position: relative;
}
#sys-tab-panel.htmx-request {
opacity: 0.4;
pointer-events: none;
transition: opacity 0.1s;
opacity: 0.4;
pointer-events: none;
transition: opacity 0.1s;
}
#sys-tab-panel.htmx-request::after {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(
-45deg,
transparent,
transparent 6px,
rgba(0,0,0,0.03) 6px,
rgba(0,0,0,0.03) 12px
);
border-radius: var(--radius);
animation: sys-panel-shimmer 1s linear infinite;
background-size: 200% 200%;
content: "";
position: absolute;
inset: 0;
background: repeating-linear-gradient(
-45deg,
transparent,
transparent 6px,
rgba(0, 0, 0, 0.03) 6px,
rgba(0, 0, 0, 0.03) 12px
);
border-radius: var(--radius);
animation: sys-panel-shimmer 1s linear infinite;
background-size: 200% 200%;
}
@keyframes sys-panel-shimmer {
0% { background-position: 0 0; }
100% { background-position: 100% 100%; }
0% {
background-position: 0 0;
}
100% {
background-position: 100% 100%;
}
}
/* ── Log viewer ────────────────────────────────────────────────────────── */
.log-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2xs);
margin-bottom: var(--space-m);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2xs);
margin-bottom: var(--space-m);
}
.log-toolbar label {
font-size: var(--step--1);
color: var(--text-secondary);
font-size: var(--step--1);
color: var(--text-secondary);
}
.log-toolbar select {
padding: var(--space-3xs) var(--space-xs);
padding: var(--space-3xs) var(--space-xs);
}
.log-toolbar select:focus {
outline: 2px solid var(--accent-primary);
}
.log-toolbar select:focus { outline: 2px solid var(--accent-primary); }
.log-meta {
font-size: var(--step--2);
color: var(--text-tertiary);
font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
margin-bottom: var(--space-xs);
display: flex;
gap: var(--space-m);
flex-wrap: wrap;
font-size: var(--step--2);
color: var(--text-tertiary);
font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
margin-bottom: var(--space-xs);
display: flex;
gap: var(--space-m);
flex-wrap: wrap;
}
.log-meta span::before {
content: attr(data-label) ": ";
opacity: 0.6;
}
.log-meta span::before { content: attr(data-label) ": "; opacity: .6; }
.log-unavailable {
background: var(--bg-secondary);
border: 1px solid var(--border-primary);
border-radius: var(--radius);
padding: var(--space-m);
color: var(--text-secondary);
font-size: var(--step--1);
background: var(--bg-secondary);
border: 1px solid var(--border-primary);
border-radius: var(--radius);
padding: var(--space-m);
color: var(--text-secondary);
font-size: var(--step--1);
}
.log-unavail-path {
font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
font-size: var(--step--2);
margin-top: var(--space-3xs);
opacity: .7;
font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
font-size: var(--step--2);
margin-top: var(--space-3xs);
opacity: 0.7;
}
.log-unavail-dev {
margin-top: var(--space-2xs);
font-size: var(--step--2);
opacity: .7;
margin-top: var(--space-2xs);
font-size: var(--step--2);
opacity: 0.7;
}
.log-empty {
color: var(--text-secondary);
font-size: var(--step--1);
padding: var(--space-s) 0;
color: var(--text-secondary);
font-size: var(--step--1);
padding: var(--space-s) 0;
}
.log-output {
background: var(--bg-secondary);
border: 1px solid var(--border-primary);
border-radius: var(--radius);
padding: var(--space-s);
overflow-x: auto;
font-family: ui-monospace, "SFMono-Regular", Consolas, "Courier New", monospace;
font-size: var(--step--2);
line-height: 1.55;
max-height: 62vh;
overflow-y: auto;
position: relative;
background: var(--bg-secondary);
border: 1px solid var(--border-primary);
border-radius: var(--radius);
padding: var(--space-s);
overflow-x: auto;
font-family:
ui-monospace, "SFMono-Regular", Consolas, "Courier New", monospace;
font-size: var(--step--2);
line-height: 1.55;
max-height: 62vh;
overflow-y: auto;
position: relative;
}
.log-line {
display: block;
white-space: pre;
padding: var(--space-3xs) var(--space-3xs);
border-radius: var(--radius);
color: var(--text-primary);
display: block;
white-space: pre;
padding: var(--space-3xs) var(--space-3xs);
border-radius: var(--radius);
color: var(--text-primary);
}
.log-line + .log-line {
border-top: 1px solid var(--border-primary);
}
.log-crit {
color: var(--sys-syntax-crit);
background: var(--error-muted-bg);
}
.log-error {
color: var(--error);
}
.log-warn {
color: var(--warning);
}
.log-notice {
color: var(--sys-syntax-notice);
}
.log-line + .log-line { border-top: 1px solid var(--border-primary); }
.log-crit { color: var(--sys-syntax-crit); background: var(--error-muted-bg); }
.log-error { color: var(--error); }
.log-warn { color: var(--warning); }
.log-notice { color: var(--sys-syntax-notice); }
.log-line::before {
content: attr(data-n);
display: inline-block;
min-width: 4ch;
margin-right: var(--space-xs);
opacity: .3;
text-align: right;
user-select: none;
content: attr(data-n);
display: inline-block;
min-width: 4ch;
margin-right: var(--space-xs);
opacity: 0.3;
text-align: right;
user-select: none;
}
.log-count-badge {
background: var(--bg-secondary);
border: 1px solid var(--border-primary);
border-radius: var(--radius);
font-size: var(--step--2);
padding: var(--space-3xs) var(--space-2xs);
color: var(--text-secondary);
font-family: ui-monospace, monospace;
background: var(--bg-secondary);
border: 1px solid var(--border-primary);
border-radius: var(--radius);
font-size: var(--step--2);
padding: var(--space-3xs) var(--space-2xs);
color: var(--text-secondary);
font-family: ui-monospace, monospace;
}
.log-copy-btn {
/* uses .btn--secondary .btn--sm but with absolute positioning overrides */
position: absolute;
top: var(--space-2xs);
right: var(--space-2xs);
z-index: 2;
/* uses .btn--secondary .btn--sm but with absolute positioning overrides */
position: absolute;
top: var(--space-2xs);
right: var(--space-2xs);
z-index: 2;
}
.log-copy-btn:hover {
color: var(--text-primary);
border-color: var(--accent-primary);
color: var(--text-primary);
border-color: var(--accent-primary);
}
.log-copy-btn.copied {
color: var(--accent-green);
border-color: var(--accent-green);
color: var(--accent-green);
border-color: var(--accent-green);
}
.sys-refresh-note {
font-size: var(--step--2);
color: var(--text-secondary);
margin-bottom: var(--space-m);
font-size: var(--step--2);
color: var(--text-secondary);
margin-bottom: var(--space-m);
}
.sys-refresh-note a {
color: var(--accent-primary);
text-decoration: none;
color: var(--accent-primary);
text-decoration: none;
}
.sys-refresh-note a:hover {
color: var(--accent-primary);
}
.sys-refresh-note a:hover { color: var(--accent-primary); }
/* ── Cache freshness badges ────────────────────────────────────────────── */
.sys-cache-badge {
display: inline-block;
font-size: var(--step--2);
font-weight: 400;
font-family: ui-monospace, monospace;
padding: var(--space-3xs) var(--space-3xs);
border-radius: var(--radius);
margin-left: var(--space-xs);
vertical-align: middle;
line-height: 1.6;
display: inline-block;
font-size: var(--step--2);
font-weight: 400;
font-family: ui-monospace, monospace;
padding: var(--space-3xs) var(--space-3xs);
border-radius: var(--radius);
margin-left: var(--space-xs);
vertical-align: middle;
line-height: 1.6;
}
.sys-cache-badge--hit {
background: var(--warning-muted-bg);
color: var(--warning);
border: 1px solid var(--warning-muted-border);
background: var(--warning-muted-bg);
color: var(--warning);
border: 1px solid var(--warning-muted-border);
}
.sys-cache-badge--miss {
background: var(--success-muted-bg);
color: var(--success);
border: 1px solid var(--success-muted-border);
background: var(--success-muted-bg);
color: var(--success);
border: 1px solid var(--success-muted-border);
}
app/public/assets/css/tfe.css
+141 -141
View File
@@ -4,292 +4,292 @@
============================================================ */
.tfe-main {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: var(--space-l) var(--space-m) var(--space-xl);
flex: 1;
min-height: 0;
overflow-y: auto;
padding: var(--space-l) var(--space-m) var(--space-xl);
}
/* Stacked article layout */
.tfe-layout {
display: flex;
flex-direction: column;
gap: var(--space-xl);
width: 100%;
display: flex;
flex-direction: column;
gap: var(--space-xl);
width: 100%;
}
/* Row 1: Author above Title */
.tfe-header-row {
display: flex;
flex-direction: column;
gap: var(--space-3xs);
display: flex;
flex-direction: column;
gap: var(--space-3xs);
}
/* Row 2: Two columns — meta left, synopsis right */
.tfe-content-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-xl);
align-items: start;
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-xl);
align-items: start;
}
/* Row 3: Files flex container */
.tfe-files {
display: flex;
flex-wrap: wrap;
gap: var(--space-m);
display: flex;
flex-wrap: wrap;
gap: var(--space-m);
}
.tfe-file-item {
flex: 1 1 300px;
min-width: 0;
overflow: hidden;
border-radius: var(--radius);
flex: 1 1 300px;
min-width: 0;
overflow: hidden;
border-radius: var(--radius);
}
.tfe-file-item img {
width: 100%;
height: auto;
display: block;
border-radius: var(--radius);
user-select: none;
-webkit-user-drag: none;
width: 100%;
height: auto;
display: block;
border-radius: var(--radius);
user-select: none;
-webkit-user-drag: none;
}
.tfe-file-item embed,
.tfe-file-item video {
width: 100%;
display: block;
border: none;
width: 100%;
display: block;
border: none;
}
.tfe-file-item video {
max-height: 500px;
max-height: 500px;
}
.tfe-file-item embed {
height: clamp(300px, 80vh, 700px);
height: clamp(300px, 80vh, 700px);
}
.tfe-file-item figcaption {
font-size: var(--step--2);
color: var(--text-secondary);
margin: var(--space-3xs) 0 0;
font-style: italic;
font-size: var(--step--2);
color: var(--text-secondary);
margin: var(--space-3xs) 0 0;
font-style: italic;
}
/* Synopsis column wrapper (context note + synopsis) */
.tfe-synopsis-column {
display: flex;
flex-direction: column;
gap: var(--space-xs);
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
/* Contextual note above synopsis */
.tfe-context-note {
font-style: italic;
font-size: var(--step--1);
line-height: 1.6;
color: var(--text-secondary);
margin: 0;
padding: var(--space-xs) var(--space-s);
background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-primary));
border-radius: var(--radius);
font-style: italic;
font-size: var(--step--1);
line-height: 1.6;
color: var(--text-secondary);
margin: 0;
padding: var(--space-xs) var(--space-s);
background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-primary));
border-radius: var(--radius);
}
.tfe-synopsis-empty {
/* placeholder to maintain grid column */
/* placeholder to maintain grid column */
}
/* Author (p) — inline with title */
.tfe-author {
font-family: var(--font-display);
font-size: var(--step-1);
font-weight: 400;
color: var(--text-primary);
margin: 0;
line-height: 1.3;
font-family: var(--font-display);
font-size: var(--step-1);
font-weight: 400;
color: var(--text-primary);
margin: 0;
line-height: 1.3;
}
/* Title (h1) — inherits global scale from base.css */
.tfe-title {
margin: 0;
margin: 0;
}
/* Metadata block */
.tfe-meta {
display: flex;
flex-direction: column;
gap: var(--space-3xs);
font-size: var(--step--1);
line-height: 1.4;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--space-3xs);
font-size: var(--step--1);
line-height: 1.4;
margin: 0;
}
/* Each metadata line */
.tfe-meta-item {
margin: 0;
font-weight: 700;
margin: 0;
font-weight: 700;
}
.tfe-meta-label {
font-weight: 300;
font-weight: 300;
}
.tfe-meta-item a {
color: inherit;
font-weight: 700;
text-decoration: none;
color: inherit;
font-weight: 700;
text-decoration: none;
}
.tfe-meta-item a:hover {
color: var(--accent-primary);
color: var(--accent-primary);
}
/* Note field: align label to top, value in italics */
.tfe-meta-item.tfe-meta-note {
align-items: start;
align-items: start;
}
.tfe-note-value {
font-style: italic;
font-style: italic;
}
/* Synopsis paragraph */
.tfe-synopsis-text {
font-size: var(--step--1);
line-height: 1.7;
color: var(--text-primary);
margin: 0;
font-size: var(--step--1);
line-height: 1.7;
color: var(--text-primary);
margin: 0;
}
/* Audio player */
.tfe-audio {
width: 100%;
margin: 0;
display: block;
width: 100%;
margin: 0;
display: block;
}
/* "Not available" and "no files" notices */
.tfe-restricted,
.tfe-no-files {
font-size: var(--step--1);
color: var(--text-secondary);
font-style: italic;
padding: var(--space-s) 0;
margin: 0;
font-size: var(--step--1);
color: var(--text-secondary);
font-style: italic;
padding: var(--space-s) 0;
margin: 0;
}
/* ============================================================
RESTRICTED ACCESS UI
============================================================ */
.tfe-restricted-access {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--space-m);
display: flex;
flex-direction: column;
gap: var(--space-m);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--space-m);
display: flex;
flex-direction: column;
gap: var(--space-m);
}
.tfe-restricted-message {
font-size: var(--step--1);
color: var(--text-secondary);
line-height: 1.6;
margin: 0;
font-size: var(--step--1);
color: var(--text-secondary);
line-height: 1.6;
margin: 0;
}
.tfe-restricted-message strong {
color: var(--text-primary);
display: block;
margin-bottom: var(--space-3xs);
font-size: var(--step-0);
color: var(--text-primary);
display: block;
margin-bottom: var(--space-3xs);
font-size: var(--step-0);
}
.tfe-access-request-form {
display: flex;
flex-direction: column;
gap: var(--space-s);
display: flex;
flex-direction: column;
gap: var(--space-s);
}
.tfe-access-request-form .form-group {
display: flex;
flex-direction: column;
gap: var(--space-3xs);
display: flex;
flex-direction: column;
gap: var(--space-3xs);
}
.tfe-access-request-form label {
font-size: var(--step--1);
font-weight: 400;
color: var(--text-primary);
font-size: var(--step--1);
font-weight: 400;
color: var(--text-primary);
}
.tfe-access-request-form input[type="email"],
.tfe-access-request-form textarea {
padding: var(--space-2xs) var(--space-3xs);
padding: var(--space-2xs) var(--space-3xs);
}
.tfe-btn-request-access {
/* deprecated alias for .btn--primary; kept for backward-compat */
margin-top: var(--space-3xs);
/* deprecated alias for .btn--primary; kept for backward-compat */
margin-top: var(--space-3xs);
}
.tfe-btn-request-access:hover:not(:disabled) {
/* handled by .btn--primary */
/* handled by .btn--primary */
}
.tfe-btn-request-access:disabled {
opacity: 0.6;
cursor: not-allowed;
opacity: 0.6;
cursor: not-allowed;
}
.tfe-access-message {
font-size: var(--step--1);
padding: var(--space-2xs);
border-radius: var(--radius);
margin-top: var(--space-3xs);
font-size: var(--step--1);
padding: var(--space-2xs);
border-radius: var(--radius);
margin-top: var(--space-3xs);
}
.tfe-access-success {
background: #f0fff4;
border: 1px solid #48bb78;
color: #22543d;
background: #f0fff4;
border: 1px solid #48bb78;
color: #22543d;
}
.tfe-access-error {
background: #fff5f5;
border: 1px solid #fc8181;
color: #742a2a;
background: #fff5f5;
border: 1px solid #fc8181;
color: #742a2a;
}
.tfe-access-request-form input.input-error {
border-color: #fc8181;
outline-color: #fc8181;
border-color: #fc8181;
outline-color: #fc8181;
}
/* Responsive */
@media (max-width: 900px) {
.tfe-content-row {
grid-template-columns: 1fr;
gap: var(--space-l);
}
.tfe-content-row {
grid-template-columns: 1fr;
gap: var(--space-l);
}
.tfe-file-item {
flex: 1 1 100%;
}
.tfe-file-item {
flex: 1 1 100%;
}
.tfe-title {
font-size: var(--step-2);
}
.tfe-title {
font-size: var(--step-2);
}
}
@media (max-width: 600px) {
.tfe-main {
padding: var(--space-m) var(--space-s) var(--space-l);
}
.tfe-main {
padding: var(--space-m) var(--space-s) var(--space-l);
}
.tfe-title {
font-size: var(--step-1);
}
.tfe-title {
font-size: var(--step-1);
}
}
app/public/assets/css/typography.css
+58 -58
View File
@@ -7,85 +7,85 @@
/* ── Font faces ─────────────────────────────────────────────────────── */
@font-face {
font-family: "Ductus";
src: url("../fonts/DuctusRegular.otf") format("opentype");
font-style: normal;
font-weight: 398;
font-display: swap;
font-family: "Ductus";
src: url("../fonts/DuctusRegular.otf") format("opentype");
font-style: normal;
font-weight: 398;
font-display: swap;
}
@font-face {
font-family: "BBBDMSans";
src: url("../fonts/BBBDMSans-Light.otf") format("opentype");
font-style: normal;
font-weight: 298;
font-display: swap;
font-family: "BBBDMSans";
src: url("../fonts/BBBDMSans-Light.otf") format("opentype");
font-style: normal;
font-weight: 298;
font-display: swap;
}
@font-face {
font-family: "BBBDMSans";
src: url("/assets/fonts/BBBDMSans-Regular.otf") format("opentype");
font-style: normal;
font-weight: 398;
font-display: swap;
font-family: "BBBDMSans";
src: url("/assets/fonts/BBBDMSans-Regular.otf") format("opentype");
font-style: normal;
font-weight: 398;
font-display: swap;
}
@font-face {
font-family: "BBBDMSans";
src: url("../fonts/BBBDMSans-Medium.otf") format("opentype");
font-style: normal;
font-weight: 498;
font-display: swap;
font-family: "BBBDMSans";
src: url("../fonts/BBBDMSans-Medium.otf") format("opentype");
font-style: normal;
font-weight: 498;
font-display: swap;
}
@font-face {
font-family: "BBBDMSans";
src: url("../fonts/BBBDMSans-Bold.otf") format("opentype");
font-style: normal;
font-weight: 698;
font-display: swap;
font-family: "BBBDMSans";
src: url("../fonts/BBBDMSans-Bold.otf") format("opentype");
font-style: normal;
font-weight: 698;
font-display: swap;
}
/* ── Named font-size scale ──────────────────────────────────────────── */
/* @link https://utopia.fyi/type/calculator?c=360,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
:root {
--step--2: clamp(0.7813rem, 0.7736rem + 0.0341vw, 0.8rem);
--step--1: clamp(0.9375rem, 0.9119rem + 0.1136vw, 1rem);
--step-0: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
--step-1: clamp(1.35rem, 1.2631rem + 0.3864vw, 1.5625rem);
--step-2: clamp(1.62rem, 1.4837rem + 0.6057vw, 1.9531rem);
--step-3: clamp(1.944rem, 1.7405rem + 0.9044vw, 2.4414rem);
--step-4: clamp(2.3328rem, 2.0387rem + 1.3072vw, 3.0518rem);
--step-5: clamp(2.7994rem, 2.384rem + 1.8461vw, 3.8147rem);
--step--2: clamp(0.7813rem, 0.7736rem + 0.0341vw, 0.8rem);
--step--1: clamp(0.9375rem, 0.9119rem + 0.1136vw, 1rem);
--step-0: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
--step-1: clamp(1.35rem, 1.2631rem + 0.3864vw, 1.5625rem);
--step-2: clamp(1.62rem, 1.4837rem + 0.6057vw, 1.9531rem);
--step-3: clamp(1.944rem, 1.7405rem + 0.9044vw, 2.4414rem);
--step-4: clamp(2.3328rem, 2.0387rem + 1.3072vw, 3.0518rem);
--step-5: clamp(2.7994rem, 2.384rem + 1.8461vw, 3.8147rem);
/* ── Named spacing scale ─────────────────────────────────────────── */
/* @link https://utopia.fyi/space/calculator?c=360,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
/* ── Named spacing scale ─────────────────────────────────────────── */
/* @link https://utopia.fyi/space/calculator?c=360,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
--space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
--space-2xs: clamp(0.5625rem, 0.5369rem + 0.1136vw, 0.625rem);
--space-xs: clamp(0.875rem, 0.8494rem + 0.1136vw, 0.9375rem);
--space-s: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
--space-m: clamp(1.6875rem, 1.6108rem + 0.3409vw, 1.875rem);
--space-l: clamp(2.25rem, 2.1477rem + 0.4545vw, 2.5rem);
--space-xl: clamp(3.375rem, 3.2216rem + 0.6818vw, 3.75rem);
--space-2xl: clamp(4.5rem, 4.2955rem + 0.9091vw, 5rem);
--space-3xl: clamp(6.75rem, 6.4432rem + 1.3636vw, 7.5rem);
--space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
--space-2xs: clamp(0.5625rem, 0.5369rem + 0.1136vw, 0.625rem);
--space-xs: clamp(0.875rem, 0.8494rem + 0.1136vw, 0.9375rem);
--space-s: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
--space-m: clamp(1.6875rem, 1.6108rem + 0.3409vw, 1.875rem);
--space-l: clamp(2.25rem, 2.1477rem + 0.4545vw, 2.5rem);
--space-xl: clamp(3.375rem, 3.2216rem + 0.6818vw, 3.75rem);
--space-2xl: clamp(4.5rem, 4.2955rem + 0.9091vw, 5rem);
--space-3xl: clamp(6.75rem, 6.4432rem + 1.3636vw, 7.5rem);
/* One-up pairs */
--space-3xs-2xs: clamp(0.3125rem, 0.1847rem + 0.5682vw, 0.625rem);
--space-2xs-xs: clamp(0.5625rem, 0.4091rem + 0.6818vw, 0.9375rem);
--space-xs-s: clamp(0.875rem, 0.7216rem + 0.6818vw, 1.25rem);
--space-s-m: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
--space-m-l: clamp(1.6875rem, 1.3551rem + 1.4773vw, 2.5rem);
--space-l-xl: clamp(2.25rem, 1.6364rem + 2.7273vw, 3.75rem);
--space-xl-2xl: clamp(3.375rem, 2.7102rem + 2.9545vw, 5rem);
--space-2xl-3xl: clamp(4.5rem, 3.2727rem + 5.4545vw, 7.5rem);
/* One-up pairs */
--space-3xs-2xs: clamp(0.3125rem, 0.1847rem + 0.5682vw, 0.625rem);
--space-2xs-xs: clamp(0.5625rem, 0.4091rem + 0.6818vw, 0.9375rem);
--space-xs-s: clamp(0.875rem, 0.7216rem + 0.6818vw, 1.25rem);
--space-s-m: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
--space-m-l: clamp(1.6875rem, 1.3551rem + 1.4773vw, 2.5rem);
--space-l-xl: clamp(2.25rem, 1.6364rem + 2.7273vw, 3.75rem);
--space-xl-2xl: clamp(3.375rem, 2.7102rem + 2.9545vw, 5rem);
--space-2xl-3xl: clamp(4.5rem, 3.2727rem + 5.4545vw, 7.5rem);
/* Custom pairs */
--space-s-l: clamp(1.125rem, 0.5625rem + 2.5vw, 2.5rem);
/* Custom pairs */
--space-s-l: clamp(1.125rem, 0.5625rem + 2.5vw, 2.5rem);
/* Font families */
--font-body: "BBBDMSans", sans-serif;
--font-display: "Ductus", sans-serif;
/* Font families */
--font-body: "BBBDMSans", sans-serif;
--font-display: "Ductus", sans-serif;
}
app/public/assets/css/utilities.css
+29 -29
View File
@@ -5,47 +5,47 @@
/* Visually-hidden but screen-reader-accessible */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Skip-to-content link (visible only on keyboard focus) */
.skip-link {
position: absolute;
top: -999px;
left: 1rem;
z-index: 9999;
padding: var(--space-2xs) var(--space-s);
background: var(--accent-primary);
color: var(--accent-foreground);
font-size: var(--step--1);
font-weight: 600;
text-decoration: none;
border-radius: 0 0 4px 4px;
position: absolute;
top: -999px;
left: 1rem;
z-index: 9999;
padding: var(--space-2xs) var(--space-s);
background: var(--accent-primary);
color: var(--accent-foreground);
font-size: var(--step--1);
font-weight: 600;
text-decoration: none;
border-radius: 0 0 4px 4px;
}
.skip-link:focus {
top: 0;
top: 0;
}
.skip-link:hover {
color: var(--accent-primary);
background: var(--accent-foreground);
color: var(--accent-primary);
background: var(--accent-foreground);
}
/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
}
*,
*::before,
*::after {
transition-duration: 0.01ms;
animation-duration: 0.01ms;
}
}
app/public/assets/js/app/admin-acces-sharelink.js
+30 -28
View File
@@ -4,43 +4,45 @@
* Provides: dialog openers, clipboard copy, password dialog.
*/
(() => {
var createBtn = document.getElementById('open-create-dialog');
if (createBtn) {
createBtn.addEventListener('click', () => {
document.getElementById('create-dialog').showModal();
});
}
var createBtn = document.getElementById("open-create-dialog");
if (createBtn) {
createBtn.addEventListener("click", () => {
document.getElementById("create-dialog").showModal();
});
}
})();
var _pendingDeleteLinkId = null;
function openDeleteLinkDialog(id) {
_pendingDeleteLinkId = id;
document.getElementById('delete-link-dialog').showModal();
function _openDeleteLinkDialog(id) {
_pendingDeleteLinkId = id;
document.getElementById("delete-link-dialog").showModal();
}
function _executeDeleteLink() {
var form = document.getElementById('delete-link-form-' + _pendingDeleteLinkId);
if (form) form.submit();
var form = document.getElementById(
`delete-link-form-${_pendingDeleteLinkId}`,
);
if (form) form.submit();
}
function copyUrl(id) {
var input = document.getElementById('url-' + id);
navigator.clipboard.writeText(input.value).then(() => {
var btn = event.target.closest('button');
var orig = btn.textContent;
btn.textContent = '✓ Copié';
setTimeout(() => {
btn.textContent = orig;
}, 1200);
});
function _copyUrl(id) {
var input = document.getElementById(`url-${id}`);
navigator.clipboard.writeText(input.value).then(() => {
var btn = event.target.closest("button");
var orig = btn.textContent;
btn.textContent = "✓ Copié";
setTimeout(() => {
btn.textContent = orig;
}, 1200);
});
}
function openPasswordDialog(id, hasPassword) {
document.getElementById('password-link-id').value = id;
var info = document.getElementById('password-current-info');
info.textContent = hasPassword
? 'Un mot de passe est actuellement configuré. Entrez-en un nouveau ou laissez vide pour le supprimer.'
: 'Aucun mot de passe configuré.';
document.getElementById('password-dialog').showModal();
function _openPasswordDialog(id, hasPassword) {
document.getElementById("password-link-id").value = id;
var info = document.getElementById("password-current-info");
info.textContent = hasPassword
? "Un mot de passe est actuellement configuré. Entrez-en un nouveau ou laissez vide pour le supprimer."
: "Aucun mot de passe configuré.";
document.getElementById("password-dialog").showModal();
}
app/public/assets/js/app/admin-acces.js
+78 -72
View File
@@ -7,99 +7,105 @@
* <meta name="acces-new-link-slug" content="...">
*/
(() => {
var baseUrlMeta = document.querySelector('meta[name="acces-base-url"]');
var passwordMeta = document.querySelector('meta[name="acces-new-link-password"]');
var slugMeta = document.querySelector('meta[name="acces-new-link-slug"]');
var baseUrlMeta = document.querySelector('meta[name="acces-base-url"]');
var passwordMeta = document.querySelector(
'meta[name="acces-new-link-password"]',
);
var slugMeta = document.querySelector('meta[name="acces-new-link-slug"]');
// Show result dialog after redirect (new link created)
if (passwordMeta && slugMeta && passwordMeta.content && slugMeta.content) {
document.getElementById('create-result-password').value = passwordMeta.content;
document.getElementById('create-result-url').value =
(baseUrlMeta ? baseUrlMeta.content : '') + '/partage/' + slugMeta.content;
document.getElementById('create-result-dialog').showModal();
}
// Show result dialog after redirect (new link created)
if (passwordMeta && slugMeta && passwordMeta.content && slugMeta.content) {
document.getElementById("create-result-password").value =
passwordMeta.content;
document.getElementById("create-result-url").value =
`${baseUrlMeta ? baseUrlMeta.content : ""}/partage/${slugMeta.content}`;
document.getElementById("create-result-dialog").showModal();
}
// Create dialog opener
var createBtn = document.getElementById('open-create-dialog');
if (createBtn) {
createBtn.addEventListener('click', () => {
document.getElementById('create-dialog').showModal();
});
}
// Create dialog opener
var createBtn = document.getElementById("open-create-dialog");
if (createBtn) {
createBtn.addEventListener("click", () => {
document.getElementById("create-dialog").showModal();
});
}
})();
function copyUrl(id) {
var input = document.getElementById('url-' + id);
navigator.clipboard.writeText(input.value).then(() => {
var btn = event.target.closest('button');
if (btn) {
var orig = btn.getAttribute('title') || '';
btn.setAttribute('title', '✓ Copié');
setTimeout(() => {
btn.setAttribute('title', orig);
}, 1200);
}
});
function _copyUrl(id) {
var input = document.getElementById(`url-${id}`);
navigator.clipboard.writeText(input.value).then(() => {
var btn = event.target.closest("button");
if (btn) {
const orig = btn.getAttribute("title") || "";
btn.setAttribute("title", "✓ Copié");
setTimeout(() => {
btn.setAttribute("title", orig);
}, 1200);
}
});
}
function copyUrlFrom(el) {
navigator.clipboard.writeText(el.value).then(() => {
var btn = el.nextElementSibling;
if (btn) {
var orig = btn.textContent;
btn.textContent = '✓ Copié';
setTimeout(() => {
btn.textContent = orig;
}, 1200);
}
});
function _copyUrlFrom(el) {
navigator.clipboard.writeText(el.value).then(() => {
const btn = el.nextElementSibling;
if (btn) {
const orig = btn.textContent;
btn.textContent = "✓ Copié";
setTimeout(() => {
btn.textContent = orig;
}, 1200);
}
});
}
function copyTextToClipboard(text) {
navigator.clipboard.writeText(text)
.then(() => {
var btn = event && event.target ? event.target.closest('button') : null;
if (btn) {
var orig = btn.getAttribute('title') || '';
btn.setAttribute('title', '✓ Copié');
setTimeout(() => {
btn.setAttribute('title', orig);
}, 1200);
}
})
.catch(() => {});
function _copyTextToClipboard(text) {
navigator.clipboard
.writeText(text)
.then(() => {
const btn = event?.target ? event.target.closest("button") : null;
if (btn) {
const orig = btn.getAttribute("title") || "";
btn.setAttribute("title", "✓ Copié");
setTimeout(() => {
btn.setAttribute("title", orig);
}, 1200);
}
})
.catch(() => {});
}
function openEditDialog(id, name, hasPassword, expiresVal) {
document.getElementById('edit-link-id').value = id;
document.getElementById('edit-name').value = name || '';
document.getElementById('edit-expires').value = expiresVal || '';
document.getElementById('edit-dialog').showModal();
function _openEditDialog(id, name, _hasPassword, expiresVal) {
document.getElementById("edit-link-id").value = id;
document.getElementById("edit-name").value = name || "";
document.getElementById("edit-expires").value = expiresVal || "";
document.getElementById("edit-dialog").showModal();
}
function openApproveDialog(requestId) {
document.getElementById('approve-request-id').value = requestId;
document.getElementById('approve-dialog').showModal();
function _openApproveDialog(requestId) {
document.getElementById("approve-request-id").value = requestId;
document.getElementById("approve-dialog").showModal();
}
function openRejectDialog(requestId) {
document.getElementById('reject-request-id').value = requestId;
document.getElementById('reject-dialog').showModal();
function _openRejectDialog(requestId) {
document.getElementById("reject-request-id").value = requestId;
document.getElementById("reject-dialog").showModal();
}
var _pendingArchiveLinkId = null;
function openArchiveLinkDialog(id) {
_pendingArchiveLinkId = id;
document.getElementById('archive-link-dialog').showModal();
function _openArchiveLinkDialog(id) {
_pendingArchiveLinkId = id;
document.getElementById("archive-link-dialog").showModal();
}
function _executeArchiveLink() {
var form = document.getElementById('archive-link-form-' + _pendingArchiveLinkId);
if (form) form.submit();
var form = document.getElementById(
`archive-link-form-${_pendingArchiveLinkId}`,
);
if (form) form.submit();
}
function openDeleteArchivedLinkDialog(id) {
document.getElementById('delete-archived-link-id').value = id;
document.getElementById('delete-archived-link-dialog').showModal();
function _openDeleteArchivedLinkDialog(id) {
document.getElementById("delete-archived-link-id").value = id;
document.getElementById("delete-archived-link-dialog").showModal();
}
app/public/assets/js/app/admin-cleanup-bulk.js
+60 -55
View File
@@ -5,67 +5,72 @@
* All functions are attached to `window` for onclick handlers in PHP templates.
*/
(() => {
function cleanupToggleAll(src, group) {
const selector = group === 'filepond'
? 'input[name="filepond_dirs[]"]'
: 'input[name="trash_files[]"]';
document.querySelectorAll(selector).forEach((cb) => {
cb.checked = src.checked;
});
cleanupUpdateBulk();
}
function cleanupToggleAll(src, group) {
const selector =
group === "filepond"
? 'input[name="filepond_dirs[]"]'
: 'input[name="trash_files[]"]';
document.querySelectorAll(selector).forEach((cb) => {
cb.checked = src.checked;
});
cleanupUpdateBulk();
}
function cleanupUpdateBulk() {
const bar = document.getElementById('cleanup-bulk-actions');
const countEl = document.getElementById('cleanup-selected-count');
if (!bar || !countEl) return;
function cleanupUpdateBulk() {
const bar = document.getElementById("cleanup-bulk-actions");
const countEl = document.getElementById("cleanup-selected-count");
if (!bar || !countEl) return;
const n = document.querySelectorAll(
'input[name="filepond_dirs[]"]:checked, input[name="trash_files[]"]:checked'
).length;
countEl.textContent = n;
bar.style.display = n > 0 ? 'flex' : 'none';
}
const n = document.querySelectorAll(
'input[name="filepond_dirs[]"]:checked, input[name="trash_files[]"]:checked',
).length;
countEl.textContent = n;
bar.style.display = n > 0 ? "flex" : "none";
}
function cleanupBulkDelete() {
const form = document.getElementById('cleanup-bulk-form');
const container = document.getElementById('cleanup-bulk-checkboxes');
if (!form || !container) return;
function cleanupBulkDelete() {
const form = document.getElementById("cleanup-bulk-form");
const container = document.getElementById("cleanup-bulk-checkboxes");
if (!form || !container) return;
// Populate hidden inputs from checked checkboxes
container.innerHTML = '';
document.querySelectorAll(
'input[name="filepond_dirs[]"]:checked, input[name="trash_files[]"]:checked'
).forEach((cb) => {
const inp = document.createElement('input');
inp.type = 'hidden';
inp.name = cb.name; // "filepond_dirs[]" or "trash_files[]"
inp.value = cb.value;
container.appendChild(inp);
});
// Populate hidden inputs from checked checkboxes
container.innerHTML = "";
document
.querySelectorAll(
'input[name="filepond_dirs[]"]:checked, input[name="trash_files[]"]:checked',
)
.forEach((cb) => {
const inp = document.createElement("input");
inp.type = "hidden";
inp.name = cb.name; // "filepond_dirs[]" or "trash_files[]"
inp.value = cb.value;
container.appendChild(inp);
});
// Submit via HTMX
htmx.trigger(form, 'submit');
}
// Submit via HTMX
htmx.trigger(form, "submit");
}
function reattachListeners() {
document.querySelectorAll(
'input[name="filepond_dirs[]"], input[name="trash_files[]"]'
).forEach((cb) => {
cb.addEventListener('change', cleanupUpdateBulk);
});
cleanupUpdateBulk();
}
function reattachListeners() {
document
.querySelectorAll(
'input[name="filepond_dirs[]"], input[name="trash_files[]"]',
)
.forEach((cb) => {
cb.addEventListener("change", cleanupUpdateBulk);
});
cleanupUpdateBulk();
}
document.addEventListener('htmx:afterSwap', (evt) => {
// Only reattach if the swap target is our cleanup wrapper
if (evt.detail.target.id === 'tmp-cleanup-stats-wrapper') {
reattachListeners();
}
});
document.addEventListener("htmx:afterSwap", (evt) => {
// Only reattach if the swap target is our cleanup wrapper
if (evt.detail.target.id === "tmp-cleanup-stats-wrapper") {
reattachListeners();
}
});
// Export to global scope for onclick handlers in HTML
window.cleanupToggleAll = cleanupToggleAll;
window.cleanupUpdateBulk = cleanupUpdateBulk;
window.cleanupBulkDelete = cleanupBulkDelete;
// Export to global scope for onclick handlers in HTML
window.cleanupToggleAll = cleanupToggleAll;
window.cleanupUpdateBulk = cleanupUpdateBulk;
window.cleanupBulkDelete = cleanupBulkDelete;
})();
app/public/assets/js/app/admin-contacts-form.js
+74 -73
View File
@@ -5,87 +5,88 @@
* Expects templates with ids `entry-template-f-{key}` and `group-template-f-{key}`.
*/
(() => {
var form = document.querySelector('form[data-apropos-key]');
if (!form) return;
var form = document.querySelector("form[data-apropos-key]");
if (!form) return;
var key = form.dataset.aproposKey;
var groupCount = parseInt(form.dataset.aproposGroupCount, 10) || 0;
var entryTpl = document.getElementById('entry-template-f-' + key).innerHTML;
var groupTpl = document.getElementById('group-template-f-' + key).innerHTML;
var key = form.dataset.aproposKey;
var groupCount = parseInt(form.dataset.aproposGroupCount, 10) || 0;
var entryTpl = document.getElementById(`entry-template-f-${key}`).innerHTML;
var groupTpl = document.getElementById(`group-template-f-${key}`).innerHTML;
function reindexGroups() {
var fieldsets = form.querySelectorAll('fieldset.apropos-group');
groupCount = fieldsets.length;
fieldsets.forEach((fs, i) => {
var newIdx = i;
var legend = fs.querySelector('legend');
if (legend) legend.textContent = 'Contact ' + (newIdx + 1);
function reindexGroups() {
var fieldsets = form.querySelectorAll("fieldset.apropos-group");
groupCount = fieldsets.length;
fieldsets.forEach((fs, i) => {
var newIdx = i;
var legend = fs.querySelector("legend");
if (legend) legend.textContent = `Contact ${newIdx + 1}`;
fs.querySelectorAll('input').forEach((inp) => {
if (inp.name) {
inp.name = inp.name.replace(/groups\[\d+\]/, 'groups[' + newIdx + ']');
}
if (inp.id) {
inp.id = inp.id.replace(
/(group_f_contacts_|entry_f_contacts_)\d+/,
'$1' + newIdx
);
}
});
fs.querySelectorAll("input").forEach((inp) => {
if (inp.name) {
inp.name = inp.name.replace(/groups\[\d+\]/, `groups[${newIdx}]`);
}
if (inp.id) {
inp.id = inp.id.replace(
/(group_f_contacts_|entry_f_contacts_)\d+/,
`$1${newIdx}`,
);
}
});
fs.querySelectorAll('label[for]').forEach((lbl) => {
lbl.setAttribute(
'for',
lbl.getAttribute('for').replace(
/(group_f_contacts_|entry_f_contacts_)\d+/,
'$1' + newIdx
)
);
});
fs.querySelectorAll("label[for]").forEach((lbl) => {
lbl.setAttribute(
"for",
lbl
.getAttribute("for")
.replace(/(group_f_contacts_|entry_f_contacts_)\d+/, `$1${newIdx}`),
);
});
var addBtn = fs.querySelector('.add-entry-btn-f');
if (addBtn) addBtn.dataset.group = newIdx;
});
}
var addBtn = fs.querySelector(".add-entry-btn-f");
if (addBtn) addBtn.dataset.group = newIdx;
});
}
function bindAddEntry(btn) {
btn.addEventListener('click', function () {
var gi = parseInt(this.dataset.group);
var fieldset = this.closest('fieldset');
var entryCount = fieldset.querySelectorAll('.apropos-entry').length;
var html = entryTpl.replaceAll('{{gi}}', gi).replaceAll('{{ei}}', entryCount);
this.insertAdjacentHTML('beforebegin', html);
});
}
function bindAddEntry(btn) {
btn.addEventListener("click", function () {
var gi = parseInt(this.dataset.group, 10);
var fieldset = this.closest("fieldset");
var entryCount = fieldset.querySelectorAll(".apropos-entry").length;
var html = entryTpl
.replaceAll("{{gi}}", gi)
.replaceAll("{{ei}}", entryCount);
this.insertAdjacentHTML("beforebegin", html);
});
}
function bindDeleteGroup(btn) {
btn.addEventListener('click', function () {
var fieldset = this.closest('fieldset');
if (fieldset) {
fieldset.remove();
reindexGroups();
}
});
}
function bindDeleteGroup(btn) {
btn.addEventListener("click", function () {
var fieldset = this.closest("fieldset");
if (fieldset) {
fieldset.remove();
reindexGroups();
}
});
}
// Bind existing buttons
form.querySelectorAll('.add-entry-btn-f').forEach(bindAddEntry);
form.querySelectorAll('.delete-group-btn-f').forEach(bindDeleteGroup);
// Bind existing buttons
form.querySelectorAll(".add-entry-btn-f").forEach(bindAddEntry);
form.querySelectorAll(".delete-group-btn-f").forEach(bindDeleteGroup);
form.querySelector('.add-group-btn-f').addEventListener('click', function () {
groupCount++;
var html = groupTpl.replaceAll('{{gi}}', groupCount);
this.insertAdjacentHTML('beforebegin', html);
form.querySelector(".add-group-btn-f").addEventListener("click", function () {
groupCount++;
var html = groupTpl.replaceAll("{{gi}}", groupCount);
this.insertAdjacentHTML("beforebegin", html);
var newGroup = this.previousElementSibling;
if (newGroup && newGroup.classList.contains('apropos-group')) {
var addBtn = newGroup.querySelector('.add-entry-btn-f');
if (addBtn) {
addBtn.dataset.group = groupCount;
bindAddEntry(addBtn);
}
var delBtn = newGroup.querySelector('.delete-group-btn-f');
if (delBtn) bindDeleteGroup(delBtn);
}
});
var newGroup = this.previousElementSibling;
if (newGroup?.classList.contains("apropos-group")) {
var addBtn = newGroup.querySelector(".add-entry-btn-f");
if (addBtn) {
addBtn.dataset.group = groupCount;
bindAddEntry(addBtn);
}
var delBtn = newGroup.querySelector(".delete-group-btn-f");
if (delBtn) bindDeleteGroup(delBtn);
}
});
})();
app/public/assets/js/app/admin-contenus-langues.js
+103 -88
View File
@@ -7,111 +7,126 @@
*/
var _languesPendingForm = null;
function languesConfirmDelete(btn, name) {
_languesPendingForm = btn.closest('form');
document.getElementById('langues-delete-name').textContent = name;
document.getElementById('langues-delete-dialog').showModal();
function _languesConfirmDelete(btn, name) {
_languesPendingForm = btn.closest("form");
document.getElementById("langues-delete-name").textContent = name;
document.getElementById("langues-delete-dialog").showModal();
}
function languesSubmitPending() {
if (_languesPendingForm) _languesPendingForm.submit();
function _languesSubmitPending() {
if (_languesPendingForm) _languesPendingForm.submit();
}
function languesToggleAll(src) {
document.querySelectorAll('input[name="selected_langs[]"]').forEach((cb) => {
cb.checked = src.checked;
});
languesUpdateBulk();
function _languesToggleAll(src) {
document.querySelectorAll('input[name="selected_langs[]"]').forEach((cb) => {
cb.checked = src.checked;
});
languesUpdateBulk();
}
function languesUpdateBulk() {
var n = document.querySelectorAll('input[name="selected_langs[]"]:checked').length;
document.getElementById('langues-selected-count').textContent = n;
var bar = document.getElementById('langues-bulk-actions');
var wrap = document.getElementById('langues-table-wrap');
var visible = n > 1;
bar.style.display = visible ? 'flex' : 'none';
if (visible) {
requestAnimationFrame(() => {
wrap.style.setProperty('--sticky-top', bar.offsetHeight + 'px');
});
} else {
wrap.style.setProperty('--sticky-top', '0px');
}
var n = document.querySelectorAll(
'input[name="selected_langs[]"]:checked',
).length;
document.getElementById("langues-selected-count").textContent = n;
var bar = document.getElementById("langues-bulk-actions");
var wrap = document.getElementById("langues-table-wrap");
var visible = n > 1;
bar.style.display = visible ? "flex" : "none";
if (visible) {
requestAnimationFrame(() => {
wrap.style.setProperty("--sticky-top", `${bar.offsetHeight}px`);
});
} else {
wrap.style.setProperty("--sticky-top", "0px");
}
}
function languesCancelSelection() {
document.querySelectorAll('input[name="selected_langs[]"]').forEach((cb) => {
cb.checked = false;
});
languesUpdateBulk();
function _languesCancelSelection() {
document.querySelectorAll('input[name="selected_langs[]"]').forEach((cb) => {
cb.checked = false;
});
languesUpdateBulk();
}
function languesConfirmBulkDelete() {
var checked = document.querySelectorAll('input[name="selected_langs[]"]:checked');
if (checked.length < 1) return;
document.getElementById('langues-bulk-delete-count').textContent = checked.length;
document.getElementById('langues-bulk-delete-dialog').showModal();
function _languesConfirmBulkDelete() {
var checked = document.querySelectorAll(
'input[name="selected_langs[]"]:checked',
);
if (checked.length < 1) return;
document.getElementById("langues-bulk-delete-count").textContent =
checked.length;
document.getElementById("langues-bulk-delete-dialog").showModal();
}
function languesExecBulkDelete() {
var container = document.getElementById('langues-bulk-checkboxes');
container.innerHTML = '';
document.querySelectorAll('input[name="selected_langs[]"]:checked').forEach((cb) => {
var inp = document.createElement('input');
inp.type = 'hidden';
inp.name = 'selected_langs[]';
inp.value = cb.value;
container.appendChild(inp);
});
document.getElementById('langues-bulk-form').querySelector('input[name="action"]').value =
'delete_bulk';
document.getElementById('langues-bulk-delete-dialog').close();
document.getElementById('langues-bulk-form').submit();
function _languesExecBulkDelete() {
var container = document.getElementById("langues-bulk-checkboxes");
container.innerHTML = "";
document
.querySelectorAll('input[name="selected_langs[]"]:checked')
.forEach((cb) => {
var inp = document.createElement("input");
inp.type = "hidden";
inp.name = "selected_langs[]";
inp.value = cb.value;
container.appendChild(inp);
});
document
.getElementById("langues-bulk-form")
.querySelector('input[name="action"]').value = "delete_bulk";
document.getElementById("langues-bulk-delete-dialog").close();
document.getElementById("langues-bulk-form").submit();
}
function languesConfirmBulkMerge() {
var checked = document.querySelectorAll('input[name="selected_langs[]"]:checked');
if (checked.length < 2) return;
document.getElementById('langues-bulk-merge-count').textContent = checked.length;
var sel = document.getElementById('langues-bulk-merge-target-select');
sel.innerHTML = '<option value="">— Choisir la destination —</option>';
checked.forEach((cb) => {
var tr = cb.closest('tr');
sel.innerHTML +=
'<option value="' +
cb.value +
'">' +
tr.querySelector('td:nth-child(2)').textContent.trim() +
'</option>';
});
document.getElementById('langues-bulk-merge-dialog').showModal();
function _languesConfirmBulkMerge() {
var checked = document.querySelectorAll(
'input[name="selected_langs[]"]:checked',
);
if (checked.length < 2) return;
document.getElementById("langues-bulk-merge-count").textContent =
checked.length;
var sel = document.getElementById("langues-bulk-merge-target-select");
sel.innerHTML = '<option value="">— Choisir la destination —</option>';
checked.forEach((cb) => {
var tr = cb.closest("tr");
sel.innerHTML +=
'<option value="' +
cb.value +
'">' +
tr.querySelector("td:nth-child(2)").textContent.trim() +
"</option>";
});
document.getElementById("langues-bulk-merge-dialog").showModal();
}
function languesExecBulkMerge() {
var targetId = document.getElementById('langues-bulk-merge-target-select').value;
if (!targetId) return;
document.getElementById('langues-bulk-target').value = targetId;
var container = document.getElementById('langues-bulk-checkboxes');
container.innerHTML = '';
document.querySelectorAll('input[name="selected_langs[]"]:checked').forEach((cb) => {
var inp = document.createElement('input');
inp.type = 'hidden';
inp.name = 'selected_langs[]';
inp.value = cb.value;
container.appendChild(inp);
});
document.getElementById('langues-bulk-merge-dialog').close();
document.getElementById('langues-bulk-form').submit();
function _languesExecBulkMerge() {
var targetId = document.getElementById(
"langues-bulk-merge-target-select",
).value;
if (!targetId) return;
document.getElementById("langues-bulk-target").value = targetId;
var container = document.getElementById("langues-bulk-checkboxes");
container.innerHTML = "";
document
.querySelectorAll('input[name="selected_langs[]"]:checked')
.forEach((cb) => {
var inp = document.createElement("input");
inp.type = "hidden";
inp.name = "selected_langs[]";
inp.value = cb.value;
container.appendChild(inp);
});
document.getElementById("langues-bulk-merge-dialog").close();
document.getElementById("langues-bulk-form").submit();
}
document.addEventListener('htmx:afterSwap', (evt) => {
if (evt.target.id === 'langues-table-wrap') {
document
.querySelectorAll('input[name="selected_langs[]"]')
.forEach((cb) => {
cb.addEventListener('change', languesUpdateBulk);
});
languesUpdateBulk();
}
document.addEventListener("htmx:afterSwap", (evt) => {
if (evt.target.id === "langues-table-wrap") {
document
.querySelectorAll('input[name="selected_langs[]"]')
.forEach((cb) => {
cb.addEventListener("change", languesUpdateBulk);
});
languesUpdateBulk();
}
});
app/public/assets/js/app/admin-contenus-motscles.js
+101 -88
View File
@@ -7,111 +7,124 @@
*/
var _motsclesPendingForm = null;
function motsclesConfirmDelete(btn, name) {
_motsclesPendingForm = btn.closest('form');
document.getElementById('motscles-delete-name').textContent = name;
document.getElementById('motscles-delete-dialog').showModal();
function _motsclesConfirmDelete(btn, name) {
_motsclesPendingForm = btn.closest("form");
document.getElementById("motscles-delete-name").textContent = name;
document.getElementById("motscles-delete-dialog").showModal();
}
function motsclesSubmitPending() {
if (_motsclesPendingForm) _motsclesPendingForm.submit();
function _motsclesSubmitPending() {
if (_motsclesPendingForm) _motsclesPendingForm.submit();
}
function motsclesToggleAll(src) {
document.querySelectorAll('input[name="selected_tags[]"]').forEach((cb) => {
cb.checked = src.checked;
});
motsclesUpdateBulk();
function _motsclesToggleAll(src) {
document.querySelectorAll('input[name="selected_tags[]"]').forEach((cb) => {
cb.checked = src.checked;
});
motsclesUpdateBulk();
}
function motsclesUpdateBulk() {
var n = document.querySelectorAll('input[name="selected_tags[]"]:checked').length;
document.getElementById('motscles-selected-count').textContent = n;
var bar = document.getElementById('motscles-bulk-actions');
var wrap = document.getElementById('motscles-table-wrap');
var visible = n > 1;
bar.style.display = visible ? 'flex' : 'none';
if (visible) {
requestAnimationFrame(() => {
wrap.style.setProperty('--sticky-top', bar.offsetHeight + 'px');
});
} else {
wrap.style.setProperty('--sticky-top', '0px');
}
var n = document.querySelectorAll(
'input[name="selected_tags[]"]:checked',
).length;
document.getElementById("motscles-selected-count").textContent = n;
var bar = document.getElementById("motscles-bulk-actions");
var wrap = document.getElementById("motscles-table-wrap");
var visible = n > 1;
bar.style.display = visible ? "flex" : "none";
if (visible) {
requestAnimationFrame(() => {
wrap.style.setProperty("--sticky-top", `${bar.offsetHeight}px`);
});
} else {
wrap.style.setProperty("--sticky-top", "0px");
}
}
function motsclesConfirmBulkMerge() {
var checked = document.querySelectorAll('input[name="selected_tags[]"]:checked');
if (checked.length < 2) return;
document.getElementById('motscles-bulk-merge-count').textContent = checked.length;
var sel = document.getElementById('motscles-bulk-merge-target-select');
sel.innerHTML = '<option value="">— Choisir la destination —</option>';
checked.forEach((cb) => {
var tr = cb.closest('tr');
sel.innerHTML +=
'<option value="' +
cb.value +
'">' +
tr.querySelector('td:nth-child(2)').textContent.trim() +
'</option>';
});
document.getElementById('motscles-bulk-merge-dialog').showModal();
function _motsclesConfirmBulkMerge() {
var checked = document.querySelectorAll(
'input[name="selected_tags[]"]:checked',
);
if (checked.length < 2) return;
document.getElementById("motscles-bulk-merge-count").textContent =
checked.length;
var sel = document.getElementById("motscles-bulk-merge-target-select");
sel.innerHTML = '<option value="">— Choisir la destination —</option>';
checked.forEach((cb) => {
var tr = cb.closest("tr");
sel.innerHTML +=
'<option value="' +
cb.value +
'">' +
tr.querySelector("td:nth-child(2)").textContent.trim() +
"</option>";
});
document.getElementById("motscles-bulk-merge-dialog").showModal();
}
function motsclesExecBulkMerge() {
var targetId = document.getElementById('motscles-bulk-merge-target-select').value;
if (!targetId) return;
document.getElementById('motscles-bulk-target').value = targetId;
var container = document.getElementById('motscles-bulk-checkboxes');
container.innerHTML = '';
document.querySelectorAll('input[name="selected_tags[]"]:checked').forEach((cb) => {
var inp = document.createElement('input');
inp.type = 'hidden';
inp.name = 'selected_tags[]';
inp.value = cb.value;
container.appendChild(inp);
});
document.getElementById('motscles-bulk-merge-dialog').close();
document.getElementById('motscles-bulk-form').submit();
function _motsclesExecBulkMerge() {
var targetId = document.getElementById(
"motscles-bulk-merge-target-select",
).value;
if (!targetId) return;
document.getElementById("motscles-bulk-target").value = targetId;
var container = document.getElementById("motscles-bulk-checkboxes");
container.innerHTML = "";
document
.querySelectorAll('input[name="selected_tags[]"]:checked')
.forEach((cb) => {
var inp = document.createElement("input");
inp.type = "hidden";
inp.name = "selected_tags[]";
inp.value = cb.value;
container.appendChild(inp);
});
document.getElementById("motscles-bulk-merge-dialog").close();
document.getElementById("motscles-bulk-form").submit();
}
function motsclesCancelSelection() {
document.querySelectorAll('input[name="selected_tags[]"]').forEach((cb) => {
cb.checked = false;
});
motsclesUpdateBulk();
function _motsclesCancelSelection() {
document.querySelectorAll('input[name="selected_tags[]"]').forEach((cb) => {
cb.checked = false;
});
motsclesUpdateBulk();
}
function motsclesConfirmBulkDelete() {
var checked = document.querySelectorAll('input[name="selected_tags[]"]:checked');
if (checked.length < 1) return;
document.getElementById('motscles-bulk-delete-count').textContent = checked.length;
document.getElementById('motscles-bulk-delete-dialog').showModal();
function _motsclesConfirmBulkDelete() {
var checked = document.querySelectorAll(
'input[name="selected_tags[]"]:checked',
);
if (checked.length < 1) return;
document.getElementById("motscles-bulk-delete-count").textContent =
checked.length;
document.getElementById("motscles-bulk-delete-dialog").showModal();
}
function motsclesExecBulkDelete() {
var container = document.getElementById('motscles-bulk-checkboxes');
container.innerHTML = '';
document.querySelectorAll('input[name="selected_tags[]"]:checked').forEach((cb) => {
var inp = document.createElement('input');
inp.type = 'hidden';
inp.name = 'selected_tags[]';
inp.value = cb.value;
container.appendChild(inp);
});
document.getElementById('motscles-bulk-form').querySelector('input[name="action"]').value =
'delete_bulk';
document.getElementById('motscles-bulk-delete-dialog').close();
document.getElementById('motscles-bulk-form').submit();
function _motsclesExecBulkDelete() {
var container = document.getElementById("motscles-bulk-checkboxes");
container.innerHTML = "";
document
.querySelectorAll('input[name="selected_tags[]"]:checked')
.forEach((cb) => {
var inp = document.createElement("input");
inp.type = "hidden";
inp.name = "selected_tags[]";
inp.value = cb.value;
container.appendChild(inp);
});
document
.getElementById("motscles-bulk-form")
.querySelector('input[name="action"]').value = "delete_bulk";
document.getElementById("motscles-bulk-delete-dialog").close();
document.getElementById("motscles-bulk-form").submit();
}
document.addEventListener('htmx:afterSwap', (evt) => {
if (evt.target.id === 'motscles-table-wrap') {
document
.querySelectorAll('input[name="selected_tags[]"]')
.forEach((cb) => {
cb.addEventListener('change', motsclesUpdateBulk);
});
motsclesUpdateBulk();
}
document.addEventListener("htmx:afterSwap", (evt) => {
if (evt.target.id === "motscles-table-wrap") {
document.querySelectorAll('input[name="selected_tags[]"]').forEach((cb) => {
cb.addEventListener("change", motsclesUpdateBulk);
});
motsclesUpdateBulk();
}
});
app/public/assets/js/app/admin-file-access.js
+6 -6
View File
@@ -3,12 +3,12 @@
*
* Provides: openApproveDialog, openRejectDialog.
*/
function openApproveDialog(requestId) {
document.getElementById('approve-request-id').value = requestId;
document.getElementById('approve-dialog').showModal();
function _openApproveDialog(requestId) {
document.getElementById("approve-request-id").value = requestId;
document.getElementById("approve-dialog").showModal();
}
function openRejectDialog(requestId) {
document.getElementById('reject-request-id').value = requestId;
document.getElementById('reject-dialog').showModal();
function _openRejectDialog(requestId) {
document.getElementById("reject-request-id").value = requestId;
document.getElementById("reject-dialog").showModal();
}
app/public/assets/js/app/admin-index-bulk.js
+104 -99
View File
@@ -5,113 +5,118 @@
* confirmExport, confirmExportFiles, confirmDelete.
*/
(() => {
function toggleAll(src) {
document.querySelectorAll('input[name="selected_theses[]"]').forEach((cb) => {
cb.checked = src.checked;
});
updateBulk();
}
function toggleAll(src) {
document
.querySelectorAll('input[name="selected_theses[]"]')
.forEach((cb) => {
cb.checked = src.checked;
});
updateBulk();
}
function updateBulk() {
var b = document.getElementById('bulk-actions');
var c = document.getElementById('selected-count');
if (!b || !c) return; // only on thesis index page
var n = document.querySelectorAll('input[name="selected_theses[]"]:checked').length;
c.textContent = n;
b.style.display = n > 0 ? 'flex' : 'none';
document.getElementById('admin-table-wrap').style.setProperty(
'--sticky-top',
n > 0 ? b.offsetHeight + 'px' : '0px'
);
}
function updateBulk() {
var b = document.getElementById("bulk-actions");
var c = document.getElementById("selected-count");
if (!b || !c) return; // only on thesis index page
var n = document.querySelectorAll(
'input[name="selected_theses[]"]:checked',
).length;
c.textContent = n;
b.style.display = n > 0 ? "flex" : "none";
document
.getElementById("admin-table-wrap")
.style.setProperty("--sticky-top", n > 0 ? `${b.offsetHeight}px` : "0px");
}
function getSelectedIds() {
return Array.from(
document.querySelectorAll('input[name="selected_theses[]"]:checked')
).map((cb) => cb.value);
}
function getSelectedIds() {
return Array.from(
document.querySelectorAll('input[name="selected_theses[]"]:checked'),
).map((cb) => cb.value);
}
function confirmBulk(act) {
var noSel = document.getElementById('no-selection-dialog');
if (!noSel) return; // only on thesis index page
var ids = getSelectedIds();
if (!ids.length) {
noSel.showModal();
return;
}
var n = ids.length;
document.getElementById('bulk-action-input').value = act;
if (act === 'delete') {
document.getElementById('bulk-delete-count').textContent = n;
document.getElementById('bulk-delete-dialog').showModal();
} else {
document.getElementById('bulk-confirm-word').textContent =
act === 'publish' ? 'Publier' : 'Dépublier';
document.getElementById('bulk-confirm-count').textContent = n;
document.getElementById('bulk-confirm-dialog').showModal();
}
}
function confirmBulk(act) {
var noSel = document.getElementById("no-selection-dialog");
if (!noSel) return; // only on thesis index page
var ids = getSelectedIds();
if (!ids.length) {
noSel.showModal();
return;
}
var n = ids.length;
document.getElementById("bulk-action-input").value = act;
if (act === "delete") {
document.getElementById("bulk-delete-count").textContent = n;
document.getElementById("bulk-delete-dialog").showModal();
} else {
document.getElementById("bulk-confirm-word").textContent =
act === "publish" ? "Publier" : "Dépublier";
document.getElementById("bulk-confirm-count").textContent = n;
document.getElementById("bulk-confirm-dialog").showModal();
}
}
function execBulk() {
var a = document.getElementById('bulk-action-input').value;
var f = document.getElementById('bulk-form');
f.action = a === 'delete' ? 'actions/delete.php' : 'actions/publish.php';
var c = document.getElementById('bulk-checkboxes');
c.innerHTML = '';
getSelectedIds().forEach((id) => {
var inp = document.createElement('input');
inp.type = 'hidden';
inp.name = 'selected_theses[]';
inp.value = id;
c.appendChild(inp);
});
f.submit();
}
function execBulk() {
var a = document.getElementById("bulk-action-input").value;
var f = document.getElementById("bulk-form");
f.action = a === "delete" ? "actions/delete.php" : "actions/publish.php";
var c = document.getElementById("bulk-checkboxes");
c.innerHTML = "";
getSelectedIds().forEach((id) => {
var inp = document.createElement("input");
inp.type = "hidden";
inp.name = "selected_theses[]";
inp.value = id;
c.appendChild(inp);
});
f.submit();
}
function confirmExport() {
var ids = getSelectedIds();
if (!ids.length) {
document.getElementById('no-selection-dialog').showModal();
return;
}
window.location.href = '/admin/actions/export.php?csv=1&ids=' + ids.join(',');
}
function confirmExport() {
var ids = getSelectedIds();
if (!ids.length) {
document.getElementById("no-selection-dialog").showModal();
return;
}
window.location.href = `/admin/actions/export.php?csv=1&ids=${ids.join(",")}`;
}
function confirmExportFiles() {
var ids = getSelectedIds();
if (!ids.length) {
document.getElementById('no-selection-dialog').showModal();
return;
}
window.location.href = '/admin/actions/export.php?files=1&ids=' + ids.join(',');
}
function confirmExportFiles() {
var ids = getSelectedIds();
if (!ids.length) {
document.getElementById("no-selection-dialog").showModal();
return;
}
window.location.href = `/admin/actions/export.php?files=1&ids=${ids.join(",")}`;
}
function confirmDelete(id, title) {
var dialog = document.getElementById('delete-thesis-dialog');
if (!dialog) return; // only on thesis index page
document.getElementById('delete-thesis-title').textContent = title;
dialog.showModal();
document.getElementById('delete-dialog-confirm').onclick = () => {
document.getElementById('delete-form-' + id).submit();
};
}
function confirmDelete(id, title) {
var dialog = document.getElementById("delete-thesis-dialog");
if (!dialog) return; // only on thesis index page
document.getElementById("delete-thesis-title").textContent = title;
dialog.showModal();
document.getElementById("delete-dialog-confirm").onclick = () => {
document.getElementById(`delete-form-${id}`).submit();
};
}
function reattachListeners() {
document.querySelectorAll('input[name="selected_theses[]"]').forEach((cb) => {
cb.addEventListener('change', updateBulk);
});
updateBulk();
}
function reattachListeners() {
document
.querySelectorAll('input[name="selected_theses[]"]')
.forEach((cb) => {
cb.addEventListener("change", updateBulk);
});
updateBulk();
}
document.addEventListener('DOMContentLoaded', reattachListeners);
document.addEventListener('htmx:afterSwap', reattachListeners);
document.addEventListener("DOMContentLoaded", reattachListeners);
document.addEventListener("htmx:afterSwap", reattachListeners);
// Export to global scope for onclick handlers in HTML
window.toggleAll = toggleAll;
window.updateBulk = updateBulk;
window.confirmBulk = confirmBulk;
window.execBulk = execBulk;
window.confirmExport = confirmExport;
window.confirmExportFiles = confirmExportFiles;
window.confirmDelete = confirmDelete;
// Export to global scope for onclick handlers in HTML
window.toggleAll = toggleAll;
window.updateBulk = updateBulk;
window.confirmBulk = confirmBulk;
window.execBulk = execBulk;
window.confirmExport = confirmExport;
window.confirmExportFiles = confirmExportFiles;
window.confirmDelete = confirmDelete;
})();
app/public/assets/js/app/admin-tags.js
+58 -53
View File
@@ -10,71 +10,76 @@
*/
var _pendingTagForm = null;
function tagsToggleAll(src) {
document.querySelectorAll('input[name="selected_tags[]"]').forEach((cb) => {
cb.checked = src.checked;
});
tagsUpdateBulk();
function _tagsToggleAll(src) {
document.querySelectorAll('input[name="selected_tags[]"]').forEach((cb) => {
cb.checked = src.checked;
});
tagsUpdateBulk();
}
function tagsUpdateBulk() {
var n = document.querySelectorAll('input[name="selected_tags[]"]:checked').length;
document.getElementById('tags-selected-count').textContent = n;
document.getElementById('tags-bulk-actions').style.display = n > 1 ? 'flex' : 'none';
var n = document.querySelectorAll(
'input[name="selected_tags[]"]:checked',
).length;
document.getElementById("tags-selected-count").textContent = n;
document.getElementById("tags-bulk-actions").style.display =
n > 1 ? "flex" : "none";
}
function tagsConfirmBulkMerge() {
var checked = document.querySelectorAll('input[name="selected_tags[]"]:checked');
if (checked.length < 2) return;
document.getElementById('bulk-merge-count').textContent = checked.length;
var sel = document.getElementById('bulk-merge-target-select');
sel.innerHTML = '<option value="">— Choisir la destination —</option>';
checked.forEach((cb) => {
var tr = cb.closest('tr');
sel.innerHTML +=
'<option value="' +
cb.value +
'">' +
tr.querySelector('.tag-name-cell').textContent.trim() +
'</option>';
});
document.getElementById('bulk-merge-dialog').showModal();
function _tagsConfirmBulkMerge() {
var checked = document.querySelectorAll(
'input[name="selected_tags[]"]:checked',
);
if (checked.length < 2) return;
document.getElementById("bulk-merge-count").textContent = checked.length;
var sel = document.getElementById("bulk-merge-target-select");
sel.innerHTML = '<option value="">— Choisir la destination —</option>';
checked.forEach((cb) => {
var tr = cb.closest("tr");
sel.innerHTML +=
'<option value="' +
cb.value +
'">' +
tr.querySelector(".tag-name-cell").textContent.trim() +
"</option>";
});
document.getElementById("bulk-merge-dialog").showModal();
}
function tagsExecBulkMerge() {
var targetId = document.getElementById('bulk-merge-target-select').value;
if (!targetId) return;
document.getElementById('tags-bulk-target').value = targetId;
var container = document.getElementById('tags-bulk-checkboxes');
container.innerHTML = '';
document.querySelectorAll('input[name="selected_tags[]"]:checked').forEach((cb) => {
var inp = document.createElement('input');
inp.type = 'hidden';
inp.name = 'selected_tags[]';
inp.value = cb.value;
container.appendChild(inp);
});
document.getElementById('bulk-merge-dialog').close();
document.getElementById('tags-bulk-form').submit();
function _tagsExecBulkMerge() {
var targetId = document.getElementById("bulk-merge-target-select").value;
if (!targetId) return;
document.getElementById("tags-bulk-target").value = targetId;
var container = document.getElementById("tags-bulk-checkboxes");
container.innerHTML = "";
document
.querySelectorAll('input[name="selected_tags[]"]:checked')
.forEach((cb) => {
var inp = document.createElement("input");
inp.type = "hidden";
inp.name = "selected_tags[]";
inp.value = cb.value;
container.appendChild(inp);
});
document.getElementById("bulk-merge-dialog").close();
document.getElementById("tags-bulk-form").submit();
}
function tagsConfirmDelete(btn, name) {
_pendingTagForm = btn.closest('form');
document.getElementById('delete-tag-name').textContent = name;
document.getElementById('delete-tag-dialog').showModal();
function _tagsConfirmDelete(btn, name) {
_pendingTagForm = btn.closest("form");
document.getElementById("delete-tag-name").textContent = name;
document.getElementById("delete-tag-dialog").showModal();
}
function _submitPendingTagForm() {
if (_pendingTagForm) _pendingTagForm.submit();
if (_pendingTagForm) _pendingTagForm.submit();
}
document.addEventListener('htmx:afterSwap', (evt) => {
if (evt.target.id === 'tags-table-wrap') {
document
.querySelectorAll('input[name="selected_tags[]"]')
.forEach((cb) => {
cb.addEventListener('change', tagsUpdateBulk);
});
tagsUpdateBulk();
}
document.addEventListener("htmx:afterSwap", (evt) => {
if (evt.target.id === "tags-table-wrap") {
document.querySelectorAll('input[name="selected_tags[]"]').forEach((cb) => {
cb.addEventListener("change", tagsUpdateBulk);
});
tagsUpdateBulk();
}
});
app/public/assets/js/app/admin-toc.js
+91 -90
View File
@@ -10,108 +10,109 @@
* Guarded: only runs once.
*/
(() => {
if (window.__adminTocBuilt) return;
window.__adminTocBuilt = true;
if (window.__adminTocBuilt) return;
window.__adminTocBuilt = true;
function build() {
var main = document.getElementById('main-content');
var toc = document.getElementById('admin-toc');
var list = document.getElementById('admin-toc-list');
if (!main || !toc || !list) return;
function build() {
var main = document.getElementById("main-content");
var toc = document.getElementById("admin-toc");
var list = document.getElementById("admin-toc-list");
if (!main || !toc || !list) return;
// Guard against double population
if (list.children.length > 0) return;
// Guard against double population
if (list.children.length > 0) return;
var sections = main.querySelectorAll('section[aria-labelledby]');
if (sections.length < 2) {
toc.hidden = true;
return;
}
var sections = main.querySelectorAll("section[aria-labelledby]");
if (sections.length < 2) {
toc.hidden = true;
return;
}
var items = [];
sections.forEach((sec) => {
var headingId = sec.getAttribute('aria-labelledby');
var heading = document.getElementById(headingId);
if (!heading) return;
if (!sec.id) sec.id = headingId;
var items = [];
sections.forEach((sec) => {
var headingId = sec.getAttribute("aria-labelledby");
var heading = document.getElementById(headingId);
if (!heading) return;
if (!sec.id) sec.id = headingId;
var a = document.createElement('a');
a.href = '#' + sec.id;
a.textContent = heading.textContent.trim();
var a = document.createElement("a");
a.href = `#${sec.id}`;
a.textContent = heading.textContent.trim();
var li = document.createElement('li');
li.appendChild(a);
list.appendChild(li);
items.push({ section: sec, link: a });
});
var li = document.createElement("li");
li.appendChild(a);
list.appendChild(li);
items.push({ section: sec, link: a });
});
// Generate a spread of thresholds for smooth IntersectionObserver firing.
function buildThresholds() {
var t = [];
for (var i = 0; i <= 20; i++) t.push(i / 20);
return t;
}
// Generate a spread of thresholds for smooth IntersectionObserver firing.
function buildThresholds() {
var t = [];
for (var i = 0; i <= 20; i++) t.push(i / 20);
return t;
}
var observer = new IntersectionObserver(
() => {
// Active section = whose top is closest to the midpoint of the
// viewport from above. At page bottom, the last section wins
// even if its heading can't reach 50%.
var line = window.innerHeight * 0.5;
var best = null;
var bestDist = Infinity;
var observer = new IntersectionObserver(
() => {
// Active section = whose top is closest to the midpoint of the
// viewport from above. At page bottom, the last section wins
// even if its heading can't reach 50%.
var line = window.innerHeight * 0.5;
var best = null;
var bestDist = Infinity;
// Pass 1: sections whose top is above/at the line
items.forEach((item) => {
var top = item.section.getBoundingClientRect().top;
if (top <= line && (line - top) < bestDist) {
bestDist = line - top;
best = item;
}
});
// Pass 1: sections whose top is above/at the line
items.forEach((item) => {
var top = item.section.getBoundingClientRect().top;
if (top <= line && line - top < bestDist) {
bestDist = line - top;
best = item;
}
});
// Pass 2: no section above the line — pick closest from below
if (!best) {
items.forEach((item) => {
var top = item.section.getBoundingClientRect().top;
var dist = top - line;
if (dist >= 0 && dist < bestDist) {
bestDist = dist;
best = item;
}
});
}
// Pass 2: no section above the line — pick closest from below
if (!best) {
items.forEach((item) => {
var top = item.section.getBoundingClientRect().top;
var dist = top - line;
if (dist >= 0 && dist < bestDist) {
bestDist = dist;
best = item;
}
});
}
// Pass 3: at page bottom, if the last section is visible but
// its heading never crossed 50%, promote it anyway.
if (best) {
var lastItem = items[items.length - 1];
if (lastItem !== best) {
var lastTop = lastItem.section.getBoundingClientRect().top;
var atBottom = (window.innerHeight + window.scrollY + 5)
>= document.documentElement.scrollHeight;
if (atBottom && lastTop > line && lastTop < window.innerHeight) {
best = lastItem;
}
}
}
// Pass 3: at page bottom, if the last section is visible but
// its heading never crossed 50%, promote it anyway.
if (best) {
var lastItem = items[items.length - 1];
if (lastItem !== best) {
var lastTop = lastItem.section.getBoundingClientRect().top;
var atBottom =
window.innerHeight + window.scrollY + 5 >=
document.documentElement.scrollHeight;
if (atBottom && lastTop > line && lastTop < window.innerHeight) {
best = lastItem;
}
}
}
if (!best && items.length > 0) best = items[0];
items.forEach((item) => {
item.link.classList.toggle('toc-active', item === best);
});
},
{ threshold: buildThresholds() }
);
if (!best && items.length > 0) best = items[0];
items.forEach((item) => {
item.link.classList.toggle("toc-active", item === best);
});
},
{ threshold: buildThresholds() },
);
items.forEach((item) => {
observer.observe(item.section);
});
}
items.forEach((item) => {
observer.observe(item.section);
});
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', build);
} else {
build();
}
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", build);
} else {
build();
}
})();
app/public/assets/js/app/autosave-handler.js
-2
View File
@@ -78,5 +78,3 @@ document.body.addEventListener("htmx:beforeRequest", (e) => {
status.className = "autosave-status autosave-status--saving";
}
});
app/public/assets/js/app/file-upload-filepond.js
+9 -9
View File
@@ -172,7 +172,7 @@
* Name: queue_order[<queueType>] for the pipe-separated order.
*/
function syncOrderInput(queueType, pond) {
if (!pond || !pond.element) return;
if (!pond?.element) return;
var form = pond.element.closest("form");
if (!form) return;
@@ -724,7 +724,9 @@
// Find the label for the TFE input (its parent group's <label>)
var fieldGroup = tfeInput.closest(".admin-files-fieldgroup");
var label = fieldGroup ? fieldGroup.querySelector("label[for='tfe-files-input']") : null;
var label = fieldGroup
? fieldGroup.querySelector("label[for='tfe-files-input']")
: null;
if (checkedAny) {
tfeInput.removeAttribute("required");
@@ -992,12 +994,12 @@
? data.error
: typeof data === "string"
? data
: "Erreur " + status;
: `Erreur ${status}`;
if (bodyEl)
bodyEl.innerHTML = '<p class="file-browser-error">Erreur : ' + msg + '</p>';
bodyEl.innerHTML = `<p class="file-browser-error">Erreur : ${msg}</p>`;
return;
}
console.log("[pt-relink] success | new_id=" + data.id);
console.log(`[pt-relink] success | new_id=${data.id}`);
var input = document.querySelector(
'.tfe-file-picker[data-queue-type="tfe"]',
@@ -1008,8 +1010,7 @@
var block = document.getElementById("format-fichiers-block");
if (block && window.htmx) {
var url = "/admin/fragments/fichiers.php";
if (thesisId)
url += "?_thesis_id=" + encodeURIComponent(thesisId);
if (thesisId) url += `?_thesis_id=${encodeURIComponent(thesisId)}`;
htmx.ajax("GET", url, {
target: "#format-fichiers-block",
swap: "outerHTML",
@@ -1050,8 +1051,7 @@
.catch((err) => {
console.error("[pt-relink] fetch error", err);
if (bodyEl)
bodyEl.innerHTML =
'<p class="file-browser-error">Erreur réseau.</p>';
bodyEl.innerHTML = '<p class="file-browser-error">Erreur réseau.</p>';
});
};
})();
app/public/assets/js/app/form-duration-toggle.js
+16 -16
View File
@@ -5,22 +5,22 @@
* receives a single integer (total minutes).
*/
(() => {
var form = document.querySelector('form.admin-form');
if (!form) return;
var form = document.querySelector("form.admin-form");
if (!form) return;
form.addEventListener('submit', function() {
var h = parseInt(document.getElementById('duration_h')?.value, 10) || 0;
var m = parseInt(document.getElementById('duration_m')?.value, 10) || 0;
var total = h * 60 + m;
form.addEventListener("submit", () => {
var h = parseInt(document.getElementById("duration_h")?.value, 10) || 0;
var m = parseInt(document.getElementById("duration_m")?.value, 10) || 0;
var total = h * 60 + m;
var hidden = document.getElementById('duration_minutes_hidden');
if (!hidden) {
hidden = document.createElement('input');
hidden.type = 'hidden';
hidden.name = 'duration_minutes';
hidden.id = 'duration_minutes_hidden';
form.appendChild(hidden);
}
hidden.value = total > 0 ? String(total) : '';
});
var hidden = document.getElementById("duration_minutes_hidden");
if (!hidden) {
hidden = document.createElement("input");
hidden.type = "hidden";
hidden.name = "duration_minutes";
hidden.id = "duration_minutes_hidden";
form.appendChild(hidden);
}
hidden.value = total > 0 ? String(total) : "";
});
})();
app/public/assets/js/app/form-jury-fields.js
+58 -52
View File
@@ -5,62 +5,68 @@
* Reads `data-admin-mode` (0/1) from the jury <fieldset>.
*/
(() => {
// ── Dynamic row add/remove ──────────────────────────────────────────────
window.addJuryRow = (listId, inputName, roleLabel) => {
var list = document.getElementById(listId);
if (!list) return;
var n = list.querySelectorAll('.admin-jury-entry').length + 1;
var div = document.createElement('div');
div.className = 'admin-jury-entry';
div.innerHTML =
'<input type="text" name="' +
inputName +
'" placeholder="Nom" autocomplete="off" aria-label="' +
roleLabel +
' ' +
n +
' \u2014 nom">' +
'<button type="button" class="btn btn--sm btn--ghost admin-btn-remove" onclick="removeJuryRow(this)" aria-label="Supprimer">' +
'<span aria-hidden="true">\u2715</span></button>';
list.appendChild(div);
};
// ── Dynamic row add/remove ──────────────────────────────────────────────
window.addJuryRow = (listId, inputName, roleLabel) => {
var list = document.getElementById(listId);
if (!list) return;
var n = list.querySelectorAll(".admin-jury-entry").length + 1;
var div = document.createElement("div");
div.className = "admin-jury-entry";
div.innerHTML =
'<input type="text" name="' +
inputName +
'" placeholder="Nom" autocomplete="off" aria-label="' +
roleLabel +
" " +
n +
' \u2014 nom">' +
'<button type="button" class="btn btn--sm btn--ghost admin-btn-remove" onclick="removeJuryRow(this)" aria-label="Supprimer">' +
'<span aria-hidden="true">\u2715</span></button>';
list.appendChild(div);
};
window.removeJuryRow = (btn) => {
var entry = btn.closest('.admin-jury-entry');
if (entry) entry.remove();
};
window.removeJuryRow = (btn) => {
var entry = btn.closest(".admin-jury-entry");
if (entry) entry.remove();
};
// ── ULB toggle ─────────────────────────────────────────────────────────
var juryFieldset = document.querySelector('fieldset[data-admin-mode]');
var adminMode = juryFieldset ? juryFieldset.getAttribute('data-admin-mode') === '1' : false;
// ── ULB toggle ─────────────────────────────────────────────────────────
var juryFieldset = document.querySelector("fieldset[data-admin-mode]");
var adminMode = juryFieldset
? juryFieldset.getAttribute("data-admin-mode") === "1"
: false;
try {
var finalitySelect = document.querySelector('select[name="finality"]');
var ulbRow = document.getElementById('jury-promoteur-ulb-row');
if (!finalitySelect || !ulbRow) return;
var ulbAsterisk = document.getElementById('jury-ulb-asterisk');
try {
var finalitySelect = document.querySelector('select[name="finality"]');
var ulbRow = document.getElementById("jury-promoteur-ulb-row");
if (!finalitySelect || !ulbRow) return;
var ulbAsterisk = document.getElementById("jury-ulb-asterisk");
function isApprofondiSelected() {
var opt = finalitySelect.options[finalitySelect.selectedIndex];
if (!opt) return false;
return (opt.textContent || opt.text || '').toLowerCase().includes('approfondi');
}
function isApprofondiSelected() {
var opt = finalitySelect.options[finalitySelect.selectedIndex];
if (!opt) return false;
return (opt.textContent || opt.text || "")
.toLowerCase()
.includes("approfondi");
}
function toggleUlb() {
var show = isApprofondiSelected();
ulbRow.style.display = show ? '' : 'none';
if (ulbAsterisk) ulbAsterisk.style.display = show ? '' : 'none';
var inputs = ulbRow.querySelectorAll('input[name="jury_promoteur_ulb_name[]"]');
inputs.forEach((inp, idx) => {
inp.required = adminMode ? false : show && idx === 0;
inp.disabled = !show;
if (!show) inp.value = '';
});
}
function toggleUlb() {
var show = isApprofondiSelected();
ulbRow.style.display = show ? "" : "none";
if (ulbAsterisk) ulbAsterisk.style.display = show ? "" : "none";
var inputs = ulbRow.querySelectorAll(
'input[name="jury_promoteur_ulb_name[]"]',
);
inputs.forEach((inp, idx) => {
inp.required = adminMode ? false : show && idx === 0;
inp.disabled = !show;
if (!show) inp.value = "";
});
}
finalitySelect.addEventListener('change', toggleUlb);
toggleUlb();
} catch (e) {
console.error('jury ULB toggle:', e);
}
finalitySelect.addEventListener("change", toggleUlb);
toggleUlb();
} catch (e) {
console.error("jury ULB toggle:", e);
}
})();
app/public/assets/js/app/form-language-asterisk.js
+22 -22
View File
@@ -5,28 +5,28 @@
* Reads the container id from data-search-container-id on the pill-search div.
*/
(() => {
var pillDiv = document.querySelector('[data-search-container-id]');
if (!pillDiv) return;
var containerId = pillDiv.getAttribute('data-search-container-id');
var container = document.getElementById(containerId);
if (!container) return;
var pills = container.querySelector('.tag-search-pills');
if (!pills) return;
var pillDiv = document.querySelector("[data-search-container-id]");
if (!pillDiv) return;
var containerId = pillDiv.getAttribute("data-search-container-id");
var container = document.getElementById(containerId);
if (!container) return;
var pills = container.querySelector(".tag-search-pills");
if (!pills) return;
function check() {
var asteriskEl = document.getElementById('languages-required-asterisk');
if (!asteriskEl) return;
var n = pills.querySelectorAll('.tag-pill').length;
var checkboxes = document.querySelectorAll(
'#languages-fieldset input[type="checkbox"]:checked'
);
asteriskEl.innerHTML =
n === 0 && checkboxes.length === 0
? ' <span class="asterisk">*</span>'
: '';
}
function check() {
var asteriskEl = document.getElementById("languages-required-asterisk");
if (!asteriskEl) return;
var n = pills.querySelectorAll(".tag-pill").length;
var checkboxes = document.querySelectorAll(
'#languages-fieldset input[type="checkbox"]:checked',
);
asteriskEl.innerHTML =
n === 0 && checkboxes.length === 0
? ' <span class="asterisk">*</span>'
: "";
}
var observer = new MutationObserver(check);
observer.observe(pills, { childList: true });
check();
var observer = new MutationObserver(check);
observer.observe(pills, { childList: true });
check();
})();
app/public/assets/js/app/htmx-global-setup.js
+29 -26
View File
@@ -8,32 +8,35 @@
* Loaded on all admin pages via footer.php.
*/
(() => {
// Toast accessibility — auto-focus warning toasts
document.body.addEventListener('htmx:afterSettle', (e) => {
if (e.target && e.target.id === 'toast-region') {
var warn = e.target.querySelector('.toast--warning');
if (warn) {
warn.setAttribute('tabindex', '-1');
warn.focus();
}
}
});
// Toast accessibility — auto-focus warning toasts
document.body.addEventListener("htmx:afterSettle", (e) => {
if (e.target && e.target.id === "toast-region") {
var warn = e.target.querySelector(".toast--warning");
if (warn) {
warn.setAttribute("tabindex", "-1");
warn.focus();
}
}
});
// Markdown cheatsheet: remove stale dialogs before a new one arrives
document.body.addEventListener('htmx:beforeRequest', (e) => {
if (
e.detail.requestConfig &&
e.detail.requestConfig.path === '/admin/markdown-cheatsheet-fragment.php'
) {
var old = document.getElementById('md-cheatsheet-dialog');
if (old) old.remove();
}
});
// Markdown cheatsheet: remove stale dialogs before a new one arrives
document.body.addEventListener("htmx:beforeRequest", (e) => {
if (
e.detail.requestConfig &&
e.detail.requestConfig.path === "/admin/markdown-cheatsheet-fragment.php"
) {
var old = document.getElementById("md-cheatsheet-dialog");
if (old) old.remove();
}
});
// Markdown cheatsheet: close on backdrop (dialog element) click
document.body.addEventListener('click', (e) => {
if (e.target.tagName === 'DIALOG' && e.target.id === 'md-cheatsheet-dialog') {
e.target.close();
}
});
// Markdown cheatsheet: close on backdrop (dialog element) click
document.body.addEventListener("click", (e) => {
if (
e.target.tagName === "DIALOG" &&
e.target.id === "md-cheatsheet-dialog"
) {
e.target.close();
}
});
})();
app/public/assets/js/app/repertoire-accordion.js
+68 -74
View File
@@ -5,85 +5,79 @@
* On desktop, all panels close when crossing the breakpoint.
*/
(() => {
var INDEX_SEL = '#repertoire-index';
var ACCORDION_SEL = '.rep-accordion';
var TOGGLE_SEL = '.rep-accordion__toggle';
var PANEL_SEL = '.rep-accordion__panel';
var INDEX_SEL = "#repertoire-index";
var ACCORDION_SEL = ".rep-accordion";
var TOGGLE_SEL = ".rep-accordion__toggle";
var PANEL_SEL = ".rep-accordion__panel";
function isMobile() {
return window.matchMedia('(max-width: 1025px)').matches;
}
function isMobile() {
return window.matchMedia("(max-width: 1025px)").matches;
}
function initAccordions(root) {
if (!isMobile()) return;
var toggles = root.querySelectorAll(TOGGLE_SEL);
toggles.forEach((btn) => {
// Skip students column — always visible, not an accordion
if (btn.closest('[data-col="students"]')) return;
if (btn._accordionBound) return;
btn._accordionBound = true;
btn.addEventListener('click', () => {
var section = btn.closest(ACCORDION_SEL);
var panel = section.querySelector(PANEL_SEL);
var isOpen = btn.getAttribute('aria-expanded') === 'true';
function initAccordions(root) {
if (!isMobile()) return;
var toggles = root.querySelectorAll(TOGGLE_SEL);
toggles.forEach((btn) => {
// Skip students column — always visible, not an accordion
if (btn.closest('[data-col="students"]')) return;
if (btn._accordionBound) return;
btn._accordionBound = true;
btn.addEventListener("click", () => {
var section = btn.closest(ACCORDION_SEL);
var panel = section.querySelector(PANEL_SEL);
var isOpen = btn.getAttribute("aria-expanded") === "true";
// Close all others (except students column)
root.querySelectorAll(ACCORDION_SEL).forEach((s) => {
if (s.dataset.col === 'students') return;
var p = s.querySelector(PANEL_SEL);
var t = s.querySelector(TOGGLE_SEL);
if (s !== section) {
t.setAttribute('aria-expanded', 'false');
p.classList.remove('is-open');
}
});
// Close all others (except students column)
root.querySelectorAll(ACCORDION_SEL).forEach((s) => {
if (s.dataset.col === "students") return;
var p = s.querySelector(PANEL_SEL);
var t = s.querySelector(TOGGLE_SEL);
if (s !== section) {
t.setAttribute("aria-expanded", "false");
p.classList.remove("is-open");
}
});
// Toggle this one
var nowOpen = !isOpen;
btn.setAttribute('aria-expanded', nowOpen ? 'true' : 'false');
if (nowOpen) {
panel.classList.add('is-open');
} else {
panel.classList.remove('is-open');
}
});
});
}
// Toggle this one
var nowOpen = !isOpen;
btn.setAttribute("aria-expanded", nowOpen ? "true" : "false");
if (nowOpen) {
panel.classList.add("is-open");
} else {
panel.classList.remove("is-open");
}
});
});
}
// Initial bind
initAccordions(document);
// Initial bind
initAccordions(document);
// Re-bind after HTMX swaps (use live DOM since e.detail.target may be detached)
document.body.addEventListener('htmx:afterSwap', (e) => {
if (
e.detail.target &&
e.detail.target.matches &&
e.detail.target.matches(INDEX_SEL)
) {
var liveIndex = document.querySelector(INDEX_SEL);
if (liveIndex) initAccordions(liveIndex);
}
});
// Re-bind after HTMX swaps (use live DOM since e.detail.target may be detached)
document.body.addEventListener("htmx:afterSwap", (e) => {
if (e.detail.target?.matches?.(INDEX_SEL)) {
var liveIndex = document.querySelector(INDEX_SEL);
if (liveIndex) initAccordions(liveIndex);
}
});
// Re-bind on resize crossing the breakpoint
var wasMobile = isMobile();
window.addEventListener('resize', () => {
var nowMobile = isMobile();
if (nowMobile !== wasMobile) {
wasMobile = nowMobile;
if (!nowMobile) {
// Switching to desktop — close all panels
document
.querySelectorAll(INDEX_SEL + ' ' + TOGGLE_SEL)
.forEach((btn) => {
btn.setAttribute('aria-expanded', 'false');
});
document
.querySelectorAll(INDEX_SEL + ' ' + PANEL_SEL)
.forEach((p) => {
p.classList.remove('is-open');
});
}
}
});
// Re-bind on resize crossing the breakpoint
var wasMobile = isMobile();
window.addEventListener("resize", () => {
var nowMobile = isMobile();
if (nowMobile !== wasMobile) {
wasMobile = nowMobile;
if (!nowMobile) {
// Switching to desktop — close all panels
document
.querySelectorAll(`${INDEX_SEL} ${TOGGLE_SEL}`)
.forEach((btn) => {
btn.setAttribute("aria-expanded", "false");
});
document.querySelectorAll(`${INDEX_SEL} ${PANEL_SEL}`).forEach((p) => {
p.classList.remove("is-open");
});
}
}
});
})();
app/public/assets/js/app/repertoire-scroll-restore.js
+46 -54
View File
@@ -8,63 +8,55 @@
* DOM replacement.
*/
(() => {
var INDEX_SEL = '#repertoire-index';
var scrollSnapshots = {};
var INDEX_SEL = "#repertoire-index";
var scrollSnapshots = {};
function snapshot() {
var index = document.querySelector(INDEX_SEL);
if (!index) return;
scrollSnapshots = {};
index.querySelectorAll('.repertoire-col[data-col] > ul').forEach((ul) => {
var col = ul.closest('.repertoire-col');
if (!col) return;
var key = col.getAttribute('data-col');
scrollSnapshots[key] = ul.scrollTop;
});
}
function snapshot() {
var index = document.querySelector(INDEX_SEL);
if (!index) return;
scrollSnapshots = {};
index.querySelectorAll(".repertoire-col[data-col] > ul").forEach((ul) => {
var col = ul.closest(".repertoire-col");
if (!col) return;
var key = col.getAttribute("data-col");
scrollSnapshots[key] = ul.scrollTop;
});
}
function restore() {
var index = document.querySelector(INDEX_SEL);
if (!index) return;
index.querySelectorAll('.repertoire-col[data-col] > ul').forEach((ul) => {
var col = ul.closest('.repertoire-col');
if (!col) return;
var key = col.getAttribute('data-col');
if (scrollSnapshots[key] !== undefined) {
ul.scrollTop = scrollSnapshots[key];
}
});
}
function restore() {
var index = document.querySelector(INDEX_SEL);
if (!index) return;
index.querySelectorAll(".repertoire-col[data-col] > ul").forEach((ul) => {
var col = ul.closest(".repertoire-col");
if (!col) return;
var key = col.getAttribute("data-col");
if (scrollSnapshots[key] !== undefined) {
ul.scrollTop = scrollSnapshots[key];
}
});
}
// Capture scroll positions before the outgoing element is replaced
document.body.addEventListener('htmx:beforeSwap', (e) => {
if (
e.detail.target &&
e.detail.target.matches &&
e.detail.target.matches(INDEX_SEL)
) {
snapshot();
}
});
// Capture scroll positions before the outgoing element is replaced
document.body.addEventListener("htmx:beforeSwap", (e) => {
if (e.detail.target?.matches?.(INDEX_SEL)) {
snapshot();
}
});
// Restore after the new content is in the DOM
document.body.addEventListener('htmx:afterSwap', (e) => {
if (
e.detail.target &&
e.detail.target.matches &&
e.detail.target.matches(INDEX_SEL)
) {
// Use requestAnimationFrame to ensure layout has settled
requestAnimationFrame(() => {
restore();
});
}
});
// Restore after the new content is in the DOM
document.body.addEventListener("htmx:afterSwap", (e) => {
if (e.detail.target?.matches?.(INDEX_SEL)) {
// Use requestAnimationFrame to ensure layout has settled
requestAnimationFrame(() => {
restore();
});
}
});
// Also restore on history navigation (browser back/forward)
document.body.addEventListener('htmx:historyRestore', () => {
requestAnimationFrame(() => {
restore();
});
});
// Also restore on history navigation (browser back/forward)
document.body.addEventListener("htmx:historyRestore", () => {
requestAnimationFrame(() => {
restore();
});
});
})();
app/public/assets/js/app/repertoire-student-popover.js
+45 -45
View File
@@ -5,53 +5,53 @@
* with `data-student-name` attribute.
*/
(() => {
var popover = document.getElementById('student-popover');
var currentAnchor = null;
var popover = document.getElementById("student-popover");
var currentAnchor = null;
function position(anchor) {
var r = anchor.getBoundingClientRect();
var left = r.right + window.scrollX + 12;
var top = r.top + window.scrollY;
if (left + 300 > window.innerWidth + window.scrollX) {
left = r.left + window.scrollX - 312;
}
popover.style.left = left + 'px';
popover.style.top = top + 'px';
}
function position(anchor) {
var r = anchor.getBoundingClientRect();
var left = r.right + window.scrollX + 12;
var top = r.top + window.scrollY;
if (left + 300 > window.innerWidth + window.scrollX) {
left = r.left + window.scrollX - 312;
}
popover.style.left = `${left}px`;
popover.style.top = `${top}px`;
}
document.body.addEventListener(
'mouseenter',
(e) => {
var a = e.target.closest('[data-student-name]');
if (!a) return;
currentAnchor = a;
},
true
);
document.body.addEventListener(
"mouseenter",
(e) => {
var a = e.target.closest("[data-student-name]");
if (!a) return;
currentAnchor = a;
},
true,
);
document.body.addEventListener('htmx:afterSwap', (e) => {
if (e.detail.target !== popover) return;
if (currentAnchor) position(currentAnchor);
popover.hidden = false;
});
document.body.addEventListener("htmx:afterSwap", (e) => {
if (e.detail.target !== popover) return;
if (currentAnchor) position(currentAnchor);
popover.hidden = false;
});
document.body.addEventListener(
'mouseleave',
(e) => {
if (
!e.target.closest('[data-student-name]') &&
!e.target.closest('#student-popover')
)
return;
setTimeout(() => {
if (
!document.querySelector('[data-student-name]:hover') &&
!document.querySelector('#student-popover:hover')
) {
popover.hidden = true;
}
}, 120);
},
true
);
document.body.addEventListener(
"mouseleave",
(e) => {
if (
!e.target.closest("[data-student-name]") &&
!e.target.closest("#student-popover")
)
return;
setTimeout(() => {
if (
!document.querySelector("[data-student-name]:hover") &&
!document.querySelector("#student-popover:hover")
) {
popover.hidden = true;
}
}, 120);
},
true,
);
})();
app/public/assets/js/app/sidebar-links-editor.js
+38 -35
View File
@@ -4,42 +4,45 @@
* Operates on #sidebar-links-form and #sidebar-link-tpl.
*/
(() => {
var form = document.getElementById('sidebar-links-form');
var tpl = document.getElementById('sidebar-link-tpl');
if (!form || !tpl) return;
var tplHtml = tpl.innerHTML;
var form = document.getElementById("sidebar-links-form");
var tpl = document.getElementById("sidebar-link-tpl");
if (!form || !tpl) return;
var tplHtml = tpl.innerHTML;
function reindexLinks() {
var rows = form.querySelectorAll('.sidebar-link-row');
rows.forEach((row, i) => {
row.querySelectorAll('input').forEach((inp) => {
if (inp.name) {
inp.name = inp.name.replace(/links\[\d+\]/, 'links[' + i + ']');
}
if (inp.id) {
inp.id = inp.id.replace(/sl_\d+/, 'sl_' + i);
}
});
row.querySelectorAll('label[for]').forEach((lbl) => {
lbl.setAttribute('for', lbl.getAttribute('for').replace(/sl_\d+/, 'sl_' + i));
});
});
}
function reindexLinks() {
var rows = form.querySelectorAll(".sidebar-link-row");
rows.forEach((row, i) => {
row.querySelectorAll("input").forEach((inp) => {
if (inp.name) {
inp.name = inp.name.replace(/links\[\d+\]/, `links[${i}]`);
}
if (inp.id) {
inp.id = inp.id.replace(/sl_\d+/, `sl_${i}`);
}
});
row.querySelectorAll("label[for]").forEach((lbl) => {
lbl.setAttribute(
"for",
lbl.getAttribute("for").replace(/sl_\d+/, `sl_${i}`),
);
});
});
}
// Event delegation for remove buttons
form.addEventListener('click', (e) => {
if (!e.target.closest('.remove-sidebar-link-btn')) return;
e.preventDefault();
e.target.closest('.sidebar-link-row').remove();
reindexLinks();
});
// Event delegation for remove buttons
form.addEventListener("click", (e) => {
if (!e.target.closest(".remove-sidebar-link-btn")) return;
e.preventDefault();
e.target.closest(".sidebar-link-row").remove();
reindexLinks();
});
// Add button
var addBtn = document.getElementById('add-sidebar-link-btn');
addBtn.addEventListener('click', function () {
var rows = form.querySelectorAll('.sidebar-link-row');
var idx = rows.length;
var html = tplHtml.split('{{li}}').join(idx);
this.insertAdjacentHTML('beforebegin', html);
});
// Add button
var addBtn = document.getElementById("add-sidebar-link-btn");
addBtn.addEventListener("click", function () {
var rows = form.querySelectorAll(".sidebar-link-row");
var idx = rows.length;
var html = tplHtml.split("{{li}}").join(idx);
this.insertAdjacentHTML("beforebegin", html);
});
})();
app/public/assets/js/app/smtp-error-focus.js
+7 -7
View File
@@ -3,11 +3,11 @@
* error. Reads the field id from data-smtp-error-field on the SMTP form.
*/
(() => {
var form = document.querySelector('form[data-smtp-error-field]');
if (!form) return;
var fieldId = form.getAttribute('data-smtp-error-field');
var el = fieldId ? document.getElementById(fieldId) : null;
if (!el) return;
el.scrollIntoView({ behavior: 'smooth', block: 'center' });
el.focus();
var form = document.querySelector("form[data-smtp-error-field]");
if (!form) return;
var fieldId = form.getAttribute("data-smtp-error-field");
var el = fieldId ? document.getElementById(fieldId) : null;
if (!el) return;
el.scrollIntoView({ behavior: "smooth", block: "center" });
el.focus();
})();
app/src/Form/FormBootstrap.php
-3
View File
@@ -47,9 +47,6 @@ class FormBootstrap
if (is_array($formData[$key])) {
return $formData[$key];
}
if ($formData[$key] === null) {
return $default;
}
return htmlspecialchars((string)$formData[$key]);
};
}