From 162cc0543e5b5fe9fcd8ced57eb242f2f5fbea9d Mon Sep 17 00:00:00 2001 From: DridriLaBastos <19534959+DridriLaBastos@users.noreply.github.com> Date: Fri, 20 Nov 2020 12:23:36 +0100 Subject: [PATCH] Peaufinages avant la suite MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - les icônes restnt à la même place sans utiliser de 'diplay: none' - les fenêtres modales ne se ferment que en cliquant sur 'x' ou en dehors de la fenêtre --- public/css/style.css | 28 ++++++++- public/js/app.js | 27 ++++---- views/home.ejs | 144 +++++++++++++++++++++++-------------------- 3 files changed, 119 insertions(+), 80 deletions(-) diff --git a/public/css/style.css b/public/css/style.css index ce551a6..ddced6f 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -872,7 +872,6 @@ body:not(.color-scheme-dark) #site-header.color-scheme-dark .light-scheme-logo:n .color-scheme-dark .light-scheme-icon:not(:only-child), .color-scheme-light .dark-scheme-icon:not(:only-child){ - display: none; opacity: 0; transition: opacity var(--tr-short) var(--tr-func); } @@ -2196,6 +2195,15 @@ body:not(.singular) .post-header .post-meta>* { word-break: break-all; } +.utility-logos { + display: grid; + height: 2.5rem; +} + +.utility-logos img { + grid-area: 1 / 1; +} + .el-utility:first-child { margin-left: 0; } @@ -2262,6 +2270,15 @@ body:not(.singular) .post-header .post-meta>* { # MODAL WINDOW --------------------------------------------------------------*/ +body.modal-active { + height: 100vh; + overflow-y: hidden; +} + +.modal-winwdows { + display: none; +} + .el-modal-bg { position: fixed; width: 100%; @@ -2276,6 +2293,15 @@ body:not(.singular) .post-header .post-meta>* { align-items: center; } +.modal-quit-zone { + position: fixed; + width: 100%; + height: 100vh; + top: 0; + left: 0; + display: none; +} + .el-modal { justify-content: flex-start; min-height: 66%; diff --git a/public/js/app.js b/public/js/app.js index 645e358..afdc25a 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -384,21 +384,26 @@ child.push( async function () { } } - /*TODO: quit when clicking the little 'x' or outside the modal window */ - let elModalCloses = document.querySelectorAll(".el-modal-close"); - - elModalCloses.forEach((elModalClose) => { - elModalClose.addEventListener('click', () => { - document.querySelectorAll('.el-modal-bg').forEach((elModal) => { - elModal.style.display = 'none'; - document.getElementById('site-header').style.display = 'flex'; - }); + function closeModals () { + document.querySelectorAll('.el-modal-bg').forEach(elModalBg => { + elModalBg.style.display = 'none'; }); - }); + document.body.classList.toggle('modal-active'); + } + + document.querySelectorAll('.el-modal-close').forEach(elModalClose => { + elModalClose.addEventListener('click',closeModals); + }) + document.querySelectorAll('.el-modal-bg').forEach(elModalBg => { + elModalBg.addEventListener('click',closeModals); + }) + document.querySelectorAll('.el-modal').forEach(elModal => { + elModal.onclick = event => { event.stopPropagation(); }; + }) document.getElementById("el-utility-edt").onclick = () => { document.getElementById("el-modal-edt").style.display = "flex"; - document.getElementById('site-header').style.display = 'none'; + document.body.classList.toggle('modal-active'); }; } ); diff --git a/views/home.ejs b/views/home.ejs index bb404d5..f38fdda 100644 --- a/views/home.ejs +++ b/views/home.ejs @@ -10,24 +10,30 @@