From 06977855aa8252259e03f4a752af0b69b3431a4a Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon@deblan.fr>
Date: Sun, 22 Mar 2020 20:10:01 +0100
Subject: [PATCH] improve ui

---
 public/assets/css/app.css  | 9 +++++++++
 public/assets/js/app.js    | 5 +++++
 templates/events.html.twig | 4 ++--
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/public/assets/css/app.css b/public/assets/css/app.css
index 1ef2c83..5921e72 100644
--- a/public/assets/css/app.css
+++ b/public/assets/css/app.css
@@ -27,6 +27,15 @@
     width: 100%;
 }
 
+.modal-movie .modal-content {
+    width: 95%;
+    max-width: 1280px;
+}
+
+.movie {
+    width: 100%;
+}
+
 @media screen and (max-width: 1024px) {
     .snapshot-link {
         width: 49%;
diff --git a/public/assets/js/app.js b/public/assets/js/app.js
index 140a657..9938c1c 100644
--- a/public/assets/js/app.js
+++ b/public/assets/js/app.js
@@ -91,9 +91,14 @@ var SnapshotEvent = function() {
         link.addEventListener('click', function(e) {
             e.preventDefault();
             view.innerHTML = template.innerHTML.replace('{src}', link.getAttribute('href'));
+
             view.querySelector('.modal-close').addEventListener('click', function() {
                 view.innerHTML = '';
             }, false);
+
+            view.querySelector('.modal-background').addEventListener('click', function() {
+                view.innerHTML = '';
+            }, false);
         });
     });
 }
diff --git a/templates/events.html.twig b/templates/events.html.twig
index 2c11e86..8ef4e5e 100644
--- a/templates/events.html.twig
+++ b/templates/events.html.twig
@@ -26,10 +26,10 @@
     <div id="snapshot-view"></div>
 
     <template id="snapshot-template">
-        <div class="modal is-active">
+        <div class="modal is-active modal-movie">
             <div class="modal-background"></div>
             <div class="modal-content" controls>
-                <video controls class="image">
+                <video controls class="image movie">
                     <source src="{src}" type="video/mp4" />
                 </video>
             </div>