Skip to content

Commit

Permalink
mockup v1
Browse files Browse the repository at this point in the history
  • Loading branch information
tsm15002 committed Nov 22, 2016
1 parent e941028 commit 1e01f9c
Show file tree
Hide file tree
Showing 2 changed files with 186 additions and 11 deletions.
179 changes: 177 additions & 2 deletions app/pages/categories/view.html
Original file line number Diff line number Diff line change
@@ -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>
18 changes: 9 additions & 9 deletions assets/js/bundle.js
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,15 @@ app.controller('404Ctrl', ['$scope', function ($scope) {
}]);


app.controller('LoginCtrl', ['$scope', function ($scope) {
$scope.page.title = 'Login';
$scope.page.id = 'login';
$scope.page.yourVar = "globalStuff";

$scope.var2 = "localStuff";
}]);


app.controller('FoodCtrl', ['$scope', function ($scope) {
$scope.page.title = 'Food';
$scope.page.id = 'food';
Expand All @@ -116,12 +125,3 @@ app.controller('CategoryCtrl', ['$scope', function ($scope) {

$scope.var2 = "localStuff";
}]);


app.controller('LoginCtrl', ['$scope', function ($scope) {
$scope.page.title = 'Login';
$scope.page.id = 'login';
$scope.page.yourVar = "globalStuff";

$scope.var2 = "localStuff";
}]);

0 comments on commit 1e01f9c

Please sign in to comment.