Fix no opacity transition issue of image viewer when first click (#374)

static/css/style.css

@@ -1706,6 +1706,7 @@ form .post {
 
 /* Image viewer */
 #image-viewer {
+    display: none;
     flex-direction: column;
     justify-content: center;
     align-items: center;
@@ -1715,8 +1716,8 @@ form .post {
     margin: 0;
     width: 100dvw;
     height: 100dvh;
+    opacity: 0;
     background: rgb(0 0 0 / 75%);
-    transition: opacity 350ms;
     z-index: 100;
 }
 

templates/activities/_image_viewer.html

@@ -23,7 +23,7 @@
         set <#image-viewer figcaption />'s textContent to ''
     end
 </script>
-<figure id="image-viewer" style="display: none" _="on click imageviewer.close()">
+<figure id="image-viewer" _="on click imageviewer.close()">
     <picture>
         <img src="" alt=""/>
     </picture>

templates/base.html

@@ -73,7 +73,7 @@
         </header>
 
         {% block full_content %}
-            {% include 'activities/_modal_image.html' %}
+            {% include 'activities/_image_viewer.html' %}
             {% block pre_content %}
             {% endblock %}
             <div class="columns">

templates/base_plain.html

@@ -27,7 +27,7 @@
     </header>
 
     <div id="main-content">
-        {% include "activities/_modal_image.html" %}
+        {% include "activities/_image_viewer.html" %}
         {% block content %}
         {% endblock %}
     </div>