basic food ui done

dmd-web-and-mobile · Nov 19, 2016 · b45d0f5 · b45d0f5
1 parent d3ea8eb
commit b45d0f5
Show file tree

Hide file tree

Showing 11 changed files with 244 additions and 14 deletions.
diff --git a/app/app.route.js b/app/app.route.js
@@ -32,6 +32,12 @@ app.config( function ($routeProvider, $locationProvider) {
       controller: 'CompetitionCtrl'
     })
 
+    // Sandbox Demo
+    .when('/todo', {
+      templateUrl: 'app/sandbox/todo.html',
+      controller: 'TodoCtrl'
+    })
+
     // 404 Not Found
     .otherwise({
       templateUrl: 'app/pages/404/view.html',

diff --git a/app/pages/food/style.styl b/app/pages/food/style.styl
@@ -0,0 +1,45 @@
+.food-search
+  padding-top: .5em
+  i
+    cursor: pointer
+    top: 6px
+    right: 0
+    &:hover
+      color: #888
+      transform: scale(.9)
+      transition: all .2s
+
+.food-filter
+  display: flex
+  flex-flow: row wrap
+  width: 100%
+  padding: 0 1em
+  .block
+    flex: 1 500px
+    padding: 0 1em
+    &:last-child
+      flex: 0 130px
+      nav
+        box-shadow: none
+        display: flex
+        align-items: center
+        justify-content: center
+  nav
+    background-color: lightergray
+    a
+      color: black
+
+.green[type="checkbox"].filled-in:checked+label:after
+  border-color: green
+  background-color: green
+.yellow[type="checkbox"].filled-in:checked+label:after
+  border-color: yellow
+  background-color: yellow
+.red[type="checkbox"].filled-in:checked+label:after
+  border-color: red
+  background-color: red
+[type="checkbox"]+label
+  padding-left: 26px
+
+.foods
+  padding-top: 3em
diff --git a/app/pages/food/view.html b/app/pages/food/view.html
@@ -1,2 +1,111 @@
-<div class="spacer"></div>
-<h1>You've reached pages/food/view.html.</h1>
+<div class="container food-search">
+
+  <div class="input-field col s6">
+    <input type="text" id="autocomplete-input" class="autocomplete">
+    <label for="autocomplete-input">Search for food by name!</label>
+    <i class="material-icons prefix">search</i>
+  </div>
+
+</div>
+
+
+
+<div class="food-filter container">
+
+  <div class="block">
+    <h5>By Category</h5>
+    <nav>
+      <div class="nav-wrapper">
+        <ul class="left">
+          <li><a>All</a></li>
+          <li><a>Fruit</a></li>
+          <li><a>Veggie</a></li>
+          <li class="active"><a>Fattie</a></li>
+        </ul>
+      </div>
+    </nav>
+  </div>
+
+
+  <div class="block">
+    <h5>By Nutrient</h5>
+    <nav>
+      <div class="nav-wrapper">
+        <ul class="left">
+          <li><a>All</a></li>
+          <li><a>SatFat</a></li>
+          <li class="active"><a>Sugar</a></li>
+          <li class="active"><a>Carbs</a></li>
+          <li><a>Whatever</a></li>
+        </ul>
+      </div>
+    </nav>
+  </div>
+
+  <div class="block">
+    <h5>By Grade</h5>
+    <nav>
+      <input type="checkbox" class="filled-in green" id="green" checked="checked" />
+      <label for="green"></label>
+
+      <input type="checkbox" class="filled-in yellow" id="yellow" checked="checked" />
+      <label for="yellow"></label>
+
+      <input type="checkbox" class="filled-in red" id="red" checked="checked" />
+      <label for="red"></label>
+    </nav>
+  </div>
+
+</div>
+
+
+
+
+<div class="foods container row">
+<!-- <a class="btn" onClick="expandAll();"><i class="material-icons left">fullscreen</i>Expand All</a>
+<a class="btn" onClick="collapseAll();"><i class="material-icons left">fullscreen_exit</i>Collapse All</a> -->
+  <ul class="collapsible col s5" data-collapsible="expandable">
+      <li>
+        <div class="collapsible-header"><a><i class="material-icons">filter_drama</i>Apple</a></div>
+        <div class="collapsible-body"><p>First Things First</p></div>
+      </li>
+      <li>
+        <div class="collapsible-header"><a><i class="material-icons">filter_drama</i>Mike's Hard Lemonade</a></div>
+        <div class="collapsible-body"><p>First Things First</p></div>
+      </li>
+      <li>
+        <div class="collapsible-header"><a><i class="material-icons">filter_drama</i>Absolut Vodka</a></div>
+        <div class="collapsible-body"><p>First Things First</p></div>
+      </li>
+  </ul>
+  <ul class="collapsible col s5 push-s1" data-collapsible="expandable">
+      <li>
+        <div class="collapsible-header"><a><i class="material-icons">filter_drama</i>Newman's Own Oil &amp; Vinegar Dressing</a></div>
+        <div class="collapsible-body"><p>First Things First</p></div>
+      </li>
+      <li>
+        <div class="collapsible-header"><a><i class="material-icons">filter_drama</i>Tater Tots</a></div>
+        <div class="collapsible-body"><p>First Things First</p></div>
+      </li>
+      <li>
+        <div class="collapsible-header"><a><i class="material-icons">filter_drama</i>Twinkies</a></div>
+        <div class="collapsible-body"><p>First Things First</p></div>
+      </li>
+  </ul>
+</div>
+
+
+<script>
+$(".collapsible").collapsible({accordion: false});
+// function expandAll(){
+//   $(".collapsible-header").addClass("active");
+//   $(".collapsible").collapsible({accordion: false});
+// }
+// function collapseAll(){
+//   $(".collapsible-header").removeClass(function(){
+//     return "active";
+//   });
+//   $(".collapsible").collapsible({accordion: true});
+//   $(".collapsible").collapsible({accordion: false});
+// }
+</script>
diff --git a/app/root/_header.kit b/app/root/_header.kit
@@ -13,11 +13,11 @@
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.min.js"></script>
-
   <!-- Materialize -->
   <!-- <script src="https://cdn.rawgit.com/Dogfalo/materialize/master/dist/js/materialize.min.js"></script> -->
   <script src="assets/js/materialize.js"></script>
   <script src="assets/js/tabs.js"></script>
+  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-materialize/0.2.1/angular-materialize.min.js"></script> -->
 
   <!-- App -->
   <script src="assets/js/bundle.js"></script>

diff --git a/app/sandbox/ctrl.js b/app/sandbox/ctrl.js
@@ -10,7 +10,7 @@ app.controller('CompetitionCtrl', ['$scope', function ($scope) {
   $scope.page.blackNav = true;
 }]);
 
-app.controller('TodoController', ['$scope', function ($scope) {
+app.controller('TodoCtrl', ['$scope', function ($scope) {
   $scope.todos = [
     { name: 'Master HTML/CSS/Javascript', completed: true },
     { name: 'Learn AngularJS', completed: false },

diff --git a/app/sandbox/whatever.styl b/app/sandbox/whatever.styl
@@ -31,7 +31,7 @@ header.label
   left: -.3em
   background-color: #bbb
   &:hover // materialize fix
-    box-shadow()
+    my-box-shadow()
     background-color: #bbb
   i
     font-size: 1em

diff --git a/assets/css/main.css b/assets/css/main.css
@@ -21,6 +21,62 @@ ul.tabs .tab a {
 ul.tabs .tab a:hover {
   color: inherit;
 }
+.food-search {
+  padding-top: 0.5em;
+}
+.food-search i {
+  cursor: pointer;
+  top: 6px;
+  right: 0;
+}
+.food-search i:hover {
+  color: #888;
+  transform: scale(0.9);
+  transition: all 0.2s;
+}
+.food-filter {
+  display: flex;
+  flex-flow: row wrap;
+  width: 100%;
+  padding: 0 1em;
+}
+.food-filter .block {
+  flex: 1 500px;
+  padding: 0 1em;
+}
+.food-filter .block:last-child {
+  flex: 0 130px;
+}
+.food-filter .block:last-child nav {
+  box-shadow: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.food-filter nav {
+  background-color: #f5f5f5;
+}
+.food-filter nav a {
+  color: #000;
+}
+.green[type="checkbox"].filled-in:checked+label:after {
+  border-color: #7ae076;
+  background-color: #7ae076;
+}
+.yellow[type="checkbox"].filled-in:checked+label:after {
+  border-color: #fddf7b;
+  background-color: #fddf7b;
+}
+.red[type="checkbox"].filled-in:checked+label:after {
+  border-color: #fd7b7b;
+  background-color: #fd7b7b;
+}
+[type="checkbox"]+label {
+  padding-left: 26px;
+}
+.foods {
+  padding-top: 3em;
+}
 .spacer {
   height: 80px;
 }

diff --git a/assets/js/bundle.js b/assets/js/bundle.js
@@ -37,6 +37,12 @@ app.config( function ($routeProvider, $locationProvider) {
       controller: 'CompetitionCtrl'
     })
 
+    // Sandbox Demo
+    .when('/todo', {
+      templateUrl: 'app/sandbox/todo.html',
+      controller: 'TodoCtrl'
+    })
+
     // 404 Not Found
     .otherwise({
       templateUrl: 'app/pages/404/view.html',
@@ -69,7 +75,7 @@ app.controller('CompetitionCtrl', ['$scope', function ($scope) {
   $scope.page.blackNav = true;
 }]);
 
-app.controller('TodoController', ['$scope', function ($scope) {
+app.controller('TodoCtrl', ['$scope', function ($scope) {
   $scope.todos = [
     { name: 'Master HTML/CSS/Javascript', completed: true },
     { name: 'Learn AngularJS', completed: false },
@@ -103,18 +109,18 @@ app.controller('CategoryCtrl', ['$scope', function ($scope) {
 }]);
 
 
-app.controller('FoodCtrl', ['$scope', function ($scope) {
-  $scope.page.title = 'Food';
-  $scope.page.id = 'food';
+app.controller('LoginCtrl', ['$scope', function ($scope) {
+  $scope.page.title = 'Login';
+  $scope.page.id = 'login';
   $scope.page.yourVar = "globalStuff";
 
   $scope.var2 = "localStuff";
 }]);
 
 
-app.controller('LoginCtrl', ['$scope', function ($scope) {
-  $scope.page.title = 'Login';
-  $scope.page.id = 'login';
+app.controller('FoodCtrl', ['$scope', function ($scope) {
+  $scope.page.title = 'Food';
+  $scope.page.id = 'food';
   $scope.page.yourVar = "globalStuff";
 
   $scope.var2 = "localStuff";

diff --git a/assets/styl/main.styl b/assets/styl/main.styl
@@ -1,7 +1,15 @@
 // Fonts
 
 // Variables
+red = #FD7B7B
+yellow = #FDDF7B
+green = #7AE076
+teal = #67E6A7
+blue = #4BA8F8
+lightgray = #F0F0F0
+lightergray = #F5F5F5
 
+// Imports
 @import 'reset'
 @import 'mixins'
 

diff --git a/assets/styl/mixins.styl b/assets/styl/mixins.styl
@@ -1,5 +1,5 @@
 // Properties
-box-shadow()
+my-box-shadow()
   box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)
 
 // Responsive

diff --git a/index.html b/index.html
@@ -15,11 +15,11 @@
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.min.js"></script>
-
   <!-- Materialize -->
   <!-- <script src="https://cdn.rawgit.com/Dogfalo/materialize/master/dist/js/materialize.min.js"></script> -->
   <script src="assets/js/materialize.js"></script>
   <script src="assets/js/tabs.js"></script>
+  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-materialize/0.2.1/angular-materialize.min.js"></script> -->
 
   <!-- App -->
   <script src="assets/js/bundle.js"></script>