first commit. added table view. fixed up nav.

dmd-web-and-mobile · Dec 8, 2016 · 73caa85 · 73caa85
1 parent bf45658
commit 73caa85
Show file tree

Hide file tree

Showing 13 changed files with 6,585 additions and 163 deletions.
diff --git a/app/pages/food/ctrl.js b/app/pages/food/ctrl.js
@@ -8,7 +8,8 @@ app.controller('FoodCtrl', ['$scope', '$http', function ($scope, $http) {
   $scope.rankSelection = {
     "green": true,
     "yellow": true,
-    "red": true
+    "red": true,
+    "gray": true
   };
   $scope.categorySelection = { "all": true };
   $scope.searchTerm = "";
@@ -29,7 +30,13 @@ app.controller('FoodCtrl', ['$scope', '$http', function ($scope, $http) {
   // GET list of categories
   $http.get("assets/json/categories.json")
   .then(function(response) {
-    $scope.categories = response.data.data;
+    var categories = response.data.data;
+    categories.forEach(function(cat){
+      $scope.categories[cat.id] = cat;
+    });
+    $scope.categories.forEach(function(c){
+      $scope.categorySelection[c.id] = false;
+    });
 
     // Preset category filters
     $scope.resetCategorySelection();
@@ -40,6 +47,7 @@ app.controller('FoodCtrl', ['$scope', '$http', function ($scope, $http) {
     $scope.categories.forEach(function(c){
       $scope.categorySelection[c.id] = false;
     });
+
   }
 
   // Category filter function

diff --git a/app/pages/food/style.styl b/app/pages/food/style.styl
@@ -1,3 +1,4 @@
+// Search bar
 .food-search
   padding-top: .5em
   i
@@ -12,28 +13,42 @@
     transform: translateY(-120%)
   .input-field.col label
     left: 0
-    
+
 .barcode
   margin: 0
 
+
+
+
+// By Category
 .food-filter
   display: flex
   flex-flow: row no-wrap
+  justify-content: center
   width: 100%
   padding: 0 1em
-  .block
+  +below(600px)
+    flex-flow: row wrap
+  .by-category
     flex: 1 500px
-    padding: 0 1em
-    &:last-child
-      flex: 0 130px
-      nav
-        display: flex
-        align-items: center
-        justify-content: center
-  nav
-    background-color: lightergray
     a
       color: black
+  nav
+    background-color: lightergray
+
+
+// Grades
+.grade
+  padding-right: 1em
+  +above(600px)
+    padding: 0 1em
+  nav
+    display: flex
+    align-items: center
+    padding: 0 .9em 0 1.3em
+    label
+      position: relative
+      top: 2px
 
 .green[type="checkbox"].filled-in:checked+label:after
   border-color: green
@@ -44,9 +59,19 @@
 .red[type="checkbox"].filled-in:checked+label:after
   border-color: red
   background-color: red
+.gray[type="checkbox"].filled-in:checked+label:after
+  border-color: gray
+  background-color: gray
 [type="checkbox"]+label
   padding-left: 26px
 
+
+
+// Table view
+
+
+
+
 .foods
   display: flex
   padding: 3em
@@ -63,28 +88,6 @@
     transition: all .2s
     &:hover
       transform: scale(.95)
-    .health
-      width: 3em
-      min-width: @width
-      min-height: @width
-      height: 100%
-      display: flex
-      align-items: center
-      justify-content: center
-      background-color: gray
-      &.rank-green
-        background-color: green
-      &.rank-yellow
-        background-color: yellow
-      &.rank-red
-        background-color: red
-
-      i
-        color: white
-    h5
-      font-size: 1.4em
-      margin: .3em .7em
-
     // "Add new food" button
     &.add
       background-color: blue
@@ -95,12 +98,47 @@
         font-size: 2.5em
       .health
         background-color: alpha(black, .27)
+    h5
+      font-size: 1.4em
+      margin: .3em .7em
 
+  .health
+    width: 3em
+    min-width: @width
+    min-height: @width
+    height: 100%
+    display: flex
+    align-items: center
+    justify-content: center
+    background-color: purple
+    i
+      color: white
+  .rank-green
+    background-color: green
+  .rank-yellow
+    background-color: yellow
+  .rank-red
+    background-color: red
+  .rank-gray
+    background-color: gray
 
 
+  .table-rank
+    width: 3.5em
+  table
+    font-size: 1.2em
+  td, th
+    cursor: pointer
+    padding: .8em
+  tr.add
+    background-color: blue
+    color: white
+    td:first-child
+      background-color: alpha(black, .27)
 
 
 
+// Modal
 .foodModal
   display: flex
   align-items: center

diff --git a/app/pages/food/view.html b/app/pages/food/view.html
@@ -15,7 +15,7 @@
 <!-- Filters -->
 <div class="food-filter container">
 
-  <div class="block">
+  <div class="by-category">
     <h5>By Category</h5>
     <nav>
       <div class="nav-wrapper">
@@ -29,7 +29,7 @@ <h5>By Category</h5>
     </nav>
   </div>
 
-  <div class="block">
+  <div class="grade">
     <h5>By Grade</h5>
     <nav>
       <input type="checkbox" class="filled-in green" id="green" ng-model="rankSelection.green">
@@ -40,28 +40,66 @@ <h5>By Grade</h5>
 
       <input type="checkbox" class="filled-in red" id="red" ng-model="rankSelection.red">
       <label for="red"></label>
+
+      <input type="checkbox" class="filled-in gray" id="gray" ng-model="rankSelection.gray">
+      <label for="gray"></label>
+    </nav>
+  </div>
+
+  <div class="table-toggle">
+    <h5>Table</h5>
+    <nav>
+      <div class="switch">
+      <label>
+        <input ng-model="tableView" type="checkbox">
+        <span class="lever"></span>
+      </label>
+      </div>
     </nav>
   </div>
 
 </div>
-<!-- End of Sorting -->
+<!-- End of Filters -->
 
 
 
 <!-- Foods List -->
 <div class="foods">
 
-  <div ng-click="create()" class="card-panel add">
+  <div ng-show="!tableView" ng-click="create()" class="card-panel add">
     <div class="health"><i class="material-icons">add</i></div>
     <h5>Add new food</h5>
   </div>
-  <!-- { category_id: '!-1'} -->
-  <!-- item in items | filter : categoryFilter | orderBy : 'name' -->
-  <div class="card-panel" ng-repeat="food in foods | filter : categoryFilter | filter : rankFilter | filter : searchTerm | orderBy : 'name'" ng-click="edit(food)">
+
+  <div ng-show="!tableView" class="card-panel" ng-repeat="food in foods | filter : categoryFilter | filter : rankFilter | filter : searchTerm | orderBy : 'name'" ng-click="edit(food)">
     <div class="health rank-{{food.rank_id}}"><i class="material-icons">favorite</i></div>
     <h5>{{food.name}}</h5>
   </div>
 
+
+
+  <table ng-show="tableView" class="striped">
+      <tr>
+        <th>Rank</th>
+        <th>Food</th>
+        <th>Category</th>
+      </tr>
+
+
+      <tr ng-click="create()" class="add">
+        <td></td>
+        <td>Add new food</td>
+        <td></td>
+      </tr>
+
+
+      <tr ng-repeat="food in foods | filter : categoryFilter | filter : rankFilter | filter : searchTerm | orderBy : 'name'" ng-click="edit(food)">
+        <td class="table-rank rank-{{food.rank_id}}"></td>
+        <td>{{food.name}}</td>
+        <td>{{categories[food.category_id].name}}</td>
+      </tr>
+  </table>
+
 </div>
 <!-- End of Foods List -->
 

diff --git a/app/root/_header.kit b/app/root/_header.kit
@@ -5,8 +5,8 @@
   <meta name="description" content="48 hours. One word. One epic photo competition.">
 
   <!-- Styles -->
-  <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
+  <link rel="stylesheet" href="assets/css/materialize.css">
+  <link rel="stylesheet" href="assets/css/icons.css">
   <link rel="stylesheet" href="assets/css/main.css">
 
   <!-- Angular & jQuery -->

diff --git a/app/root/_nav.kit b/app/root/_nav.kit
@@ -1,29 +1,30 @@
 <div class="nav-main">
 
-  <div class="left-nav">
-    <!-- Logo -->
+  <!-- Logo -->
+  <div class="logo-area">
     <i class="material-icons">local_pizza</i>
     <h4 class="logo">F2E</h4>
   </div>
 
 
-  <div class="right-nav">
-    <!-- Links -->
-    <ul class="tabs tabs-transparent row">
-      <li class="tab col s4"><a ng-class="{active: page.id==='food'}" ng-click="go('/food')">Food</a></li>
-      <li class="tab col s7"><a ng-class="{active: page.id==='cat'}" ng-click="go('/categories')">Categories</a></li>
-      <li class="tab col s4"><a ng-class="{active: page.id==='news'}" ng-click="go('/news')">News</a></li>
-      <li class="tab col s7"><a ng-class="{active: page.id==='comps'}" ng-click="go('/competitions')">Competitions</a></li>
-    </ul>
+  <!-- Links -->
+  <div class="links">
+  <ul class="tabs tabs-transparent">
+    <li class="tab"><a ng-class="{active: page.id==='food'}" ng-click="go('/food')">Food</a></li>
+    <li class="tab"><a ng-class="{active: page.id==='cat'}" ng-click="go('/categories')">Categories</a></li>
+  </ul>
+  </div>
+
 
-    <!-- Sign in/up Buttons -->
-    <a ng-click="go('/login')" class="waves-effect waves-light btn blue">Sign in</a>
-    <a ng-click="go('/login')" class="waves-effect waves-light btn">Sign out</a>
+  <!-- Sign in/up Buttons -->
+  <div class="sign-in">
+    <a ng-click="go('/login')" ng-show="!signedIn" class="waves-effect waves-light btn blue">Sign in</a>
+    <a ng-click="go('/login')" ng-show="signedIn" class="waves-effect waves-light btn">Sign out</a>
   </div>
 
 </div>
 
-<!-- <div class="spacer"></div> -->
+<div class="spacer"></div>