Browse Source

Giggity

master
aeris 4 years ago
parent
commit
ce125404d7
  1. 10
      source/index.html.erb
  2. 16
      source/javascripts/site.js.coffee
  3. 5
      source/layouts/layout.erb
  4. 84
      source/stylesheets/site.css.scss

10
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| %>
<%=

16
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

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

84
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;
}
}
}
Loading…
Cancel
Save