Add button on mobile to redirect to desktop site

src/components/pages/Timeline/components/TimelineMobile/index.tsx

@@ -6,17 +6,19 @@ import Container from "react-bootstrap/esm/Container";
 import classNames from "classnames";
 import ModuleHeading from "../ModuleHeading";
 import MyBreadcrumbs from "components/atoms/MyBreadcrumbs";
+import Button from "react-bootstrap/esm/Button";
 
 export interface Props {
   modulesList: Module[];
   term: Term;
-  setTerm: React.Dispatch<React.SetStateAction<Term>>;
+	setTerm: React.Dispatch<React.SetStateAction<Term>>;
+	openDesktopSite: () => void;
 }
 
-const TimelineMobile: React.FC<Props> = ({ modulesList, term, setTerm }) => {
+const TimelineMobile: React.FC<Props> = ({ modulesList, term, setTerm, openDesktopSite }) => {
   return (
     <Container className={classNames("pageContainer")}>
-			<MyBreadcrumbs/>
+      <MyBreadcrumbs />
       <TermSwitcher term={term} setTerm={setTerm} />
       {modulesList.map(({ code, title }) => (
         <ModuleHeading
@@ -26,6 +28,9 @@ const TimelineMobile: React.FC<Props> = ({ modulesList, term, setTerm }) => {
           title={title}
         />
       ))}
+      <Button variant="secondary" onClick={openDesktopSite} className={styles.inputButton}>
+        Desktop Site
+      </Button>
     </Container>
   );
 };

src/components/pages/Timeline/components/TimelineMobile/style.module.scss

+.inputButton.focus,
+.inputButton:focus {
+  background: var(--primary-button);
+  color: var(--primary-button-text);
+  box-shadow: none;
+}
+
+.inputButton {
+  margin-bottom: 0.625rem;
+  color: var(--primary-button-text);
+  background: var(--primary-button);
+  font-weight: 500;
+  font-size: 1.05rem;
+  letter-spacing: 0;
+  border-width: 0rem;
+  line-height: 1.375rem;
+  height: 2.25rem;
+  border-radius: 0.5rem !important;
+  transition: 0.2s background;
+  -webkit-transition: 0.2s background;
+  -moz-transition: 0.2s background;
+  text-align: center;
+  margin-top: 1.875rem;
+  width: 100%;
+}
+
+.inputButton.active,
+.inputButton:active {
+  background: var(--primary-button-active) !important;
+  color: var(--primary-button-text-active) !important;
+  font-weight: 500;
+  border-width: 0rem;
+  height: 2.25rem;
+  line-height: 1.375rem;
+}
+
+.inputButton:hover {
+  background-color: var(--primary-button-hover);
+  color: var(--primary-button-text);
+  box-shadow: none !important;
+}

src/components/pages/Timeline/index.tsx

@@ -40,6 +40,7 @@ interface TimelineState {
   isLoaded: boolean;
   activeEvent?: TimelineEvent;
   showEventModal: boolean;
+  showMobileOnSmallScreens: boolean;
   eventsData: TimelineEvent[];
 }
 
@@ -51,6 +52,7 @@ class Timeline extends React.Component<TimelineProps, TimelineState> {
       isLoaded: false,
       modulesList: [],
       showEventModal: false,
+      showMobileOnSmallScreens: true,
       eventsData: [],
     };
   }
@@ -90,6 +92,9 @@ class Timeline extends React.Component<TimelineProps, TimelineState> {
 
   componentWillUnmount() {
     this.props.revertSideBar();
+    document.documentElement.style.fontSize = `${
+      localStorage.getItem("interfaceSize") || "90"
+    }%`;
   }
 
   dateToColumn(day: Date, termStart: Date) {
@@ -121,12 +126,16 @@ class Timeline extends React.Component<TimelineProps, TimelineState> {
       terms.includes(this.props.term)
     );
 
-    if (window.innerWidth <= 760) {
+    if (window.innerWidth <= 760 && this.state.showMobileOnSmallScreens) {
       return (
         <TimelineMobile
           term={this.props.term}
           setTerm={this.props.setTerm}
           modulesList={currModules}
+          openDesktopSite={() => {
+            this.setState({ showMobileOnSmallScreens: false });
+            document.documentElement.style.fontSize = "40%";
+          }}
         />
       );
     }