rDrama
/
rDrama
9
10
Fork 7
Code Issues Pull Requests Packages Releases Wiki Activity

proper centering of image

master
Aevann 2024-04-06 10:37:45 +02:00
parent 024dddf9d2
commit c15fc73a10
2 changed files with 19 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
files/assets/css/main.css
View File

@ -7688,6 +7688,7 @@ thead {
cursor: pointer;
text-decoration: none !important;
z-index: -1;
position: absolute;
}
#imgnav-next:hover, #imgnav-prev:hover {
@ -7695,16 +7696,24 @@ thead {
border-color: var(--primary) !important;
}
@media (min-width: 768px) {
#imgnav-next {
top: 40%;
right: 0;
}
#imgnav-prev {
top: 40%;
left: 5px;
}
}
@media (max-width: 768px) {
#imgnav-next, #imgnav-prev {
position: absolute;
bottom: 0;
}
#imgnav-next {
bottom: 0;
left: 50%;
}
#imgnav-prev {
bottom: 0;
left: calc(50% - 145px);
}
}

14
files/templates/modals/expanded_image.html
View File

@ -1,19 +1,17 @@
<div class="modal" id="expandImageModal" tabindex="-1">
<a id="imgnav-prev" class="btn btn-primary px-5 py-3 px-md-4 py-md-5 d-none">
<img b class="emoji mirrored" alt=":!marseyyes:" height="30" src="{{SITE_FULL_IMAGES}}/e/marseyyes.webp">
</a>
<div class="modal-dialog modal-dialog-centered">
<a id="imgnav-prev" class="btn btn-primary px-5 py-3 px-md-4 py-md-5 d-none">
<img b class="emoji mirrored" alt=":!marseyyes:" height="30" src="{{SITE_FULL_IMAGES}}/e/marseyyes.webp">
</a>
<div class="modal-body text-center p-0">
<a rel="noopener" target="_blank" id="expanded-image-wrap-link">
<img loading="lazy" alt="expanded image" class="rounded" id="expanded-image">
</a>
</div>
<a id="imgnav-next" class="btn btn-primary px-5 py-3 px-md-4 py-md-5 d-none">
<img b class="emoji" alt=":marseyyes:" height="30" src="{{SITE_FULL_IMAGES}}/e/marseyyes.webp">
</a>
</div>
<a id="imgnav-next" class="btn btn-primary px-5 py-3 px-md-4 py-md-5 d-none">
<img b class="emoji" alt=":marseyyes:" height="30" src="{{SITE_FULL_IMAGES}}/e/marseyyes.webp">
</a>
</div>
<script defer src="{{'js/expanded_image_modal.js' | asset}}"></script>