petites améliorations smartphones, logo et fond de header et footer gérés dans NodeData

8 files changed, 152 insertions, 47 deletions

diff --git a/public/css/body.css b/public/css/body.css
index c3f518a..a03510f 100644
--- a/public/css/body.css
+++ b/public/css/body.css
@@ -67,8 +67,12 @@ section > h3
         grid-template-columns: repeat(2, 1fr);
     }
 }
-@media screen and (max-width: 550px)
+@media screen and (max-width: 600px)
 {
+    article
+    {
+        /*margin: 5px;*/
+    }
     .grid_columns
     {
         display: block;
diff --git a/public/css/head.css b/public/css/head.css
index a55449a..be938bb 100644
--- a/public/css/head.css
+++ b/public/css/head.css
@@ -3,7 +3,6 @@ header
         text-align: center;
         /*padding-top: 5px;*/
         /*padding-bottom: 10px;*/
-        background-image: url('../assets/fond-piscine.jpg');
         background-size: cover; /* largeur du bloc_page  */
 }
 #nav_zone
@@ -14,14 +13,35 @@ header
         /*align-items: center;*/ /* conflit possible avec .social align-self */
         justify-content: center;
 }
+.nav_button{
+        display: none;
+}
 
 .header-content
 {
         padding: 20px 0;
         display: grid;
-        grid-template-columns: repeat(3, 1fr);
+        grid-template-columns: 1fr 1fr 1fr;
         align-items: end;
 }
+@media screen and (max-width: 1000px){
+        .header-content{
+                padding: 18px 0;
+        }
+}
+@media screen and (max-width: 450px){
+        .header-content
+        {
+                /*grid-template-columns: 1fr 2fr 1fr;*/
+                display: block;
+                padding: 18px;
+        }
+        .head_logo
+        {
+                display: none;
+        }
+}
+
 .site_title
 {
         background-color: #ffffff7f;
@@ -37,6 +57,12 @@ header h2
         font-size: medium; /* défaut = x-large */
         margin: 10px;
 }
+@media screen and (max-width: 1000px){
+        header h1, header h2
+        {
+                margin: 8px;
+        }
+}
 header img
 {
         vertical-align: bottom; /* supprime espace sous l'image */
@@ -50,7 +76,8 @@ header a
 }
 .social
 {
-        align-self: end;
+        /*align-self: end;*/
+        /*padding: 4px;*/
 }
 .social img
 {
diff --git a/public/css/nav.css b/public/css/nav.css
index 3ccdb1f..17b30c9 100644
--- a/public/css/nav.css
+++ b/public/css/nav.css
@@ -1,7 +1,8 @@
 /*-- menu principal --*/
 #nav_zone
 {
-        height: 33px;
+        /*height: 33px;*/
+        /*width: 100%;*/
 }
 .nav_main
 {
@@ -121,11 +122,13 @@ li:not(.current){
 nav > ul > li > ul
 {
         position: absolute; /* retire du flux, positionnement par rapport à la fenêtre */
+        margin-left: -7px; /* annuler le déplacement dû au padding: 7px; dans ".nav_main li" */
+        margin-top: 7px;
 }
 /* élément du menu survolé, le positionnement relatif en fait la référence du positionnement suivant */
 .drop-right
 {
-        position: relative;
+        /*position: relative;*/
 }
 .drop-right .sub-menu
 {
@@ -133,3 +136,56 @@ nav > ul > li > ul
         left: 100%;
         top: -3px; /* la bordure bleue fait 3px */
 }
+
+@media screen and (max-width: 1000px){
+        #nav_zone
+        {
+                /*height: 29px;*/
+        }
+        .nav_main li
+        {
+                padding: 5px;
+        }
+        .nav_main p
+        {
+                /*font-size: smaller;*/
+                font-size: 90%;
+        }
+        nav > ul > li > ul
+        {
+                margin-left: -5px;
+                margin-top: 5px;
+        }
+}
+@media screen and (max-width: 450px){
+        .nav_button
+        {
+                /*display: block;*/
+        }
+        #nav_zone
+        {
+                /*position: fixed;
+                justify-content: left;*/
+        }
+        .nav_main
+        {
+                /*top: 0px;*/
+        }
+        .nav_main > ul
+        {
+                /*flex-direction: column;*/
+        }
+        .nav_main li
+        {
+                /**/
+        }
+        .sub-menu p
+        {
+                font-size: smaller;
+        }
+        .drop-down > .sub-menu
+        {
+                /*flex-direction: row;*/
+                /*position: static;*/
+        }
+}
\ No newline at end of file
diff --git a/public/js/main.js b/public/js/main.js
index 6eb0162..2ffd33b 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -8,33 +8,6 @@ function newPassword(page, id = ''){
         }, 0);
 }
 
-// ouvrir/fermer les sous-menus avec écran tactile
-document.addEventListener('DOMContentLoaded', () => { // sinon on ne trouve pas les boutons
-        document.querySelectorAll('.sub-menu-toggle').forEach(button => {
-                button.addEventListener('click', e => {
-                        e.preventDefault();
-                        const li = button.parentElement; // <li class="drop-down">
-
-                        // fermer les autres sous-menus de même niveau
-                        // :scope pour pouvoir utiliser > pour restreindre aux frères directs
-                        li.parentElement.querySelectorAll(':scope > .drop-down, :scope > .drop-right').forEach(sibling => {
-                                if(sibling !== li){
-                                        sibling.classList.remove('open'); // fermer sous-menus frères
-                                        sibling.querySelectorAll('.drop-right').forEach(desc => {
-                                                desc.classList.remove('open'); // fermer sous-menus neveux
-                                        });
-                                }
-                        });
-
-                        if(!li.classList.toggle('open')){ // fermer sous-menu
-                                li.querySelectorAll('.drop-right').forEach(desc => {
-                                        desc.classList.remove('open'); // fermer sous-menus enfants
-                                });
-                        }
-                });
-        });
-});
-
 function copyInClipBoard(link){
         // une balise <input> avec des attributs
         var element = document.createElement("input");
@@ -64,6 +37,44 @@ function toastNotify(message) {
 }
 
 
+document.addEventListener('DOMContentLoaded', () => { // pour pouvoir attraper les balises
+        // ouvrir/fermer les sous-menus avec écran tactile
+        document.querySelectorAll('.sub-menu-toggle').forEach(button => {
+                button.addEventListener('click', e => {
+                        e.preventDefault();
+                        const li = button.parentElement; // <li class="drop-down">
+
+                        // fermer les autres sous-menus de même niveau
+                        // :scope pour pouvoir utiliser > pour restreindre aux frères directs
+                        li.parentElement.querySelectorAll(':scope > .drop-down, :scope > .drop-right').forEach(sibling => {
+                                if(sibling !== li){
+                                        sibling.classList.remove('open'); // fermer sous-menus frères
+                                        sibling.querySelectorAll('.drop-right').forEach(desc => {
+                                                desc.classList.remove('open'); // fermer sous-menus neveux
+                                        });
+                                }
+                        });
+
+                        if(!li.classList.toggle('open')){ // fermer sous-menu
+                                li.querySelectorAll('.drop-right').forEach(desc => {
+                                        desc.classList.remove('open'); // fermer sous-menus enfants
+                                });
+                        }
+                });
+        });
+
+        // hauteur de <nav> en fonction de celle du menu en position fixe
+        const nav = document.querySelector('nav');
+        const nav_zone = document.getElementById('nav_zone');
+        const resize_observer = new ResizeObserver(entries => {
+                for(const entry of entries){
+                        nav_zone.style.height = entry.contentRect.height + 'px';
+                }
+        });
+        resize_observer.observe(nav);
+});
+
+
 // complète les fonctions dans tinymce.js
 function switchPositions(article_id, direction)
 {
diff --git a/src/controller/installation.php b/src/controller/installation.php
index 5cfae45..acb87f1 100644
--- a/src/controller/installation.php
+++ b/src/controller/installation.php
@@ -115,22 +115,22 @@ function makeStartPage(EntityManager $entityManager){
         /* -- table image -- */
         // paramètres: file_name, file_path, file_path_mini, mime_type, alt
         $favicon = new Image("favicon48x48.png", NULL, "assets/favicon48x48.png", "image/png", "favicon");
-        $logo = new Image("logo-nb-et-ffn.png", NULL, "assets/logo-nb-et-ffn.png", "image/png", "head_logo");
         $facebook = new Image("facebook.svg", NULL, "assets/facebook.svg", "image/svg+xml", "facebook");
         $instagram = new Image("instagram.svg", NULL, "assets/instagram.svg", "image/svg+xml", "instagram");
         $linkedin = new Image("linkedin.svg", NULL, "assets/linkedin.svg", "image/svg+xml", "linkedin");
         $github = new Image("github.svg", NULL, "assets/github.svg", "image/svg+xml", "github");
-        $fond_piscine = new Image("fond-piscine.jpg", "assets/fond-piscine.jpg", NULL, "images/jpg", "fond-piscine");
 
         /* -- table node_data -- */
         // paramètres: data, node, images
-        $head_accueil_data = new NodeData(["description" => "Club, École de natation et Perfectionnement"], $head_accueil, new ArrayCollection([$favicon]));
+        $head_accueil_data = new NodeData(["description" => "page d'accueil"], $head_accueil, new ArrayCollection([$favicon]));
         $head_login_data = new NodeData(["description" => "Connexion"], $head_login, new ArrayCollection([$favicon]));
         $head_article_data = new NodeData(["description" => ""], $head_article, new ArrayCollection([$favicon]));
         $head_edit_menu_data = new NodeData(["description" => "Menu et chemins"], $head_edit_menu, new ArrayCollection([$favicon]));
         $head_new_page_data = new NodeData(["description" => "Nouvelle page"], $head_new_page, new ArrayCollection([$favicon]));
-        $header_data = new NodeData(["title" => "Les Nageurs Bigoudens", "description" => "Club, École de natation et Perfectionnement", "social" => ["facebook_link" => "https://www.facebook.com/nageursbigoudens29120", "instagram_link" => "https://www.instagram.com/nageursbigoudens/"]], $header, new ArrayCollection([$logo, $facebook, $instagram, $linkedin, $github, $fond_piscine]));
-        $footer_data = new NodeData(["adresse" => "17, rue Raymonde Folgoas Guillou, 29120 Pont-l’Abbé", "contact_nom" => "Les Nageurs Bigoudens", "e_mail" => "nb.secretariat@orange.fr", "logo_footer" => "assets/logo-nb-et-ffn.png"], $footer);
+        $header_data = new NodeData(["title" => "Titre", "description" => "Sous-titre", "header_logo" => "assets/logo-nb-et-ffn.png", "header_background" => "assets/fond-piscine.jpg",
+                "social" => ["facebook" => "https://www.facebook.com", "instagram" => "https://www.instagram.com", "linkedin" => "https://www.linkedin.com"]],
+                $header, new ArrayCollection([$facebook, $instagram, $linkedin, $github]));
+        $footer_data = new NodeData(["contact_nom" => "Nom", "adresse" => "adresse", "e_mail" => "e-mail", "footer_logo" => "assets/logo-nb-et-ffn.png"], $footer);
 
         /* -- table page -- */
     $entityManager->persist($accueil);
@@ -157,12 +157,10 @@ function makeStartPage(EntityManager $entityManager){
         
         /* -- table image -- */
         $entityManager->persist($favicon);
-        $entityManager->persist($logo);
         $entityManager->persist($facebook);
         $entityManager->persist($instagram);
         $entityManager->persist($linkedin);
         $entityManager->persist($github);
-        $entityManager->persist($fond_piscine);
         
         /* -- table node_data -- */
         $entityManager->persist($head_accueil_data);
diff --git a/src/view/HeaderBuilder.php b/src/view/HeaderBuilder.php
index b49b24c..87dc2f2 100644
--- a/src/view/HeaderBuilder.php
+++ b/src/view/HeaderBuilder.php
@@ -55,16 +55,22 @@ class HeaderBuilder extends AbstractBuilder
             {
                 for($i = 0; $i < count($keys); $i++)
                 {
+                    // réseaux sociaux
                     if(str_contains($image->getFileName(), $keys[$i])){
                         $social_networks .= '<a href="' . $social[$keys[$i]] . '" target="_blank" rel="noopener noreferrer">
                         <img src="' . rtrim($image->getFilePathMini(), '/') . '" alt="' . $keys[$i] . '_alt"></a>';
                         break;
                     }
-                    if(str_contains($image->getFileName(), 'logo'))
-                    {
-                        $logo = rtrim($image->getFilePathMini(), '/');
+                    // logo en-tête
+                    /*if(str_contains($image->getFileName(), 'header_logo')){
+                        $header_logo = rtrim($image->getFilePathMini(), '/');
                         break;
-                    }
+                    }*/
+                    // image de fond
+                    /*if(str_contains($image->getFileName(), 'header_background')){
+                        $header_background = rtrim($image->getFilePath(), '/');
+                        break;
+                    }*/
                 }
             }
 
diff --git a/src/view/templates/footer.php b/src/view/templates/footer.php
index 8f6d465..1b63edf 100644
--- a/src/view/templates/footer.php
+++ b/src/view/templates/footer.php
@@ -5,7 +5,7 @@
                     <p class="contact"><?= $contact_nom ?><br>
                         <?= $adresse ?><br>
                         <a href="mailto:<?= $e_mail ?>"><?= $e_mail ?></a></p>
-                    <p class="footer_logo"><img src="<?= $logo_footer ?>" alt="logo"><p>
+                    <p class="footer_logo"><img src="<?= $footer_logo ?>" alt="logo"><p>
                 </div>
                 <div class="<?= $empty_admin_zone ?>"></div>
                 <div class="<?= $div_admin ?>">
diff --git a/src/view/templates/header.php b/src/view/templates/header.php
index a749f45..b1215c5 100644
--- a/src/view/templates/header.php
+++ b/src/view/templates/header.php
@@ -1,14 +1,17 @@
 <?php declare(strict_types=1); ?>
 <body>
     <div>
-           <header>
+           <header style="background-image: url('<?= $header_background ?>');">
             <div id="nav_zone">
                 <?= $nav ?>
             </div>
 
             <div class="header-content">
                 <div class="head_logo">
-                    <a href="<?= new URL ?>"><img src="<?= $logo ?>" alt="logo_alt"></a>
+                    <a href="<?= new URL ?>"><img src="<?= $header_logo ?>" alt="logo_alt"></a>
+                </div>
+                <div class="nav_button">
+                    <button>MENU</button>
                 </div>
                 <div class="site_title">
                     <a href="<?= new URL ?>"><h1><?= $title ?></h1></a>