diff --git a/source/index.html.erb b/source/index.html.erb index 6afa118..bd747c6 100644 --- a/source/index.html.erb +++ b/source/index.html.erb @@ -18,9 +18,11 @@ <% link_to 'index.ics' do %> - + + Calendrier @@ -40,6 +42,10 @@ <% end %> +
+ <%= image_tag 'giggity.png', alt: 'Giggity', title: 'Giggity', class: 'logo' %> + <%= image_tag 'qrcode.png', class: 'qrcode hidden' %> +
<% planning.each do |day, events| %> <%= diff --git a/source/javascripts/site.js.coffee b/source/javascripts/site.js.coffee index 15e26b6..523c887 100644 --- 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 diff --git a/source/layouts/layout.erb b/source/layouts/layout.erb index aa332f0..c96fd5b 100644 --- a/source/layouts/layout.erb +++ b/source/layouts/layout.erb @@ -3,10 +3,9 @@ - - + Programme PSES + <%= favicon_tag 'logo.ico' %> <%= stylesheet_link_tag 'site' %> <%= javascript_include_tag 'site' %> diff --git a/source/stylesheets/site.css.scss b/source/stylesheets/site.css.scss index 9986c0c..e413ba7 100644 --- 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; + } + } +}