mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2024-12-18 10:11:47 +03:00
Code Issues Projects Releases Packages Wiki Activity

Manage to make the top carousel controls hide-able too

Browse source
This commit is contained in:
Lim Chee Aun 2022-12-10 23:39:12 +08:00
parent 02816831cb
commit b69d9f3fa8
2 changed files with 20 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/app.css
View file

@ -339,9 +339,11 @@ a.hashtag {
gap: 8px; gap: 8px;
justify-content: space-between; justify-content: space-between;
text-align: center; text-align: center;
pointer-events: none;
} }
button.carousel-button { button.carousel-button {
pointer-events: auto;
font-weight: bold; font-weight: bold;
color: var(--link-color); color: var(--link-color);
} }
@ -367,12 +369,19 @@ button.carousel-dot.active {
pointer-events: none; pointer-events: none;
} }
@media (hover: hover) { @media (hover: hover) {
.carousel-top-controls {
transform: translateY(-100%);
transition: transform 0.2s ease-in-out;
}
.carousel-controls { .carousel-controls {
transform: translateY(100%); transform: translateY(100%);
transition: transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out;
} }
.carousel:hover + .carousel-controls, .carousel:hover + .carousel-top-controls,
.carousel:hover + .carousel-top-controls + .carousel-controls,
.carousel-top-controls:hover,
.carousel-controls:hover, .carousel-controls:hover,
.carousel-top-controls:focus-within,
.carousel-controls:focus-within { .carousel-controls:focus-within {
transform: translateY(0); transform: translateY(0);
} }

20
src/components/status.jsx
View file

@ -785,16 +785,6 @@ function Status({ statusID, status, withinContext, size = 'm', skeleton }) {
</div> </div>
{showMediaModal !== false && ( {showMediaModal !== false && (
<Modal> <Modal>
<div class="carousel-top-controls">
<span />
<button
type="button"
class="carousel-button plain"
onClick={() => setShowMediaModal(false)}
>
<Icon icon="x" />
</button>
</div>
<div <div
class="carousel" class="carousel"
onClick={(e) => { onClick={(e) => {
@ -818,6 +808,16 @@ function Status({ statusID, status, withinContext, size = 'm', skeleton }) {
</div> </div>
))} ))}
</div> </div>
<div class="carousel-top-controls">
<span />
<button
type="button"
class="carousel-button plain"
onClick={() => setShowMediaModal(false)}
>
<Icon icon="x" />
</button>
</div>
{mediaAttachments?.length > 1 && ( {mediaAttachments?.length > 1 && (
<div class="carousel-controls"> <div class="carousel-controls">
<button <button