Merge pull request #332 from EscolaLMS/feature/SPRAW-75

Fix mobile view.
EscolaLMS · Mar 5, 2024 · a9ad461 · a9ad461
2 parents 3e274ba + 65f6e1e
commit a9ad461
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -62,7 +62,7 @@
   },
   "homepage": "https://escolalms.github.io/components",
   "dependencies": {
-    "@escolalms/h5p-react": "^0.2.11",
+    "@escolalms/h5p-react": "^0.2.18",
     "@escolalms/sdk": "^0.5.21",
     "chroma-js": "^2.4.2",
     "date-fns": "^2.28.0",
@@ -80,9 +80,9 @@
     "react-i18next": "^12.2.0",
     "react-icons": "^4.8.0",
     "react-markdown": "^8.0.7",
-    "react-pdf": "^5.7.2",
+    "react-pdf": "^7.7.1",
     "react-photoswipe-gallery": "^2.2.7",
-    "react-player": "^2.12.0",
+    "react-player": "^2.15.1",
     "react-slick": "^0.29.0",
     "react-tiny-oembed": "^1.1.0",
     "react-transition-group": "^4.4.5",

diff --git a/src/components/molecules/CourseTopNav/CourseTopNav.tsx b/src/components/molecules/CourseTopNav/CourseTopNav.tsx
@@ -133,7 +133,7 @@ export const CourseTopNav: React.FC<CourseTopNavProps> = (props) => {
           disabled={!hasNext || allButtonsDisabled}
           aria-label={t<string>("Actions.ShowNext")}
         >
-          {!mobile && <>{t<string>("CourseTopNav.next")} </>}
+          {t<string>("CourseTopNav.next")}
           <Icon name="chevronRight" />
         </Button>
       );
@@ -171,7 +171,7 @@ export const CourseTopNav: React.FC<CourseTopNavProps> = (props) => {
       );
     }
     return <></>;
-  }, [isFinished, t, onFinish, mobile, isLast, allButtonsDisabled]);
+  }, [isFinished, t, onFinish, isLast, allButtonsDisabled]);
 
   const renderNoteButton = React.useCallback(() => {
     return (
@@ -186,7 +186,7 @@ export const CourseTopNav: React.FC<CourseTopNavProps> = (props) => {
         {t("CourseTopNav.addNote")}
       </Button>
     );
-  }, [mobile, t, setShowNoteModal, allButtonsDisabled]);
+  }, [t, setShowNoteModal, allButtonsDisabled]);
 
   const renderBookmarkButton = React.useCallback(() => {
     return (
@@ -201,7 +201,7 @@ export const CourseTopNav: React.FC<CourseTopNavProps> = (props) => {
         {t(`CourseTopNav.${bookmarkBtnText}`)}
       </Button>
     );
-  }, [mobile, onBookmarkClick, bookmarkBtnText, allButtonsDisabled]);
+  }, [onBookmarkClick, bookmarkBtnText, allButtonsDisabled]);
 
   return (
     <>

diff --git a/src/components/organisms/CourseAgenda/_components/CourseAgendaLesson/index.tsx b/src/components/organisms/CourseAgenda/_components/CourseAgendaLesson/index.tsx
@@ -31,6 +31,7 @@ export const CourseAgendaLesson: React.FC<CourseAgendaLessonProps> = ({
     finishedTopicIds,
     currentLesson,
     currentLessonParentLessonsIds,
+    isMobile,
   } = useCourseAgendaContext();
 
   const [open, setOpen] = useState(defaultOpen);
@@ -78,7 +79,7 @@ export const CourseAgendaLesson: React.FC<CourseAgendaLessonProps> = ({
     <StyledLessonItem
       className={`lesson__item ${open ? "open" : "closed"} ${
         isAncestor && !isRootAncestor && open ? "full-border" : ""
-      } ${!isSubLesson ? "bottom-border" : ""}`}
+      } ${!isSubLesson ? "bottom-border" : ""} ${isMobile ? 'mobile' : ''}`}
       aria-label={`${t<string>("Course.Lesson")} ${index + 1}`}
     >
       <Header

diff --git a/src/components/organisms/CourseAgenda/_components/CourseAgendaLesson/styles.ts b/src/components/organisms/CourseAgenda/_components/CourseAgendaLesson/styles.ts
@@ -18,6 +18,10 @@ export const StyledLessonItem = styled.li`
 
   &.bottom-border {
     border-bottom: 1px solid ${({ theme }) => theme.gray3};
+
+    &.mobile {
+      padding: 5px 25px;
+    }
   }
 
   .duration {
@@ -70,7 +74,6 @@ export const StyledLessonItem = styled.li`
     }
 
     .lesson__title {
-      font-size: 14px;
       color: ${(props) => props.theme.gray1};
       margin: 0;
       font-weight: bold;

diff --git a/src/components/organisms/CourseAgenda/_components/context.tsx b/src/components/organisms/CourseAgenda/_components/context.tsx
@@ -16,6 +16,7 @@ interface SharedContextData {
   onMarkFinished: (topic: API.Topic) => void;
   onTopicClick: (topic: API.Topic) => void;
   onCourseFinished: () => void;
+  isMobile?: boolean;
 }
 
 interface CourseAgendaContextData extends SharedContextData {
@@ -49,6 +50,7 @@ const CourseAgendaContext = React.createContext<CourseAgendaContextData>({
   onMarkFinished: () => console.warn("INITIAL STATE!"),
   onTopicClick: () => console.warn("INITIAL STATE!"),
   onCourseFinished: () => console.warn("INITIAL STATE!"),
+  isMobile: false,
 });
 
 export const useCourseAgendaContext = () => useContext(CourseAgendaContext);
@@ -71,6 +73,7 @@ export const CourseAgendaContextProvider: React.FC<
   onTopicClick,
   onMarkFinished,
   onCourseFinished,
+  isMobile,
 }) => {
   const flatTopics = useMemo(() => getFlatTopics(lessons), [lessons]);
 
@@ -177,6 +180,7 @@ export const CourseAgendaContextProvider: React.FC<
         onMarkFinished,
         onTopicClick,
         onCourseFinished,
+        isMobile,
       }}
     >
       {children}

diff --git a/src/components/players/PdfPlayer/PdfPlayer.tsx b/src/components/players/PdfPlayer/PdfPlayer.tsx
@@ -4,6 +4,8 @@ import { Document, Page, pdfjs } from "react-pdf";
 import { Button, Text } from "../../..";
 import { useTranslation } from "react-i18next";
 import { ExtendableStyledComponent } from "types/component";
+import 'react-pdf/dist/Page/AnnotationLayer.css';
+import 'react-pdf/dist/Page/TextLayer.css';
 
 interface PdfPlayerProps extends ExtendableStyledComponent {
   url: string;