From c5c0e2bfe55aca1397e1c5332c911ddf0df8618b Mon Sep 17 00:00:00 2001
From: TAKAHASHI Shuuji <shuuji3@gmail.com>
Date: Mon, 9 Jan 2023 04:20:33 +0900
Subject: [PATCH] Fix no opacity transition issue of image viewer when first
 click (#374)

---
 static/css/style.css                                           | 3 ++-
 templates/activities/{_modal_image.html => _image_viewer.html} | 2 +-
 templates/base.html                                            | 2 +-
 templates/base_plain.html                                      | 2 +-
 4 files changed, 5 insertions(+), 4 deletions(-)
 rename templates/activities/{_modal_image.html => _image_viewer.html} (93%)

diff --git a/static/css/style.css b/static/css/style.css
index 760a1e8..9c30d7b 100644
--- a/static/css/style.css
+++ b/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;
 }
 
diff --git a/templates/activities/_modal_image.html b/templates/activities/_image_viewer.html
similarity index 93%
rename from templates/activities/_modal_image.html
rename to templates/activities/_image_viewer.html
index 9aff88c..14d9c73 100644
--- a/templates/activities/_modal_image.html
+++ b/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>
diff --git a/templates/base.html b/templates/base.html
index 28014e7..3ebc50b 100644
--- a/templates/base.html
+++ b/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">
diff --git a/templates/base_plain.html b/templates/base_plain.html
index e5496b4..861a377 100644
--- a/templates/base_plain.html
+++ b/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>