Browse Source

[feature] add event type display

master
r0 2 years ago
parent
commit
8deda92457
  1. BIN
      assets/images/misc.png
  2. 22
      assets/js/programme.js
  3. 2
      index.html
  4. 33
      programme.css

BIN
assets/images/misc.png

Before

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

After

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

22
assets/js/programme.js

@ -1,5 +1,25 @@
function fillTimetables(data) {
let dayList = document.getElementById('dayList');
let eventList = document.getElementById('eventList');
let eventTypes = {
'talk': 'Conférence',
'workshop': 'Atelier',
'misc': 'Divers'
}
// fill event type list
for (let typeIndex in eventTypes) {
let eventName = eventTypes[typeIndex];
let eventElem = document.createElement('li');
eventElem.setAttribute('class', typeIndex);
let eventIcon = document.createElement('img');
eventIcon.setAttribute('src', 'assets/images/' + typeIndex + '.png');
eventIcon.setAttribute('alt', eventName);
eventElem.appendChild(eventIcon);
eventElem.appendChild(document.createTextNode(eventName));
eventList.appendChild(eventElem);
}
for (let dayName in data) {
// add each day to the menu list
@ -59,6 +79,8 @@ function fillTimetables(data) {
if (event['type'] != null) {
let eventIcon = document.createElement('img');
eventIcon.setAttribute('src', 'assets/images/' + event['type'] + '.png');
eventIcon.setAttribute('alt', eventTypes[event['type']]);
eventIcon.setAttribute('title', eventTypes[event['type']]);
eventBottom.appendChild(eventIcon);
}

2
index.html

@ -14,6 +14,8 @@
<noscript>Nous sommes désolé, mais JavaScript est requis pour vous montrer notre joli programme :(</noscript>
<br>
<ul id="dayList"></ul>
<br>
<ul id="eventList"></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>

33
programme.css

@ -56,7 +56,22 @@ a, a:visited {
position: relative;
}
ul#dayList {
ul#eventList { margin-top: 0; }
ul#eventList li {
display: inline;
text-align: center;
padding: 10px;
border: 1px solid;
width: 105px;
}
ul#eventList li img {
display: block;
margin: auto;
}
ul#eventList, ul#dayList {
list-style-type: none;
display: inline-flex;
justify-content: center;
@ -108,9 +123,9 @@ div.event {
transition: box-shadow 0.1s;
}
div.event.talk { background-color: #195c94; }
div.event.workshop { background-color: #a72a24; }
div.event.misc { background-color: #e69f00; }
.talk { background-color: #195c94; }
.workshop { background-color: #a72a24; }
.misc { background-color: #e69f00; }
div.event.talk:hover {
box-shadow: inset -5px -5px #0e3353;
@ -142,21 +157,15 @@ span.author {
div.event div {
display: flex;
justify-content: space-between;
}
div.event img {
ul#eventList li img, 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;
}

Loading…
Cancel
Save