Browse Source

[feature] add footer + event icon

master
r0 2 years ago
parent
commit
d56663fea8
  1. BIN
      assets/images/misc.png
  2. BIN
      assets/images/talk.png
  3. BIN
      assets/images/workshop.png
  4. 43
      assets/js/programme.js
  5. 5
      index.html
  6. 20
      programme.css

BIN
assets/images/misc.png

After

Width: 36  |  Height: 64  |  Size: 935 B

BIN
assets/images/talk.png

After

Width: 64  |  Height: 64  |  Size: 1.1 KiB

BIN
assets/images/workshop.png

After

Width: 64  |  Height: 64  |  Size: 1.0 KiB

43
assets/js/programme.js

@ -32,37 +32,42 @@ function fillTimetables(data) {
// 1 timetable per day
let timetable = document.createElement('div');
timetable.setAttribute('class', 'timetable hidden ' + dayName);
document.body.appendChild(timetable);
document.body.insertBefore(timetable, document.querySelector('footer'));
for (let eventIndex in day) {
let event = day[eventIndex];
let eventInterval = event['from'] + '-' + event['to'];
event['time'] = event['from'] + '-' + event['to'];
let eventDiv = document.createElement('div');
eventDiv.setAttribute('class', 'event ' + event['type']);
let eventTime = document.createElement('span');
eventTime.setAttribute('class', 'time');
eventTime.appendChild(document.createTextNode(eventInterval));
eventDiv.appendChild(eventTime);
eventDiv.appendChild(document.createElement('br'));
let eventContent = {
'time': 'span',
'title': 'strong',
'author': 'span'
}
let eventName = document.createElement('strong');
eventName.appendChild(document.createTextNode(event['title']));
eventDiv.appendChild(eventName);
eventDiv.appendChild(document.createElement('br'));
for (let contentIndex in eventContent) {
let elem = document.createElement(eventContent[contentIndex]);
elem.setAttribute('class', contentIndex);
elem.appendChild(document.createTextNode(event[contentIndex]));
eventDiv.appendChild(elem);
}
let eventAuthor = document.createElement('span');
eventAuthor.setAttribute('class', 'author');
eventAuthor.appendChild(document.createTextNode(event['author']));
eventDiv.appendChild(eventAuthor);
eventDiv.appendChild(document.createElement('br'));
let eventBottom = document.createElement('div');
if (event['type'] != null) {
let eventIcon = document.createElement('img');
eventIcon.setAttribute('src', 'assets/images/' + event['type'] + '.png');
eventBottom.appendChild(eventIcon);
}
let eventPlace = document.createElement('span');
eventPlace.setAttribute('class', 'place');
eventPlace.appendChild(document.createTextNode(event['place']));
eventDiv.appendChild(eventPlace);
eventDiv.appendChild(document.createElement('br'));
eventBottom.appendChild(eventPlace);
eventDiv.appendChild(eventBottom);
// add click listener for each day
eventDiv.addEventListener('click', function(ev) {
@ -71,7 +76,7 @@ function fillTimetables(data) {
if (disabledDescs.indexOf(event['description']) === -1) {
let modal = document.querySelector('div#modal');
modal.querySelector('h1').innerHTML = event['title'];
modal.querySelector('span').innerHTML = eventInterval;
modal.querySelector('span').innerHTML = event['time'];
if (event['author'] !== '') {
modal.querySelector('span').innerHTML += ' - ' + event['author'];
}

5
index.html

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html lang="fr">
<head>
<title>Programme PSES</title>
<meta charset="utf-8">
@ -15,6 +15,9 @@
<br>
<ul id="dayList"></ul>
</header>
<footer>
<span>Merci à <a href="https://useiconic.com/open/">Open Iconic</a> & <a href="https://github.com/liberationfonts/liberation-fonts/">Red Hat</a> pour les icônes & la police de caractères :-)</span>
</footer>
<div id="overlay" class="hidden"></div>
<div id="modal">
<div id="modalContent">

20
programme.css

@ -140,8 +140,23 @@ span.author {
flex-grow: 1;
}
div.event div {
display: flex;
}
div.event img {
width: 32px;
}
/* why is this rabbit so bizarre... */
div.event.misc img {
height: 32px;
width: 18px;
}
span.place {
font-weight: bold;
margin-left: auto;
align-self: flex-end;
}
@ -211,6 +226,11 @@ div#modal button {
cursor: pointer;
}
footer {
margin: 16px;
text-align: center;
}
/* some values are from the Bootstrap project */
/* we must specify pixel sizes in order to

Loading…
Cancel
Save