Aout d'une image sur le modal

Fix #257

src/agenda_culturel/static/js/modal.js

@@ -34,11 +34,17 @@ const openModal = (modal, back=true) => {
   }
   setTimeout(function() {
     visibleModal = modal;
-  }, 500);
+
+    console.log("ici");
+    const mask = visibleModal.querySelector(".h-mask");
+    mask.classList.add("visible");
+  }, 250);
 };
 
 const hideModal = (modal) => {
   if (modal != null) {
+    const mask = visibleModal.querySelector(".h-mask");
+    mask.classList.remove("visible");
     visibleModal = null;
     document.documentElement.style.removeProperty("--scrollbar-width");
     modal.removeAttribute("open");

src/agenda_culturel/static/style.scss

@@ -44,6 +44,9 @@ $enable-responsive-typography: true;
     // Modal (<dialog>)
     --modal-overlay-backdrop-filter: blur(0.05rem);
   
+    --background-color-transparent: color-mix(in srgb, var(--background-color), transparent 30%);
+
+    --background-color-transparent-light: color-mix(in srgb, var(--background-color), transparent 80%);
 }
 
 
@@ -1705,3 +1708,24 @@ label.required::after {
         }
     }
 }
+.h-image {
+    background-repeat: no-repeat;  
+    background-size: cover;
+    background-position: center, center;
+}
+
+dialog {
+    .h-mask {
+        background-color: var(--background-color);
+        margin: calc(var(--spacing) * -1.5);
+        padding: calc(var(--spacing) * 1.5);
+    }
+    .h-mask.visible {
+        background-color: var(--background-color-transparent);
+        transition: background-color .8s linear;
+    }
+    .h-mask.visible:hover {
+        background-color: var(--background-color-transparent-light);
+    }
+}
+

src/agenda_culturel/templates/agenda_culturel/page-week.html

@@ -96,7 +96,12 @@
                     {{ event|tw_badge }} 
                     <dialog id="event-{{ event.id }}">
                         <article>
-                            <header>
+                            {% if event.has_image_url %}
+                            <header style="background: url({{ event.get_image_url }});" class="h-image">
+                            {% else %}
+                            <header class="cat-{{ event.category.pk }}">
+                            {% endif %}
+                            <div class="h-mask">
                                 <a href="#event-{{ event.id }}" 
                                     aria-label="Fermer" 
                                     class="close" 
@@ -128,6 +133,7 @@
                                         {% endif %}
                                         {% if event.end_time %} {% if not event.end_day|date|frdate or event.end_day == event.start_day %}jusqu'à{% endif %} {{ event.end_time }}{% endif %}
                                     </p>
+                                </div>
                             </header>
                         
                             <div class="body-fixed">{{ event.description |linebreaks }}</div>

src/agenda_culturel/templatetags/cat_extra.py

@@ -86,12 +86,6 @@ def css_categories():
             )
             result += "}"
 
-            result += "*:hover>." + c["css_class"] + " {"
-            result += background_color_adjust_color(
-                adjust_lightness_saturation(c["color"], 0.02, 1.0)
-            )
-            result += "}"
-
             result += "." + c["css_class"] + ".circ-cat, "
             result += "form ." + c["css_class"] + ", "
             result += ".selected ." + c["css_class"] + " {"