mirror of
https://codeberg.org/PostERG/xamxam.git
synced 2026-08-10 07:11:18 +02:00
fix: various padding, layouts and visual issues
- fixed padding in the tfe.php page - fixed the layout in admin/index.php toolbar top - the gap issued with the table theader - rearranged button order in the toolbar top
This commit is contained in:
Pontoporeia
+1247
-1252
File diff suppressed because it is too large
Load Diff
@@ -7,83 +7,83 @@
|
||||
/* Full-height flex layout: header → main → (optional footer) */
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
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-5);
|
||||
font-size: var(--step-4);
|
||||
}
|
||||
h2 {
|
||||
font-size: var(--step-3);
|
||||
font-size: var(--step-3);
|
||||
}
|
||||
h3 {
|
||||
font-size: var(--step-1);
|
||||
font-size: var(--step-2);
|
||||
}
|
||||
h4 {
|
||||
font-size: var(--step-0);
|
||||
font-size: var(--step-1);
|
||||
}
|
||||
h5 {
|
||||
font-size: var(--step--1);
|
||||
font-size: var(--step--1);
|
||||
}
|
||||
h6 {
|
||||
font-size: var(--step--2);
|
||||
font-size: var(--step--2);
|
||||
}
|
||||
|
||||
:where(h1, h2, h3, h4, h5, h6) {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 400;
|
||||
margin: 0 0 var(--space-m) 0;
|
||||
line-height: 1.15;
|
||||
font-family: var(--font-display);
|
||||
font-weight: 400;
|
||||
margin: 0 0 var(--space-m) 0;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
+168
-171
@@ -4,329 +4,326 @@
|
||||
============================================================ */
|
||||
|
||||
.tfe-main {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
padding: var(--space-l) var(--space-m) 0;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
padding: 0 var(--space-m) 0 var(--space-m);
|
||||
}
|
||||
|
||||
/* Stacked article layout — fills main height */
|
||||
.tfe-layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-xl);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-xl);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* Row 1: Author above Title (kept for backward compat, no longer used) */
|
||||
.tfe-header-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3xs);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3xs);
|
||||
}
|
||||
|
||||
/* Two-column layout: left 35vw (info), right fills remaining (files) */
|
||||
.tfe-content-row {
|
||||
display: grid;
|
||||
grid-template-columns: 35vw 1fr;
|
||||
gap: var(--space-xl);
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-columns: 35vw 1fr;
|
||||
gap: var(--space-xl);
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
.tfe-left-column, .tfe-right-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
min-width: 0;
|
||||
padding-top: var(--space-l);
|
||||
padding-bottom: var(--space-xl);
|
||||
}
|
||||
|
||||
/* Left column: stacks author, title, meta, synopsis — scrolls independently */
|
||||
.tfe-left-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-m);
|
||||
overflow-y: auto;
|
||||
min-width: 0;
|
||||
padding-bottom: var(--space-xl);
|
||||
}
|
||||
|
||||
/* Right column: holds files — scrolls independently */
|
||||
.tfe-right-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
min-width: 0;
|
||||
gap: var(--space-m);
|
||||
/* to space the edge of the text and the scrollbar */
|
||||
padding-right: 0.5ch;
|
||||
}
|
||||
|
||||
/* Files container inside right column */
|
||||
.tfe-files {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-m);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-m);
|
||||
}
|
||||
|
||||
.tfe-file-item {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
border-radius: var(--radius);
|
||||
width: 100%;
|
||||
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%;
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
border: none;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.tfe-file-item video {
|
||||
max-height: 500px;
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
.tfe-file-item embed,
|
||||
.tfe-file-iframe {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: clamp(300px, 80vh, 700px);
|
||||
display: block;
|
||||
border: none;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: clamp(300px, 80vh, 700px);
|
||||
display: block;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.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-main {
|
||||
overflow-y: auto;
|
||||
}
|
||||
.tfe-main {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.tfe-layout {
|
||||
height: auto;
|
||||
min-height: auto;
|
||||
}
|
||||
.tfe-layout {
|
||||
height: auto;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.tfe-content-row {
|
||||
grid-template-columns: 1fr;
|
||||
flex: none;
|
||||
}
|
||||
.tfe-content-row {
|
||||
grid-template-columns: 1fr;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.tfe-left-column,
|
||||
.tfe-right-column {
|
||||
overflow-y: visible;
|
||||
}
|
||||
.tfe-left-column,
|
||||
.tfe-right-column {
|
||||
overflow-y: visible;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
<!-- Title + filters + stats + import all in one toolbar row -->
|
||||
<div class="admin-list-toolbar admin-list-toolbar--list">
|
||||
<div class="admin-toolbar-top">
|
||||
<div class="admin-toolbar-title-row">
|
||||
<h1>Liste des TFE</h1>
|
||||
<div class="admin-stats">
|
||||
<fieldset class="admin-stat">
|
||||
@@ -20,22 +19,6 @@
|
||||
<span class="admin-stat__number"><?= $stats['pending'] ?></span>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
<div class="admin-btn-group">
|
||||
<a href="/admin/add.php" class="btn btn--primary btn--sm"><?= icon('plus-circle') ?> Ajouter un TFE</a>
|
||||
<?php if ($trashCount > 0): ?>
|
||||
<a href="/admin/index.php?tab=trash" class="btn btn--sm <?= $tab === 'trash' ? 'btn--primary' : 'btn--secondary' ?>">
|
||||
Corbeille (<?= $trashCount ?>)
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
<a href="/admin/cleanup.php" class="btn btn--sm btn--secondary">
|
||||
<?= icon('trash') ?> Nettoyer<?= $tmpTotalCount > 0 ? " ($tmpTotalCount)" : '' ?>
|
||||
</a>
|
||||
<button type="button" class="btn btn--primary btn--sm" id="import-dialog-btn"
|
||||
onclick="document.getElementById('import-dialog').showModal(); window.XamxamInitFilePonds()">
|
||||
<?= icon('tray-arrow-up') ?> Importer
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form id="admin-filter-form" class="admin-filters" method="get" action="/admin/"
|
||||
@@ -74,6 +57,21 @@
|
||||
<?php if ($searchQuery || $yearFilter || $orientationFilter || $apFilter): ?>
|
||||
<a href="/admin/" class="btn btn--secondary btn--sm admin-filters-reset">✕ Réinitialiser</a>
|
||||
<?php endif; ?>
|
||||
<div class="admin-btn-group">
|
||||
<a href="/admin/add.php" class="btn btn--primary btn--sm"><?= icon('plus-circle') ?> Ajouter un TFE</a>
|
||||
<button type="button" class="btn btn--primary btn--sm" id="import-dialog-btn"
|
||||
onclick="document.getElementById('import-dialog').showModal(); window.XamxamInitFilePonds()">
|
||||
<?= icon('tray-arrow-up') ?> Importer
|
||||
</button>
|
||||
<?php if ($trashCount > 0): ?>
|
||||
<a href="/admin/index.php?tab=trash" class="btn btn--sm <?= $tab === 'trash' ? 'btn--primary' : 'btn--secondary' ?>">
|
||||
Corbeille (<?= $trashCount ?>)
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
<a href="/admin/cleanup.php" class="btn btn--sm btn--secondary">
|
||||
<?= icon('trash') ?> Nettoyer<?= $tmpTotalCount > 0 ? " ($tmpTotalCount)" : '' ?>
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Loading indicator bar -->
|
||||
|
||||
Reference in New Issue
Block a user