Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
Merge pull request #3 from dmd-web-and-mobile/feature/categories
Feature/categories
- Loading branch information
Showing
1 changed file
with
177 additions
and
2 deletions.
There are no files selected for viewing
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
| 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"><</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> |