Add footer and various Materialize components

Issue #3
CodeWritingCow · Dec 22, 2017 · 9193777 · 9193777
1 parent d74eca0
commit 9193777
Show file tree

Hide file tree

Showing 7 changed files with 76 additions and 25 deletions.
diff --git a/server.js b/server.js
@@ -28,7 +28,7 @@ const url = 'https://data.cityofnewyork.us/resource/43nn-pn8j.json';
 
 app.get('/', (req, res) => {
 	res.render('home.hbs', {
-		pageTitle: 'NYC Restaurant Inspection API'
+		pageTitle: 'NYC Restaurant Inspector'
 	});
 
 	// request(`${url}?boro=queens`, (error, response, body) =>{
@@ -94,7 +94,7 @@ app.get('/borough/:id', (req, res) => {
 
 app.get('/search', (req, res) => {
 	res.render('search.hbs', {
-		pageTitle: 'Search NYC Restaurant Inspection Database'
+		pageTitle: 'Search NYC Restaurant Inspections'
 	});	
 });
 
@@ -129,7 +129,9 @@ app.post('/search', (req, res) => {
 
 	request(`${url}?${urlQuery}`, (error, response, body) => {
 		if (JSON.parse(body).length === 0) {
-			return res.render("search.hbs", {errorMessage: 'No results found.'});
+			return res.render("search.hbs", {
+				pageTitle: 'Search Results',
+				errorMessage: 'No results found.'});
 		}
 
 		if (!error && response.statusCode === 200) {
@@ -146,11 +148,16 @@ app.post('/search', (req, res) => {
 				if (searchResults.length === 0) {
 					return res.render("search.hbs", {errorMessage: 'No results found.'});
 				} else {
-					res.render("search.hbs", {body: searchResults});		
+					res.render("search.hbs", {
+						pageTitle: 'Search Results',
+						body: searchResults});		
 				}				
 			} else {
 				console.log(`${url}?${urlQuery}`);
-				res.render("search.hbs", {body: JSON.parse(body)});
+				res.render("search.hbs", {
+					body: JSON.parse(body),
+					pageTitle: 'Search Results'
+				});
 			}
 		} else {
 			return error;

diff --git a/views/home.hbs b/views/home.hbs
@@ -2,7 +2,7 @@
 <html>
     <head>
         <meta charset="utf-8">
-        <title>NYC Restaurant Inspection API</title>
+        <title>NYC Restaurant Inspector</title>
 		<!-- Compiled and minified CSS -->
 		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
 		<!--Import Google Icon Font-->    
@@ -12,10 +12,18 @@
     </head>
     <body>
     	{{> header}}
-    	<div class="container">
-	    	{{> searchForm}}    	
-	    	{{> searchResults}}
-    	</div>
+    	<main class="container" style="padding: 30px;">
+	    	<div class="section" style="text-align: center;">
+			    <h1>{{pageTitle}}</h1>
+			    <h5>How Safe Is Your Food?</h5>
+	    	</div>
+	    	<div class="divider"></div>
+	    	<div class="section">
+		    	{{> searchForm}}    	
+		    	{{> searchResults}}
+	    	</div>
+    	</main>
+    	{{> footer}}
     </body>
 
 	<!-- Compiled and minified JavaScript -->

diff --git a/views/partials/footer.hbs b/views/partials/footer.hbs
@@ -0,0 +1,25 @@
+<footer class="page-footer">
+  <div class="container">
+    <div class="row">
+      <div class="col l6 s12">
+        <h5 class="white-text">Footer Content</h5>
+        <p class="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p>
+      </div>
+      <div class="col l4 offset-l2 s12">
+        <h5 class="white-text">Links</h5>
+        <ul>
+          <li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
+          <li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
+          <li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
+          <li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <div class="footer-copyright">
+    <div class="container">
+      Made by <a class="brown-text text-lighten-4" href="http://www.codewritingcow.com">CodeWritingCow</a>
+    <a class="grey-text text-lighten-4 right" href="#!">More Links</a>
+    </div>
+  </div>
+</footer>
diff --git a/views/partials/header.hbs b/views/partials/header.hbs
@@ -1,7 +1,7 @@
 <header>
 	<nav>
 		<div class="nav-wrapper container">
-		  <a href="./" class="brand-logo">NYC Restaurant Inspections</a>
+		  <a href="./" class="brand-logo">NYC Food</a>
 	      <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>		  
 		  <ul class="right hide-on-med-and-down">
 		    <li><a href="/">Home</a></li>
@@ -14,6 +14,4 @@
 		</ul>		  
 		</div>
 	</nav>
-
-    <h1 style="text-align: center;">{{pageTitle}}</h1>
 </header>
diff --git a/views/partials/searchForm.hbs b/views/partials/searchForm.hbs
@@ -1,12 +1,12 @@
 <div class="row">
 <form class="col s12" action="/search" method="POST">
 	<div class="row">
-		<div class="input-field col s6">
+		<div class="input-field col s12 m6">
 			<label for="dba">Business Name</label>
-			<input type="text" name="dba" placeholder="Business name">
+			<input type="text" name="dba">
 		</div>
 
-		<div class="input-field col s6">
+		<div class="input-field col s12 m6">
 			<select name="cuisine_description" id="cuisine_description">
 				<option value="" disabled selected>None</option>
 				<option value="American">American</option>
@@ -61,9 +61,9 @@
 	</div>
 
 	<div class="row">
-		<div class="input-field col s6">
+		<div class="input-field col s12 m6">
 			<label for="zipcode">Zipcode</label>
-			<input type="text" name="zipcode" placeholder="zipcode">
+			<input type="text" name="zipcode">
 
 	<!-- 		<label for="street">Street</label>
 			<input disabled type="text" name="street" placeholder="street address">
@@ -72,7 +72,7 @@
 			<input disabled type="text" name="city" placeholder="city"> -->
 		</div>
 
-		<div class="input-field col s6">
+		<div class="input-field col s12 m6">
 			<select id="boro" name="boro">
 				<option value="" disabled selected>None</option>
 				<option value="Bronx">Bronx</option>
@@ -93,7 +93,7 @@
 		<input disabled type="date" name="endDate">
 	</fieldset> -->
 
-	<button class="btn waves-effect waves-light" type="submit">Search
+	<button class="btn waves-effect waves-light center-align" type="submit">Search
 		<i class="material-icons right">search</i>
 	</button>
 </form>

diff --git a/views/partials/searchResults.hbs b/views/partials/searchResults.hbs
@@ -1,6 +1,10 @@
 {{errorMessage}}
 {{#each body}}
 	<div style="margin-top: 50px;">
+        <div class="row">
+            <div class="card hoverable">
+                <div class="card-content">
+
 		<h4>{{this.dba}}</h4>
 		<ul style="list-style-type:none;">
 			{{#each this}}
@@ -24,5 +28,8 @@
     		<li>{{this.grade_date}}</li>
     		<li>{{this.inspection_type}}</li> -->
 		</ul>
+                </div>
+            </div>
+        </div>        
 	</div>
 {{/each}}
diff --git a/views/search.hbs b/views/search.hbs
@@ -2,7 +2,7 @@
 <html>
     <head>
         <meta charset="utf-8">
-        <title>NYC Restaurant Inspection API</title>
+        <title>NYC Restaurant Inspector</title>
 		<!-- Compiled and minified CSS -->
 		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
 		<!--Import Google Icon Font-->    
@@ -12,10 +12,16 @@
     </head>
     <body>
     	{{> header}}
-    	<div class="container">
-	    	{{> searchForm}}
-	    	{{> searchResults}}
-    	</div>
+    	<main style="padding: 35px;">
+	    	<div class="container" style="text-align: center; margin-bottom: 50px;">
+			    <h1>{{pageTitle}}</h1>
+	    	</div>    	
+	    	<div class="container">
+		    	{{> searchForm}}
+		    	{{> searchResults}}
+	    	</div>
+    	</main>
+    	{{> footer}}
     </body>
 
 	<!-- Compiled and minified JavaScript -->