Make searhFormParallax partial

Move form into its own partial. Issue #23
CodeWritingCow · Apr 7, 2018 · 2ebaf13 · 2ebaf13
1 parent 5c2e5a5
commit 2ebaf13
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 28 deletions.
diff --git a/views/home.hbs b/views/home.hbs
@@ -20,34 +20,7 @@
 				<div class="parallax">
 					<img src="/public/assets/img/michael-browning-14090-unsplash-1024x683.jpg" alt="Men working in kitchen. Photo by Michael Browning on Unsplash." class="black-white">
 				</div>
-				{{!-- <div class="container">
-					<h1 class="red-text text-lighten-2 blue-grey lighten-5 card" style="font-weight: bold; padding:10px;">NYC Food Safety</h1>
-				</div> --}}
-
-				<div class="container">
-					<div class="row">
-						<form class="col s12 card" style="border:20px solid teal;">
-							<h3 class="teal-text text-lighten-2" style="font-weight: bold;">Is Your Food Safe?</h3>
-							<h5 class="">Find a restaurant's inspection records</h5>
-							<div class="row">
-								<div class="input-field col s6">
-									<i class="material-icons prefix">restaurant</i>
-									<input id="name" type="text" class="validate" placeholder="Restaurant name">
-									{{!-- <label for="name">Name</label> --}}
-								</div>
-								<div class="input-field col s3">
-									<i class="material-icons prefix">location_city</i>
-									<input id="borough" type="text" class="validate" placeholder="borough">
-									{{!-- <label for="borough">borough</label> --}}
-								</div>
-								<div class="input-field col s3">
-									<button class="btn-large waves-effect waves-light" type="submit" name="action">SEARCH
-									</button>
-								</div>
-							</div>
-						</form>
-					</div>
-				</div>
+				{{> searchFormParallax}}
 			</div>
 
     	<div class="blue-grey lighten-5 hide-on-med-and-up">

diff --git a/views/partials/searchFormParallax.hbs b/views/partials/searchFormParallax.hbs
@@ -0,0 +1,29 @@
+<div class="container">
+    <div class="row">
+        <form class="col s12 card" style="border:20px solid teal;">
+            <h4 class="teal-text text-lighten-2 hide-on-med-and-down" style="font-weight: bold;">Is Your Food Safe?</h4>
+            <h5>Find a restaurant's inspection records</h5>
+            <div class="row">
+                <div class="input-field col s6">
+                    {{!-- <i class="material-icons prefix">restaurant</i> --}}
+                    <input id="name" type="text" class="validate" placeholder="Restaurant name"> {{!--
+                    <label for="name">Name</label> --}}
+                </div>
+                <div class="input-field col s3">
+                    {{!-- <i class="material-icons prefix">location_city</i> --}}
+                    <select id="boro" name="boro">
+                        <option value="BRONX">Bronx</option>
+                        <option value="BROOKLYN">Brooklyn</option>
+                        <option value="MANHATTAN">Manhattan</option>
+                        <option value="QUEENS">Queens</option>
+                        <option value="STATEN ISLAND">Staten Island</option>
+                    </select>
+                </div>
+                <div class="input-field col s3">
+                    <button class="btn-large waves-effect waves-light" type="submit" name="action">SEARCH
+                    </button>
+                </div>
+            </div>
+        </form>
+    </div>
+</div>