Skip to content
Snippets Groups Projects
Commit 2870c507 authored by Sreeram, Sudarshan's avatar Sreeram, Sudarshan :carrot:
Browse files

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.
parent 3766d14c
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 65 additions and 51 deletions
frontend/public/index.html
+ 1
− 1
View file @ 2870c507
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/scientia-logo-black.svg" /> <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="theme-color" content="#000000" />
<meta name="description" content="A central dock for EdTech services" /> <meta name="description" content="A central dock for EdTech services" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/scientia-logo-black.svg" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/scientia-logo-black.svg" />
......
frontend/src/components/App.scss
+ 1
− 1
View file @ 2870c507
...@@ -6,7 +6,7 @@ body { ...@@ -6,7 +6,7 @@ body {
font-family: "IBM Plex Sans", sans-serif !important; font-family: "IBM Plex Sans", sans-serif !important;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
overflow-y: scroll; -webkit-overflow-scrolling: touch;
} }
code { code {
......
frontend/src/components/atoms/ModuleCard/index.tsx
+ 1
− 1
View file @ 2870c507
...@@ -42,7 +42,7 @@ const ModuleCard: React.FC<ModuleCardProps> = ({ module }: ModuleCardProps) => { ...@@ -42,7 +42,7 @@ const ModuleCard: React.FC<ModuleCardProps> = ({ module }: ModuleCardProps) => {
textColor = "#000"; textColor = "#000";
} }
return ( 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 <Card
className={classNames(styles.moduleCard)} className={classNames(styles.moduleCard)}
as={Link} as={Link}
......
frontend/src/components/organisms/LeftBar/style.module.scss
+ 20
− 13
View file @ 2870c507
...@@ -2,25 +2,32 @@ ...@@ -2,25 +2,32 @@
#leftbarWrapper { #leftbarWrapper {
position: fixed; position: fixed;
left: 15.625rem; visibility: hidden;
width: 0; transform: translateX(-100%);
margin-left: -15.625rem; display: block;
height: calc(100vh - 3.75rem); top: 0;
padding-bottom: 1.875rem; left: 0;
width: 250px;
height: calc(100vh - 61px);
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
overscroll-behavior: contain;
-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; background: #fff;
box-shadow: 0 0.125rem 0.625rem 0 rgba(0, 0, 0, 0.1); 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 { :global(#wrapper.toggledLeft) #leftbarWrapper {
width: 15.625rem; visibility: visible;
transform: translateX(0);
} }
@media (max-width: 62rem) { @media (max-width: 62rem) {
......
frontend/src/components/organisms/RightBar/style.module.scss
+ 20
− 13
View file @ 2870c507
...@@ -2,21 +2,27 @@ ...@@ -2,21 +2,27 @@
#rightbarWrapper { #rightbarWrapper {
position: fixed; position: fixed;
right: 15.625rem; visibility: hidden;
width: 0; transform: translateX(100%);
margin-right: -15.625rem; display: block;
height: calc(100vh - 3.75rem); top: 0;
padding-bottom: 1.875rem; right: 0;
width: 250px;
height: calc(100vh - 61px);
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
overscroll-behavior: contain;
-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; background: #fff;
box-shadow: 0 0.125rem 0.625rem 0 rgba(0, 0, 0, 0.1); 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 { #rightbarWrapper::-webkit-scrollbar {
...@@ -29,7 +35,8 @@ ...@@ -29,7 +35,8 @@
} }
:global(#wrapper.toggledRight) #rightbarWrapper { :global(#wrapper.toggledRight) #rightbarWrapper {
width: 15.625rem; visibility: visible;
transform: translateX(0);
} }
@media (max-width: 62rem) { @media (max-width: 62rem) {
......
frontend/src/components/pages/StandardView/index.tsx
+ 1
− 1
View file @ 2870c507
...@@ -37,7 +37,6 @@ const StandardView: React.FC<StandardViewProps> = ({ ...@@ -37,7 +37,6 @@ const StandardView: React.FC<StandardViewProps> = ({
toggledRight: toggledRight, toggledRight: toggledRight,
})} })}
> >
<RightBar />
<Switch> <Switch>
<Route path="/modules/:id"> <Route path="/modules/:id">
<LeftBarModule /> <LeftBarModule />
...@@ -92,6 +91,7 @@ const StandardView: React.FC<StandardViewProps> = ({ ...@@ -92,6 +91,7 @@ const StandardView: React.FC<StandardViewProps> = ({
<Route path="/" render={() => <Redirect to="/dashboard" />} /> <Route path="/" render={() => <Redirect to="/dashboard" />} />
</Switch> </Switch>
</Container> </Container>
<RightBar />
</div> </div>
); );
}; };
......
frontend/src/components/pages/StandardView/style.scss
+ 21
− 21
View file @ 2870c507
#wrapper { #wrapper {
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
-webkit-transition: all 0.5s ease; -webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease; -moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease; -o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease; transition: all 0.5s ease-in-out;
z-index: 5050; z-index: 5050;
} }
...@@ -16,34 +16,34 @@ ...@@ -16,34 +16,34 @@
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
z-index: 500; z-index: 500;
display: block; display: block;
visibility:hidden; visibility: hidden;
-webkit-transition: all 0.5s ease; -webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease; -moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease; -o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease; transition: all 0.5s ease-in-out;
} }
@media (min-width: 62rem) { @media (min-width: 62rem) {
#wrapper { #wrapper {
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
} }
#wrapper.toggledLeft { #wrapper.toggledLeft {
padding-left: 15.625rem; padding-left: 250px;
} }
#wrapper.toggledRight { #wrapper.toggledRight {
padding-right: 15.625rem; padding-right: 250px;
} }
} }
@media (max-width: 62rem) { @media (max-width: 62rem) {
#wrapper.toggledRight #sidenav-overlay, #wrapper.toggledRight #sidenav-overlay,
#wrapper.toggledLeft #sidenav-overlay { #wrapper.toggledLeft #sidenav-overlay {
visibility:visible; visibility: visible;
background-color: rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, 0.3);
} }
} }
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment