all cleaned up :). a few remnants for demo purposes

app/app.js

@@ -1,13 +1,4 @@
 var app = angular.module('app', ['ngRoute']);
 
-// Root controller
-app.controller('root', ['$scope', '$location', function ($scope, $location) {
-  $scope.page = {
-    'title' : 'Root',
-    'id' : 'root',
-    'blackNav' : false
-  };
-  $scope.go = function ( path ) {
-    $location.path( path );
-  };
-}]);
+// Root controllers in /root/ folder
+// Page controllers in /pages/[your-page] folder

app/app.route.js

@@ -1,68 +1,37 @@
 app.config( function ($routeProvider, $locationProvider) {
   $routeProvider
     .when('/', {
-      templateUrl: 'app/pages/news/view.html',
-      controller: 'NewsCtrl'
+      templateUrl: 'app/pages/food/view.html',
+      controller: 'FoodCtrl'
     })
 
-    // Sandbox
-    .when('/email', {
-      templateUrl: 'app/sandbox/email.html',
-      controller: 'EmailController'
+    .when('/login', {
+      templateUrl: 'app/pages/login/view.html',
+      controller: 'LoginCtrl'
     })
 
-    // Sandbox
-    .when('/todo', {
-      templateUrl: 'app/sandbox/todo.html',
-      controller: 'TodoController'
+    .when('/categories', {
+      templateUrl: 'app/pages/categories/view.html',
+      controller: 'CategoryCtrl'
     })
 
-    .when('/news', {
-      templateUrl: 'app/pages/news/view.html',
-      controller: 'NewsCtrl'
+    .when('/food', {
+      templateUrl: 'app/pages/food/view.html',
+      controller: 'FoodCtrl'
     })
 
-    .when('/community', {
-      templateUrl: 'app/pages/community/view.html',
-      controller: 'CommunityCtrl'
+    // Sandbox Demo
+    .when('/news', {
+      templateUrl: 'app/sandbox/news.html',
+      controller: 'NewsCtrl'
     })
 
+    // Sandbox Demo
     .when('/competitions', {
-      templateUrl: 'app/pages/competitions/view.html',
+      templateUrl: 'app/sandbox/competition.html',
       controller: 'CompetitionCtrl'
     })
 
-    .when('/c/:id', {
-      templateUrl: 'app/pages/single-competition/view.html',
-      controller: 'SingleCompetitionCtrl'
-    })
-
-    // Dashboard  ======Below This Point=======
-    .when('/dashboard', {
-      templateUrl: 'app/pages/dashboard/view.html',
-      controller: 'DashboardCtrl'
-    })
-
-    .when('/dashboard/news', {
-      templateUrl: 'app/pages/dashboard/view.html',
-      controller: 'DashboardNewsCtrl'
-    })
-
-    .when('/dashboard/competitions', {
-      templateUrl: 'app/pages/dashboard/view.html',
-      controller: 'DashboardCompetitionCtrl'
-    })
-
-    .when('/dashboard/featured-user', {
-      templateUrl: 'app/pages/dashboard/view.html',
-      controller: 'DashboardFeatureCtrl'
-    })
-
-    .when('/dashboard/users', {
-      templateUrl: 'app/pages/dashboard/view.html',
-      controller: 'DashboardUserCtrl'
-    })
-
     // 404 Not Found
     .otherwise({
       templateUrl: 'app/pages/404/view.html',

app/pages/404/ctrl.js

@@ -1,4 +1,7 @@
 app.controller('404Ctrl', ['$scope', function ($scope) {
-  $scope.test = "Title";
-  $scope.test2 = "xxdddd";
+  $scope.page.title = '404';
+  $scope.page.id = '404';
+  $scope.page.yourVar = "globalStuff";
+
+  $scope.var2 = "localStuff";
 }]);

app/pages/404/view.html

@@ -0,0 +1,2 @@
+<div class="spacer"></div>
+<h1>You've reached pages/404/view.html by going to an invalid link.</h1>

app/pages/categories/ctrl.js

@@ -0,0 +1,7 @@
+app.controller('CategoryCtrl', ['$scope', function ($scope) {
+  $scope.page.title = 'Categories';
+  $scope.page.id = 'cat';
+  $scope.page.yourVar = "globalStuff";
+
+  $scope.var2 = "localStuff";
+}]);

app/pages/categories/view.html

@@ -0,0 +1,2 @@
+<div class="spacer"></div>
+<h1>You've reached pages/categories/view.html.</h1>

app/pages/food/ctrl.js

@@ -0,0 +1,7 @@
+app.controller('FoodCtrl', ['$scope', function ($scope) {
+  $scope.page.title = 'Food';
+  $scope.page.id = 'food';
+  $scope.page.yourVar = "globalStuff";
+
+  $scope.var2 = "localStuff";
+}]);

app/pages/food/view.html

@@ -0,0 +1,2 @@
+<div class="spacer"></div>
+<h1>You've reached pages/food/view.html.</h1>

app/pages/login/ctrl.js

@@ -0,0 +1,7 @@
+app.controller('LoginCtrl', ['$scope', function ($scope) {
+  $scope.page.title = 'Login';
+  $scope.page.id = 'login';
+  $scope.page.yourVar = "globalStuff";
+
+  $scope.var2 = "localStuff";
+}]);

app/pages/login/view.html

@@ -0,0 +1,2 @@
+<div class="spacer"></div>
+<h1>You've reached pages/login/view.html.</h1>

app/root-view/_header.kit → app/root/_header.kit

@@ -21,6 +21,6 @@
 
   <!-- App -->
   <script src="assets/js/bundle.js"></script>
-  <title>{{page.title}} | Flash</title>
+  <title>{{page.title}} | F2E</title>
 </head>
 <body>

app/root-view/_nav.kit → app/root/_nav.kit

@@ -1,4 +1,4 @@
-<div class="nav-main signedIn" ng-class="{scrollStuck: page.blackNav}">
+<div class="nav-main signedIn">
 
   <div class="left-nav">
     <!-- Logo -->
@@ -10,9 +10,11 @@
   <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==='login'}" ng-click="go('/login')">Login</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>
-      <li class="tab col s4"><a ng-class="{active: page.id==='comm'}" ng-click="go('/community')">Ranks</a></li>
     </ul>
 
     <!-- Sign in/up Buttons -->
@@ -27,6 +29,8 @@
 
 </div>
 
+<!-- <div class="spacer"></div> -->
+
 
 
 <ul id="slide-out" class="side-nav">

app/root/root-ctrl.js

@@ -0,0 +1,10 @@
+app.controller('root', ['$scope', '$location', function ($scope, $location) {
+  $scope.page = {
+    'title' : 'Root',
+    'id' : 'root',
+    'blackNav' : false
+  };
+  $scope.go = function ( path ) {
+    $location.path( path );
+  };
+}]);

app/root-view/root.styl → app/root/root.styl

@@ -1,9 +1,14 @@
 /*
 Table of Contents:
+  Spacer
   Main Nav
   Footer
 */
 
+
+.spacer
+  height: 80px
+
 // Main Nav
 .nav-main
   display: flex
@@ -14,8 +19,8 @@ Table of Contents:
   height: navh = 4.5em
   width: 100%
   z-index: 10
-  &.scroll, &.scrollStuck
-    background-color: rgba(0,0,0,.8)
+  // &.scroll, &.scrollStuck
+  background-color: rgba(0,0,0,.8)
 
   .left-nav
     display: flex
@@ -52,6 +57,7 @@ Table of Contents:
   .tabs
     height: auto
     .tab
+      min-width: 80px // temporary
       height: navh
       line-height: navh
     .indicator
@@ -64,7 +70,7 @@ Table of Contents:
     a.btn
       display: none
     .tabs
-      width: 23.5em
+      min-width: 35em // used to be width: 23.5em
       position: relative
       right: 7em
 

app/sandbox/ctrl.js

@@ -1,3 +1,15 @@
+app.controller('NewsCtrl', ['$scope', function ($scope) {
+  $scope.page.title = 'News';
+  $scope.page.id = 'news';
+  $scope.page.blackNav = false;
+}]);
+
+app.controller('CompetitionCtrl', ['$scope', function ($scope) {
+  $scope.page.title = 'Competitions';
+  $scope.page.id = 'comps';
+  $scope.page.blackNav = true;
+}]);
+
 app.controller('TodoController', ['$scope', function ($scope) {
   $scope.todos = [
     { name: 'Master HTML/CSS/Javascript', completed: true },

app/sandbox/scrap.html

@@ -1,13 +1,3 @@
 <script type="text/ng-template" id="/todos.html">
   <ul></ul>
 </script>
-
-<script>
-  $('.user-nav').sideNav({
-      menuWidth: 260, // Default is 240
-      edge: 'right', // Choose the horizontal origin
-      closeOnClick: true, // Closes side-nav on <a> clicks, useful for Angular/Meteor
-      draggable: true // Choose whether you can drag to open on touch screens
-    }
-  );
-</script>