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