From 20ab0175d3cfda0d7b2d74f9f692e3144fba7aaa Mon Sep 17 00:00:00 2001
From: Youen Toupin <youen.toupin@youb.fr>
Date: Sun, 3 Oct 2021 22:03:55 +0200
Subject: [PATCH] improved climate zone map modal

---
 simulator/src/app.ts         |  2 +-
 simulator/www/simulator.html | 11 +++++++----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/simulator/src/app.ts b/simulator/src/app.ts
index 1b1b0c9..790f290 100644
--- a/simulator/src/app.ts
+++ b/simulator/src/app.ts
@@ -14,7 +14,7 @@ document.addEventListener('DOMContentLoaded', function() {
 		});
 	});
 	
-	document.querySelectorAll('.modal-close').forEach(elt => {
+	document.querySelectorAll('.modal-close, .modal-card-head .delete').forEach(elt => {
 		elt.addEventListener('click', e => {
 			closest(elt, e => e.classList.contains('modal')).classList.toggle('is-active', false);
 		});
diff --git a/simulator/www/simulator.html b/simulator/www/simulator.html
index e92c00e..6044559 100644
--- a/simulator/www/simulator.html
+++ b/simulator/www/simulator.html
@@ -119,12 +119,15 @@
 		
 		<div id="zones-map-modal" class="modal">
 			<div class="modal-background"></div>
-			<div class="modal-content">
-				<p class="image">
+			<div class="modal-card">
+				<header class="modal-card-head">
+					<p class="modal-card-title">Choisissez votre zone climatique</p>
+					<button class="delete" aria-label="close"></button>
+				</header>
+				<section class="modal-card-body">
 					<svg id="zones-map" width="587" height="550" version="1.0"></svg>
-				</p>
+				</section>
 			</div>
-			<button class="modal-close is-large" aria-label="close"></button>
 		</div>
 		
 		<script type="text/javascript" src="simulator.js"></script>