Skip to content

Commit

Permalink
Peaufinages avant la suite
Browse files Browse the repository at this point in the history 
- 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
  • Loading branch information
@DridriLaBastos
DridriLaBastos committed Nov 20, 2020
1 parent 73f29ee commit 162cc05
Show file tree
Hide file tree
Showing 3 changed files with 119 additions and 80 deletions.
28 changes: 27 additions & 1 deletion public/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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%;
Expand All @@ -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%;
Expand Down
27 changes: 16 additions & 11 deletions public/js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
};
} );

Expand Down
144 changes: 76 additions & 68 deletions views/home.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,24 +10,30 @@
<ul class="element el-utilities">
<li class="element el-utility">
<a id="el-utility-edt" href="javascript:void(0);">
<img class="el-utility-content dark-scheme-icon" src="img/icons/calandar-icon-dsc.png" alt="calandar icon for dark scheme" width="30" height="30">
<img class="el-utility-content light-scheme-icon" src="img/icons/calandar-icon-lsc.png" alt="calandar icon for ligh scheme" width="30" height="30">
<div class="utility-logos">
<img class="el-utility-content dark-scheme-icon" src="img/icons/calandar-icon-dsc.png" alt="calandar icon for dark scheme" width="30" height="30">
<img class="el-utility-content light-scheme-icon" src="img/icons/calandar-icon-lsc.png" alt="calandar icon for ligh scheme" width="30" height="30">
</div>
<h2 class="el-utility-content">EDT</h2>
</a>
</li>

<li class="element el-utility">
<a href="javascript:void(0);">
<img class="el-utility-content dark-scheme-icon" src="img/icons/weather-icon-dsc.png" alt="weather icon for dark scheme" width="30" height="30"/>
<img class="el-utility-content light-scheme-icon" src="img/icons/weather-icon-lsc.png" alt="weather icon for light scheme" width="30" height="30"/>
<div class="utility-logos">
<img class="el-utility-content dark-scheme-icon" src="img/icons/weather-icon-dsc.png" alt="weather icon for dark scheme" width="30" height="30"/>
<img class="el-utility-content light-scheme-icon" src="img/icons/weather-icon-lsc.png" alt="weather icon for light scheme" width="30" height="30"/>
</div>
<h2 class="el-utility-content">METEO</h2>
</a>
</li>

<li class="element el-utility">
<a href="javascript:void(0);">
<img class="el-utility-content dark-scheme-icon" src="img/icons/transport-icon-dsc.png" alt="transport icon for dark scheme" width="30" height="30">
<img class="el-utility-content light-scheme-icon" src="img/icons/transport-icon-lsc.png" alt="transport icon for light scheme" width="30" height="30">
<div class="utility-logos">
<img class="el-utility-content dark-scheme-icon" src="img/icons/transport-icon-dsc.png" alt="transport icon for dark scheme" width="30" height="30">
<img class="el-utility-content light-scheme-icon" src="img/icons/transport-icon-lsc.png" alt="transport icon for light scheme" width="30" height="30">
</div>
<h2 class="el-utility-content">TRAJET</h2>
</a>
</li>
Expand Down Expand Up @@ -66,71 +72,73 @@
<footer class="post-footer"></footer>
</article>
</div>

<div class="el-modal-bg" id="el-modal-edt">
<div class ="el-modal element">
<a href="javascript:void(0);" class="el-modal-close">&times;</a>
<div class="el-add">
<div id="edt-container">
<div id="edt-form">
<div class="grade-block">
<select id="edt-grade">
<optgroup label="M2">
<option value="68419887" selected="">M2 SA</option>
<option value="68419888">M2 SR</option>
<option value="68419883">M2 MIAGE I.</option>
<option value="6">M2 MIAGE A.</option>
</optgroup>
<optgroup label="M1">
<option value="68425740">M1 INFO G1</option>
<option value="68425741">M1 INFO G2</option>
<option value="68426833">M1 INFO SA</option>
<option value="68426834">M1 INFO SR</option>
<option value="68419919">M1 MIAGE I.</option>
<option value="68419886">M1 MIAGE A.</option>
</optgroup>
<optgroup label="L3">
<option value="68419893">L3 SA</option>
<option value="68419892">L3 SR</option>
<option value="68419891">L3 MIAGE I.</option>
<option value="7">L3 MIAGE A.</option>
<option value="68426751">L3 DOUBLE</option>
</optgroup>
<optgroup label="L2">
<option value="68426361">L2 INFO G1</option>
<option value="68426362">L2 INFO G2</option>
<option value="68426891">L2 INFO G3</option>
<option value="68426987">L2 INFO G4</option>
</optgroup>
<optgroup label="L1">
<option value="18">L1 MI G1</option>
<option value="8">L1 MI G2</option>
<option value="68426495">L1 MI G3</option>
<option value="68426747">L1 MI G4</option>
<option value="68426748">L1 MI G5</option>
<option value="68426749">L1 MI G6</option>
</optgroup>
</select>
<input type="button" id="set-default-cookie" value="Conserver ce choix">

<div class="el-modal-window">
<div class="el-modal-bg" id="el-modal-edt">
<div class ="el-modal element">
<a href="javascript:void(0);" class="el-modal-close">&times;</a>
<div class="el-add">
<div id="edt-container">
<div id="edt-form">
<div class="grade-block">
<select id="edt-grade">
<optgroup label="M2">
<option value="68419887" selected="">M2 SA</option>
<option value="68419888">M2 SR</option>
<option value="68419883">M2 MIAGE I.</option>
<option value="6">M2 MIAGE A.</option>
</optgroup>
<optgroup label="M1">
<option value="68425740">M1 INFO G1</option>
<option value="68425741">M1 INFO G2</option>
<option value="68426833">M1 INFO SA</option>
<option value="68426834">M1 INFO SR</option>
<option value="68419919">M1 MIAGE I.</option>
<option value="68419886">M1 MIAGE A.</option>
</optgroup>
<optgroup label="L3">
<option value="68419893">L3 SA</option>
<option value="68419892">L3 SR</option>
<option value="68419891">L3 MIAGE I.</option>
<option value="7">L3 MIAGE A.</option>
<option value="68426751">L3 DOUBLE</option>
</optgroup>
<optgroup label="L2">
<option value="68426361">L2 INFO G1</option>
<option value="68426362">L2 INFO G2</option>
<option value="68426891">L2 INFO G3</option>
<option value="68426987">L2 INFO G4</option>
</optgroup>
<optgroup label="L1">
<option value="18">L1 MI G1</option>
<option value="8">L1 MI G2</option>
<option value="68426495">L1 MI G3</option>
<option value="68426747">L1 MI G4</option>
<option value="68426748">L1 MI G5</option>
<option value="68426749">L1 MI G6</option>
</optgroup>
</select>
<input type="button" id="set-default-cookie" value="Conserver ce choix">
</div>
<div class="date-block">
<input type="button" id="edt-comeback" value="Aujourd'hui">
<input type="button" class="edt-backward" value="-">
<input type="button" class="edt-forward" value="+">
<input type="number" id="edt-week" min="1" max="52">
<input type="number" id="edt-year" min="2017" max="2099">
</div>
</div>
<div class="date-block">
<input type="button" id="edt-comeback" value="Aujourd'hui">
<input type="button" class="edt-backward" value="-">
<input type="button" class="edt-forward" value="+">
<input type="number" id="edt-week" min="1" max="52">
<input type="number" id="edt-year" min="2017" max="2099">
<div id="edt-img-cont"><img id="edt-img"
src="https://edt.univ-evry.fr/vue_etudiant_horizontale.php?current_year=2020&amp;current_student=68419887&amp;current_week=37&amp;lar=1920&amp;hau=1080"
alt="EDT">
</div>
<div id="modal-bar">
<div class="edt-backward">←</div>
<div id="modal-close">fermer</div>
<div class="edt-forward">→</div>
</div>
<div id="edt-info">Cliquer sur l’image pour agrandir.</div>
</div>
<div id="edt-img-cont"><img id="edt-img"
src="https://edt.univ-evry.fr/vue_etudiant_horizontale.php?current_year=2020&amp;current_student=68419887&amp;current_week=37&amp;lar=1920&amp;hau=1080"
alt="EDT">
</div>
<div id="modal-bar">
<div class="edt-backward">←</div>
<div id="modal-close">fermer</div>
<div class="edt-forward">→</div>
</div>
<div id="edt-info">Cliquer sur l’image pour agrandir.</div>
</div>
</div>
</div>
Expand Down

0 comments on commit 162cc05

Please sign in to comment.