pses
/
programme
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Giggity

Browse Source
master
aeris 5 years ago
parent 57e3458649
commit ce125404d7
4 changed files with 75 additions and 40 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

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

Write Preview
Loading…
Cancel
Save