Carousel very buggy on mobile. Add close button.

This commit is contained in:
Lim Chee Aun 2022-12-10 22:27:00 +08:00
parent 5797b9bc38
commit 80b3432ccb
2 changed files with 29 additions and 5 deletions

View file

@ -325,16 +325,22 @@ a.hashtag {
max-height: 100vh;
}
.carousel-top-controls {
top: 0;
}
.carousel-controls {
bottom: 0;
}
:is(.carousel-top-controls, .carousel-controls) {
position: fixed;
width: 100%;
bottom: 0;
text-align: center;
padding: 32px;
padding: 16px;
display: flex;
gap: 8px;
justify-content: space-between;
text-align: center;
}
button.carousel-button {
font-weight: bold;
color: var(--link-color);
@ -460,4 +466,7 @@ button.carousel-dot.active {
.box {
padding: 32px;
}
:is(.carousel-top-controls, .carousel-controls) {
padding: 32px;
}
}

View file

@ -785,10 +785,25 @@ function Status({ statusID, status, withinContext, size = 'm', skeleton }) {
</div>
{showMediaModal !== false && (
<Modal>
<div class="carousel-top-controls">
<span />
<button
type="button"
class="carousel-button plain"
onClick={() => setShowMediaModal(false)}
>
<Icon icon="x" />
</button>
</div>
<div
class="carousel"
onClick={() => {
setShowMediaModal(false);
onClick={(e) => {
if (
e.target.classList.contains('carousel-item') ||
e.target.classList.contains('media')
) {
setShowMediaModal(false);
}
}}
tabindex="0"
>