diff --git a/source/index.html.erb b/source/index.html.erb index 229953a..6c98760 100644 --- a/source/index.html.erb +++ b/source/index.html.erb @@ -16,22 +16,54 @@ - + <% planning.each do |day, events| %> <%= n = events.size attributes = n == 1 ? nil : { colspan: n } - content_tag :th, day, attributes + content_tag :th, I18n.l(day, format: '%A %d %B'), attributes %> <% end %> - + @@ -50,7 +82,7 @@ <% from, to = event[:from], event[:to] duration = parse_time(to) - parse_time(from) - classes = [event[:place]] + classes = [event[:type]] classes << :half if duration <= 30 classes << :double if duration >= 90 classes = classes.join ' ' @@ -80,6 +112,23 @@
+ <% link_to 'index.ics' do %> + + + + + + + + + + + + + + + + + + <% end %> +
+ diff --git a/source/index.ics.erb b/source/index.ics.erb index abeac9c..b642b25 100644 --- a/source/index.ics.erb +++ b/source/index.ics.erb @@ -12,8 +12,14 @@ cal = Icalendar::Calendar.new cal.append_custom_property 'NAME', 'PSES 2018' + LOCATIONS = { + cinema: 'Salle cinéma', + hall: 'Accueil', + town: 'Village asso' + } + planning.each do |day, events| - events.each do |type, events| + events.each do |location, events| events.each do |event| from = event[:from] to = event[:to] @@ -26,7 +32,7 @@ e.organizer = Icalendar::Values::CalAddress.new nil, cn: event[:author] e.summary = title e.description = event[:description] - e.location = event[:place].to_s + e.location = LOCATIONS[location] end end end diff --git a/source/javascripts/site.js.coffee b/source/javascripts/site.js.coffee index 626714e..15e26b6 100644 --- a/source/javascripts/site.js.coffee +++ b/source/javascripts/site.js.coffee @@ -1,6 +1,6 @@ class TimeTable constructor: (@element, @modal) -> - events = @element.querySelectorAll 'tbody td li' + events = @element.querySelectorAll 'tbody td > ul > li' for event in events # JS scoping hell… event.addEventListener 'click', ((_this, _event) -> @@ -52,7 +52,7 @@ class TimeTable init: -> times = [] - hours = @element.querySelectorAll 'tbody th li' + hours = @element.querySelectorAll 'tbody th > ul > li' for hour in hours time = @parse_time hour.dataset.time times.push { @@ -67,7 +67,7 @@ class TimeTable top: rect.top + rect.height } - events = @element.querySelectorAll 'tbody td li' + events = @element.querySelectorAll 'tbody td > ul > li' for event in events @position times, event diff --git a/source/stylesheets/site.css.scss b/source/stylesheets/site.css.scss index 5d0f625..a179f13 100644 --- a/source/stylesheets/site.css.scss +++ b/source/stylesheets/site.css.scss @@ -1,18 +1,32 @@ -// @import 'bootstrap'; - * { box-sizing: border-box; } $line-height: 150px; -$event-color-1: #2980b9; // Smalt Blue -$event-color-2: #c0392b; // Martinique -$event-color-3: #27ae60; // Rajah +$background: #212121; +$background: #000; + +$event-talk: #3F51B5; +$event-workshop: #f44336; +$event-concert: #4CAF50; +$event-round-table: #FFC107; +$event-misc: #673AB7; + +//$event-talk: #2962FF; +//$event-workshop: #DD2C00; +//$event-concert: #00C853; +//$event-round-table: #FF6D00; +//$event-misc: #6200EA; + +$event-talk: #2980b9; +$event-workshop: #c0392b; +$event-concert: #27ae60; +$event-round-table: #FFC107; @mixin event($color) { background-color: $color; - border-bottom: 5px solid darken($color, 5%); + border-bottom: 5px solid darken($color, 15%); } @mixin transition($args...) { @@ -22,6 +36,12 @@ $event-color-3: #27ae60; // Rajah transition: $args; } +body { + background-color: $background; + color: #fff; + font-size: 10pt; +} + table.timetable { width: 100%; border-collapse: collapse; @@ -42,6 +62,11 @@ table.timetable { th, td { text-align: center; } + + svg { + width: 30px; + height: 30px; + } } ul { @@ -69,8 +94,9 @@ table.timetable { ul { li { padding: 10px; - color: #fff; cursor: pointer; + text-align: justify; + overflow: hidden; &.half { height: $line-height/2; @@ -93,6 +119,18 @@ table.timetable { } } +ul.legend { + list-style-type: none; + li { + display: inline; + + span { + display: inline-block; + width: 25px; + } + } +} + .time { font-size: 0.75em; } @@ -109,16 +147,24 @@ table.timetable { display: none; } -.cinema { - @include event($event-color-1); +.talk { + @include event($event-talk); +} + +.workshop { + @include event($event-workshop); +} + +.concert { + @include event($event-concert); } -.hall { - @include event($event-color-2); +.round-table { + @include event($event-round-table); } -.town { - @include event($event-color-3); +.misc { + @include event($event-misc); } .modal { @@ -133,16 +179,21 @@ table.timetable { .header { height: 100%; padding: 10px; - color: #fff; + text-align: justify; } .body { + color: #000; height: 100%; padding: 30px 30px 30px 10px; flex-grow: 1; background-color: #fff; - + text-align: justify; overflow-x: auto; + + p { + margin: 0; + } } &.transition { @@ -171,19 +222,18 @@ table.timetable { position: absolute; top: 50%; left: 50%; - width: 2px; - height: 15px; - background: #000; + width: 30px; + height: 30px; -webkit-backface-visibility: hidden; backface-visibility: hidden; } &::before { - transform: translateX(-50%) translateY(-50%) rotate(45deg); - } - - &::after { - transform: translateX(-50%) translateY(-50%) rotate(-45deg); + -webkit-transform: translateX(-50%) translateY(-50%); + background-position: center; + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='20px' height='20px' viewBox='0 0 20 20' zoomAndPan='disable'%3E%3Cstyle%3Eline %7B stroke: %23000%3B stroke-width: 1%3B %7D%3C/style%3E%3Cline x1='2' y1='2' x2='18' y2='18' /%3E%3Cline x1='18' y1='2' x2='2' y2='18' /%3E%3C/svg%3E"); + background-size: 20px 20px; + background-repeat: no-repeat; } }