Skip to content
Jump to bottom

Feature/categories #3

Merged
merged 3 commits into from Nov 22, 2016
Merged

Feature/categories #3

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e941028
git flow init commit
tsm15002 Nov 21, 2016
1e01f9c
mockup v1
tsm15002 Nov 22, 2016
cb545df
merge
Nov 22, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
179 changes: 177 additions & 2 deletions app/pages/categories/view.html
View file
Open in desktop
@@ -1,2 +1,177 @@
<div class="spacer"></div>
<h1>You've reached pages/categories/view.html.</h1>
<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">&lt;</option>
<option value="ltoe">&lt;=</option>
<option value="gt">&gt;</option>
<option value="gtoe">&gt;=</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">&lt;</option>
<option value="ltoe">&lt;=</option>
<option value="gt">&gt;</option>
<option value="gtoe">&gt;=</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">&lt;</option>
<option value="ltoe">&lt;=</option>
<option value="gt">&gt;</option>
<option value="gtoe">&gt;=</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">&lt;</option>
<option value="ltoe">&lt;=</option>
<option value="gt">&gt;</option>
<option value="gtoe">&gt;=</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">&lt;</option>
<option value="ltoe">&lt;=</option>
<option value="gt">&gt;</option>
<option value="gtoe">&gt;=</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">&lt;</option>
<option value="ltoe">&lt;=</option>
<option value="gt">&gt;</option>
<option value="gtoe">&gt;=</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>