Giggity

4 years ago · ce125404d7
4 changed files with 75 additions and 40 deletions
--- a/source/index.html.erb
+++ b/source/index.html.erb
@ -18,9 +18,11 @@
 			<tr>
 				<th rowspan="2">
 					<% link_to 'index.ics' do %>
-						<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
-							 viewBox="0 0 60 60" style="enable-background:new 0 0 60 60;" xml:space="preserve">
+						<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
+							x="0px" y="0px"
+							viewBox="0 0 60 60" style="enable-background:new 0 0 60 60;" xml:space="preserve">
 							<g>
+								<title>Calendrier</title>
 								<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 		"/>
@ -40,6 +42,10 @@
 							</g>
 						</svg>
 					<% end %>
+					<div class="giggity">
+						<%= image_tag 'giggity.png', alt: 'Giggity', title: 'Giggity', class: 'logo' %>
+						<%= image_tag 'qrcode.png', class: 'qrcode hidden' %>
+					</div>
 				</th>
 				<% planning.each do |day, events| %>
 					<%=
--- a/source/javascripts/site.js.coffee
+++ b/source/javascripts/site.js.coffee
@ -179,6 +179,19 @@ class Modal
 		element.addEventListener 'transitionend', callback
 		@act events if events?

+class Giggity
+	@init: ->
+		giggity_logo = document.querySelector '.giggity .logo'
+		position = giggity_logo.getBoundingClientRect()
+		giggity_qrcode = document.querySelector '.giggity .qrcode'
+		giggity_qrcode.style.top = "#{position.bottom + 20}px"
+		giggity_qrcode.style.left = "#{position.right + 20}px"
+
+		giggity_logo.addEventListener 'mouseenter', ->
+			giggity_qrcode.classList.remove 'hidden'
+		giggity_logo.addEventListener 'mouseleave', ->
+			giggity_qrcode.classList.add 'hidden'
+

 init = ->
 	modal = new Modal document.querySelector '.modal'
@ -187,5 +200,8 @@ init = ->
 	for table in tables
 		new TimeTable(table, modal).init()

+	Giggity.init()
+
+
 document.addEventListener 'DOMContentLoaded', init
 window.addEventListener 'resize', init
--- a/source/layouts/layout.erb
+++ b/source/layouts/layout.erb
@ -3,10 +3,9 @@
 <head>
 	<meta charset="utf-8">
 	<meta http-equiv="x-ua-compatible" content="ie=edge">
-	<meta name="viewport"
-		  content="width=device-width, initial-scale=1, shrink-to-fit=no">
-	<!-- Use the title from a page's frontmatter if it has one -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 	<title>Programme PSES</title>
+	<%= favicon_tag 'logo.ico' %>
 	<%= stylesheet_link_tag 'site' %>
 	<%= javascript_include_tag 'site' %>
 </head>
--- a/source/stylesheets/site.css.scss
+++ b/source/stylesheets/site.css.scss
@ -144,10 +144,6 @@ ul.legend {
 	text-align: right;
 }

-.hidden {
-	display: none;
-}
-
 .talk {
 	@include event($event-talk);
 }
@ -168,6 +164,37 @@ ul.legend {
 	@include event($event-misc);
 }

+.close {
+	position: absolute;
+	top: 0;
+	right: 0;
+	color: transparent;
+	white-space: nowrap;
+	text-indent: 100%;
+	height: 30px;
+	width: 30px;
+	cursor: pointer;
+
+	&::before, &::after {
+		content: '';
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		width: 30px;
+		height: 30px;
+		-webkit-backface-visibility: hidden;
+		backface-visibility: hidden;
+	}
+
+	&::before {
+		-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;
+	}
+}
+
 .modal {
 	position: absolute;
 	background-color: #fff;
@ -207,37 +234,6 @@ ul.legend {
 		}
 	}

-	.close {
-		position: absolute;
-		top: 0;
-		right: 0;
-		color: transparent;
-		white-space: nowrap;
-		text-indent: 100%;
-		height: 30px;
-		width: 30px;
-		cursor: pointer;
-
-		&::before, &::after {
-			content: '';
-			position: absolute;
-			top: 50%;
-			left: 50%;
-			width: 30px;
-			height: 30px;
-			-webkit-backface-visibility: hidden;
-			backface-visibility: hidden;
-		}
-
-		&::before {
-			-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;
-		}
-	}
-
 	.header, .body, .close {
 		z-index: 3;
 	}
@ -252,3 +248,21 @@ ul.legend {
 		background-color: rgba(0, 0, 0, .8);
 	}
 }
+
+.giggity {
+	& .logo {
+		cursor: pointer;
+	}
+
+	& .qrcode {
+		position: absolute;
+		z-index: 3;
+		opacity: 1;
+
+		@include transition(all 500ms ease-in-out);
+
+		&.hidden {
+			opacity: 0;
+		}
+	}
+}