Skip to content
Snippets Groups Projects
Commit ea804369 authored by Liam Driscoll's avatar Liam Driscoll
Browse files

Adding some styling.

parent ad05090c
No related branches found
No related tags found
1 merge request!15Adding AddRecord route to the project_server.py
Hide whitespace changes
Inline Side-by-side
static/Manage_Coworking_Spaces.css 0 → 100644
+ 122
− 0
View file @ ea804369
/* #iD and .Class
font, color, text
padding, background, border, margin
width, height,
position, top/right/bottom/left
overflow, float, display
.my-class {
width: calc(100% - 20px);
height: calc(50% + 10px);
} */
* {
font-family: Helvetica, Verdana, Arial, sans-serif;
}
body {
margin: 0;
padding: 0;
}
ul, li {
list-style-type: none;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
.Left {
margin-right: auto;
}
.Center {
margin-left: auto;
margin-right: auto;
}
.Right {
margin-left: auto;
}
/* [#1] Page header styling. Uses [#2].
header #pageHeader
main #headerMain
nav #headerNav .navBar
ul .Right, ul .Left
li a
*/
#headerMain {
text-align: center;
background-color: white;
padding: 20px 0px;
}
#headerMain a {
font-size: 30px;
font-weight: bold;
color: black;
}
#headerNav {
width: 100%;
position: absolute;
}
#headerNav a {
font-size: 20px;
padding: 7.5px 10px;
}
/* [#2] Page navigation styling. Used in [#1] and [#4]. */
.navBar {
background-color: #282A35;
display: flex;
justify-content: center;
align-items: center;
}
.navBar ul, .navBar li {
display: flex;
align-items: center;
}
.navBar a {
color: white;
}
.navBar a:hover {
background-color: #0B0C0F;
}
/* [#3] Page main styling.
main #pageMain
*/
#pageMain {}
/* [#4] Page footer styling. Uses [#2].
footer #pageFooter
main #footerMain
nav #footerNav .navBar
ul .Center
li a
*/
#footerNav a {
font-size: 15px;
padding: 5px 10px;
}
static/Manage_Coworking_Spaces.html
+ 43
− 10
View file @ ea804369
...@@ -2,19 +2,37 @@ ...@@ -2,19 +2,37 @@
<html lang="EN" dir="ltr"> <html lang="EN" dir="ltr">
<head> <head>
<meta charSet="UTF-8"> <meta charSet="UTF-8">
<title> Page Template </title> <title> Manage Coworking Spaces </title>
<link rel="stylesheet" href="StylingSheet.css"> <link rel="stylesheet" href="Manage_Coworking_Spaces.css">
</head> </head>
<body onLoad="pageLoad()"> <body onLoad="pageLoad()">
<header id="header"> <header id="pageHeader" class="pageHeader">
<a href=""><h1>Page Header</h1></a> <main id="headerMain">
<a href="Manage_Coworking_Spaces.html">Manage Coworking Spaces</a>
</main>
<nav id="headerNav" class="navBar">
<ul class="Left">
<li><a href="Manage_Coworking_Spaces.html">Home</a></li>
<li><a href="Manage_Coworking_Spaces.html">Left</a></li>
<li><a href="Manage_Coworking_Spaces.html">Home</a></li>
<li><a href="Manage_Coworking_Spaces.html">Left</a></li>
</ul>
<ul class="Right">
<li><a href="Manage_Coworking_Spaces.html">Home</a></li>
<li><a href="Manage_Coworking_Spaces.html">Right</a></li>
<li><div class="navHamburger">
<span></span>
<span></span>
<span></span>
</div></li>
</ul>
</nav>
</header> </header>
<hr>
<main id="recordSection"> <main id="recordSection">
<br>
<form id="recordForm" title="Record Form"> <form id="recordForm" title="Record Form">
<label>Name: <input name="record_name" id="recordName" <label>Name: <input name="record_name" id="recordName"
type="text"></label><br> type="text"></label><br>
...@@ -42,12 +60,27 @@ ...@@ -42,12 +60,27 @@
</form> </form>
<br> <br>
<span id="DEBUGserverMessage"> </span> <span id="DEBUGserverMessage"> </span>
</main>
<hr> <br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
</main>
<footer id="footer"> <footer id="pageFooter">
<a href="#header">Top</a> <main id="footerMain">
<nav id="footerNav" class="navBar">
<ul class="Center">
<li><a href="Manage_Coworking_Spaces.html">Left</a></li>
</ul>
<ul class="Center">
<li><a href="Manage_Coworking_Spaces.html">Center</a></li>
</ul>
<ul class="Center">
<li><a href="Manage_Coworking_Spaces.html">Right</a></li>
</ul>
</nav>
</main>
</footer> </footer>
<script src="Manage_Coworking_Spaces.js"></script> <script src="Manage_Coworking_Spaces.js"></script>
......
static/Manage_Coworking_Spaces.js
+ 30
− 1
View file @ ea804369
// Replaces the onSubmit attribute for the addRecord form. // Replaces the onSubmit attribute for the addRecord form.
function pageLoad() { function onSubmitLoad() {
document.getElementById('addButton').addEventListener('click',addRecord); document.getElementById('addButton').addEventListener('click',addRecord);
} }
function headerLoad() {
let headerMain = document.querySelector('#headerMain');
let headerMainHeight = headerMain.offsetHeight;
let headerNav = document.querySelector('#headerNav');
let headerNavHeight = headerNav.offsetHeight;
let pageHeaderHeight = headerMainHeight + headerNavHeight;
document.getElementById("pageHeader").style.height = pageHeaderHeight + "px";
}
window.onscroll = function() {parallaxNavScroll()};
function parallaxNavScroll() {
let headerMain = document.querySelector('#headerMain');
let headerHeight = headerMain.offsetHeight;
if (document.body.scrollTop > headerHeight || document.documentElement.scrollTop > headerHeight) {
document.getElementById("headerNav").style.top = "0";
document.getElementById("headerNav").style.position = "fixed";
} else {
document.getElementById("headerNav").style.top = headerHeight + "px";
document.getElementById("headerNav").style.position = "absolute";
}
}
function pageLoad() {
onSubmitLoad();
headerLoad();
}
// Adds a record to the CSV file. // Adds a record to the CSV file.
function addRecord(e) { function addRecord(e) {
// Removes the standard form processing. // Removes the standard form processing.
......
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