diff --git a/app/app.route.js b/app/app.route.js index e27597c..2dbcd17 100644 --- 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 index e69de29..0b1181f 100644 --- 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 index f45f070..2ab3c69 100644 --- a/app/pages/food/view.html +++ b/app/pages/food/view.html @@ -1,2 +1,111 @@ -
-

You've reached pages/food/view.html.

+
+ +
+ + + search +
+ +
+ + + +
+ +
+
By Category
+ +
+ + +
+
By Nutrient
+ +
+ +
+
By Grade
+ +
+ +
+ + + + +
+ + + +
+ + + diff --git a/app/root/_header.kit b/app/root/_header.kit index 433acc8..ebdb30d 100644 --- a/app/root/_header.kit +++ b/app/root/_header.kit @@ -13,11 +13,11 @@ - + diff --git a/app/sandbox/ctrl.js b/app/sandbox/ctrl.js index c58d1d0..b5aad9c 100644 --- 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 index 90472a6..ce8e37a 100644 --- 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 index 7fd4e10..3827c48 100644 --- 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 index c785237..7e87501 100644 --- 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 index c8294c3..f835eb3 100644 --- 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 index 3442bfe..a097045 100644 --- 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 index 28eb4ab..689caf0 100644 --- a/index.html +++ b/index.html @@ -15,11 +15,11 @@ - +