me/offline-twitter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make image carousel close if user clicks outside it

Browse Source
This commit is contained in:
Alessio 2024-07-14 13:23:07 -07:00
parent ef15e8a306
commit b4a4084b48
2 changed files with 15 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
internal/webserver/static/styles.css
View File

@ -393,7 +393,12 @@ main {
box-shadow: 0 0 1em var(--color-twitter-blue);
outline: none;
overflow: visible;
padding: 1.4em;
padding: 0;
line-height: 0;
.image-carousel__padding {
padding: 1.4em;
}
&::backdrop {
background: hsla(204, 87%, 73%, 0.3); /* based on --color-twitter-blue-light */

12
internal/webserver/tpl/includes/base.tpl
View File

@ -39,9 +39,15 @@
<main>
{{template "main" .}}
</main>
<dialog id="image_carousel" class="image-carousel">
<a class="button image-carousel__close-button" onclick="image_carousel.close()">X</a>
<img class="image-carousel__active-image" src="">
<dialog
id="image_carousel"
class="image-carousel"
onmousedown="event.button == 0 && event.target==this && this.close()"
>
<div class="image-carousel__padding">
<a class="button image-carousel__close-button" onclick="image_carousel.close()">X</a>
<img class="image-carousel__active-image" src="">
</div>
</dialog>
<div class="toasts" id="toasts">
</div>