diff --git a/frontend/public/index.html b/frontend/public/index.html
index 795805777ba30c399d8a572f2f19155cf87de849..dd99758118c907b49512ad510a4c311233e60e2e 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/scientia-logo-black.svg" />
- <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <meta name='viewport' content='initial-scale=1, viewport-fit=cover'>
<meta name="theme-color" content="#000000" />
<meta name="description" content="A central dock for EdTech services" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/scientia-logo-black.svg" />
diff --git a/frontend/src/components/App.scss b/frontend/src/components/App.scss
index d8ea01314d69ab57a2649bf27ac13a0695169d43..52bc84f539036219d61db82fccbf63477fff59d7 100644
--- a/frontend/src/components/App.scss
+++ b/frontend/src/components/App.scss
@@ -6,7 +6,7 @@ body {
font-family: "IBM Plex Sans", sans-serif !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
- overflow-y: scroll;
+ -webkit-overflow-scrolling: touch;
}
code {
diff --git a/frontend/src/components/atoms/ModuleCard/index.tsx b/frontend/src/components/atoms/ModuleCard/index.tsx
index 20b81bf96532657e70acc4ddbf7d9e0a3343a118..d66458d7448b18c6beb3dcabe78873932a8d358e 100644
--- a/frontend/src/components/atoms/ModuleCard/index.tsx
+++ b/frontend/src/components/atoms/ModuleCard/index.tsx
@@ -42,7 +42,7 @@ const ModuleCard: React.FC<ModuleCardProps> = ({ module }: ModuleCardProps) => {
textColor = "#000";
}
return (
- <Col xs={12} sm={12} md={6} lg={6} xl={3} style={{ marginTop: "1.875rem" }}>
+ <Col xs={12} sm={12} md={6} lg={6} xl={4} style={{ marginTop: "1.875rem" }}>
<Card
className={classNames(styles.moduleCard)}
as={Link}
diff --git a/frontend/src/components/organisms/LeftBar/style.module.scss b/frontend/src/components/organisms/LeftBar/style.module.scss
index 0f052fe57901bd40ffba927389ef70bf91b1bfdb..077de184ae0645bbdcd598cb2b675079dc035db3 100644
--- a/frontend/src/components/organisms/LeftBar/style.module.scss
+++ b/frontend/src/components/organisms/LeftBar/style.module.scss
@@ -2,25 +2,32 @@
#leftbarWrapper {
position: fixed;
- left: 15.625rem;
- width: 0;
- margin-left: -15.625rem;
- height: calc(100vh - 3.75rem);
- padding-bottom: 1.875rem;
+ visibility: hidden;
+ transform: translateX(-100%);
+ display: block;
+ top: 0;
+ left: 0;
+ width: 250px;
+ height: calc(100vh - 61px);
+
overflow-y: auto;
- overflow-x: hidden;
- overscroll-behavior: contain;
+ overflow-x: hidden;
+
+ -webkit-transition: visibility 0.5s ease-in-out, transform 0.5s ease-in-out;
+ -moz-transition: visibility 0.5s ease-in-out, transform 0.5s ease-in-out;
+ -o-transition: visibility 0.5s ease-in-out, transform 0.5s ease-in-out;
+ transition: visibility 0.5s ease-in-out, transform 0.5s ease-in-out;
+
+ z-index: 5000;
+ margin-top: 61px;
+ padding-bottom: 1.875rem;
background: #fff;
box-shadow: 0 0.125rem 0.625rem 0 rgba(0, 0, 0, 0.1);
- -webkit-transition: all 0.5s ease;
- -moz-transition: all 0.5s ease;
- -o-transition: all 0.5s ease;
- transition: all 0.5s ease;
- z-index: 5000;
}
:global(#wrapper.toggledLeft) #leftbarWrapper {
- width: 15.625rem;
+ visibility: visible;
+ transform: translateX(0);
}
@media (max-width: 62rem) {
diff --git a/frontend/src/components/organisms/RightBar/style.module.scss b/frontend/src/components/organisms/RightBar/style.module.scss
index 88ad794c59dd13056ad46e4fd4bbbaeb0095008e..fc0fd0c429b529f356739350c24ff8c5614b0499 100644
--- a/frontend/src/components/organisms/RightBar/style.module.scss
+++ b/frontend/src/components/organisms/RightBar/style.module.scss
@@ -2,21 +2,27 @@
#rightbarWrapper {
position: fixed;
- right: 15.625rem;
- width: 0;
- margin-right: -15.625rem;
- height: calc(100vh - 3.75rem);
- padding-bottom: 1.875rem;
+ visibility: hidden;
+ transform: translateX(100%);
+ display: block;
+ top: 0;
+ right: 0;
+ width: 250px;
+ height: calc(100vh - 61px);
+
overflow-y: auto;
- overflow-x: hidden;
- overscroll-behavior: contain;
+ overflow-x: hidden;
+
+ -webkit-transition: visibility 0.5s ease-in-out, transform 0.5s ease-in-out;
+ -moz-transition: visibility 0.5s ease-in-out, transform 0.5s ease-in-out;
+ -o-transition: visibility 0.5s ease-in-out, transform 0.5s ease-in-out;
+ transition: visibility 0.5s ease-in-out, transform 0.5s ease-in-out;
+
+ z-index: 5000;
+ margin-top: 61px;
+ padding-bottom: 1.875rem;
background: #fff;
box-shadow: 0 0.125rem 0.625rem 0 rgba(0, 0, 0, 0.1);
- -webkit-transition: all 0.5s ease;
- -moz-transition: all 0.5s ease;
- -o-transition: all 0.5s ease;
- transition: all 0.5s ease;
- z-index: 5000;
}
#rightbarWrapper::-webkit-scrollbar {
@@ -29,7 +35,8 @@
}
:global(#wrapper.toggledRight) #rightbarWrapper {
- width: 15.625rem;
+ visibility: visible;
+ transform: translateX(0);
}
@media (max-width: 62rem) {
diff --git a/frontend/src/components/pages/StandardView/index.tsx b/frontend/src/components/pages/StandardView/index.tsx
index a37f47e7d91279e9df0ecc7a32ef50948b436154..52c443a9a5b186448b9c7ed961c31478bb6d743d 100644
--- a/frontend/src/components/pages/StandardView/index.tsx
+++ b/frontend/src/components/pages/StandardView/index.tsx
@@ -37,7 +37,6 @@ const StandardView: React.FC<StandardViewProps> = ({
toggledRight: toggledRight,
})}
>
- <RightBar />
<Switch>
<Route path="/modules/:id">
<LeftBarModule />
@@ -92,6 +91,7 @@ const StandardView: React.FC<StandardViewProps> = ({
<Route path="/" render={() => <Redirect to="/dashboard" />} />
</Switch>
</Container>
+ <RightBar />
</div>
);
};
diff --git a/frontend/src/components/pages/StandardView/style.scss b/frontend/src/components/pages/StandardView/style.scss
index 35ed38ba7a6449ef8c27e0a02403db16afa68c30..2c963e880dfa895e2ee04aaa9cbe358160dce736 100644
--- a/frontend/src/components/pages/StandardView/style.scss
+++ b/frontend/src/components/pages/StandardView/style.scss
@@ -1,10 +1,10 @@
#wrapper {
- padding-left: 0;
- padding-right: 0;
- -webkit-transition: all 0.5s ease;
- -moz-transition: all 0.5s ease;
- -o-transition: all 0.5s ease;
- transition: all 0.5s ease;
+ padding-left: 0;
+ padding-right: 0;
+ -webkit-transition: all 0.5s ease-in-out;
+ -moz-transition: all 0.5s ease-in-out;
+ -o-transition: all 0.5s ease-in-out;
+ transition: all 0.5s ease-in-out;
z-index: 5050;
}
@@ -16,34 +16,34 @@
width: 100vw;
height: 100vh;
z-index: 500;
- display: block;
- visibility:hidden;
- -webkit-transition: all 0.5s ease;
- -moz-transition: all 0.5s ease;
- -o-transition: all 0.5s ease;
- transition: all 0.5s ease;
+ display: block;
+ visibility: hidden;
+ -webkit-transition: all 0.5s ease-in-out;
+ -moz-transition: all 0.5s ease-in-out;
+ -o-transition: all 0.5s ease-in-out;
+ transition: all 0.5s ease-in-out;
}
@media (min-width: 62rem) {
#wrapper {
- padding-left: 0;
+ padding-left: 0;
padding-right: 0;
}
#wrapper.toggledLeft {
- padding-left: 15.625rem;
- }
-
- #wrapper.toggledRight {
- padding-right: 15.625rem;
+ padding-left: 250px;
+ }
+
+ #wrapper.toggledRight {
+ padding-right: 250px;
}
}
@media (max-width: 62rem) {
- #wrapper.toggledRight #sidenav-overlay,
+ #wrapper.toggledRight #sidenav-overlay,
#wrapper.toggledLeft #sidenav-overlay {
- visibility:visible;
- background-color: rgba(0, 0, 0, 0.3);
+ visibility: visible;
+ background-color: rgba(0, 0, 0, 0.3);
}
}