Skip to content

Commit

Permalink
Install Materialize front-end framework
Browse files Browse the repository at this point in the history 
Make website based on Google Material Design. Issue #3
  • Loading branch information
@CodeWritingCow
CodeWritingCow committed Dec 21, 2017
1 parent a73743a commit 1812d16
Show file tree
Hide file tree
Showing 5 changed files with 145 additions and 85 deletions.
22 changes: 20 additions & 2 deletions views/home.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,28 @@
<head>
<meta charset="utf-8">
<title>NYC Restaurant Inspection API</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-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
{{> header}}
{{> searchForm}}
{{> searchResults}}
<div class="container">
{{> searchForm}}
{{> searchResults}}
</div>
</body>

<!-- Compiled and minified JavaScript -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<script>
$(document).ready(function() {
$('select').material_select();
$(".button-collapse").sideNav();
});
</script>
</html>
20 changes: 17 additions & 3 deletions views/partials/header.hbs
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,19 @@
<header>
<p><a href="/">Home</a></p>
<p><a href="/search">Search</a></p>
<h1>{{pageTitle}}</h1>
<nav>
<div class="nav-wrapper container">
<a href="./" class="brand-logo">NYC Restaurant Inspections</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>
<li><a href="/search">Search</a></li>
</ul>

<ul class="side-nav" id="mobile-demo">
<li><a href="./">Home</a></li>
<li><a href="./search">Search</a></li>
</ul>
</div>
</nav>

<h1 style="text-align: center;">{{pageTitle}}</h1>
</header>
163 changes: 87 additions & 76 deletions views/partials/searchForm.hbs
View file
Original file line number Diff line number Diff line change
@@ -1,81 +1,89 @@
<form action="/search" method="POST">
<fieldset>
<label for="dba">Business Name</label>
<input type="text" name="dba" placeholder="Business name">
</fieldset>
<div class="row">
<form class="col s12" action="/search" method="POST">
<div class="row">
<div class="input-field col s6">
<label for="dba">Business Name</label>
<input type="text" name="dba" placeholder="Business name">
</div>

<fieldset>
<label for="cuisine_description">Cuisine Type</label>
<select name="cuisine_description" id="cuisine_description">
<option value="" disabled selected>None</option>
<option value="American">American</option>
<option value="Asian">Asian</option>
<option value="Bagels/Pretzels">Bagels/Pretzels</option>
<option value="Bakery">Bakery</option>
<option value="Delicatessen">Delicatessen</option>
<option value="Donuts">Donuts</option>
<option value="Chinese">Chinese</option>
<option value="Chinese/Japanese">Chinese/Japanese</option>
<option value="Japanese">Japanese</option>
<option value="Italian">Italian</option>
<option value="Pizza">Pizza</option>
<option value="Pizza/Italian">Pizza/Italian</option>
<option value="Mexican">Mexican</option>
<option value="Tex-Mex">Tex-Mex</option>
<option value="Latin (Cuban, Dominican, Puerto Rican, South & Central American)">Latin (Cuban, Dominican, Puerto Rican, South & Central American)</option>
<option value="Armenian">Armenian</option>
<option value="Caribbean">Caribbean</option>
<option value="Chicken">Chicken</option>
<option value="Hamburgers">Hamburgers</option>
<option value="Ice Cream, Gelato, Yogurt, Ices">Ice Cream, Gelato, Yogurt, Ices</option>
<option value="Indian">Indian</option>
<option value="Eastern European">Eastern European</option>
<option value="Ethiopian">Ethiopian</option>
<option value="Filipino">Filipino</option>
<option value="Fruits/Vegetables">Fruits/Vegetables</option>
<option value="Greek">Greek</option>
<option value="German">German</option>
<option value="Café/Coffee/Tea">Cafe</option>
<option value="Jewish/Kosher">Jewish/Kosher</option>
<option value="Mediterranean">Mediterranean</option>
<option value="Pancakes/Waffles">Pancakes/Waffles</option>
<option value="Peruvian">Peruvian</option>
<option value="Polish">Polish</option>
<option value="Russian">Russian</option>
<option value="Salads">Salads</option>
<option value="Sandwiches">Sandwiches</option>
<option value="Sandwiches/Salads/Mixed Buffet">Sandwiches/Salads/Mixed Buffet</option>
<option value="Seafood">Seafood</option>
<option value="Spanish">Spanish</option>
<option value="Steak">Steak</option>
<option value="Soul Food">Soul Food</option>
<option value="Thai">Thai</option>
<option value="Vegetarian">Vegetarian</option>
<option value="Vietnamese/Cambodian/Malaysia">Vietnamese/Cambodian/Malaysia</option>
<option value="Other">Other</option>
</select>
</fieldset>
<div class="input-field col s6">
<select name="cuisine_description" id="cuisine_description">
<option value="" disabled selected>None</option>
<option value="American">American</option>
<option value="Asian">Asian</option>
<option value="Bagels/Pretzels">Bagels/Pretzels</option>
<option value="Bakery">Bakery</option>
<option value="Delicatessen">Delicatessen</option>
<option value="Donuts">Donuts</option>
<option value="Chinese">Chinese</option>
<option value="Chinese/Japanese">Chinese/Japanese</option>
<option value="Japanese">Japanese</option>
<option value="Italian">Italian</option>
<option value="Pizza">Pizza</option>
<option value="Pizza/Italian">Pizza/Italian</option>
<option value="Mexican">Mexican</option>
<option value="Tex-Mex">Tex-Mex</option>
<option value="Latin (Cuban, Dominican, Puerto Rican, South & Central American)">Latin (Cuban, Dominican, Puerto Rican, South & Central American)</option>
<option value="Armenian">Armenian</option>
<option value="Caribbean">Caribbean</option>
<option value="Chicken">Chicken</option>
<option value="Hamburgers">Hamburgers</option>
<option value="Ice Cream, Gelato, Yogurt, Ices">Ice Cream, Gelato, Yogurt, Ices</option>
<option value="Indian">Indian</option>
<option value="Eastern European">Eastern European</option>
<option value="Ethiopian">Ethiopian</option>
<option value="Filipino">Filipino</option>
<option value="Fruits/Vegetables">Fruits/Vegetables</option>
<option value="Greek">Greek</option>
<option value="German">German</option>
<option value="Café/Coffee/Tea">Cafe</option>
<option value="Jewish/Kosher">Jewish/Kosher</option>
<option value="Mediterranean">Mediterranean</option>
<option value="Pancakes/Waffles">Pancakes/Waffles</option>
<option value="Peruvian">Peruvian</option>
<option value="Polish">Polish</option>
<option value="Russian">Russian</option>
<option value="Salads">Salads</option>
<option value="Sandwiches">Sandwiches</option>
<option value="Sandwiches/Salads/Mixed Buffet">Sandwiches/Salads/Mixed Buffet</option>
<option value="Seafood">Seafood</option>
<option value="Spanish">Spanish</option>
<option value="Steak">Steak</option>
<option value="Soul Food">Soul Food</option>
<option value="Thai">Thai</option>
<option value="Vegetarian">Vegetarian</option>
<option value="Vietnamese/Cambodian/Malaysia">Vietnamese/Cambodian/Malaysia</option>
<option value="Other">Other</option>
</select>
<label>Cuisine Type</label>
</div>
</div>

<fieldset>
<label for="zipcode">Zipcode</label>
<input type="text" name="zipcode" placeholder="zipcode">

<!-- <label for="street">Street</label>
<input disabled type="text" name="street" placeholder="street address">
<div class="row">
<div class="input-field col s6">
<label for="zipcode">Zipcode</label>
<input type="text" name="zipcode" placeholder="zipcode">

<!-- <label for="street">Street</label>
<input disabled type="text" name="street" placeholder="street address">
<label for="city">City</label>
<input disabled type="text" name="city" placeholder="city"> -->
<label for="city">City</label>
<input disabled type="text" name="city" placeholder="city"> -->
</div>

<label for="boro">Borough</label>
<select id="boro" name="boro">
<option value="" disabled selected>None</option>
<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>
</fieldset>
<div class="input-field col s6">
<select id="boro" name="boro">
<option value="" disabled selected>None</option>
<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>
<label>Borough</label>
</div>

</div>

<!-- <fieldset>
<label for="startDate">Start:</label>
Expand All @@ -84,5 +92,8 @@
<input disabled type="date" name="endDate">
</fieldset> -->

<input type="submit" value="Search">
</form>
<button class="btn waves-effect waves-light" type="submit">Search
<i class="material-icons right">search</i>
</button>
</form>
</div>
2 changes: 1 addition & 1 deletion views/partials/searchResults.hbs
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{{errorMessage}}
{{#each body}}
<div style="margin-top: 50px;">
<h3>{{this.dba}}</h3>
<h4>{{this.dba}}</h4>
<ul style="list-style-type:none;">
{{#each this}}
<li><strong>{{@key}}:</strong> {{this}}</li>
Expand Down
23 changes: 20 additions & 3 deletions views/search.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,28 @@
<head>
<meta charset="utf-8">
<title>NYC Restaurant Inspection API</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-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
{{> header}}
{{> searchForm}}

{{> searchResults}}
<div class="container">
{{> searchForm}}
{{> searchResults}}
</div>
</body>

<!-- Compiled and minified JavaScript -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<script>
$(document).ready(function() {
$('select').material_select();
$(".button-collapse").sideNav();
});
</script>
</html>

0 comments on commit 1812d16

Please sign in to comment.