mirror of
https://codeberg.org/PostERG/xamxam.git
synced 2026-08-10 15:21:22 +02:00
tfe: rework desktop layout to 35/65 flex columns, independent scrolling, no horizontal overflow
Switched from grid to flex for two-column layout Left column (flex: 0 0 35%): author, title, meta, synopsis — scrolls independently Right column (flex: 1): files/media — scrolls independently Added .tfe-file-iframe class to PDF/website iframes, scoped width/height constraints All media gets width:100% + max-width:100% to prevent overflow Mobile (<900px): reverts to single-column page-level scrolling
This commit is contained in:
@@ -1,8 +1,10 @@
|
||||
<main class="tfe-main" id="main-content">
|
||||
<article class="tfe-layout">
|
||||
|
||||
<!-- ROW 1: Author above Title -->
|
||||
<div class="tfe-header-row">
|
||||
<!-- Two-column layout: left 35% (info), right 65% (files) -->
|
||||
<div class="tfe-content-row">
|
||||
<div class="tfe-left-column">
|
||||
|
||||
<p class="tfe-author"><?= htmlspecialchars(
|
||||
$data["authors"] ?? "Auteur inconnu",
|
||||
) ?></p>
|
||||
@@ -13,10 +15,7 @@
|
||||
– <?= htmlspecialchars($data["subtitle"]) ?>
|
||||
<?php endif; ?>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<!-- ROW 2: Two columns — meta left, synopsis right -->
|
||||
<div class="tfe-content-row">
|
||||
<div class="tfe-meta">
|
||||
<?php if (!empty($data["orientation"])): ?>
|
||||
<p class="tfe-meta-item">
|
||||
@@ -272,10 +271,11 @@
|
||||
<div class="tfe-synopsis-text tfe-synopsis-empty"></div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ROW 3: All files — flex container -->
|
||||
<div class="tfe-files">
|
||||
</div><!-- /tfe-left-column -->
|
||||
|
||||
<div class="tfe-right-column">
|
||||
<div class="tfe-files">
|
||||
<?php $_videoIndex = 0; ?>
|
||||
<?php if ($isInterdit): ?>
|
||||
<p class="tfe-restricted">
|
||||
@@ -377,14 +377,12 @@
|
||||
<div class="tfe-file-item">
|
||||
<?php if ($isPdf): ?>
|
||||
<iframe src="<?= $mediaUrl ?>#toolbar=0&navpanes=0"
|
||||
width="100%" height="700px"
|
||||
style="border:none"
|
||||
class="tfe-file-iframe"
|
||||
title="<?= $fileName ?>">
|
||||
</iframe>
|
||||
<?php elseif ($isWebsite): ?>
|
||||
<iframe src="<?= $mediaUrl ?>"
|
||||
width="100%" height="700px"
|
||||
style="border:none"
|
||||
class="tfe-file-iframe"
|
||||
title="<?= $fileName ?>"
|
||||
sandbox="allow-scripts allow-same-origin"
|
||||
loading="lazy">
|
||||
@@ -452,6 +450,10 @@
|
||||
<?php else: ?>
|
||||
<p class="tfe-no-files">Aucun fichier disponible pour ce TFE.</p>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
</div><!-- /tfe-right-column -->
|
||||
|
||||
</div>
|
||||
|
||||
</article>
|
||||
|
||||
Reference in New Issue
Block a user