From 32154354948a8a3da630271f89cd981b8f24bd4d Mon Sep 17 00:00:00 2001
From: Thomas Rogers <podginator@gmail.com>
Date: Sat, 14 Dec 2024 14:45:31 +0100
Subject: [PATCH] Make changes to PDF for mobile

---
 .../web/components/patterns/HighlightBar.tsx  |  1 +
 .../templates/article/pdf.js/PdfToolbar.tsx   |  6 +++++
 .../templates/article/pdf.js/PdfViewer.tsx    | 23 +++++++++++--------
 .../templates/article/pdf.js/Style.tsx        |  6 +++++
 4 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/packages/web/components/patterns/HighlightBar.tsx b/packages/web/components/patterns/HighlightBar.tsx
index 1af77a63b..5e21a393e 100644
--- a/packages/web/components/patterns/HighlightBar.tsx
+++ b/packages/web/components/patterns/HighlightBar.tsx
@@ -48,6 +48,7 @@ export function HighlightBar(props: HighlightBarProps): JSX.Element {
         zIndex: 999,
         ...(props.displayAtBottom && {
           bottom: 'calc(38px + env(safe-area-inset-bottom, 40px))',
+          left: `calc(50% - ${(props.isNewHighlight ? 295 : 323) / 2}px)`
         }),
         ...(props.displayAtBottom && {
           '@smDown': {
diff --git a/packages/web/components/templates/article/pdf.js/PdfToolbar.tsx b/packages/web/components/templates/article/pdf.js/PdfToolbar.tsx
index c5b0dee66..1c83f5abc 100644
--- a/packages/web/components/templates/article/pdf.js/PdfToolbar.tsx
+++ b/packages/web/components/templates/article/pdf.js/PdfToolbar.tsx
@@ -119,6 +119,9 @@ export default function PdfToolbar(props: PdfArticleToolbarProps): JSX.Element {
             css={{
               borderTopLeftRadius: '10px',
               borderBottomLeftRadius: '10px',
+              '@media only screen and (min-device-width: 20em) and (max-device-width: 30em)': {
+                display: 'none'
+              }
             }}
           >
             <CaretLeft />
@@ -135,6 +138,9 @@ export default function PdfToolbar(props: PdfArticleToolbarProps): JSX.Element {
               borderTopRightRadius: '10px',
               borderBottomRightRadius: '10px',
               backgroundColor: '$thBackground5',
+              '@media only screen and (min-device-width: 20em) and (max-device-width: 30em)': {
+                display: 'none'
+              }
             }}
           >
             <CaretRight />
diff --git a/packages/web/components/templates/article/pdf.js/PdfViewer.tsx b/packages/web/components/templates/article/pdf.js/PdfViewer.tsx
index dcc888cab..84a012c26 100644
--- a/packages/web/components/templates/article/pdf.js/PdfViewer.tsx
+++ b/packages/web/components/templates/article/pdf.js/PdfViewer.tsx
@@ -307,15 +307,21 @@ export default function PdfViewer(props: PdfArticleContainerProps) {
     }
 
     if (props.containerRef?.current) {
-      props.containerRef.current.addEventListener(
-        'mouseup',
-        detectHighlightedText
-      )
+      const isTouch = isTouchScreenDevice()
 
-      props.containerRef.current.addEventListener(
-        'touchend',
-        detectHighlightedText
-      )
+      if (!isTouch) {
+        props.containerRef.current.addEventListener(
+          'mouseup',
+          detectHighlightedText
+        )
+      }
+
+      if (isTouch) {
+        props.containerRef.current.addEventListener(
+          'touchend',
+          detectHighlightedText
+        )
+      }
     }
 
     return () => {
@@ -384,7 +390,6 @@ export default function PdfViewer(props: PdfArticleContainerProps) {
               props.containerRef.current.clientHeight) /
             props.containerRef.current.scrollHeight
 
-          console.log(currentPageNum, props.saveLatestPage)
           await props.articleMutations.articleReadingProgressMutation({
             id: props.article.id,
             readingProgressTopPercent: bottomProgress * 100,
diff --git a/packages/web/components/templates/article/pdf.js/Style.tsx b/packages/web/components/templates/article/pdf.js/Style.tsx
index 463533e1b..154f128f0 100644
--- a/packages/web/components/templates/article/pdf.js/Style.tsx
+++ b/packages/web/components/templates/article/pdf.js/Style.tsx
@@ -35,6 +35,12 @@ export const PageInput = styled('input', {
   borderLeft: '0px',
   borderRight: '1px',
   backgroundColor: '$thBackground5',
+  '@media only screen and (min-device-width: 20em) and (max-device-width: 30em)': {
+    paddingLeft: '1px',
+    paddingRight: '1px',
+    width: '20px',
+    border: '0px',
+  }
 })
 
 export const SearchInput = styled('input', {