Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: mobile scroll #1452

Merged
merged 2 commits into from
Jan 19, 2025
Merged

fix: mobile scroll #1452

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b620724
fix: mobile scroll
mfts Jan 19, 2025
bf77d2b
fix: also for horizontal and image
mfts Jan 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 4 additions & 16 deletions components/view/viewer/image-viewer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -323,20 +323,11 @@ export default function ImageViewer({
)}
ref={containerRef}
>
<div
className={cn(
"h-full w-full",
scale > 1 && "overflow-auto",
isMobile && "touch-zoom-container",
)}
>
<div className={cn("h-full w-full", scale > 1 && "overflow-auto")}>
<div
className={cn(
"flex min-h-full w-full items-center justify-center",
isMobile && "touch-action-pinch-zoom",
)}
className="flex min-h-full w-full items-center justify-center"
style={{
transform: isMobile ? "none" : `scale(${scale})`,
transform: `scale(${scale})`,
transition: "transform 0.2s ease-out",
transformOrigin: scale <= 1 ? "center center" : "left top",
minWidth: scale > 1 ? `${100 * scale}%` : "100%",
Expand All @@ -345,10 +336,7 @@ export default function ImageViewer({
>
<div className="relative my-auto flex w-full justify-center">
<img
className={cn(
"!pointer-events-auto max-h-[calc(100dvh-64px)] object-contain",
isMobile && "touch-action-pinch-zoom",
)}
className="!pointer-events-auto max-h-[calc(100dvh-64px)] object-contain"
ref={(ref) => {
imageRefs.current = ref;
if (ref) {
Expand Down
16 changes: 3 additions & 13 deletions components/view/viewer/pages-horizontal-viewer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -590,20 +590,11 @@ export default function PagesHorizontalViewer({
)}
ref={containerRef}
>
<div
className={cn(
"h-full w-full",
scale > 1 && "overflow-auto",
isMobile && "touch-zoom-container",
)}
>
<div className={cn("h-full w-full", scale > 1 && "overflow-auto")}>
<div
className={cn(
"flex min-h-full w-full items-center justify-center",
isMobile && "touch-action-pinch-zoom",
)}
className="flex min-h-full w-full items-center justify-center"
style={{
transform: isMobile ? "none" : `scale(${scale})`,
transform: `scale(${scale})`,
transition: "transform 0.2s ease-out",
transformOrigin: scale <= 1 ? "center center" : "left top",
minWidth: scale > 1 ? `${100 * scale}%` : "100%",
Expand All @@ -626,7 +617,6 @@ export default function PagesHorizontalViewer({
<img
className={cn(
"!pointer-events-auto max-h-[calc(100dvh-64px)] object-contain",
isMobile && "touch-action-pinch-zoom",
)}
ref={(ref) => {
imageRefs.current[index] = ref;
Expand Down
17 changes: 4 additions & 13 deletions components/view/viewer/pages-vertical-viewer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -747,21 +747,15 @@ export default function PagesVerticalViewer({
<div className="flex min-h-full min-w-full justify-center">
<div className="flex w-full max-w-[1400px] justify-center">
<div
className={cn(
"transform-container w-full",
isMobile && "touch-zoom-container",
)}
className="transform-container w-full"
style={{
transform: isMobile ? "none" : `scale(${scale})`,
transform: `scale(${scale})`,
transition: "transform 0.2s ease-out",
transformOrigin: scale <= 1 ? "center top" : "left top",
}}
>
<div
className={cn(
"flex flex-col items-center gap-2",
isMobile && "touch-action-manipulation",
)}
className="flex flex-col items-center gap-2"
onContextMenu={handleContextMenu}
>
{pageNumber <= numPagesWithAccountCreation &&
Expand All @@ -770,10 +764,7 @@ export default function PagesVerticalViewer({
? pages.map((page, index) => (
<div
key={index}
className={cn(
"w-full px-4 md:px-8",
isMobile && "touch-action-pinch-zoom",
)}
className="w-full px-4 md:px-8"
style={{
width: containerWidth
? `${calculateOptimalWidth(containerWidth, page.metadata, isMobile, isTablet)}px`
Expand Down
Loading