Permalink
Cannot retrieve contributors at this time
Name already in use
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
foodbank/app/pages/categories/view.html
Go to fileThis commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
177 lines (174 sloc)
5.62 KB
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="container"> | |
<div class="row"> | |
<div class="col s12 m8"> | |
<ul class="collapsible" data-collapsible="expandable"> | |
<li> | |
<div class="collapsible-header">CATEGORY NAME</div> | |
<div class="collapsible-body"> | |
<div class="row"> | |
<div class="col s12"> | |
<ul class="tabs tabs--categories"> | |
<li class="tab col s4"><a class="active" href="#CATEGORY-NAME-nutrients">Nutrients</a></li> | |
<li class="tab col s4"><a href="#CATEGORY-NAME-yellow">Yellow</a></li> | |
<li class="tab col s4"><a href="#CATEGORY-NAME-green">Green</a></li> | |
</ul> | |
</div> | |
<div id="CATEGORY-NAME-nutrients" class="col s12 category-tab"> | |
<div class="row"> | |
<div class="col s12"> | |
<h4>Nutrients</h4> | |
<div class="category-nutrient-chips"></div> | |
</div> | |
</div> | |
</div> | |
<div id="CATEGORY-NAME-yellow" class="col s12 category-tab"> | |
<div class="row sugar"> | |
<div class="col s4"><p>Sugar</p></div> | |
<div class="col s4 input-field"> | |
<select> | |
<option value="lt"><</option> | |
<option value="ltoe"><=</option> | |
<option value="gt">></option> | |
<option value="gtoe">>=</option> | |
</select> | |
<label>Operation</label> | |
</div> | |
<div class="col s4"> | |
<label for="sugar_value">Value (g)</label> | |
<input type="number" id="sugar_value"> | |
</div> | |
</div> | |
<div class="row sodium"> | |
<div class="col s4"><p>Sodium</p></div> | |
<div class="col s4 input-field"> | |
<select> | |
<option value="lt"><</option> | |
<option value="ltoe"><=</option> | |
<option value="gt">></option> | |
<option value="gtoe">>=</option> | |
</select> | |
<label>Operation</label> | |
</div> | |
<div class="col s4"> | |
<label for="sodium_value">Value (g)</label> | |
<input type="number" id="sodium_value"> | |
</div> | |
</div> | |
<div class="row saturated-fat"> | |
<div class="col s4"><p>Saturated Fat</p></div> | |
<div class="col s4 input-field"> | |
<select> | |
<option value="lt"><</option> | |
<option value="ltoe"><=</option> | |
<option value="gt">></option> | |
<option value="gtoe">>=</option> | |
</select> | |
<label>Operation</label> | |
</div> | |
<div class="col s4"> | |
<label for="satfat_value">Value (g)</label> | |
<input type="number" id="satfat_value"> | |
</div> | |
</div> | |
</div> | |
<div id="CATEGORY-NAME-green" class="col s12 category-tab"> | |
<div class="row sugar"> | |
<div class="col s4"><p>Sugar</p></div> | |
<div class="col s4 input-field"> | |
<select> | |
<option value="lt"><</option> | |
<option value="ltoe"><=</option> | |
<option value="gt">></option> | |
<option value="gtoe">>=</option> | |
</select> | |
<label>Operation</label> | |
</div> | |
<div class="col s4"> | |
<label for="sugar_value">Value (g)</label> | |
<input type="number" id="sugar_value"> | |
</div> | |
</div> | |
<div class="row sodium"> | |
<div class="col s4"><p>Sodium</p></div> | |
<div class="col s4 input-field"> | |
<select> | |
<option value="lt"><</option> | |
<option value="ltoe"><=</option> | |
<option value="gt">></option> | |
<option value="gtoe">>=</option> | |
</select> | |
<label>Operation</label> | |
</div> | |
<div class="col s4"> | |
<label for="sodium_value">Value (g)</label> | |
<input type="number" id="sodium_value"> | |
</div> | |
</div> | |
<div class="row saturated-fat"> | |
<div class="col s4"><p>Saturated Fat</p></div> | |
<div class="col s4 input-field"> | |
<select> | |
<option value="lt"><</option> | |
<option value="ltoe"><=</option> | |
<option value="gt">></option> | |
<option value="gtoe">>=</option> | |
</select> | |
<label>Operation</label> | |
</div> | |
<div class="col s4"> | |
<label for="satfat_value">Value (g)</label> | |
<input type="number" id="satfat_value"> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</li> | |
</ul> | |
<p>I'd put more, but then I'd have to change lots of ID's... you get the idea #lazydev</p> | |
</div> | |
<div class="col s12 m4"> | |
<div class="card grey darken-3"> | |
<div class="card-content white-text"> | |
<span class="card-title">Filter</span> | |
<div class="row"> | |
<div class="col s12"> | |
<div class="row"> | |
<div class="input-field col s12 "> | |
<input id="by-nutrient" type="text"> | |
<label for="by-nutrient">By Nutrient</label> | |
</div> | |
</div> | |
<div class="row"> | |
<div class="input-field col s12 "> | |
<input id="by-name" type="text"> | |
<label for="by-name">By Name</label> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
<script> | |
$(document).ready(function(){ | |
$('.collapsible').collapsible(); | |
$('.tabs--categories').tabs(); | |
$('.tab').on('click', function(e) { | |
$('.category-tab').css('display', 'none'); | |
$($(this).find('a').attr('href')).css('display', 'block'); | |
}); | |
$('select').material_select(); | |
$('.category-nutrient-chips').material_chip({ | |
data: [{ | |
tag: 'Sugar', | |
}, { | |
tag: 'Sodium', | |
}, { | |
tag: 'Saturated Fat', | |
}], | |
}); | |
}); | |
</script> |