-
+
-
By Grade
+ Health Filter
-
Table
+
Card View
diff --git a/app/root/_footer.kit b/app/root/_footer.kit
index 84777ec..0b2152c 100644
--- a/app/root/_footer.kit
+++ b/app/root/_footer.kit
@@ -1,6 +1,6 @@
-
-
+
diff --git a/app/root/root.styl b/app/root/root.styl
index f7a8c6e..c7fa4dc 100644
--- 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
index 8219112..8c8f2e4 100644
--- 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;
diff --git a/assets/js/bundle.js b/assets/js/bundle.js
index f9c58dc..cbf1517 100644
--- a/assets/js/bundle.js
+++ b/assets/js/bundle.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) {
@@ -145,6 +146,13 @@ app.controller('EmailController', ['$scope', function ($scope) {
$scope.email = "rogangabe@gmail.com";
}]);
+app.controller('404Ctrl', ['$scope', function ($scope) {
+ $scope.page.title = '404';
+ $scope.page.id = '404';
+ $scope.page.yourVar = "globalStuff";
+
+ $scope.var2 = "localStuff";
+}]);
function GetRanks() {
@@ -235,75 +243,14 @@ app.controller('CategoryCtrl', ['$scope', '$http', 'Categories', 'Nutrients', fu
};
}]);
-
-app.controller('LoginCtrl', ['$scope', 'loginService', function ($scope, loginService) {
- $scope.page.title = 'Login';
- $scope.page.id = 'login';
- $scope.page.yourVar = "globalStuff";
-
- $scope.selected = {
- username: "",
- password: ""
- };
-
- $scope.loginAttempt = {
- username: "",
- password: "",
- attempt: false,
- login: false
- };
-
- $scope.loginService = loginService;
-
- $scope.login = function( username, password ) {
- $scope.loginAttempt.username = username;
- $scope.loginAttempt.password = password;
- $scope.loginAttempt.attempt = true;
- // Sanitize? Pre-check?
- console.log($scope.loginService);
- $scope.loginService.login( username, password ).then(function(response) {
- console.log(response);
- // Mock the fact that this takes longer
- setTimeout(function() {
- $scope.$apply(function() {
- $scope.loginAttempt.login = response.login;
- $scope.loginAttempt.attempt = false;
- });
- }, 1000);
- }, function(error) {
- console.error(error);
- });
- };
-
-}]);
-
-app.factory('loginService', ['$http', function($http) {
- return {
- login: function( username, password ) {
- return $http.get('/app/pages/login/example.json').then(function(response) {
- return response.data;
- }, function(error) {
- return error;
- });
- }
- };
-}]);
-app.controller('404Ctrl', ['$scope', function ($scope) {
- $scope.page.title = '404';
- $scope.page.id = '404';
- $scope.page.yourVar = "globalStuff";
-
- $scope.var2 = "localStuff";
-}]);
-
app.controller('FoodCtrl', ['$scope', '$http', 'Foods', 'FoodDetail', 'Categories', '$cookies', function ($scope, $http, Foods, FoodDetail, Categories, $cookies) {
$scope.page.title = 'Food';
$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
@@ -413,6 +360,58 @@ app.controller('FoodCtrl', ['$scope', '$http', 'Foods', 'FoodDetail', 'Categorie
}]);
+app.controller('LoginCtrl', ['$scope', 'loginService', function ($scope, loginService) {
+ $scope.page.title = 'Login';
+ $scope.page.id = 'login';
+ $scope.page.yourVar = "globalStuff";
+
+ $scope.selected = {
+ username: "",
+ password: ""
+ };
+
+ $scope.loginAttempt = {
+ username: "",
+ password: "",
+ attempt: false,
+ login: false
+ };
+
+ $scope.loginService = loginService;
+
+ $scope.login = function( username, password ) {
+ $scope.loginAttempt.username = username;
+ $scope.loginAttempt.password = password;
+ $scope.loginAttempt.attempt = true;
+ // Sanitize? Pre-check?
+ console.log($scope.loginService);
+ $scope.loginService.login( username, password ).then(function(response) {
+ console.log(response);
+ // Mock the fact that this takes longer
+ setTimeout(function() {
+ $scope.$apply(function() {
+ $scope.loginAttempt.login = response.login;
+ $scope.loginAttempt.attempt = false;
+ });
+ }, 1000);
+ }, function(error) {
+ console.error(error);
+ });
+ };
+
+}]);
+
+app.factory('loginService', ['$http', function($http) {
+ return {
+ login: function( username, password ) {
+ return $http.get('/app/pages/login/example.json').then(function(response) {
+ return response.data;
+ }, function(error) {
+ return error;
+ });
+ }
+ };
+}]);
app.controller('NutrientsCtrl', ['$scope', 'Nutrients', function ($scope, Nutrients) {
$scope.page.title = 'Nutrients';
$scope.page.id = 'nutrients';
diff --git a/index.html b/index.html
index 80e6cfa..1420184 100644
--- a/index.html
+++ b/index.html
@@ -48,16 +48,16 @@
F2E