+
+
jquery ctrl
+
+
-
-
-
- -
-
-
-
- -
-
-
-
- -
-
-
-
-
-
- -
-
-
-
- -
-
-
-
- -
-
-
-
-
+
+
diff --git a/app/root/_header.kit b/app/root/_header.kit
index ebdb30d..2ed1062 100644
--- a/app/root/_header.kit
+++ b/app/root/_header.kit
@@ -13,14 +13,16 @@
-
-
+
-
+
+
-
{{page.title}} | F2E
+
diff --git a/app/root/root-ctrl.js b/app/root/root-ctrl.js
index ba900f4..c3beffd 100644
--- a/app/root/root-ctrl.js
+++ b/app/root/root-ctrl.js
@@ -1,9 +1,17 @@
app.controller('root', ['$scope', '$location', function ($scope, $location) {
+
+ $scope.$watch('page', function () {
+ $scope.title = $scope.page.title + ' | F2E';
+ }, true);
+
$scope.page = {
'title' : 'Root',
'id' : 'root',
'blackNav' : false
};
+
+ $scope.loop = ['Apple Pie','Bananas','Peas','Newman\'s Own Oil and Vinegar Dressing','Cucumber Salad','Kraft Macaroni and Cheese','Some food','Some more food','Some junk food','Some healthy food'];
+
$scope.go = function ( path ) {
$location.path( path );
};
diff --git a/assets/css/main.css b/assets/css/main.css
index 3827c48..6af37ad 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -1,6 +1,9 @@
a {
cursor: pointer;
}
+.show {
+ display: block !important;
+}
::-webkit-scrollbar {
display: none;
}
@@ -12,6 +15,15 @@ a {
.x-ng-cloak {
display: none !important;
}
+.input-field .prefix ~ input,
+.input-field .prefix ~ textarea,
+.input-field .prefix ~ label,
+.input-field .prefix ~ .validate ~ label,
+.input-field .prefix ~ .autocomplete-content {
+ margin-left: 0;
+ width: 100%;
+ position: absolute;
+}
ul.tabs {
background: none;
}
@@ -34,6 +46,12 @@ ul.tabs .tab a:hover {
transform: scale(0.9);
transition: all 0.2s;
}
+.food-search .input-field label.active {
+ transform: translateY(-120%);
+}
+.food-search .input-field.col label {
+ left: 0;
+}
.food-filter {
display: flex;
flex-flow: row wrap;
@@ -75,7 +93,113 @@ ul.tabs .tab a:hover {
padding-left: 26px;
}
.foods {
- padding-top: 3em;
+ display: flex;
+ padding: 3em;
+ flex-wrap: wrap;
+}
+.foods .card-panel {
+ flex-grow: 1;
+ display: flex;
+ padding: 0;
+ margin: 0.5em;
+ align-items: center;
+ cursor: pointer;
+ transition: all 0.2s;
+}
+.foods .card-panel:hover {
+ transform: scale(0.95);
+}
+.foods .card-panel .health {
+ background-color: #7ae076;
+ width: 3em;
+ min-width: 3em;
+ min-height: 3em;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+.foods .card-panel .health i {
+ color: #fff;
+}
+.foods .card-panel h5 {
+ font-size: 1.4em;
+ margin: 0.3em 0.7em;
+}
+.foods .card-panel.add {
+ background-color: #4ba8f8;
+ color: #fff;
+}
+@media all and (min-width: 500px) {
+ .foods .card-panel.add {
+ max-width: 17em;
+ }
+}
+.foods .card-panel.add i {
+ font-size: 2.5em;
+}
+.foods .card-panel.add .health {
+ background-color: rgba(0,0,0,0.27);
+}
+.food-crud {
+ font-size: 1.1em;
+ padding: 1em;
+ border: 1px solid #f0f0f0;
+ box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
+ background: #fff;
+}
+.food-crud [type="radio"]:not(:checked)+label,
+.food-crud [type="radio"]:checked+label {
+ padding-left: 1.7em;
+ padding-right: 1em;
+}
+.food-crud .grade {
+ margin-bottom: 2em;
+}
+.food-crud h4 {
+ margin: 5px 0 25px 0;
+}
+.food-crud p {
+ font-size: 1.1em;
+ font-weight: 500;
+ color: #bbb;
+ margin-bottom: 5px;
+}
+.food-crud a.btn {
+ width: 48%;
+}
+.food-crud .orange {
+ float: right;
+}
+.food-crud .nutrition {
+ margin-bottom: 1.5em;
+}
+.food-crud .nutrition td {
+ padding: 0.5em 5px;
+}
+.food-crud .nutrition td:first-child {
+ font-weight: 500;
+ width: 50%;
+}
+.modal_ .editContent {
+ display: none;
+}
+.modal_.editMode .editContent {
+ display: inline;
+}
+.modal_ {
+ align-items: center;
+ justify-content: center;
+ display: none; /* Hidden by default */
+ position: fixed; /* Stay in place */
+ z-index: 1; /* Sit on top */
+ left: 0;
+ top: 0;
+ width: 100%; /* Full width */
+ height: 100%; /* Full height */
+ overflow: auto; /* Enable scroll if needed */
+ background-color: #000; /* Fallback color */
+ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.spacer {
height: 80px;
diff --git a/assets/js/bundle.js b/assets/js/bundle.js
index 7e87501..9aa9625 100644
--- a/assets/js/bundle.js
+++ b/assets/js/bundle.js
@@ -53,11 +53,19 @@ app.config( function ($routeProvider, $locationProvider) {
});
app.controller('root', ['$scope', '$location', function ($scope, $location) {
+
+ $scope.$watch('page', function () {
+ $scope.title = $scope.page.title + ' | F2E';
+ }, true);
+
$scope.page = {
'title' : 'Root',
'id' : 'root',
'blackNav' : false
};
+
+ $scope.loop = ['Apple Pie','Bananas','Peas','Newman\'s Own Oil and Vinegar Dressing','Cucumber Salad','Kraft Macaroni and Cheese','Some food','Some more food','Some junk food','Some healthy food'];
+
$scope.go = function ( path ) {
$location.path( path );
};
@@ -109,18 +117,18 @@ app.controller('CategoryCtrl', ['$scope', function ($scope) {
}]);
-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";
}]);
-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";
diff --git a/assets/js/flowtype.js b/assets/js/flowtype.js
new file mode 100644
index 0000000..687b033
--- /dev/null
+++ b/assets/js/flowtype.js
@@ -0,0 +1,49 @@
+
+/*
+* FlowType.JS v1.1
+* Copyright 2013-2014, Simple Focus http://simplefocus.com/
+*
+* FlowType.JS by Simple Focus (http://simplefocus.com/)
+* is licensed under the MIT License. Read a copy of the
+* license in the LICENSE.txt file or at
+* http://choosealicense.com/licenses/mit
+*
+* Thanks to Giovanni Difeterici (http://www.gdifeterici.com/)
+*/
+
+(function($) {
+ $.fn.flowtype = function(options) {
+
+// Establish default settings/variables
+// ====================================
+ var settings = $.extend({
+ maximum : 9999,
+ minimum : 1,
+ maxFont : 9999,
+ minFont : 1,
+ fontRatio : 35
+ }, options),
+
+// Do the magic math
+// =================
+ changes = function(el) {
+ var $el = $(el),
+ elw = $el.width(),
+ width = elw > settings.maximum ? settings.maximum : elw < settings.minimum ? settings.minimum : elw,
+ fontBase = width / settings.fontRatio,
+ fontSize = fontBase > settings.maxFont ? settings.maxFont : fontBase < settings.minFont ? settings.minFont : fontBase;
+ $el.css('font-size', fontSize + 'px');
+ };
+
+// Make the magic visible
+// ======================
+ return this.each(function() {
+ // Context for resize callback
+ var that = this;
+ // Make changes upon resize
+ $(window).resize(function(){changes(that);});
+ // Set changes on load
+ changes(this);
+ });
+ };
+}(jQuery));
diff --git a/assets/styl/reset.styl b/assets/styl/reset.styl
index 08d47b2..1b9926f 100644
--- a/assets/styl/reset.styl
+++ b/assets/styl/reset.styl
@@ -2,6 +2,9 @@
a
cursor: pointer
+.show
+ display: block !important
+
::-webkit-scrollbar
display: none
@@ -12,6 +15,11 @@ a
}
// Materialize Resets
+.input-field .prefix ~ input, .input-field .prefix ~ textarea, .input-field .prefix ~ label, .input-field .prefix ~ .validate ~ label, .input-field .prefix ~ .autocomplete-content
+ margin-left: 0
+ width: 100%
+ position: absolute
+
ul.tabs
background: none
.tab a
diff --git a/index.html b/index.html
index 689caf0..bc643e1 100644
--- a/index.html
+++ b/index.html
@@ -15,15 +15,17 @@
-
-
+
-
+
+
-
{{page.title}} | F2E
+