Skip to content
Snippets Groups Projects
Commit 6af181c8 authored by Cross, Liam (UG - Comp Sci & Elec Eng)'s avatar Cross, Liam (UG - Comp Sci & Elec Eng)
Browse files

Merge branch 'LC/header-footer' into 'main' 

Basic Header and Footer

See merge request ma03081/COM3014!4
parents 5b40554a d73e09d2
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 232 additions and 1 deletion
client/package-lock.json
+ 115
− 0
View file @ 6af181c8
......@@ -20,6 +20,7 @@
"eslint": "^8.56.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.5",
"sass": "^1.71.1",
"typescript": "^5.2.2",
"vite": "^5.1.4"
}
......@@ -1523,6 +1524,19 @@
"node": ">=4"
}
},
"node_modules/anymatch": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
"integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
"dev": true,
"dependencies": {
"normalize-path": "^3.0.0",
"picomatch": "^2.0.4"
},
"engines": {
"node": ">= 8"
}
},
"node_modules/argparse": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
......@@ -1544,6 +1558,15 @@
"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
"dev": true
},
"node_modules/binary-extensions": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
"integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
"dev": true,
"engines": {
"node": ">=8"
}
},
"node_modules/brace-expansion": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
......@@ -1640,6 +1663,42 @@
"node": ">=4"
}
},
"node_modules/chokidar": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
"integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
"dev": true,
"dependencies": {
"anymatch": "~3.1.2",
"braces": "~3.0.2",
"glob-parent": "~5.1.2",
"is-binary-path": "~2.1.0",
"is-glob": "~4.0.1",
"normalize-path": "~3.0.0",
"readdirp": "~3.6.0"
},
"engines": {
"node": ">= 8.10.0"
},
"funding": {
"url": "https://paulmillr.com/funding/"
},
"optionalDependencies": {
"fsevents": "~2.3.2"
}
},
"node_modules/chokidar/node_modules/glob-parent": {
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
"dev": true,
"dependencies": {
"is-glob": "^4.0.1"
},
"engines": {
"node": ">= 6"
}
},
"node_modules/color-convert": {
"version": "1.9.3",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
......@@ -2329,6 +2388,12 @@
"node": ">= 4"
}
},
"node_modules/immutable": {
"version": "4.3.5",
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.5.tgz",
"integrity": "sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==",
"dev": true
},
"node_modules/import-fresh": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
......@@ -2370,6 +2435,18 @@
"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
"dev": true
},
"node_modules/is-binary-path": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
"integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
"dev": true,
"dependencies": {
"binary-extensions": "^2.0.0"
},
"engines": {
"node": ">=8"
}
},
"node_modules/is-extglob": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
......@@ -2610,6 +2687,15 @@
"integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==",
"dev": true
},
"node_modules/normalize-path": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
"dev": true,
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/once": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
......@@ -2830,6 +2916,18 @@
"node": ">=0.10.0"
}
},
"node_modules/readdirp": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
"integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
"dev": true,
"dependencies": {
"picomatch": "^2.2.1"
},
"engines": {
"node": ">=8.10.0"
}
},
"node_modules/resolve-from": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
......@@ -2919,6 +3017,23 @@
"queue-microtask": "^1.2.2"
}
},
"node_modules/sass": {
"version": "1.71.1",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.71.1.tgz",
"integrity": "sha512-wovtnV2PxzteLlfNzbgm1tFXPLoZILYAMJtvoXXkD7/+1uP41eKkIt1ypWq5/q2uT94qHjXehEYfmjKOvjL9sg==",
"dev": true,
"dependencies": {
"chokidar": ">=3.0.0 <4.0.0",
"immutable": "^4.0.0",
"source-map-js": ">=0.6.2 <2.0.0"
},
"bin": {
"sass": "sass.js"
},
"engines": {
"node": ">=14.0.0"
}
},
"node_modules/scheduler": {
"version": "0.23.0",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
......
client/package.json
+ 1
− 0
View file @ 6af181c8
......@@ -22,6 +22,7 @@
"eslint": "^8.56.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.5",
"sass": "^1.71.1",
"typescript": "^5.2.2",
"vite": "^5.1.4"
}
......
client/src/App.css
+ 8
− 0
View file @ 6af181c8
.wrapper {
display: flex;
flex-direction: column;
}
.main {
height: 85vh;
}
\ No newline at end of file
client/src/App.tsx
+ 9
− 1
View file @ 6af181c8
import './App.css';
import Header from './components/Header/Header';
import Footer from './components/Footer/Footer';
function App() {
return (
<>
Hello World
<div className='wrapper'>
<Header></Header>
<div className='main'>
{/* Main content goes Here */}
</div>
<Footer></Footer>
</div>
</>
);
}
......
client/src/components/Footer/Footer.scss 0 → 100644
+ 13
− 0
View file @ 6af181c8
.footer {
display: flex;
height: 5vh;
width: 100%;
background-color: var(--main);
justify-content: flex-end;
align-items: center;
}
.footer-content {
color: white;
padding-right: 1.5rem;
}
\ No newline at end of file
client/src/components/Footer/Footer.tsx 0 → 100644
+ 15
− 0
View file @ 6af181c8
import './Footer.scss';
function Footer() {
return (
<>
<div className='footer'>
<div className='footer-content'>
<span>COM3014 Group 5</span>
</div>
</div>
</>
);
}
export default Footer;
\ No newline at end of file
client/src/components/Header/Header.scss 0 → 100644
+ 33
− 0
View file @ 6af181c8
.header {
display: flex;
height: 10vh;
width: 100%;
background-color: var(--main);
color: white;
flex-direction: row;
align-items: center;
}
.header-content {
display: flex;
padding-left: 2rem;
padding-right: 2rem;
width: 100%;
flex-direction: row;
justify-content: space-between;
}
.header-title {
font-size: 3rem;
}
.nav {
display: flex;
flex-direction: row;
align-items: center;
}
.nav-item {
margin-left: 0.5rem;
margin-right: 0.5rem;
}
\ No newline at end of file
client/src/components/Header/Header.tsx 0 → 100644
+ 20
− 0
View file @ 6af181c8
import './Header.scss';
function Header() {
return (
<>
<div className='header'>
<div className='header-content'>
<span className='header-title'>Airline Booking</span>
<nav className='nav'>
<a className='nav-item'>Example Nav 1</a>
<a className='nav-item'>Nav 2</a>
</nav>
</div>
</div>
</>
);
}
export default Header;
\ No newline at end of file
client/src/index.css
+ 18
− 0
View file @ 6af181c8
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
/* Unifies font across frontend */
* {
font-family: "Lato", sans-serif;
font-weight: 400;
font-style: normal;
}
/* Stops whitespace surrounding page */
body {
margin: 0;
}
/* CSS Variables */
:root {
--main: #000055;
}
\ No newline at end of file
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