Switch location and event type

master
aeris 5 years ago
parent 8079e8d75e
commit 1c100e362f
  1. 65
      source/index.html.erb
  2. 10
      source/index.ics.erb
  3. 6
      source/javascripts/site.js.coffee
  4. 96
      source/stylesheets/site.css.scss

@ -16,22 +16,54 @@
<table class="timetable table-bordered table-condensed col-xs-12">
<thead>
<tr>
<th></th>
<th rowspan="2">
<% link_to 'index.ics' do %>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 60 60" style="enable-background:new 0 0 60 60;" xml:space="preserve">
<g>
<g>
<rect x="1" y="13" style="fill:#ECF0F1;" width="56" height="39"/>
<polygon style="fill:#21AE5E;" points="42,0 16,0 1,0 1,13 57,13 57,0 "/>
<path style="fill:#556080;" d="M19,46c-0.552,0-1-0.447-1-1V19c0-0.553,0.448-1,1-1s1,0.447,1,1v26C20,45.553,19.552,46,19,46z"/>
<path style="fill:#556080;" d="M13,26c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l6-6
c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-6,6C13.512,25.902,13.256,26,13,26z"/>
<path style="fill:#556080;" d="M38,32c-3.86,0-7-3.141-7-7s3.14-7,7-7s7,3.141,7,7S41.86,32,38,32z M38,20c-2.757,0-5,2.243-5,5
s2.243,5,5,5s5-2.243,5-5S40.757,20,38,20z"/>
<path style="fill:#556080;" d="M38,46c-3.86,0-7-3.141-7-7c0-0.553,0.448-1,1-1s1,0.447,1,1c0,2.757,2.243,5,5,5s5-2.243,5-5V25
c0-0.553,0.448-1,1-1s1,0.447,1,1v14C45,42.859,41.86,46,38,46z"/>
</g>
<g>
<rect x="37" y="38" style="fill:#21AE5E;" width="22" height="22"/>
<rect x="47" y="39.586" style="fill:#FFFFFF;" width="2" height="16"/>
<polygon style="fill:#FFFFFF;" points="48,57 41,50.293 42.476,48.879 48,54.172 53.524,48.879 55,50.293 "/>
</g>
</g>
</svg>
<% end %>
</th>
<% 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 %>
</tr>
<!--tr>
<% planning.each do |day, events| %>
<% events.each do |type, _| %>
<td><%= type %></td>
<tr>
<% planning.each do |_, events| %>
<% events.each do |location, _| %>
<td><%= case location
when :cinema
'Salle cinéma'
when :hall
'Accueil'
when :town
'Village asso'
end
%></td>
<% end %>
<% end %>
</tr-->
</tr>
</thead>
<tbody>
<tr>
@ -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 @@
</tr>
</tbody>
</table>
<ul class="legend">
<li>
<span class="talk">&nbsp;</span> Conférence
</li>
<li>
<span class="workshop">&nbsp;</span> Atelier
</li>
<li>
<span class="round-table">&nbsp;</span> Table ronde
</li>
<li>
<span class="concert">&nbsp;</span> Concert
</li>
<li>
<span class="misc">&nbsp;</span> Divers
</li>
</ul>
</div>
</div>

@ -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

@ -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

@ -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;
}
}

Loading…
Cancel
Save