Browse Source

[feature] add modal overlay + resize tiles

master
r0 2 years ago
parent
commit
dda1288d46
  1. 2
      index.html
  2. 31
      programme.css
  3. 12
      programme.js

2
index.html

@ -12,8 +12,10 @@
<h1>Chargement en cours...</h1>
<a href="programme.ics">Cliquez ici pour la version ICS/JSON/yéti</a>
<noscript>Nous sommes désolé, mais JavaScript est requis pour vous montrer notre joli programme :(</noscript>
<br>
<ul id="dayList"></ul>
</header>
<div id="overlay" class="hidden"></div>
<div id="modal">
<div id="modalContent">
<h1></h1>

31
programme.css

@ -52,11 +52,13 @@ h1 {
a, a:visited {
color: #eeeeee;
z-index: 2;
position: relative;
}
ul#dayList {
list-style-type: none;
display: flex;
display: inline-flex;
justify-content: center;
padding-left: 0;
}
@ -64,6 +66,7 @@ ul#dayList {
ul#dayList li {
cursor: pointer;
display: inline;
z-index: 2;
border: 1px solid;
padding: 10px;
font-size: 20px;
@ -84,7 +87,7 @@ div.timetable {
width: 1260px;
}
div.timetable.hidden {
.hidden, div.timetable.hidden {
display: none;
}
@ -92,16 +95,21 @@ div.event {
cursor: pointer;
display: inline-block;
overflow: hidden;
padding: 20px;
z-index: 2;
padding: 10px;
margin: 10px;
height: 150px;
width: 150px;
height: 170px;
width: 170px;
}
div.event.talk { background-color: #195c94; }
div.event.workshop { background-color: #a72a24; }
div.event.misc { background-color: #e69f00; }
div.event strong {
font-size: 15px;
}
span.time {
font-size: 24px;
font-weight: bold;
@ -111,11 +119,20 @@ span.place {
font-style: italic;
}
div#overlay {
position: fixed;
top: 0;
left: 0;
z-index: 1;
height: 100%;
width: 100%;
}
div#modal {
position: fixed;
bottom: 0;
left: 0;
z-index: 1;
z-index: 3;
background-color: #eeeeee;
color: #222222;
height: 100%;
@ -125,7 +142,7 @@ div#modal {
}
div#modal.upfront {
max-height: 40%;
max-height: 50%;
transition: all 0.5s ease;
}

12
programme.js

@ -74,6 +74,7 @@ function fillTimetables(data) {
}
modal.querySelector('p').innerHTML = event['description'];
document.querySelector('div#overlay').classList.remove('hidden');
modal.classList.add('upfront');
});
})();
@ -138,6 +139,12 @@ function preparePage(data) {
return sortedData;
}
// to be used in event listeners
function hideModal(ev) {
document.querySelector('div#modal').classList.remove('upfront');
document.querySelector('div#overlay').classList.add('hidden');
}
window.addEventListener("DOMContentLoaded", function(event) {
let xhr = new XMLHttpRequest();
xhr.open('GET', 'programme.json', true);
@ -149,9 +156,8 @@ window.addEventListener("DOMContentLoaded", function(event) {
fillTimetables(data);
document.querySelector('h1').innerHTML = "Demandez le programme!";
document.querySelector('div#modal button').addEventListener('click', function(ev) {
document.querySelector('div#modal').classList.remove('upfront');
});
document.querySelector('div#overlay').addEventListener('click', hideModal);
document.querySelector('div#modal button').addEventListener('click', hideModal);
} else {
document.querySelector('h1').innerHTML = "Erreur : " + xhr.status;
}

Loading…
Cancel
Save