PostERG/xamxam
1
0
Fork 0
mirror of https://codeberg.org/PostERG/xamxam.git synced 2026-06-25 16:19:19 +02:00
Code Issues Packages Projects Releases Wiki Activity

style: unify recap+edit file figure styling — two-column grid dl, vertical spacing, admin-back-btn sizing, standardise file display and delete-to-trash SVG icons

Browse Source
This commit is contained in:
Pontoporeia
2026-05-11 14:53:51 +02:00
parent 230555a4c4
commit 206a6427e7
9 changed files with 183 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/public/admin/recapitulatif.php
View File

@@ -43,6 +43,7 @@ if (isset($_GET['id'])) {
$error = "Aucun identifiant spécifié.";
}
if (!function_exists('formatFileSize')) {
function formatFileSize($bytes) {
if ($bytes >= 1073741824) {
return number_format($bytes / 1073741824, 2) . ' GB';
@@ -54,6 +55,7 @@ function formatFileSize($bytes) {
return $bytes . ' bytes';
}
}
}
$pageTitle = "Récapitulatif TFE";
$isAdmin = true;

43
app/public/assets/css/admin.css
View File

@@ -87,13 +87,15 @@
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
width: 40px;
height: 40px;
border-radius: var(--radius);
color: var(--text-secondary);
text-decoration: none;
transition: background 0.15s, color 0.15s;
flex-shrink: 0;
vertical-align: middle;
margin-right: var(--space-2xs);
}
.admin-back-btn:hover {
@@ -102,8 +104,8 @@
}
.admin-back-btn svg {
width: 22px;
height: 22px;
width: 28px;
height: 28px;
fill: currentColor;
}
@@ -2067,3 +2069,36 @@ th.admin-ap-col {
.htmx-indicator img {
transition: opacity 300ms ease-in;
}
/* ── Récapitulatif sections ───────────────────────────────── */
.recap-synopsis,
.recap-long-text {
max-width: 70ch;
line-height: 1.6;
}
/* Two-column definition lists */
.recap-dl {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--space-2xs) var(--space-m);
margin: 0;
}
.recap-dl dt {
font-weight: 600;
color: var(--text-secondary);
font-size: var(--step--1);
white-space: nowrap;
}
.recap-dl dd {
margin: 0 0 var(--space-xs) 0;
color: var(--text-primary);
font-size: var(--step--1);
}
.recap-dl dd:last-of-type {
margin-bottom: 0;
}

165
app/public/assets/css/form.css
View File

@@ -628,171 +628,6 @@
background-color: var(--bg-primary);
}
/* ── Existing-files list (edit form) ─────────────────────────────────────── */
.admin-file-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.admin-file-list-item {
display: flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-3xs) var(--space-xs);
background: var(--bg-secondary);
border: 1px solid var(--border-primary);
border-radius: var(--radius);
min-width: 0;
}
.admin-file-icon-col {
font-size: 1.2rem;
line-height: 1;
flex-shrink: 0;
width: 1.8rem;
text-align: center;
}
.admin-file-info {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
min-width: 0;
}
.admin-file-name {
font-size: var(--step--1);
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--text-primary);
}
a.admin-file-name {
text-decoration: underline;
text-underline-offset: 2px;
}
a.admin-file-name:hover {
color: var(--accent-primary);
}
.admin-file-meta-row {
display: flex;
align-items: center;
gap: var(--space-2xs);
flex-wrap: wrap;
}
.admin-file-type-badge {
font-size: var(--step--2);
padding: 1px 5px;
background: var(--bg-primary);
border: 1px solid var(--border-primary);
border-radius: var(--radius);
color: var(--text-secondary);
white-space: nowrap;
}
.admin-file-size {
font-size: var(--step--2);
color: var(--text-tertiary);
}
.admin-file-delete {
flex-shrink: 0;
margin-left: auto;
white-space: nowrap;
}
/* ── Recap file list (admin & partage recapitulatif) ────────────────────── */
.recap-file-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.recap-file-item {
display: flex;
align-items: center;
gap: var(--space-s);
padding: var(--space-xs) var(--space-s);
background: var(--bg-secondary);
border: 1px solid var(--border-primary);
border-radius: var(--radius);
}
.recap-file-thumb-link {
flex-shrink: 0;
}
.recap-file-thumb {
width: 64px;
height: 64px;
object-fit: cover;
border-radius: var(--radius);
display: block;
}
.recap-file-icon {
font-size: 2rem;
line-height: 1;
width: 64px;
text-align: center;
flex-shrink: 0;
}
.recap-file-meta {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--space-2xs) var(--space-s);
min-width: 0;
}
.recap-file-name {
font-size: var(--step--1);
font-weight: 500;
color: var(--text-primary);
word-break: break-all;
}
a.recap-file-name {
text-decoration: underline;
text-underline-offset: 2px;
}
a.recap-file-name:hover {
color: var(--accent-primary);
}
.recap-file-type-badge {
font-size: var(--step--2);
padding: 1px 6px;
background: var(--bg-primary);
border: 1px solid var(--border-primary);
border-radius: var(--radius);
color: var(--text-secondary);
white-space: nowrap;
}
.recap-file-size,
.recap-file-date {
font-size: var(--step--2);
color: var(--text-tertiary);
white-space: nowrap;
}
/* ── Partage recap page ─────────────────────────────────────────────────── */
.partage-recap {
display: flex;

43
app/public/partage/fichiers-fragment.php
View File

@@ -16,6 +16,21 @@
*/
require_once APP_ROOT . '/src/PeerTubeService.php';
if (!function_exists('formatFileSize')) {
function formatFileSize($bytes) {
if ($bytes >= 1073741824) {
return number_format($bytes / 1073741824, 2) . ' GB';
} elseif ($bytes >= 1048576) {
return number_format($bytes / 1048576, 2) . ' MB';
} elseif ($bytes >= 1024) {
return number_format($bytes / 1024, 2) . ' KB';
} else {
return $bytes . ' bytes';
}
}
} // if (!function_exists('formatFileSize'))
$_ptDb = Database::getInstance();
$peerTubeEnabled = PeerTubeService::isEnabled($_ptDb);
$peerTubeSettings = PeerTubeService::getSettings($_ptDb);
@@ -103,16 +118,22 @@ $websiteLabel = htmlspecialchars($_POST['website_label'] ?? '');
foreach ($_thesisFilesList as $_f):
$_fPath = $_f["file_path"] ?? "";
$_fIsPeerTube = str_starts_with($_fPath, "peertube_ids:");
$_fMime = $_f["mime_type"] ?? "";
$_fExt = strtolower(pathinfo($_fPath, PATHINFO_EXTENSION));
$_fType = $_f["file_type"] ?? "other";
$_fLabel = $_f["display_label"] ?? "";
$_fIsImage = str_starts_with($_fMime, "image/") || in_array($_fExt, ["jpg","jpeg","png","gif","webp"]);
$_fIcon = match (true) {
$_fIsPeerTube && $_fType === "video" => "🎬",
$_fIsPeerTube && $_fType === "audio" => "🔊",
$_fType === "main" || $_fExt === "pdf" => "📄",
in_array($_fExt, ["jpg","jpeg","png","gif","webp"]) => "🖼️",
$_fType === "video" || in_array($_fExt, ["mp4","webm","mov","ogv"]) => "🎬",
$_fType === "audio" || in_array($_fExt, ["mp3","ogg","wav","flac","aac","m4a"]) => "🔊",
$_fType === "cover" => "🖼️",
$_fType === "note_intention" => "📝",
$_fType === "main" || $_fMime === "application/pdf" || $_fExt === "pdf" => "📄",
$_fType === "video" || str_starts_with($_fMime, "video/") || in_array($_fExt, ["mp4","webm","mov","ogv"]) => "🎬",
$_fType === "audio" || str_starts_with($_fMime, "audio/") || in_array($_fExt, ["mp3","ogg","wav","flac","aac","m4a"]) => "🔊",
$_fIsImage => "🖼️",
$_fType === "caption" || $_fExt === "vtt" => "💬",
$_fType === "annex" => "📎",
$_fType === "website" => "🌐",
default => "📎",
};
@@ -122,7 +143,11 @@ $websiteLabel = htmlspecialchars($_POST['website_label'] ?? '');
<li class="admin-file-list-item" data-file-id="<?= (int)$_f["id"] ?>">
<input type="hidden" name="file_sort_order[]" value="<?= (int)$_f["id"] ?>">
<figure class="admin-file-figure">
<?php if ($_fIsImage && !$_fIsPeerTube): ?>
<img src="/media?path=<?= urlencode($_fPath) ?>" alt="<?= htmlspecialchars($_f["file_name"] ?? basename($_f["file_path"])) ?>" class="admin-file-thumb" loading="lazy">
<?php else: ?>
<span class="admin-file-icon"><?= $_fIcon ?></span>
<?php endif; ?>
<figcaption class="admin-file-caption">
<div class="admin-file-name-row">
<a href="<?= $_fLinkHref ?>" target="_blank" rel="noopener" class="admin-file-name">
@@ -132,10 +157,16 @@ $websiteLabel = htmlspecialchars($_POST['website_label'] ?? '');
<?php if ($_fIsPeerTube): ?>
<span class="admin-file-peertube-id">ID : <?= htmlspecialchars(substr($_fPath, strlen("peertube_ids:"))) ?></span>
<?php endif; ?>
<?php if ($_fLabel): ?>
<span class="admin-file-label"><?= htmlspecialchars($_fLabel) ?></span>
<?php endif; ?>
<span class="admin-file-meta-row">
<span class="admin-file-type-badge"><?= htmlspecialchars($_fType) ?></span>
<span class="admin-file-meta"><?= htmlspecialchars($_fType) ?></span>
<?php if (!empty($_f["file_size"]) && $_f["file_size"] > 0): ?>
<span class="admin-file-size"><?= number_format($_f["file_size"] / 1024 / 1024, 2) ?> MB</span>
<span class="admin-file-meta"><?= formatFileSize($_f["file_size"]) ?></span>
<?php endif; ?>
<?php if (!empty($_f["uploaded_at"])): ?>
<span class="admin-file-meta"><?= date('d/m/Y H:i', strtotime($_f["uploaded_at"])) ?></span>
<?php endif; ?>
</span>
</figcaption>