Angular setup and css fixes

Added a background image from http://subtlepatterns.com/halftone/ Setup initial boiler plate for angular app Cleaned up error page to look a bit nicer
dropbox · Jan 1, 2015 · e177a3b · e177a3b
1 parent 9b68b2f
commit e177a3b
Show file tree

Hide file tree

Showing 7 changed files with 94 additions and 9 deletions.
diff --git a/nsot/static/css/nsot.css b/nsot/static/css/nsot.css
@@ -1,7 +1,32 @@
+body {
+    /* Background image comes from http://subtlepatterns.com/
+    * and is CC BY-SA 3.0 - Subtle Patterns © Atle Mo.
+    *
+    * http://subtlepatterns.com/halftone/
+    */
+    background-image:url('/static/images/halftone/halftone.png');
+    /* Force scrollbar so collapsed divs don't jerk
+        * the page around when they grow larger than
+        * the page.
+    */
+    overflow-y: scroll;
+    margin-bottom: 20px;
+
+
+}
+
+.error-box {
+    margin-top: 100px;
+    box-shadow: 3px 3px 6px 0px rgba(155, 155, 155, 1);
+}
+
 .container-fluid {
     margin-bottom: 20px;
 }
 
+.error-box {
+}
+
 .navbar-default {
     background-color: #343434;
     border-color: #a3114f;

diff --git a/nsot/static/images/halftone/halftone.png b/nsot/static/images/halftone/halftone.png
diff --git a/nsot/static/images/halftone/readme.txt b/nsot/static/images/halftone/readme.txt
@@ -0,0 +1,8 @@
+
+
+========================================================
+ This pattern is downloaded from www.subtlepatterns.com
+ If you need more, that's where to get'em.
+========================================================
+
+
diff --git a/nsot/static/js/app.js b/nsot/static/js/app.js
@@ -0,0 +1,35 @@
+(function() {
+
+    app = angular.module("nsot", ["ngRoute"]);
+
+    app.config(function($interpolateProvider){
+        $interpolateProvider.startSymbol("[[");
+        $interpolateProvider.endSymbol("]]");
+    })
+    .config(function($logProvider){
+        $logProvider.debugEnabled(true);
+    })
+    .config(function($locationProvider) {
+        $locationProvider.html5Mode({
+            enabled: true,
+            requireBase: false
+        });
+    })
+    .config(function($routeProvider) {
+        $routeProvider
+        .when("/", {
+            templateUrl: "/static/templates/index.html",
+            controller: "IndexController"
+        })
+        .otherwise({redirectTo: "/"});
+    });
+
+    app.controller("IndexController", [
+            "$scope", "$http", "$location",
+            function($scope, $http, $location) {
+        console.log("hello");
+        $scope.hello = "Welcome to the Index page."
+
+    }]);
+
+})();
diff --git a/nsot/static/templates/index.html b/nsot/static/templates/index.html
@@ -0,0 +1,3 @@
+<div class="text-center">
+    [[ hello ]]
+</div>
diff --git a/nsot/templates/app.html b/nsot/templates/app.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 {% autoescape true %}
-<html ng-app="nsot">
+<html lang="en" ng-app="nsot">
     <head>
         <title>NSoT</title>
 
@@ -23,17 +23,17 @@
             </div>
 
             <div class="row content">
-                <div class="col-md-12 text-center">
-                    {% block content %}
-                    {% endblock %}
-                </div>
+                <ng-view></ng-view>
             </div>
         </div>
 
+        <script src="{{cdnjs_prefix}}/ajax/libs/angular.js/1.3.8/angular.min.js"></script>
+        <script src="{{cdnjs_prefix}}/ajax/libs/angular.js/1.3.8/angular-route.min.js"></script>
         <script src="{{cdnjs_prefix}}/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
         <script src="{{cdnjs_prefix}}/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
         <script src="{{cdnjs_prefix}}/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
         <script src="{{cdnjs_prefix}}/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
+        <script src="/static/js/app.js"></script>
     </body>
 </html>
 {% endautoescape %}
diff --git a/nsot/templates/error.html b/nsot/templates/error.html
@@ -1,19 +1,33 @@
 <!DOCTYPE html>
 {% autoescape true %}
-<html>
+<html lang="en">
     <head>
         <title>NSoT Error</title>
 
         <link href="{{cdnjs_prefix}}/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css"
               rel="stylesheet"
               media="screen">
+        <link href="/static/css/nsot.css"
+              rel="stylesheet"
+              media="screen">
     </head>
     <body>
         <div class="container-fluid">
             <div class="row content">
-                <div class="col-md-12 text-center">
-                    <div class="alert alert-danger">
-                        {{code}} - {{message}}
+                <div class="col-md-6 col-md-offset-3 text-center">
+                    <div class="panel panel-default error-box">
+                        <div class="panel-heading"><strong>
+                            Error Loading Application
+                        </strong></div>
+                        <div class="panel-body">
+                            You've failed to access the NSoT Frontend Application.
+                            This usually means you've tried to access without an
+                            authenticating proxy. Please contact your administrator.
+                            <hr>
+                            <div class="alert alert-danger">
+                                {{code}} - {{message}}
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>