UI tweaks (amended with small fix)

dmd-web-and-mobile · Mar 9, 2017 · a8083c8 · a8083c8
1 parent 9cde9d1
commit a8083c8
Show file tree

Hide file tree

Showing 17 changed files with 162 additions and 108 deletions.
diff --git a/app/app.js b/app/app.js
@@ -6,7 +6,8 @@ var app = angular.module('app', ['ngRoute', 'ngResource', 'ngCookies']);
 // Factories
 
 app.factory('Foods', function($resource) {
-  return $resource('assets/json/foods.json');
+  return $resource('http://foodbank.develop.digitalmediauconn.org/api/food/all');
+  // return $resource('assets/json/foods.json');
 });
 
 app.factory('FoodDetail', function($resource) {

diff --git a/app/pages/404/style.styl b/app/pages/404/style.styl
@@ -0,0 +1,2 @@
+.f404
+  text-align center
diff --git a/app/pages/404/view.html b/app/pages/404/view.html
@@ -1,2 +1,2 @@
 <div class="spacer"></div>
-<h1>You've reached pages/404/view.html by going to an invalid link.</h1>
+<h1 class="f404">404 Page not found</h1>
diff --git a/app/pages/categories/anotherCtrl.js b/app/pages/categories/anotherCtrl.js
diff --git a/app/pages/categories/style.styl b/app/pages/categories/style.styl
@@ -11,3 +11,12 @@
 select {
 	display:block!important;
 }
+
+.row
+	display flex
+.catsWrap
+	max-width 100%
+	min-width 100%
+	+above(700px)
+		min-width: 680px
+	margin 0 auto
diff --git a/app/pages/categories/view.html b/app/pages/categories/view.html
@@ -1,6 +1,6 @@
 <div class="container">
 	<div class="row">
-		<div class="col s12 m9">
+		<div class="catsWrap">
 			<ul class="collapsible" data-collapsible="expandable">
 				<li ng-repeat="category in categories">
 		      <div class="collapsible-header">{{ category.name }}</div>
@@ -43,14 +43,14 @@
 			              	<div class="col s4">
 			              		<button class="btn red darken-3" ng-click="removeRule(category, rule)">Delete</button>
 			              	</div>
-			              </div>		
+			              </div>
 			            </div>
 			          </div>
 							</div>
 					    <div class="col s12">
-					    	
-													
-												
+
+
+
 								<button ng-click="addRule(category.name)" class="btn">Add Rule</button>
 								<button class="btn green" ng-click="saveData(category)">Save</button>
 					    </div>

diff --git a/app/pages/food/ctrl.js b/app/pages/food/ctrl.js
@@ -3,9 +3,9 @@ app.controller('FoodCtrl', ['$scope', '$http', 'Foods', 'FoodDetail', 'Categorie
   $scope.page.id = 'food';
 
   // Cookie for Table/Card view prefence
-  $scope.tableView = $cookies.get('showTable') === 'true';
-  $scope.$watch('tableView', function () {
-    $cookies.put('showTable', $scope.tableView ? 'true' : 'false');
+  $scope.cardView = $cookies.get('showTable') === 'true';
+  $scope.$watch('cardView', function () {
+    $cookies.put('showTable', $scope.cardView ? 'true' : 'false');
   });
 
   // Initialize Filters

diff --git a/app/pages/food/style.styl b/app/pages/food/style.styl
@@ -39,9 +39,9 @@
 
 // Grades
 .grade
-  padding-right: 1em
+  padding-right: 2em
   +above(600px)
-    padding: 0 1em
+    padding: 0 2em 0 0
   nav
     display: flex
     align-items: center
@@ -66,7 +66,11 @@
   padding-left: 26px
 
 
-
+.table-toggle
+  .switch
+    display flex
+  label
+    margin 0 auto
 
 .foods
   display: flex
@@ -154,6 +158,7 @@
     padding: 1em
     border: 1px solid lightgray
     min-width 300px
+    max-width 500px
     my-box-shadow()
     background: white
     [type="radio"]:not(:checked)+label, [type="radio"]:checked+label
@@ -200,6 +205,7 @@
   font-size 1.2em
   align-items center
   margin-right 1em
+  max-width 100%
   padding-right 1em
   background #f5f5f5
   +above(760px)
@@ -212,9 +218,15 @@
   span
     flex-basis 100px
     margin-right 1em
+  .foodCat
+    text-align right
   .name
-    flex-basis 140px
+    flex-grow 1
+    white-space nowrap
+    text-overflow ellipsis
+    overflow-y hidden
   .barcode
+    flex-basis 117px
     color #888
     font-size 1rem
     text-align right

diff --git a/app/pages/food/view.html b/app/pages/food/view.html
@@ -3,7 +3,7 @@
 
   <div class="input-field col s6">
     <input type="text" id="search" ng-model="searchTerm">
-    <label for="search">Search for food by name!</label>
+    <label for="search">Search for food by name or category!</label>
     <i class="material-icons prefix">search</i>
   </div>
 
@@ -15,7 +15,7 @@
 <!-- Filters -->
 <div class="food-filter container">
 
-  <div class="by-category">
+  <!-- <div class="by-category">
     <h5>By Category</h5>
     <nav>
       <div class="nav-wrapper">
@@ -27,10 +27,10 @@ <h5>By Category</h5>
         </ul>
       </div>
     </nav>
-  </div>
+  </div> -->
 
   <div class="grade">
-    <h5>By Grade</h5>
+    <h5>Health Filter</h5>
     <nav>
       <input type="checkbox" class="filled-in green" id="green" ng-model="rankSelection[1]">
       <label for="green"></label>
@@ -47,11 +47,11 @@ <h5>By Grade</h5>
   </div>
 
   <div class="table-toggle">
-    <h5>Table</h5>
+    <h5>Card View</h5>
     <nav>
       <div class="switch">
       <label>
-        <input ng-model="tableView" type="checkbox">
+        <input ng-model="cardView" type="checkbox">
         <span class="lever"></span>
       </label>
       </div>
@@ -65,16 +65,16 @@ <h5>Table</h5>
 
 <!-- Foods List -->
 <div class="foods">
-  <div ng-show="!tableView" ng-click="view(food)" class="card-panel" ng-repeat="food in foods | orderBy : 'name' | filter : searchTerm | filter : categoryFilter | filter : rankFilter">
+  <div ng-show="cardView" ng-click="view(food)" class="card-panel" ng-repeat="food in foods | orderBy : 'name' | filter : searchTerm | filter : categoryFilter | filter : rankFilter">
     <div class="health rank-{{food.rank.id}}"><i class="material-icons">favorite</i></div>
     <h5>{{food.name}}</h5>
   </div>
 
-  <div ng-show="tableView" class="foodTable">
+  <div ng-show="!cardView" class="foodTable">
       <div class="foodTableItem" ng-click="view(food)" ng-repeat="food in foods | filter : categoryFilter | filter : rankFilter | filter : searchTerm | orderBy : 'name'">
         <span class="health rank-{{food.rank.id}}"><i class="material-icons">favorite</i></span>
         <span class="name">{{food.name}}</span>
-        <span>{{food.category.name}}</span>
+        <span class="foodCat">{{food.category.name}}</span>
         <span class="barcode">{{food.barcode}}</span>
       </div>
   </table>
@@ -90,13 +90,13 @@ <h4>{{foodCRUD.name || "Add New Food"}}</h4>
 <p>Barcode: <span>{{foodCRUD.barcode}}</span></p>
 <p>Grade: <span>{{foodCRUD.rank.name}}</span></p>
 <p>Category: <span>{{foodCRUD.category.name}}</span></p>
-<p>Nutrition Facts:</p>
+<!-- <p>Nutrition Facts:</p>
 <div ng-repeat="nutrient in nutrientDetail">
   {{nutrient.nutrientName}}
   {{nutrient.nutrientId}}
   {{nutrient.units}}
   {{nutrient.rank}}
-</div>
+</div> -->
 
 <!-- NOTE: End of page content -->
 

diff --git a/app/pages/login/anotherCtrl.js b/app/pages/login/anotherCtrl.js
diff --git a/app/pages/login/view.html b/app/pages/login/view.html
@@ -53,8 +53,8 @@
       </div>
 
 
-      <pre>{{ selected | json }}</pre>
-      <pre>{{ loginAttempt | json }}</pre>
+      <!-- <pre>{{ selected | json }}</pre>
+      <pre>{{ loginAttempt | json }}</pre> -->
     </div>
   </div>
-</div>
+</div>
diff --git a/app/root/_footer.kit b/app/root/_footer.kit
@@ -1,6 +1,6 @@
 <!-- Footer goes here -->
-<footer>
+<!-- <footer>
   <a href="competitions.html">Contact</a>
   <h4>F2E</h4>
   <a href="community.html">Legal Crap</a>
-</footer>
+</footer> -->
diff --git a/app/root/_nav.kit b/app/root/_nav.kit
@@ -12,16 +12,16 @@
   <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>
-    <li class="tab"><a ng-class="{active: page.id==='nutrients'}" ng-click="go('/nutrients')">Nutrients</a></li>
+    <!-- <li class="tab"><a ng-class="{active: page.id==='nutrients'}" ng-click="go('/nutrients')">Nutrients</a></li> -->
   </ul>
   </div>
 
 
   <!-- Sign in/up Buttons -->
-  <div class="sign-in">
+  <!-- <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>
 

diff --git a/app/root/root.styl b/app/root/root.styl
@@ -27,7 +27,7 @@ Table of Contents:
     padding-right: 2em
     * {display: inline}
     i
-      font-size: 6rem
+      font-size: 4rem
     h4
       font-size: 2.6rem
       font-weight: 500

diff --git a/assets/css/main.css b/assets/css/main.css
@@ -36,6 +36,9 @@ ul.tabs .tab a {
 ul.tabs .tab a:hover {
   color: inherit;
 }
+.f404 {
+  text-align: center;
+}
 .collapsible-body {
   padding: 1em;
   box-sizing: border-box;
@@ -47,6 +50,19 @@ ul.tabs .tab a:hover {
 select {
   display: block !important;
 }
+.row {
+  display: flex;
+}
+.catsWrap {
+  max-width: 100%;
+  min-width: 100%;
+  margin: 0 auto;
+}
+@media all and (min-width: 700px) {
+  .catsWrap {
+    min-width: 680px;
+  }
+}
 .food-search {
   padding-top: 0.5em;
 }
@@ -86,11 +102,11 @@ select {
   background-color: #f5f5f5;
 }
 .grade {
-  padding-right: 1em;
+  padding-right: 2em;
 }
 @media all and (min-width: 600px) {
   .grade {
-    padding: 0 1em;
+    padding: 0 2em 0 0;
   }
 }
 .grade nav {
@@ -121,6 +137,12 @@ select {
 [type="checkbox"]+label {
   padding-left: 26px;
 }
+.table-toggle .switch {
+  display: flex;
+}
+.table-toggle label {
+  margin: 0 auto;
+}
 .foods {
   display: flex;
   padding: 3em;
@@ -220,6 +242,7 @@ select {
   padding: 1em;
   border: 1px solid #f0f0f0;
   min-width: 300px;
+  max-width: 500px;
   box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
   background: #fff;
 }
@@ -273,6 +296,7 @@ select {
   font-size: 1.2em;
   align-items: center;
   margin-right: 1em;
+  max-width: 100%;
   padding-right: 1em;
   background: #f5f5f5;
   transition: all 0.2s;
@@ -291,10 +315,17 @@ select {
   flex-basis: 100px;
   margin-right: 1em;
 }
+.foodTableItem .foodCat {
+  text-align: right;
+}
 .foodTableItem .name {
-  flex-basis: 140px;
+  flex-grow: 1;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow-y: hidden;
 }
 .foodTableItem .barcode {
+  flex-basis: 117px;
   color: #888;
   font-size: 1rem;
   text-align: right;
@@ -388,7 +419,7 @@ h1.nutrientsTitle {
   display: inline;
 }
 .nav-main .logo-area i {
-  font-size: 6rem;
+  font-size: 4rem;
 }
 .nav-main .logo-area h4 {
   font-size: 2.6rem;