Mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-02-25 01:08:50 +01:00
Code Issues Projects Releases Packages Wiki Activity

Attempt to fix Firefox keyboard shortcuts bug on navigating media carousel

Browse source
This commit is contained in:
Lim Chee Aun 2023-08-10 21:58:11 +08:00
parent 84d1500331
commit 339b66f42f
2 changed files with 12 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/app.css
View file

@ -913,7 +913,8 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
display: flex; display: flex;
} }
.deck-backdrop .deck.deck-view-full { .deck-backdrop .deck.deck-view-full {
min-width: 100%; /* min-width: 100%; */
width: 100%;
background-image: radial-gradient( background-image: radial-gradient(
circle, circle,
transparent 30em, transparent 30em,
@ -993,7 +994,8 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
.media-modal-container { .media-modal-container {
position: relative; position: relative;
width: 100%; width: 70%;
flex-grow: 1;
background-color: var(--backdrop-solid-color); background-color: var(--backdrop-solid-color);
animation: appear 0.3s var(--timing-function) both; animation: appear 0.3s var(--timing-function) both;
} }
@ -1196,14 +1198,14 @@ body:has(.media-modal-container + .status-deck) .media-post-link {
width: auto; width: auto;
} }
/* ✨ New */ /* ✨ New */
.deck-backdrop > a { /* .deck-backdrop > a {
width: 100%; width: 100%;
flex-grow: 0; flex-grow: 0;
} } */
.deck-backdrop .media-modal-container + .status-deck:not(.deck-view-full) { .deck-backdrop .media-modal-container + .status-deck:not(.deck-view-full) {
/* display: block; */ /* display: block; */
/* width: 350px; */ width: 30%;
min-width: 350px; /* min-width: 350px; */
position: static; position: static;
z-index: 1; z-index: 1;
pointer-events: auto; pointer-events: auto;
@ -2109,8 +2111,8 @@ ul.link-list li a .icon {
transform: translate3d(-5vw, 0, 0); transform: translate3d(-5vw, 0, 0);
} }
.deck-backdrop .deck { .deck-backdrop .deck {
width: 50%; /* width: 50%;
min-width: var(--main-width); min-width: var(--main-width); */
border-left: 1px solid var(--divider-color); border-left: 1px solid var(--divider-color);
} }
.timeline-deck { .timeline-deck {

3
src/components/media-modal.jsx
View file

@ -44,6 +44,7 @@ function MediaModal({
left: scrollLeft, left: scrollLeft,
behavior: differentStatusID ? 'auto' : 'smooth', behavior: differentStatusID ? 'auto' : 'smooth',
}); });
carouselRef.current.focus();
}, [index, statusID]); }, [index, statusID]);
const [showControls, setShowControls] = useState(true); const [showControls, setShowControls] = useState(true);
@ -95,7 +96,7 @@ function MediaModal({
<div class="media-modal-container"> <div class="media-modal-container">
<div <div
ref={carouselRef} ref={carouselRef}
tabIndex="-1" tabIndex="0"
data-swipe-threshold="44" data-swipe-threshold="44"
class="carousel" class="carousel"
onClick={(e) => { onClick={(e) => {