Skip to content
Snippets Groups Projects
Commit 66906ce6 authored by danieldeng2's avatar danieldeng2
Browse files

Remove imports and format code

parent b2a0fdf1
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
frontend/src/components/App.tsx
+ 0
− 2
View file @ 66906ce6
...@@ -8,8 +8,6 @@ import ExampleTimetable from "./pages/ExampleTimetable"; ...@@ -8,8 +8,6 @@ import ExampleTimetable from "./pages/ExampleTimetable";
import TopBar from "./organisms/TopBar/TopBar"; import TopBar from "./organisms/TopBar/TopBar";
import BottomBar from "./organisms/BottomBar/BottomBar"; import BottomBar from "./organisms/BottomBar/BottomBar";
import { Redirect, Switch, Route } from "react-router-dom"; import { Redirect, Switch, Route } from "react-router-dom";
import { faHome } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
const App: React.FC = () => { const App: React.FC = () => {
return ( return (
......
frontend/src/components/organisms/BottomBar/BottomBar.tsx
+ 32
− 32
View file @ 66906ce6
import React from "react"; import React from "react";
import Container from "react-bootstrap/Container";
import Navbar from "react-bootstrap/Navbar"; import Navbar from "react-bootstrap/Navbar";
import Nav from "react-bootstrap/Nav";
import Button from "react-bootstrap/Button"; import Button from "react-bootstrap/Button";
import ButtonGroup from "react-bootstrap/ButtonGroup"; import ButtonGroup from "react-bootstrap/ButtonGroup";
import "./style.scss"; import "./style.scss";
import { faBookOpen, faEllipsisH, faCalendarWeek, faChalkboardTeacher } from "@fortawesome/free-solid-svg-icons"; import {
faBookOpen,
faEllipsisH,
faCalendarWeek,
faChalkboardTeacher,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
const BottomBar: React.FC = () => { const BottomBar: React.FC = () => {
return ( return (
<Navbar className="bottom-bar footer"> <Navbar className="bottom-bar footer">
<ButtonGroup <ButtonGroup aria-label="Basic example" className="bottom-bar-buttons">
aria-label="Basic example" <Button active className="button-active" id="bottom-courses">
className="bottom-bar-buttons" <div className="button-holder">
> <FontAwesomeIcon icon={faChalkboardTeacher} size="lg" />
<Button active className="button-active" id="bottom-courses"> </div>
<div className="button-holder"> </Button>
<FontAwesomeIcon icon={faChalkboardTeacher} size="lg"/> <Button className="button-inactive" id="bottom-timetable">
</div> <div className="button-holder">
</Button> <FontAwesomeIcon icon={faCalendarWeek} size="lg" />
<Button className="button-inactive" id="bottom-timetable"> </div>
<div className="button-holder"> </Button>
<FontAwesomeIcon icon={faCalendarWeek} size="lg"/> <Button className="button-inactive" id="bottom-exams">
</div> <div className="button-holder">
</Button> <FontAwesomeIcon icon={faBookOpen} size="lg" />
<Button className="button-inactive" id="bottom-exams"> </div>
<div className="button-holder"> </Button>
<FontAwesomeIcon icon={faBookOpen} size="lg"/> <Button className="button-inactive" id="bottom-other">
</div> <div className="button-holder">
</Button> <FontAwesomeIcon icon={faEllipsisH} size="lg" />
<Button className="button-inactive" id="bottom-other"> </div>
<div className="button-holder"> </Button>
<FontAwesomeIcon icon={faEllipsisH} size="lg"/> </ButtonGroup>
</div> </Navbar>
</Button> );
</ButtonGroup>
</Navbar>
);
}; };
export default BottomBar; export default BottomBar;
frontend/src/components/organisms/BottomBar/style.scss
+ 53
− 53
View file @ 66906ce6
@media (max-width: 992px) { @media (max-width: 992px) {
.bottom-bar { .bottom-bar {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
height: 60px; height: 60px;
background-color: #fff; background-color: #fff;
border-top: 1px solid #cdd4db; border-top: 1px solid #cdd4db;
padding: 0px; padding: 0px;
} }
.bottom-bar-buttons, .bottom-bar-buttons,
.block { .block {
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
.bottom-bar-buttons button { .bottom-bar-buttons button {
border: 0; border: 0;
border-radius: 0px; border-radius: 0px;
width: 25%; width: 25%;
margin-left: 0; margin-left: 0;
} }
.bottom-bar-buttons button:active, .bottom-bar-buttons button:active,
.button-active { .button-active {
border: 0; border: 0;
background-color: #000 !important; background-color: #000 !important;
} }
.bottom-bar-buttons button:focus { .bottom-bar-buttons button:focus {
border: 0; border: 0;
outline: 0; outline: 0;
box-shadow: 0 0 0 0px; box-shadow: 0 0 0 0px;
} }
.bottom-bar-buttons button:hover { .bottom-bar-buttons button:hover {
border: 0px; border: 0px;
} }
.button-holder { .button-holder {
align-items: center; align-items: center;
} }
.inactive { .inactive {
display: none; display: none;
} }
.button-active, .button-active,
.bottom-bar-buttons button:hover, .bottom-bar-buttons button:hover,
.bottom-bar-buttons button:active, .bottom-bar-buttons button:active,
.bottom-bar-buttons button:focus { .bottom-bar-buttons button:focus {
color: #000; color: #000;
} }
.button-inactive { .button-inactive {
border: 0px; border: 0px;
color: #000; color: #000;
background-color: #fff !important; background-color: #fff !important;
} }
} }
@media (min-width: 992px) { @media (min-width: 992px) {
.bottom-bar { .bottom-bar {
display: none; display: none;
} }
} }
frontend/src/components/organisms/TopBar/TopBar.tsx
+ 24
− 4
View file @ 66906ce6
...@@ -25,22 +25,42 @@ const TopBar: React.FC = () => { ...@@ -25,22 +25,42 @@ const TopBar: React.FC = () => {
<Navbar className="page-button-group m-auto" id="responsive-navbar-nav"> <Navbar className="page-button-group m-auto" id="responsive-navbar-nav">
<Nav variant="pills" defaultActiveKey="/timetable"> <Nav variant="pills" defaultActiveKey="/timetable">
<Nav.Item> <Nav.Item>
<Nav.Link as={NavLink} activeClassName='active' to="/courses" className="page-button"> <Nav.Link
as={NavLink}
activeClassName="active"
to="/courses"
className="page-button"
>
Courses Courses
</Nav.Link> </Nav.Link>
</Nav.Item> </Nav.Item>
<Nav.Item> <Nav.Item>
<Nav.Link as={NavLink} activeClassName='active' to="/timetable" className="page-button"> <Nav.Link
as={NavLink}
activeClassName="active"
to="/timetable"
className="page-button"
>
Timetable Timetable
</Nav.Link> </Nav.Link>
</Nav.Item> </Nav.Item>
<Nav.Item> <Nav.Item>
<Nav.Link as={NavLink} activeClassName='active' to="/exams" className="page-button"> <Nav.Link
as={NavLink}
activeClassName="active"
to="/exams"
className="page-button"
>
Exams Exams
</Nav.Link> </Nav.Link>
</Nav.Item> </Nav.Item>
<Nav.Item> <Nav.Item>
<Nav.Link as={NavLink} activeClassName='active' to="/other" className="page-button"> <Nav.Link
as={NavLink}
activeClassName="active"
to="/other"
className="page-button"
>
Other Other
</Nav.Link> </Nav.Link>
</Nav.Item> </Nav.Item>
......
frontend/src/components/organisms/TopBar/style.scss
+ 28
− 29
View file @ 66906ce6
...@@ -3,38 +3,37 @@ ...@@ -3,38 +3,37 @@
//-----------------------------------Top Bar----------------------------------- //-----------------------------------Top Bar-----------------------------------
.top-bar { .top-bar {
padding: 12px 16px; padding: 12px 16px;
background: #FFF; background: #fff;
border-bottom: 1px solid #CDD4DB; border-bottom: 1px solid #cdd4db;
} }
//------------------------------------Brand------------------------------------ //------------------------------------Brand------------------------------------
.brand-image { .brand-image {
margin-right: 10px; margin-right: 10px;
} }
.brand-container { .brand-container {
font-family: 'IBM Plex Sans'; font-family: "IBM Plex Sans";
font-weight: 500; font-weight: 500;
font-size: 24px; font-size: 24px;
color: #000; color: #000;
text-align: left; text-align: left;
padding: 0px; padding: 0px;
display: flex; display: flex;
justify-content: left; justify-content: left;
align-items: center; align-items: center;
margin: 0px; margin: 0px;
} }
//--------------------------------Page Buttons--------------------------------- //--------------------------------Page Buttons---------------------------------
@media (min-width: 992px) { @media (min-width: 992px) {
.page-button { .page-button {
background: $gray-100; background: $gray-100;
border-radius: 5px; border-radius: 5px;
font-family: 'IBM Plex Sans'; font-family: "IBM Plex Sans";
font-size: 18px; font-size: 18px;
color: $black !important; color: $black !important;
text-align: center; text-align: center;
...@@ -43,29 +42,29 @@ ...@@ -43,29 +42,29 @@
height: 36px; height: 36px;
margin-right: 10px; margin-right: 10px;
margin-left: 10px; margin-left: 10px;
} }
.page-button:hover { .page-button:hover {
background: $gray-200; background: $gray-200;
color: $black !important; color: $black !important;
} }
.page-button.active { .page-button.active {
background: $black !important; background: $black !important;
font-weight: 500 !important; font-weight: 500 !important;
color: $white !important; color: $white !important;
} }
.page-button-group { .page-button-group {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
} }
@media (max-width: 992px) { @media (max-width: 992px) {
.page-button-group { .page-button-group {
display: none; display: none;
} }
} }
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