Modal event

Author: sagitaz

desktop/css/events.css

@@ -87,18 +87,25 @@
 
 .modal-header {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
+  flex-direction: column;
+  align-items: flex-start;
+  position: relative;
+  width: 100%;
   margin-bottom: 20px;
 }
 
 .modal-header h2 {
   flex: 1;
   margin: 0;
-  width: 90%;
+  width: 100%;
+  text-align: left;
+  margin-top: 40px;
 }
 
 .button-container {
+  position: absolute;
+  top: 10px;
+  right: 10px;
   display: flex;
   gap: 10px;
 }
@@ -420,6 +427,13 @@
   border-bottom-right-radius: 10px;
 }
 
+#mediaTitle {
+  font-size: 24px;
+  font-weight: bold;
+  width: 100%;
+  text-align: left;
+}
+
 .limited-text {
   display: inline-block;
   font-size: 18px;

desktop/php/event.modal.template.php

@@ -1,29 +1,28 @@
 <!-- event modal template -->
 <div id="mediaModal" class="modal">
-    <div class="modal-content">
-      <span class="close">&times;</span>
-
-      <div class="modal-header">
-        <h2>
-        	<div id="mediaTitle"></div>
-        	<br/>
-        	<div id="mediaDescription" class="limited-text"></div>
-        </h2>
-        <div class="button-container">
-          <button id="showVideo" class="hidden-btn custom-button">Voir la vidéo</button>
-          <button id="showImage" class="hidden-btn custom-button">Voir la capture</button><br/>
-        </div>
+  <div class="modal-content">
+    <div class="modal-header">
+      <h2>
+        <div id="mediaTitle"></div>
+        <br />
+        <div id="mediaDescription" class="limited-text"></div>
+      </h2>
+      <div class="button-container">
+        <button id="showVideo" class="hidden-btn custom-button">Voir la vidéo</button>
+        <button id="showImage" class="hidden-btn custom-button">Voir la capture</button><br />
+        <span class="close">&times;</span>
       </div>
-      <div class="media-container">
-        <div class="video-container active">
-          <video id="videoPlayer" width="100%" controls autoplay>
-            <source id="videoSource" src="" type="video/mp4">
-            Votre navigateur ne supporte pas la balise vidéo.
-          </video>
-        </div>
-        <div class="image-container">
-          <img id="snapshotImage" src="" alt="Snapshot" width="100%">
-        </div>
+    </div>
+    <div class="media-container">
+      <div class="video-container active">
+        <video id="videoPlayer" width="100%" controls autoplay>
+          <source id="videoSource" src="" type="video/mp4">
+          Votre navigateur ne supporte pas la balise vidéo.
+        </video>
+      </div>
+      <div class="image-container">
+        <img id="snapshotImage" src="" alt="Snapshot" width="100%">
       </div>
     </div>
+  </div>
 </div>