From 7214f34c04bcf492b057d0f9ce701502f912e044 Mon Sep 17 00:00:00 2001 From: DridriLaBastos <19534959+DridriLaBastos@users.noreply.github.com> Date: Mon, 23 Nov 2020 05:36:50 +0100 Subject: [PATCH] =?UTF-8?q?Meilleur=20syst=C3=A8me=20modal?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/css/style.css | 48 +++++++++------- public/js/app.js | 33 +++++------ views/home.ejs | 131 ++++++++++++++++++++++--------------------- 3 files changed, 108 insertions(+), 104 deletions(-) diff --git a/public/css/style.css b/public/css/style.css index ddced6f..17a4065 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -2275,47 +2275,53 @@ body.modal-active { overflow-y: hidden; } -.modal-winwdows { +.modal-windows-container:not(.modal-active) { display: none; } -.el-modal-bg { +/*TODO: Generic rule ?*/ +.modal-windows-container .el-modal-window #el-modal-edt:not(.modal-active), +.modal-windows-container .el-modal-window #el-modal-weather:not(.modal-active), +.modal-windows-container .el-modal-window #el-modal-transport:not(.modal-active) { + display: none; +} + +.modal-windows-container.modal-active { position: fixed; - width: 100%; - height: 100vh; + display: grid; + grid-template-columns: 1fr; + grid-template-rows: 1fr; top: 0; left: 0; + width: 100vw; + height: 100vh; + z-index: 100000; +} + +.el-modal-bg { + grid-area: 1/1; + width: 100%; + height: 100%; background-color: var(--dark-page-color-alpha); cursor: pointer; - display: none; justify-content: center; align-items: center; } -.modal-quit-zone { - position: fixed; - width: 100%; - height: 100vh; - top: 0; - left: 0; - display: none; -} - -.el-modal { +.el-modal-window { + grid-area: 1/1; + align-self: center; + justify-self: center; justify-content: flex-start; - min-height: 66%; - min-width: 66%; + max-height: 66%; + max-width: 66%; border-radius: 15px; background-color: var(--page-color); box-shadow: 0px 5px 50px -2px rgba(0, 0, 0, 0.75); cursor: default; } -.el-modal > .el-add { - justify-self: center; -} - .el-modal-close { top: 0; right: 0; diff --git a/public/js/app.js b/public/js/app.js index afdc25a..46e62bd 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -384,27 +384,24 @@ child.push( async function () { } } - function closeModals () { - document.querySelectorAll('.el-modal-bg').forEach(elModalBg => { - elModalBg.style.display = 'none'; - }); + function toggleModal(modalWindowID) { document.body.classList.toggle('modal-active'); + document.querySelector('.modal-windows-container').classList.toggle('modal-active'); + if (modalWindowID !== (null | '')) + document.getElementById(modalWindowID).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.body.classList.toggle('modal-active'); - }; + function closeModal() { + const openModal = document.querySelector('.modal-windows-container .el-modal-window .modal-active'); + toggleModal(openModal.id.toString()); + } + + document.querySelector('.el-modal-bg').addEventListener('click', closeModal); + document.querySelector('.el-modal-close').addEventListener('click', closeModal); + + document.getElementById('el-utility-edt').onclick = () => { toggleModal('el-modal-edt'); }; + document.getElementById('el-utility-weather').onclick = () => { toggleModal('el-modal-weather'); }; + document.getElementById('el-utility-transport').onclick = () => { toggleModal('el-modal-transport'); }; } ); child.run(); diff --git a/views/home.ejs b/views/home.ejs index f38fdda..8659288 100644 --- a/views/home.ejs +++ b/views/home.ejs @@ -19,7 +19,7 @@
  • - +
    weather icon for dark scheme weather icon for light scheme @@ -29,7 +29,7 @@
  • - +
    transport icon for dark scheme transport icon for light scheme @@ -73,74 +73,75 @@
    -
    -
    -
    - × -
    -
    -
    -
    - - -
    -
    - - - - - -
    -
    -
    EDT +
    +
    +
    + × +
    +
    +
    +
    + +
    - +
    EDT +
    + +
    Cliquer sur l’image pour agrandir.
    +

    Météo modale test

    +

    Transport modale test