Browse Source

Better modal

2020
aeris 3 years ago
parent
commit
10da759d7b
  1. 17
      source/_asso.erb
  2. 12
      source/_infos.erb
  3. 55
      source/javascripts/site.js
  4. 2
      source/layouts/layout.erb
  5. 2
      source/stylesheets/_variables.scss
  6. 21
      source/stylesheets/site.css.scss

17
source/_asso.erb

@ -2,7 +2,15 @@
<div class="w60 center txtcenter">
<h1 class="mbm">L’association</h1>
<h2>Nous contacter</h2>
<p>
Le festival est géré par <strong>White Rabbit PSES</strong>,
association loi 1901 à but non lucratif.
</p>
<p>
RNA : W941011113, SIRET: 82819102300013
</p>
<h2 class="mtm">Nous contacter</h2>
<div id="contact" class="autogrid has-gutter">
<a href="https://mamot.fr/@passageenseine" title="Mastodon" alt="Mastodon" target="_blank">
@ -13,7 +21,7 @@
</a>
</div>
<h2>Nos partenaires</h2>
<h2 class="mtm">Nos partenaires</h2>
<div id="sponsors" class="autogrid has-gutter">
<% data.partenaires.each do |k, p| %>
@ -24,5 +32,10 @@
<% end %>
<% end %>
</div>
<p class="mtm">
Icons made by <a href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a>
from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a>
</p>
</div>
</section>

12
source/_infos.erb

@ -5,7 +5,7 @@
<div class="grid-3 has-gutter descriptions">
<div>
<h2>Financement participatif</h2>
<%= svg_image_tag 'icons.svg', :heart, class: 'modal', data: { 'modal-target': :donate } %>
<%= svg_image_tag 'icons.svg', :heart, data: { 'modal-target': :donate } %>
</div>
<div>
<h2>Appel à participation</h2>
@ -30,7 +30,7 @@
</div>
</div>
<div class="hide" data-modal="donate">
<div id="donate" class="hide" data-modal="donate">
<p>
Le festival PSES est entièrement gratuit pour permettre aux plus
grand nombre d’y participer, sans considération de ressources.<br>
@ -103,7 +103,7 @@
</p>
</div>
<div class="hide" data-modal="speaker">
<div id="speaker" class="hide" data-modal="speaker">
<p>
L’appel à participation sera ouvert du 06 janvier au 16 avril.
</p>
@ -120,7 +120,7 @@
</p>
</div>
<div class="hide" data-modal="schedule">
<div id="schedule" class="hide" data-modal="schedule">
<p>
Un peu de patience, voyons !
<br>
@ -150,7 +150,7 @@
<%= image_tag 'plan.png', alt: 'Plan d’accès' %>
</div>
<div class="hide" data-modal="food">
<div id="food" class="hide" data-modal="food">
<p>
Des foods-trucks seront présents tous les midis pendant le festival,
de 11h30 à 15h30.
@ -167,7 +167,7 @@
</p>
</div>
<div class="hide" data-modal="coc">
<div id="coc" class="hide" data-modal="coc">
<p>
Le festival PSES a pour vocation d’être un bon moment pour tou·tes
les participant·es, et non seulement la majorité.

55
source/javascripts/site.js

@ -1,25 +1,44 @@
document.addEventListener('DOMContentLoaded', () => {
const modalBackground = document.querySelector("#modal-background")
// const close = modalBackground.querySelector(".close")
modalBackground.addEventListener("click", () => {
const modals = document.querySelectorAll("[data-modal].show")
modals.forEach((m) => {
m.classList.remove("show")
m.classList.add("hide")
})
modalBackground.classList.remove("show")
})
window.modals = {
init: function () {
this.modalBackground = document.querySelector("#modal-background")
this.closeButton = this.modalBackground.querySelector(".close")
document.querySelectorAll("[data-modal-target]").forEach((e) => {
const target = e.dataset.modalTarget
const modal = document.querySelector(`[data-modal="${target}"]`)
modalBackground.appendChild(modal)
this.modalBackground.addEventListener("click", () => {
const modals = document.querySelectorAll("[data-modal].show")
modals.forEach(m => this.close(m))
this.modalBackground.classList.remove("show")
})
e.addEventListener("click", () => {
modalBackground.classList.add("show")
document.querySelectorAll("[data-modal-target]").forEach(e => {
const target = e.dataset.modalTarget
const modal = this.get(target)
this.modalBackground.appendChild(modal)
e.addEventListener("click", () => this.open(modal))
})
const target = window.location.hash.substr(1)
const modal = this.get(target)
if (modal) this.open(modal)
},
get: function (name) {
return document.querySelector(`[data-modal="${name}"]`)
},
open: function (modal) {
modal.appendChild(this.closeButton)
this.modalBackground.classList.add("show")
modal.classList.remove("hide")
modal.classList.add("show")
})
})
},
close: function (modal) {
modal.classList.remove("show")
modal.classList.add("hide")
this.modalBackground.appendChild(this.closeButton)
}
}
window.modals.init()
})

2
source/layouts/layout.erb

@ -13,7 +13,7 @@
<%= yield %>
<div id="modal-background">
<span class="close">[X]</span>
<span class="close">&times;</span>
</div>
</body>
</html>

2
source/stylesheets/_variables.scss

@ -10,3 +10,5 @@ $link-color-nav: #FF0066;
$link-color-hover-nav: #FF80B2;
$progress: #800000;
$modal-radius: 5rem;

21
source/stylesheets/site.css.scss

@ -122,7 +122,7 @@ section div.descriptions {
margin-top: 3rem;
div {
border: 1px solid $text;
border: 2px solid $text;
border-radius: 1rem;
}
}
@ -176,9 +176,20 @@ section div.descriptions {
}
.close {
background-color: #aaa;
padding: 5px;
position: absolute;
right: 0;
top: 0;
width: 50px;
height: 50px;
text-align: center;
margin: 5px 10px;
font-size: 3rem;
border-radius: $modal-radius;
cursor: pointer;
&:hover {
background-color: #aaa;
}
}
}
@ -233,8 +244,8 @@ progress {
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid $bg;
border-radius: 5rem;
padding: 5rem;
border-radius: $modal-radius;
padding: $modal-radius;
background-color: $text;
transition: opacity linear 500ms, visibility 500ms linear;
overflow: auto;

Loading…
Cancel
Save