Browse Source

[fix] UX: esc modal, box-shadow, and event flexboxes

master
r0 2 years ago
parent
commit
df9572f9bd
  1. 33
      programme.css
  2. 6
      programme.js

33
programme.css

@ -72,6 +72,10 @@ ul#dayList li {
font-size: 20px;
}
ul#dayList li:hover {
background-color: #333333;
}
ul#dayList li.current {
color: #222222;
background-color: #eeeeee;
@ -93,19 +97,36 @@ div.timetable {
div.event {
cursor: pointer;
display: inline-block;
display: inline-flex;
flex-direction: column;
overflow: hidden;
z-index: 2;
padding: 10px;
margin: 10px;
height: 170px;
width: 170px;
transition: box-shadow 0.1s;
}
div.event.talk { background-color: #195c94; }
div.event.workshop { background-color: #a72a24; }
div.event.misc { background-color: #e69f00; }
div.event.talk:hover {
box-shadow: inset -5px -5px #0e3353;
transition: box-shadow 0.1s;
}
div.event.workshop:hover {
box-shadow: inset -5px -5px #681a16;
transition: box-shadow 0.1s;
}
div.event.misc:hover {
box-shadow: inset -5px -5px #9a6a00;
transition: box-shadow 0.1s;
}
div.event strong {
font-size: 15px;
}
@ -115,8 +136,13 @@ span.time {
font-weight: bold;
}
span.author {
flex-grow: 1;
}
span.place {
font-style: italic;
font-weight: bold;
align-self: flex-end;
}
div#overlay {
@ -163,6 +189,7 @@ div#modal p {
}
div#modal button {
display: block;
background-color: #eeeeee;
color: #222222;
border: 1px solid #222222;
@ -170,8 +197,8 @@ div#modal button {
font-size: 18px;
height: 40px;
width: 120px;
display: block;
margin: 0 auto;
cursor: pointer;
}
/* some values are from the Bootstrap project */

6
programme.js

@ -53,6 +53,7 @@ function fillTimetables(data) {
eventDiv.appendChild(document.createElement('br'));
let eventAuthor = document.createElement('span');
eventAuthor.setAttribute('class', 'author');
eventAuthor.appendChild(document.createTextNode(event['author']));
eventDiv.appendChild(eventAuthor);
eventDiv.appendChild(document.createElement('br'));
@ -158,6 +159,11 @@ window.addEventListener("DOMContentLoaded", function(event) {
document.querySelector('div#overlay').addEventListener('click', hideModal);
document.querySelector('div#modal button').addEventListener('click', hideModal);
document.body.addEventListener('keydown', function(ev) {
if (ev.key == "Escape") {
hideModal();
}
});
} else {
document.querySelector('h1').innerHTML = "Erreur : " + xhr.status;
}

Loading…
Cancel
Save