Updating style for management page.

static/CSS/Manage_Coworking_Spaces.css

@@ -125,9 +125,9 @@ header #pageHeader
 
 main #pageMain
   form #recordForm
-    label
-    input .formTextInput
-    button #addButton
+    label .smallLabel
+    input textarea .smallInput
+    button
 
  */
 
@@ -136,13 +136,38 @@ main #pageMain
   flex: 1;
 }
 
-#recordForm {
-  margin-left: 5px;
+#recordForm label, #recordForm input, #recordForm textarea {
+  margin-left: 1.25px;
+  margin-top: 5px;
 }
 
-#recordForm .formTextInput {
-  margin-top: 5px;
+#recordForm label {
+  display: inline-block;
+  min-width: 27.5%;
+  text-align: right;
+  font-weight: bold;
+  vertical-align: top;
+}
+
+#recordForm input {
+  width: 50%;
+  min-width: 550px;
+}
+
+#recordForm textarea {
   width: 50%;
+  min-width: 550px;
+  font-size: 14.25px;
+}
+
+#recordForm .smallLabel {
+  width: 10%;
+  min-width: 125px;
+}
+
+#recordForm .smallInput {
+  width: 19.2%;
+  min-width: 200px;
 }
 
 /* [#4] Page footer styling. Uses [#2].

static/JS/Manage_Coworking_Spaces.js

@@ -2,7 +2,7 @@
 function onSubmitLoad() {
   document.getElementById('searchButton').addEventListener('click',searchRecord);
   document.getElementById('addButton').addEventListener('click',addRecord);
-  document.getElementById('editButton').addEventListener('click',editRecord);
+  document.getElementById('updateButton').addEventListener('click',updateRecord);
   document.getElementById('deleteButton').addEventListener('click',deleteRecord);
 }
 
@@ -109,7 +109,7 @@ function addRecord(e) {
 }
 
 // Edits a record in the database.
-function editRecord(e) {
+function updateRecord(e) {
   // Removes the standard form processing.
   e.preventDefault();
   e.stopPropagation();
@@ -130,7 +130,7 @@ function editRecord(e) {
   var params = 'recordName='+recordName+'&recordAddress='+recordAddress+'&recordMainPhotos='+recordMainPhotos+'&recordAdditionalPhotos='+recordAdditionalPhotos+'&recordDescription='+recordDescription+'&recordWebsite='+recordWebsite+'&recordEmail='+recordEmail+'&recordPhoneNumber='+recordPhoneNumber+'&recordOpeningHours='+recordOpeningHours+'&recordCheckinInstructions='+recordCheckinInstructions;
 
   var xhttp = new XMLHttpRequest();
-  xhttp.open("POST", '/EditRecord', true);
+  xhttp.open("POST", '/UpdateRecord', true);
   xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
   xhttp.onreadystatechange = function() {
     if (xhttp.readyState === 4 && xhttp.status === 200) {

templates/Manage_Coworking_Spaces.html

@@ -2,47 +2,75 @@
 
 {%block headblock%}
   <title> Manage Coworking Spaces </title>
+  <link rel="stylesheet" href="/static/CSS/Manage_Coworking_Spaces.css">
 {%endblock%}
 
 {%block headerblock%}
-    <a id="headerText"
+    <a id="headerText" class="headerText"
     href="Manage_Coworking_Spaces">
       Manage Coworking Spaces</a>
 {%endblock%}
 
 {%block mainblock%}
   <form id="recordForm" title="Record Form">
-    <label>Name: <input id="recordName" class="formTextInput"
-      name="record_name" type="text"></label>
-    <button id="searchButton" type="submit">Search</button><br>
-    <label>Address: <input id="recordAddress" class="formTextInput"
-      name="record_address" type="text"></label><br>
-    <label>Main Photograph: <input id="recordMainPhotos" class="formTextInput"
-      name="record_MP" type="url"></label><br>
-    <label>Additional Photographs: <input id="recordAdditionalPhotos" class="formTextInput"
-      name="record_AP" type="url"></label><br>
-    <label>Description: <input id="recordDescription" class="formTextInput"
-      name="record_description" type="text"></label><br>
-    <label>Website: <input id="recordWebsite" class="formTextInput"
-      name="record_website" type="url"></label><br>
-      <label>Email: <input id="recordEmail" class="formTextInput"
-      name="record_email" type="email"></label><br>
-    <label>Phone Number: <input id="recordPhoneNumber" class="formTextInput"
-      name="record_PN" type="text"></label><br>
-    <label>Opening Hours: <input id="recordOpeningHours" class="formTextInput"
-      name="record_OH" type="text"></label><br>
-    <label>Checkin Instructions: <input id="recordCheckinInstructions" class="formTextInput"
-      name="record_CI" type="text"></label>
+    <label for="recordName">Name:</label>
+    <input id="recordName" class="formTextInput"
+      name="record_name" type="text"><br>
+    <label for="recordAddress">Address:</label>
+    <textarea id="recordAddress" class="formTextInput"
+      name="record_address" type="text"></textarea><br>
+    <label for="recordMainPhotos">Main Photograph:</label>
+    <input id="recordMainPhotos" class="formTextInput"
+      name="record_MP" type="text"><br>
+    <label for="recordAdditionalPhotos">Additional Photographs:</label>
+    <input id="recordAdditionalPhotos" class="formTextInput"
+      name="record_AP" type="text"><br>
+    <label for="recordDescription">Description:</label>
+    <textarea id="recordDescription" class="formTextInput"
+      name="record_description" type="text"></textarea><br>
+    <label for="recordWebsite">Website:</label>
+    <input id="recordWebsite" class="smallInput"
+      name="record_website" type="text">
+    <label for="recordEmail" class="smallLabel">Email:</label>
+    <input id="recordEmail" class="smallInput"
+      name="record_email" type="text"><br>
+    <label for="recordPhoneNumber">Phone Number:</label>
+    <input id="recordPhoneNumber" class="smallInput"
+      name="record_PN" type="text">
+    <label for="recordOpeningHours" class="smallLabel">Opening Hours:</label>
+    <input id="recordOpeningHours" class="smallInput"
+      name="record_OH" type="text"><br>
+    <label for="recordCheckinInstructions">Checkin Instructions:</label>
+    <textarea id="recordCheckinInstructions" class="formTextInput"
+      name="record_CI" type="text"></textarea>
 
     <br><br>
+    <button id="searchButton" type="submit">Search</button>
     <button id="addButton" type="submit">Add</button>
-    <button id="editButton" type="submit">Edit</button>
+    <button id="updateButton" type="submit">Update</button>
     <button id="deleteButton" type="submit">Delete</button>
-    <button id="clearButton" type="reset">Clear</button>
   </form>
   <br>
   <span id="DEBUGserverMessage"> </span>
 
+  <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>
+{%endblock%}
+
+{%block footerblock%}
+  <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>
 {%endblock%}
 
 {%block jsblock%}

templates/base_template.html

@@ -4,7 +4,6 @@
     <meta charSet="UTF-8">
     {%block headblock%}
     {%endblock%}
-    <link rel="stylesheet" href="/static/CSS/Manage_Coworking_Spaces.css">
   </head>
   <body onLoad="pageLoad()">