More work on Account buildout.

accounts/templates/account.html

@@ -8,31 +8,33 @@
     <li><a href="/account/">Account</a></li>
 {% endblock %}
 
+{% block extra-scripts %}
+    <script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
+{% endblock %}
+
 {% block content %}
-    <section class="profile group">
+    <section class="profile group" ng-app="Account" ng-controller="MainController">
         <aside>
             <ul class="nav nav-list">
                 <li class="nav-header">Account</li>
-                <li class="active">
-                    <a href="">Profile</a>
+                <li ng-class="{active: route.current.scope.section == 'Profile'}">
+                    <a href="/account/">Profile</a>
                 </li>
                 <li>
-                    <a href="">Change Password</a>
+                    <a href="/password/change/">Change Password</a>
                 </li>
-                <li>
-                    <a href="">Billing</a>
+                <li ng-class="{active: route.current.scope.section == 'Billing'}">
+                    <a href="/account/billing/">Billing</a>
                 </li>
                 <li class="nav-header">Pro</li>
-                <li>
-                    <a href="">Blog settings</a>
+                <li ng-class="{active: route.current.scope.section == 'Blogging'}">
+                    <a href="/account/blogging/">Blog settings</a>
                 </li>
-                <li>
-                    <a href="">Editor settings</a>
+                <li ng-class="{active: route.current.scope.section == 'Editor'}">
+                    <a href="/account/editor/">Editor settings</a>
                 </li>
             </ul>
         </aside>
-        <section class="content">
-            Content
-        </section>
+        <section class="content" ng-view></section>
     </section>
 {% endblock %}

accounts/urls.py

@@ -3,6 +3,6 @@ from django.conf.urls.defaults import *
 from accounts import views
 
 urlpatterns = patterns('',
-    url(r'^$',       views.account, name='account-detail'),
     url(r'^stats/$', views.stats,   name='account-stats'),
+    url(r'^',       views.account, name='account-detail'),
 )

media/css/style.scss

@@ -92,6 +92,9 @@ body {
 .hidden {
     display: none;
 }
+[ng\:cloak], [ng-cloak], .ng-cloak {
+    display: none;
+}
 
 // Global
 header.main {
@@ -1513,10 +1516,30 @@ body.account {
     section.profile {
         aside {
             float: left;
+            padding-top: 30px;
             width: 190px;
+
+            ul {
+                li {
+                    a {
+                        color: #43A8C6;
+                    }
+                    &.active {
+                        a {
+                            background: #43A8C6;
+                            color: white;
+                        }
+                    }
+                }
+            }
         }
         section.content {
-            
+            background: white;
+            border-bottom: 1px solid #DDDDDD;
+            border-left: 4px solid #43A8C6;
+            float: right;
+            min-height: 400px;
+            width: 555px;
         }
     }
 }

media/js/compile-js.sh

@@ -4,6 +4,7 @@ cat media/js/src/application.js|jsmin > media/js/src/application.min.js
 cat media/js/src/modules/site.js|jsmin > media/js/src/modules/site.min.js
 cat media/js/src/modules/snipt.js|jsmin > media/js/src/modules/snipt.min.js
 
+cat media/js/src/account.js|jsmin > media/js/src/account.min.js
 cat media/js/src/pro.js|jsmin > media/js/src/pro.min.js
 
 cat media/js/libs/underscore.js \
@@ -16,6 +17,7 @@ cat media/js/libs/underscore.js \
     media/js/src/application.min.js \
     media/js/src/modules/site.min.js \
     media/js/src/modules/snipt.min.js \
+    media/js/src/account.min.js \
     media/js/libs/codemirror.js \
     media/js/libs/highlight.js \
     > media/js/snipt.js

snipts/api.py

@@ -121,7 +121,7 @@ class PrivateUserResource(ModelResource):
     class Meta:
         queryset = User.objects.all()
         resource_name = 'user'
-        fields = ['id', 'username', 'email',]
+        fields = ['id', 'username', 'email']
         include_absolute_url = True
         allowed_methods = ['get']
         list_allowed_methods = []

templates/base.html

@@ -326,12 +326,11 @@
         </div>
     {% endblock %}
 
+    {% block extra-scripts %}{% endblock %}
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
     <script type="text/javascript" src="{{ STATIC_URL }}js/snipt.js?43"></script>
 
-    {% block extra-scripts %}{% endblock %}
-
     {% block inline-js %}
         <script type="text/javascript">
             {% block js %}