mirrors/takahe
1
1
Fork 0
mirror of https://github.com/jointakahe/takahe.git synced 2024-11-19 13:51:01 +00:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source
This commit is contained in:
TAKAHASHI Shuuji 2023-01-09 04:20:33 +09:00 committed by GitHub
parent d51f2883aa
commit c5c0e2bfe5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 5 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
static/css/style.css
View file

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

2
templates/activities/_modal_image.html → templates/activities/_image_viewer.html
View file

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

2
templates/base.html
View file

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

2
templates/base_plain.html
View file

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