Better modal

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>

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é.

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()
 })

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>

source/stylesheets/_variables.scss

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

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;