From 73b0093b26eab3c7a790277eacdd8b436c2032b9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Th=C3=A9ophile=20Gervreau-Mercier?= Date: Thu, 12 Feb 2026 12:46:44 +0100 Subject: [PATCH] feat: rename memoire to tfe and improve styling - Rename memoire.php to tfe.php throughout codebase - Create dedicated tfe.css with rounded header/main/footer layout - Move metadata (orientation, AP program, finality, keywords) to header - Move back button from header to footer - Create shared templates/head.php for common HTML head section - Maintain rounded borders (40px) matching main site design - Keep purple header (#9557b5), green main (#3c856b), dark footer (#222) - Improve content readability with centered max-width layout - Add responsive design for mobile devices --- public/assets/main.css | 4 +- public/assets/tfe.css | 389 +++++++++++++++++++++++++++++++++++++++++ public/index.php | 2 +- public/memoire.php | 154 ---------------- public/search.php | 2 +- public/tfe.php | 202 +++++++++++++++++++++ templates/head.php | 31 ++++ templates/header.php | 8 +- 8 files changed, 631 insertions(+), 161 deletions(-) create mode 100644 public/assets/tfe.css delete mode 100644 public/memoire.php create mode 100644 public/tfe.php create mode 100644 templates/head.php diff --git a/public/assets/main.css b/public/assets/main.css index d5f0d8b..9db9ba6 100644 --- a/public/assets/main.css +++ b/public/assets/main.css @@ -11,12 +11,12 @@ body { /* Layout ratios: header 2/5, main 3/5, footer 1/5 */ header { - flex: 1; + flex: 2; min-height: 0; } main { - flex: 4; + flex: 7; min-height: 0; } diff --git a/public/assets/tfe.css b/public/assets/tfe.css new file mode 100644 index 0000000..656b29e --- /dev/null +++ b/public/assets/tfe.css @@ -0,0 +1,389 @@ +/* TFE (Thesis) Page Styling */ + +.tfe-body { + margin: 0; + height: 100vh; + overflow: hidden; + display: flex; + flex-direction: column; +} + +/* Header */ +.tfe-header { + flex: 2; + min-height: 0; + background: #9557b5; + color: white; + padding: 1.5rem 2rem; + margin: 0; + border-radius: 40px; + display: flex; + align-items: center; + box-sizing: border-box; + overflow-y: auto; +} + +.header-content { + width: 100%; +} + +.tfe-title { + font-family: "police1", sans-serif; + font-size: 1.75rem; + font-weight: 700; + margin: 0 0 0.5rem 0; + line-height: 1.2; + color: white; +} + +.tfe-subtitle { + font-size: 1.15rem; + margin: 0 0 1rem 0; + opacity: 0.9; + font-style: italic; +} + +.header-metadata { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.meta-group { + display: flex; + align-items: center; + gap: 0.5rem; + flex-wrap: wrap; + font-size: 0.95rem; + opacity: 0.95; +} + +.meta-group.keywords { + margin-top: 0.25rem; +} + +.meta-group .label { + font-weight: 600; + opacity: 0.85; +} + +.meta-group .author { + font-weight: 500; +} + +.meta-group .separator { + opacity: 0.6; +} + +.meta-group .year { + font-weight: 600; +} + +/* Main Content */ +.tfe-main { + flex: 7; + min-height: 0; + background: #3c856b; + padding: 2rem; + margin: 0; + border-radius: 40px; + box-sizing: border-box; + overflow-y: auto; +} + +.tfe-container { + max-width: 900px; + margin: 0 auto; + display: flex; + flex-direction: column; + gap: 2rem; +} + +/* Metadata Section */ +.tfe-metadata { + background: white; + border-radius: 12px; + padding: 2rem; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); +} + +.subtitle { + font-size: 1.25rem; + color: #666; + margin: 0 0 1.5rem 0; + font-style: italic; +} + +.metadata-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 2rem 3rem; + margin-bottom: 1rem; +} + +.metadata-column { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.meta-item { + display: flex; + flex-direction: column; + gap: 0.25rem; +} + +.meta-item strong { + color: #9557b5; + font-size: 0.875rem; + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.meta-item span { + color: #333; + font-size: 1rem; + line-height: 1.5; +} + +.context-note { + margin-top: 1.5rem; + padding: 1rem; + background: #f8f8f8; + border-left: 4px solid #9557b5; + border-radius: 4px; +} + +.context-note em { + color: #555; + font-size: 0.95rem; + line-height: 1.6; +} + +/* Synopsis Section */ +.tfe-synopsis { + background: white; + border-radius: 12px; + padding: 2rem; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); +} + +.tfe-synopsis h3 { + font-size: 1.5rem; + color: #9557b5; + margin: 0 0 1rem 0; + font-weight: 700; +} + +.synopsis-content { + color: #333; + font-size: 1rem; + line-height: 1.7; +} + +/* Files Section */ +.tfe-files { + display: flex; + flex-direction: column; + gap: 2rem; +} + +.file-block { + background: white; + border-radius: 12px; + padding: 1.5rem; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); + overflow: hidden; +} + +.file-block embed, +.file-block video { + border-radius: 8px; + display: block; +} + +.image-figure { + margin: 0; + text-align: center; +} + +.image-figure img { + max-width: 100%; + height: auto; + border-radius: 8px; + display: block; + margin: 0 auto; +} + +.file-description { + margin: 1rem 0 0 0; + color: #666; + font-size: 0.9rem; + font-style: italic; + text-align: center; +} + +.no-files { + background: #fff3cd; + color: #856404; + padding: 1.5rem; + border-radius: 8px; + text-align: center; + border: 1px solid #ffeaa7; +} + +/* Footer */ +.tfe-footer { + flex: 1; + min-height: 0; + background: #222; + color: white; + padding: 1rem 2rem; + margin: 0; + border-radius: 40px; + box-sizing: border-box; + overflow: hidden; +} + +.footer-content { + height: 100%; + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; +} + +.back-button { + display: flex; + align-items: center; + justify-content: center; + width: 48px; + height: 48px; + background: rgba(255, 255, 255, 0.15); + border-radius: 50%; + color: white; + text-decoration: none; + transition: all 0.2s ease; + flex-shrink: 0; +} + +.back-button:hover { + background: rgba(255, 255, 255, 0.25); + transform: translateX(-2px); +} + +.back-button svg { + display: block; +} + +.footer-meta { + display: flex; + align-items: center; + gap: 0.75rem; + font-size: 0.9rem; + opacity: 0.9; +} + +.footer-meta .separator { + opacity: 0.6; +} + +/* Responsive Design */ +@media (max-width: 768px) { + .tfe-header { + padding: 1rem; + } + + .tfe-title { + font-size: 1.35rem; + } + + .tfe-subtitle { + font-size: 1rem; + } + + .meta-group { + font-size: 0.85rem; + } + + .back-button { + width: 40px; + height: 40px; + } + + .back-button svg { + width: 20px; + height: 20px; + } + + .tfe-main { + padding: 1.5rem; + } + + .tfe-container { + gap: 1.5rem; + } + + .tfe-metadata, + .tfe-synopsis, + .file-block { + padding: 1.5rem; + } + + .metadata-grid { + grid-template-columns: 1fr; + gap: 1.5rem; + } + + .footer-content { + flex-direction: column; + text-align: center; + justify-content: center; + } + + .tfe-footer { + padding: 1rem; + } +} + +@media (max-width: 480px) { + .tfe-title { + font-size: 1.15rem; + } + + .tfe-subtitle { + font-size: 0.9rem; + } + + .meta-group { + font-size: 0.8rem; + gap: 0.4rem; + } + + .back-button { + width: 36px; + height: 36px; + } + + .back-button svg { + width: 18px; + height: 18px; + } + + .tfe-synopsis h3 { + font-size: 1.25rem; + } + + .file-block embed { + height: 500px; + } + + .tfe-main { + padding: 1rem; + } + + .tfe-container { + gap: 1rem; + } +} diff --git a/public/index.php b/public/index.php index a203dd4..fa585f8 100644 --- a/public/index.php +++ b/public/index.php @@ -44,7 +44,7 @@ include APP_ROOT . '/templates/header.php';
- " class="card-link"> + " class="card-link">

diff --git a/public/memoire.php b/public/memoire.php deleted file mode 100644 index e30ad8e..0000000 --- a/public/memoire.php +++ /dev/null @@ -1,154 +0,0 @@ -getThesisById($thesisId); - - if (!$data) { - // Thesis not found or not published - header('Location: index.php'); - exit; - } - } catch (Exception $e) { - error_log("Error loading thesis: " . $e->getMessage()); - header('Location: index.php'); - exit; - } -} else { - // Redirect to the index page if no id parameter is provided - header('Location: index.php'); - exit; -} - -// Include the header template -include APP_ROOT . '/templates/header.php'; ?> -
-
-
- -

- - -
- -

-

par - -

- -

-
-
- -

- - - - - et - - - - -

- -

- -

- -

- Finalité: -

- -
- -
- -

- -

- - - -

- Promoteur.ice.s: - -

- - - -

- Langue(s): - -

- - - -

- Format(s): - -

- - - -

- Mots-clés: - -

- -
-
-
-
-
- - - -
-
- -
-
- - 0): ?> - - - -
- - - - - -
- <?= htmlspecialchars($file['file_name']); ?> -
- - - - - -

- -
- - - -

Aucun fichier disponible pour ce mémoire.

- -
-
- - - \ No newline at end of file diff --git a/public/search.php b/public/search.php index 8deecba..d84037d 100644 --- a/public/search.php +++ b/public/search.php @@ -333,7 +333,7 @@ include APP_ROOT . '/templates/header.php'; ?>
- +
getThesisById($thesisId); + + if (!$data) { + // Thesis not found or not published + header('Location: index.php'); + exit; + } + } catch (Exception $e) { + error_log("Error loading thesis: " . $e->getMessage()); + header('Location: index.php'); + exit; + } +} else { + // Redirect to the index page if no id parameter is provided + header('Location: index.php'); + exit; +} + +// Set page title and additional CSS +$pageTitle = $data['title']; +$additionalCSS = ['assets/tfe.css']; + +// Include shared head template +include APP_ROOT . '/templates/head.php'; +?> + +
+
+

+ +

+ +
+
+ + • + +
+ +
+ + + + + • + + + + +
+ + +
+ +
+ + +
+ Mots-clés: + +
+ +
+
+
+ +
+
+ + +
+ +

+ + +
+
+ +
+ Programme: + + + + + + et + + + + + +
+ + + +
+ Finalité: + +
+ + + +
+ Promoteur·ice·s: + +
+ +
+ +
+ +
+ Langue(s): + +
+ + + +
+ Format(s): + +
+ +
+
+ + +
+ +
+ +
+ + + +
+

Synopsis

+
+ +
+
+ + + +
+ 0): ?> + + +
+ + + +
+ <?= htmlspecialchars($file['file_name']); ?> +
+ + + + +

+ +
+ + +

Aucun fichier disponible pour ce TFE.

+ +
+ +
+
+ + + + diff --git a/templates/head.php b/templates/head.php new file mode 100644 index 0000000..a0121c4 --- /dev/null +++ b/templates/head.php @@ -0,0 +1,31 @@ + + + + + + + + + <?= isset($pageTitle) ? htmlspecialchars($pageTitle) . ' - Posterg' : 'Posterg' ?> + + + + + + + + + + + + diff --git a/templates/header.php b/templates/header.php index 5fdcc75..1099efe 100644 --- a/templates/header.php +++ b/templates/header.php @@ -17,7 +17,10 @@ (function poll() { fetch('/live-reload.php') .then(r => r.json()) - .then(d => { if (d.changed) location.reload(); else setTimeout(poll, 1000); }) + .then(d => { + if (d.changed) location.reload(); + else setTimeout(poll, 1000); + }) .catch(() => setTimeout(poll, 2000)); })(); @@ -31,8 +34,7 @@

- Ce site post-ERG a été créé pour répertorier et valoriser les mémoires de l'ERG - École de Recherches Graphique de Bruxelles. - L’objectif est à la fois d’offrir une vitrine aux projets des ancien·nes étudiant·es et de mettre en lumière la diversité des disciplines et des parcours qui façonnent l’histoire de l’école à travers les âges, depuis près de 100 ans. + Ce site archive et valorise les mémoires de l'ERG (Bruxelles). Il expose les projets des diplômé·es pour illustrer la diversité des parcours qui marquent l'histoire centenaire de l'école.

Design & développement : Olivia Marly, Théo Hennequin & Théophile Gervreau-Mercie