From ca9a2122700b94fdcb6768180f6d540c21b57d74 Mon Sep 17 00:00:00 2001
From: danieldeng2 <danieldeng223@gmail.com>
Date: Thu, 30 Jul 2020 15:21:45 +0100
Subject: [PATCH] Add topbar to page and refactor existing code
---
frontend/src/components/App.scss | 14 ++--
frontend/src/components/App.tsx | 17 ++---
frontend/src/components/molecules/Buttons.tsx | 4 +-
frontend/src/components/molecules/Toasts.tsx | 6 +-
.../src/components/organisms/Buttonbar.tsx | 14 ----
.../src/components/organisms/Toastbar.tsx | 14 ----
.../components/organisms/TopBar/TopBar.tsx | 62 ++++++++++++++++++
.../components/organisms/TopBar/style.scss | 0
frontend/src/components/organisms/Topbar.tsx | 17 -----
frontend/src/components/pages/ExamplePage.tsx | 25 +++++++
frontend/src/components/pages/Scientia.tsx | 17 -----
frontend/src/images/logo.svg | 7 ++
frontend/src/images/user.png | Bin 0 -> 45426 bytes
frontend/src/index.tsx | 10 +--
frontend/src/scss/custom.scss | 5 +-
15 files changed, 122 insertions(+), 90 deletions(-)
delete mode 100644 frontend/src/components/organisms/Buttonbar.tsx
delete mode 100644 frontend/src/components/organisms/Toastbar.tsx
create mode 100644 frontend/src/components/organisms/TopBar/TopBar.tsx
create mode 100644 frontend/src/components/organisms/TopBar/style.scss
delete mode 100644 frontend/src/components/organisms/Topbar.tsx
create mode 100644 frontend/src/components/pages/ExamplePage.tsx
delete mode 100644 frontend/src/components/pages/Scientia.tsx
create mode 100644 frontend/src/images/logo.svg
create mode 100644 frontend/src/images/user.png
diff --git a/frontend/src/components/App.scss b/frontend/src/components/App.scss
index 3db269c31..f9901b6e1 100644
--- a/frontend/src/components/App.scss
+++ b/frontend/src/components/App.scss
@@ -1,16 +1,16 @@
-@import '../scss/custom';
+@import "../scss/custom";
body {
margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
- 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+ "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- // background-color: $teal-300;
+ -moz-osx-font-smoothing: grayscale;
+ // background-color: $teal-300;
}
code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+ font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/App.tsx b/frontend/src/components/App.tsx
index 926d90eca..23f90d237 100644
--- a/frontend/src/components/App.tsx
+++ b/frontend/src/components/App.tsx
@@ -1,14 +1,15 @@
-import React from 'react';
-import './App.scss';
-import Scientia from './pages/Scientia'
-import Container from 'react-bootstrap/Container';
+import React from "react";
+import "./App.scss";
+import ExamplePage from "./pages/ExamplePage";
+import TopBar from "./organisms/TopBar/TopBar";
const App: React.FC = () => {
return (
- <Container className="p-3">
- <Scientia/>
- </Container>
+ <>
+ <TopBar />
+ <ExamplePage />
+ </>
);
};
-export default App;
\ No newline at end of file
+export default App;
diff --git a/frontend/src/components/molecules/Buttons.tsx b/frontend/src/components/molecules/Buttons.tsx
index ab34cd928..6a3366b67 100644
--- a/frontend/src/components/molecules/Buttons.tsx
+++ b/frontend/src/components/molecules/Buttons.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
+import React from "react";
-import Button from 'react-bootstrap/Button';
+import Button from "react-bootstrap/Button";
const ButtonsShowcase: React.FC = () => (
<div className="p-1">
diff --git a/frontend/src/components/molecules/Toasts.tsx b/frontend/src/components/molecules/Toasts.tsx
index ac753fecb..3d69a0bf4 100644
--- a/frontend/src/components/molecules/Toasts.tsx
+++ b/frontend/src/components/molecules/Toasts.tsx
@@ -1,7 +1,7 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
-import Toast from 'react-bootstrap/Toast';
-import Button from 'react-bootstrap/Button';
+import Toast from "react-bootstrap/Toast";
+import Button from "react-bootstrap/Button";
const ToastsShowcase: React.FC = () => {
const [show, toggleShow] = useState(true);
diff --git a/frontend/src/components/organisms/Buttonbar.tsx b/frontend/src/components/organisms/Buttonbar.tsx
deleted file mode 100644
index 210635913..000000000
--- a/frontend/src/components/organisms/Buttonbar.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-
-import ButtonsShowcase from '../molecules/Buttons';
-
-const Buttonbar: React.FC = () => {
- return (
- <>
- <h2>Buttons</h2>
- <ButtonsShowcase />
- </>
- );
-};
-
-export default Buttonbar;
\ No newline at end of file
diff --git a/frontend/src/components/organisms/Toastbar.tsx b/frontend/src/components/organisms/Toastbar.tsx
deleted file mode 100644
index aac823d8f..000000000
--- a/frontend/src/components/organisms/Toastbar.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from "react";
-
-import ToastsShowcase from '../molecules/Toasts';
-
-const Toastbar: React.FC = () => {
- return (
- <>
- <h2>Toasts</h2>
- <ToastsShowcase />
- </>
- );
-};
-
-export default Toastbar;
diff --git a/frontend/src/components/organisms/TopBar/TopBar.tsx b/frontend/src/components/organisms/TopBar/TopBar.tsx
new file mode 100644
index 000000000..38a20fde4
--- /dev/null
+++ b/frontend/src/components/organisms/TopBar/TopBar.tsx
@@ -0,0 +1,62 @@
+import React from "react";
+import Container from "react-bootstrap/Container";
+import Navbar from "react-bootstrap/Navbar";
+import Nav from "react-bootstrap/Nav";
+import logo from "../../../images/logo.svg";
+import userPic from "../../../images/user.png";
+import "./style.scss";
+
+const TopBar: React.FC = () => {
+ return (
+ <>
+ <Navbar
+ className="justify-content-center"
+ sticky="top"
+ expand="lg"
+ variant="light"
+ bg="light"
+ >
+ <Container>
+ <Navbar.Brand href="#">
+ <img
+ src={logo}
+ width="30"
+ height="30"
+ className="d-inline-block align-top"
+ alt="React Bootstrap logo"
+ />{" "}
+ Scientia
+ </Navbar.Brand>
+
+ <Nav variant="pills" activeKey="/">
+ <Nav.Item>
+ <Nav.Link href="/">Courses</Nav.Link>
+ </Nav.Item>
+
+ <Nav.Item>
+ <Nav.Link eventKey="link-1">Timetable</Nav.Link>
+ </Nav.Item>
+
+ <Nav.Item>
+ <Nav.Link eventKey="link-2">Exams</Nav.Link>
+ </Nav.Item>
+
+ <Nav.Item>
+ <Nav.Link eventKey="link-3">Other</Nav.Link>
+ </Nav.Item>
+ </Nav>
+
+ <img
+ src={userPic}
+ width="40"
+ height="40"
+ className="d-inline-block align-top"
+ alt="userPic"
+ />
+ </Container>
+ </Navbar>
+ </>
+ );
+};
+
+export default TopBar;
diff --git a/frontend/src/components/organisms/TopBar/style.scss b/frontend/src/components/organisms/TopBar/style.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/src/components/organisms/Topbar.tsx b/frontend/src/components/organisms/Topbar.tsx
deleted file mode 100644
index 5e3104da3..000000000
--- a/frontend/src/components/organisms/Topbar.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from "react";
-
-import Jumbotron from "react-bootstrap/Jumbotron";
-
-const Topbar: React.FC = () => {
- return (
- <>
- <Jumbotron>
- <h1 className="header">
- Welcome To React-Bootstrap TypeScript Example
- </h1>
- </Jumbotron>
- </>
- );
-};
-
-export default Topbar;
diff --git a/frontend/src/components/pages/ExamplePage.tsx b/frontend/src/components/pages/ExamplePage.tsx
new file mode 100644
index 000000000..5d72c072a
--- /dev/null
+++ b/frontend/src/components/pages/ExamplePage.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+
+import Jumbotron from "react-bootstrap/Jumbotron";
+import Container from "react-bootstrap/Container";
+
+import ButtonsShowcase from "../molecules/Buttons";
+import ToastsShowcase from "../molecules/Toasts";
+
+const ExamplePage: React.FC = () => {
+ return (
+ <Container className="p-3">
+ <Jumbotron>
+ <h1 className="header">
+ Welcome To React-Bootstrap TypeScript Example
+ </h1>
+ </Jumbotron>
+ <h2>Buttons</h2>
+ <ButtonsShowcase />
+ <h2>Toasts</h2>
+ <ToastsShowcase />
+ </Container>
+ );
+};
+
+export default ExamplePage;
diff --git a/frontend/src/components/pages/Scientia.tsx b/frontend/src/components/pages/Scientia.tsx
deleted file mode 100644
index acd5fe3a2..000000000
--- a/frontend/src/components/pages/Scientia.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-
-import Buttonbar from '../organisms/Buttonbar';
-import Toastbar from '../organisms/Toastbar';
-import Topbar from '../organisms/Topbar';
-
-const Scientia: React.FC = () => {
- return (
- <>
- <Topbar />
- <Buttonbar/>
- <Toastbar />
- </>
- );
-};
-
-export default Scientia;
\ No newline at end of file
diff --git a/frontend/src/images/logo.svg b/frontend/src/images/logo.svg
new file mode 100644
index 000000000..efb061fa8
--- /dev/null
+++ b/frontend/src/images/logo.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 1001 1000" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+ <g transform="matrix(1,0,0,1,-999,-500)">
+ <path d="M1500,769.603L1765.21,504.39C1768.02,501.577 1771.84,499.996 1775.82,499.996C1794.76,499.996 1853.1,499.996 1896.3,499.996C1902.98,499.996 1908.86,504.411 1910.71,510.826C1912.57,517.241 1909.96,524.111 1904.31,527.678C1843.48,569.565 1719.47,661.503 1550.24,819.842L1680.15,949.761C1838.49,780.535 1930.43,656.517 1972.32,595.686C1975.88,590.04 1982.75,587.432 1989.17,589.289C1995.58,591.145 2000,597.019 2000,603.697C2000,646.9 2000,705.245 2000,724.184C2000,728.162 1998.42,731.977 1995.6,734.79L1730.39,1000L1995.61,1265.21C1998.42,1268.03 2000,1271.84 2000,1275.82C2000,1294.76 2000,1353.1 1999.98,1396.31C1999.98,1402.97 1995.57,1408.84 1989.16,1410.69C1982.76,1412.55 1975.9,1409.94 1972.34,1404.31C1930.43,1343.48 1838.48,1219.44 1680.15,1050.24L1550.24,1180.16C1719.47,1338.5 1843.48,1430.43 1904.3,1472.34C1909.93,1475.9 1912.54,1482.76 1910.68,1489.16C1908.83,1495.57 1902.97,1499.98 1896.3,1499.98C1853.1,1500 1794.75,1500 1775.81,1500C1771.83,1500 1768.02,1498.42 1765.21,1495.61L1500,1230.4L1234.78,1495.61C1231.97,1498.42 1228.15,1500 1224.18,1500C1205.24,1500 1146.89,1500 1103.69,1499.98C1097.02,1499.98 1091.16,1495.57 1089.3,1489.17C1087.45,1482.76 1090.05,1475.9 1095.69,1472.34C1156.52,1430.43 1280.55,1338.48 1449.76,1180.16L1319.84,1050.24C1161.5,1219.47 1069.56,1343.48 1027.66,1404.3C1024.1,1409.94 1017.24,1412.54 1010.83,1410.69C1004.43,1408.84 1000.02,1402.97 1000.02,1396.3C999.996,1353.1 999.996,1294.76 999.996,1275.82C999.996,1271.84 1001.58,1268.02 1004.39,1265.21L1269.6,1000L1004.39,734.787C1001.57,731.974 999.992,728.158 999.993,724.18C999.993,705.241 999.993,646.896 999.993,603.694C999.993,597.015 1004.41,591.142 1010.82,589.285C1017.24,587.428 1024.11,590.036 1027.67,595.682C1069.56,656.513 1161.5,780.531 1319.84,949.761L1449.76,819.842C1280.53,661.507 1156.51,569.569 1095.68,527.681C1090.04,524.114 1087.43,517.245 1089.29,510.83C1091.14,504.415 1097.02,500 1103.69,500C1146.9,500 1205.24,500 1224.18,500C1228.16,500 1231.97,501.58 1234.79,504.393L1500,769.603ZM1500,867.553C1478.33,888.425 1456.05,910.28 1433.16,933.171C1410.27,956.062 1388.42,978.341 1367.55,1000C1388.42,1021.66 1410.28,1043.94 1433.17,1066.83C1456.06,1089.72 1478.34,1111.58 1500,1132.45C1521.65,1111.58 1543.93,1089.73 1566.82,1066.84C1589.71,1043.95 1611.57,1021.67 1632.44,1000C1611.58,978.345 1589.72,956.065 1566.83,933.175C1543.94,910.284 1521.66,888.429 1500,867.553Z"/>
+ </g>
+</svg>
diff --git a/frontend/src/images/user.png b/frontend/src/images/user.png
new file mode 100644
index 0000000000000000000000000000000000000000..fc76d95c9e673bb21d89d9bfa6f3dce02803aec5
GIT binary patch
literal 45426
zcmeH{F=|y|7zOXcCIr%22o|=k!N!mf1M&zlSlijDg@s@t*oa_n;R3AUGF*U-;tpKJ
zGwJLy{2u@FBookpocrCmGvND^_0it$t=(l=_KqJMoL>C?cKK)L#>L+|N6%g?%Z=sa
z;o0G4v-$Yp$HhPTqk(H^;NI<bua{-DygXe$+H9_&fImL@?$hsIm*xD<@xlGGS3g%b
z&wpM1zu}JtG@t<uXg~uR(0~RspaBicGqAe)XC6%EO;>->D)XXwSNx=TuE*bGrEz!j
zp0v_D*W+)p(zv^MPg-f7>+v^PY24ksC#^Kk_4u2tH12NRlUADNdi+gR8h1DENh{5B
zJ^m&ujk}xoq?P8m9)FXS#@)?((n|AOkH5)E<L>4?xmA?_%r;F(rETH`EPfJ@RG(O>
zo&W$?2}r6>tW-|`0IUQg)hAY}CjbCe0+Q+zE7cPK04o7W^@)}02>^hVfTa4wO7#Q)
zz)C<;ePX400svqoAgMmFQau3xxTclBXJ_PPt^iyz$-rc;5MHp!z+|ofTr$bPWUdfi
zu*tw=t^iyz$-rc;5MHp!z+|ofTr$bPWUdfiu*tw=t^iyz$-rc;5MHp!z+|ofTr$bP
zWUdfiu*tw=t^iyz$-rc;5MHp!z+|ofTr$bPWUdfiu*tw=t^iyz$-rc;5MHp!z+|of
zTr$bPWUdfiu*tw=t^iyz$-rc;5MHp!z+|ofTr$bPWUdfiu*tw=t^iyz$-rc;5MHp!
zz+|ofTr$bPWUdfiu*tw=t^iyz$-rc;5MHp!z+|ofTr$bPWUdfiu*tw=t^iyz$-rc;
z5MHp!z+|of+|cBI;{~7XCjm+IiIwUJ0DzT%r2524^#lOGN<dP5Vx@Wl0AM8`sXnn%
zJpll)5|C7%SgD=>09Xk~s!yy`PXGX{1SHibR;nie09FE$>Jux~6951!0ZD%`0e-h>
zLcVmHcma!_1SHibR;nie09FE$>Jux~6951!0ZH|VmFfuqfR%ux`ov201OUKFKvI2T
zrFsGYU?m`_KCx0g0RXTPkW`;osh$7;SP4j~Ppni=006FOCGy#BG@t<uXg~uR(0~Rs
hpaBhNKm!{1HwHeh_cxE9zxi}|{rGTw@MZtW+us*5Vjlni
literal 0
HcmV?d00001
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index 4a6f683a3..68d6c0e29 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -1,13 +1,13 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './components/App';
-import * as serviceWorker from './serviceWorker';
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./components/App";
+import * as serviceWorker from "./serviceWorker";
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
- document.getElementById('root')
+ document.getElementById("root")
);
// If you want your app to work offline and load faster, you can change
diff --git a/frontend/src/scss/custom.scss b/frontend/src/scss/custom.scss
index 6080b316d..699d0cdfc 100644
--- a/frontend/src/scss/custom.scss
+++ b/frontend/src/scss/custom.scss
@@ -4,8 +4,7 @@
@import "./bootstrapV5/bootstrap.scss";
@import "~bootstrap/dist/css/bootstrap.min.css";
-
-//Delete bootstrapV5/bootstrap.scss and bootstrap.min.css import
+//Delete bootstrapV5/bootstrap.scss and bootstrap.min.css import
//and uncomment below to fall back to default scss option
-// @import '~bootstrap/scss/bootstrap.scss';
\ No newline at end of file
+// @import '~bootstrap/scss/bootstrap.scss';
--
GitLab