Switch location and event type

source/index.html.erb

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

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

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
 

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