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

4 files changed, 131 insertions, 33 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)
 {