From 2870c50725d308dda02e4a47fea62817e3c13cb4 Mon Sep 17 00:00:00 2001
From: Sudarshan Sreeram <sudarshan.sreeram19@imperial.ac.uk>
Date: Tue, 11 Aug 2020 00:56:58 +0530
Subject: [PATCH] Fix and update the left and right sidebars
Note: this commit features extensive changes to the behavior of the
sidebar and how it's impelmented. As a result, the animation bug in the right
and left sidebars was fixed.
---
frontend/public/index.html | 2 +-
frontend/src/components/App.scss | 2 +-
.../src/components/atoms/ModuleCard/index.tsx | 2 +-
.../organisms/LeftBar/style.module.scss | 33 +++++++++------
.../organisms/RightBar/style.module.scss | 33 +++++++++------
.../components/pages/StandardView/index.tsx | 2 +-
.../components/pages/StandardView/style.scss | 42 +++++++++----------
7 files changed, 65 insertions(+), 51 deletions(-)
diff --git a/frontend/public/index.html b/frontend/public/index.html
index 795805777..dd9975811 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 d8ea01314..52bc84f53 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 20b81bf96..d66458d74 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 0f052fe57..077de184a 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 88ad794c5..fc0fd0c42 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 a37f47e7d..52c443a9a 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 35ed38ba7..2c963e880 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);
}
}
--
GitLab