mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2024-12-18 07:12:52 +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;
justify-content: space-between;
text-align: center;
pointer-events: none;
}
button.carousel-button {
pointer-events: auto;
font-weight: bold;
color: var(--link-color);
}
@ -367,12 +369,19 @@ button.carousel-dot.active {
pointer-events: none;
}
@media (hover: hover) {
.carousel-top-controls {
transform: translateY(-100%);
transition: transform 0.2s ease-in-out;
}
.carousel-controls {
transform: translateY(100%);
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-top-controls:focus-within,
.carousel-controls:focus-within {
transform: translateY(0);
}

20
src/components/status.jsx
View file

@ -785,16 +785,6 @@ 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={(e) => {
@ -818,6 +808,16 @@ function Status({ statusID, status, withinContext, size = 'm', skeleton }) {
</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 && (
<div class="carousel-controls">
<button