Setup intial main navigation stack

admin/controllers/authors.coffee

@@ -10,10 +10,10 @@ class Authors extends Spine.Controller
 
   constructor: ->
     super
-    Author.fetch()
     @active @render
+    Author.bind 'change fetch', @render
 
-  render: ->
+  render: =>
     context = 
       authors: Author.all()
     @el.html templates.render('authors.html', {}, context)

admin/controllers/blocks.coffee

@@ -0,0 +1,23 @@
+Spine       = require('spine/core')
+# $           = Spine.$
+templates   = require('duality/templates')
+
+Block       = require('models/block')
+
+
+class Blocks extends Spine.Controller
+  className: 'blocks panel'
+
+  constructor: ->
+    super
+    @active @render
+    Block.bind 'change fetch', @render
+
+  render: =>
+    context = 
+      blocks: Block.all()
+    @el.html templates.render('blocks.html', {}, context)
+    @
+
+
+module.exports = Blocks

admin/controllers/collections.coffee

@@ -0,0 +1,23 @@
+Spine       = require('spine/core')
+# $           = Spine.$
+templates   = require('duality/templates')
+
+Collection       = require('models/collection')
+
+
+class Collections extends Spine.Controller
+  className: 'collections panel'
+
+  constructor: ->
+    super
+    @active @render
+    Collection.bind 'change fetch', @render
+
+  render: =>
+    context = 
+      collections: Collection.all()
+    @el.html templates.render('collections.html', {}, context)
+    @
+
+
+module.exports = Collections

admin/controllers/contacts.coffee

@@ -0,0 +1,23 @@
+Spine       = require('spine/core')
+# $           = Spine.$
+templates   = require('duality/templates')
+
+Contact     = require('models/contact')
+
+
+class Contacts extends Spine.Controller
+  className: 'contacts panel'
+
+  constructor: ->
+    super
+    @active @render
+    Contact.bind 'change fetch', @render
+
+  render: =>
+    context = 
+      contacts: Contact.all()
+    @el.html templates.render('contacts.html', {}, context)
+    @
+
+
+module.exports = Contacts

admin/controllers/dashboard.coffee

@@ -0,0 +1,22 @@
+Spine       = require('spine/core')
+# $           = Spine.$
+templates   = require('duality/templates')
+
+Essay       = require('models/essay')
+
+class Dashboard extends Spine.Controller
+  className: 'authors panel'
+
+  constructor: ->
+    super
+    @active @render
+    Essay.bind 'change fetch', @render
+
+  render: =>
+    context = 
+      drafts: Essay.findAllByAttribute('published', true)
+    @el.html templates.render('dashboard.html', {}, context)
+    @
+
+
+module.exports = Dashboard

admin/controllers/essays.coffee

@@ -0,0 +1,23 @@
+Spine       = require('spine/core')
+# $           = Spine.$
+templates   = require('duality/templates')
+
+Essay       = require('models/essay')
+
+
+class Essays extends Spine.Controller
+  className: 'essays panel'
+
+  constructor: ->
+    super
+    @active @render
+    Essay.bind 'change fetch', @render
+
+  render: =>
+    context = 
+      essays: Essay.all()
+    @el.html templates.render('essays.html', {}, context)
+    @
+
+
+module.exports = Essays

admin/controllers/index.coffee

@@ -5,9 +5,17 @@ require('spine/manager')
 templates   = require('duality/templates')
 session     = require('session')
 
-MainNav   = require('controllers/main-nav')
+MainNav     = require('controllers/main-nav')
 MainStack   = require('controllers/main-stack')
 
+Site        = require('models/site')
+Author      = require('models/author')
+Collection  = require('models/collection')
+Essay       = require('models/essay')
+Block       = require('models/block')
+Contact     = require('models/contact')
+Sponsor     = require('models/sponsor')
+
 
 class App extends Spine.Controller
   
@@ -32,6 +40,15 @@ class App extends Spine.Controller
               alert "User #{username} does not have permission"
 
   startApp: ->
+    # Load data models
+    Site.fetch()
+    Author.fetch()
+    Collection.fetch()
+    Essay.fetch()
+    Block.fetch()
+    Contact.fetch()
+    Sponsor.fetch()
+
     @mainNav   = new MainNav
     @mainStack = new MainStack
 

admin/controllers/main-nav.coffee

@@ -4,13 +4,13 @@ templates   = require('duality/templates')
 
 
 class MainNav extends Spine.Controller
-  className: 'main nav'
+  className: 'main navbar'
 
   constructor: ->
     super
     @render()
 
-  render: ->
+  render: =>
     @el.html templates.render('main-nav.html', {}, {})
     @
 

admin/controllers/main-stack.coffee

@@ -1,26 +1,39 @@
 Spine       = require('spine/core')
 
+Dashboard   = require('controllers/dashboard')
 Sites       = require('controllers/sites')
 Authors     = require('controllers/authors')
-# Collections = require('controllers/collections')
-# Essays      = require('controllers/essays')
-# Blocks      = require('controllers/blocks')
-# Sponsors    = require('controllers/sponsors')
-# Contacts    = require('controllers/contacts')
+Collections = require('controllers/collections')
+Essays      = require('controllers/essays')
+Blocks      = require('controllers/blocks')
+Contacts    = require('controllers/contacts')
+Sponsors    = require('controllers/sponsors')
 
 
 class MainStack extends Spine.Stack
   className: 'main stack'
 
   controllers:
-    sites: Sites
-    authors: Authors
+    dashboard:   Dashboard
+    sites:       Sites
+    authors:     Authors
+    collections: Collections
+    essays:      Essays
+    blocks:      Blocks
+    contacts:    Contacts
+    sponsors:    Sponsors
 
-  default: 'sites'
+  default: 'dashboard'
 
   routes:
-    '/sites':   'sites'
-    '/authors': 'authors'
+    '/':            'dashboard'
+    '/sites':       'sites'
+    '/authors':     'authors'
+    '/collections': 'collections'
+    '/essays':      'essays'
+    '/blocks':      'blocks'
+    '/contacts':    'contacts'
+    '/sponsors':    'sponsors'
 
 
 module.exports = MainStack

admin/controllers/sites.coffee

@@ -10,10 +10,10 @@ class Sites extends Spine.Controller
 
   constructor: ->
     super
-    Site.fetch()
     @active @render
+    Site.bind 'change fetch', @render
 
-  render: ->
+  render: =>
     context = 
       sites: Site.all()
     @el.html templates.render('sites.html', {}, context)

admin/controllers/sponsors.coffee

@@ -0,0 +1,23 @@
+Spine       = require('spine/core')
+# $           = Spine.$
+templates   = require('duality/templates')
+
+Sponsor     = require('models/sponsor')
+
+
+class Sponsors extends Spine.Controller
+  className: 'sponsors panel'
+
+  constructor: ->
+    super
+    @active @render
+    Sponsor.bind 'change fetch', @render
+
+  render: =>
+    context = 
+      sponsors: Sponsor.all()
+    @el.html templates.render('sponsors.html', {}, context)
+    @
+
+
+module.exports = Sponsors

admin/models/author.coffee

@@ -2,7 +2,7 @@ Spine = require('spine/core')
 require('lib/spine-couch-ajax')
 
 class Author extends Spine.Model
-  @configure "Author", "site", "name", "email", "bio", "links", "photo_url"
+  @configure "Author", "site", "name", "email", "bio", "links", "photo"
   
   @extend Spine.Model.CouchAjax
   

admin/models/site.coffee

@@ -2,7 +2,7 @@ Spine = require('spine/core')
 require('lib/spine-couch-ajax')
 
 class Site extends Spine.Model
-  @configure "Site", "name", "name_html", "tagline", "footer_html", "url", "theme", "css", "google_analytics_code"
+  @configure "Site", "name", "name_html", "tagline", "footer_html", "link", "theme", "css", "google_analytics_code"
   
   @extend Spine.Model.CouchAjax
   

admin/models/sponsor.coffee

@@ -2,7 +2,7 @@ Spine = require('spine/core')
 require('lib/spine-couch-ajax')
 
 class Sponsor extends Spine.Model
-  @configure "Sponsor", "format", "name", "url", "label", "content", "note", "contact_id"
+  @configure "Sponsor", "format", "name", "link", "label", "content", "note", "contact_id"
   
   @extend Spine.Model.CouchAjax
   

admin/static/css/index.styl

@@ -1,3 +1,3 @@
-@import './bootstrap.css'
+// @import './bootstrap.css'
 @import './mixin'
 @import './theme'

admin/static/css/mixin.styl

@@ -86,4 +86,12 @@ transform(tr)
   transform: tr
   
 hacel()
-  transform(translate3d(0,0,0))
+  transform(translate3d(0,0,0))
+
+clearfix()
+  *zoom: 1
+  &:before, &:after
+    display: table
+    content: ""
+  &:after
+    clear: both

admin/static/css/theme.styl

@@ -11,6 +11,8 @@ $lightGrey    = #c4c4c4
 $linkColor    = darken($primaryColor, 20%)
 $textColor    = #848484
 
+$navbarWidth  = 180px
+
 // apply a natural box layout model to all elements
 *
   border-box()
@@ -67,12 +69,12 @@ a
       line-height: 1.2em
       padding: 14px 30px
 
+strong
+ font-weight: 400
+
 b
   font-weight: 700
 
-strong
- font-weight: 400 
-
 small
   font-size: 0.875em
   color: $lightGrey
@@ -98,17 +100,12 @@ img
   display: block
   border: 0
 
-.app-logo
-  padding: 20px 0
-  margin-bottom: 30px
-  font-size: 3.25em
-  line-height: 0.8em
-  font-weight: 400
-  color: #fff
-  letter-spacing: -0.07em
-  word-spacing: 0em
-  white-space: nowrap
-  text-align: center
+#app
+  position: absolute
+  top: 0
+  bottom: 0
+  left: 0
+  right: 0
 
 .site-name
   margin: 0 0 0.8em -0.05em
@@ -128,15 +125,28 @@ span.label
   font-weight: 300
   color: $lightGrey
 
-.main.nav
+.main.navbar
   position: absolute
   top: 0
   left: 0
   bottom: 0
-  width: 150px
+  width: $navbarWidth
+  padding: 0
+  margin: 0
   background: $primaryColor
   overflow: auto
 
+  .app-logo
+    padding: 16px 18px
+    margin-bottom: 20px
+    font-size: 4.25em
+    line-height: 1em
+    font-weight: 400
+    color: #fff
+    letter-spacing: -0.07em
+    word-spacing: 0em
+    white-space: nowrap
+
   > ul
     list-style-type: none
     padding: 0
@@ -147,17 +157,21 @@ span.label
 
       a
         display: block
-        padding: 5px 20px
+        padding: 10px 20px
         font-weight: 400
         color: #fff
 
+        &:hover
+          background: darken($primaryColor, 5%)
+
 
 .main.stack
   position: absolute
   top: 0
-  left: 150px
+  left: $navbarWidth
   right: 20%
   bottom: 0
+  max-width: 900px
   background: #fff
   overflow: hidden
 
@@ -170,22 +184,67 @@ span.label
     overflow: auto
     padding: 20px 30px
 
+    > h1
+      margin-bottom: 20px
+
+      .count
+        color: $lightGrey
+        font-weight: 300
+        margin-left: 1em
+
+    > ul.list
+      list-style-type: none
+      margin: 0
+      padding: 0
+      border-top: 1px dotted #f3f3f3
+
+      > li
+        font-size: 1.5em
+        line-height: 1.5em
+        border-bottom: 1px dotted #f3f3f3
+        padding: 0.5em 0
+        clearfix()
+        
+        .meta
+          font-size: 0.75em
+          line-height: 1em
+          color: $lightGrey
+
+          > div
+            display: inline-block
+            margin-right: 2em
+
+          a
+            color: $lightGrey
+            &:hover
+              text-decoration: underline
+
+        .actions
+          float: right
+          font-size: 0.75em
+          line-height: 2em
+          color: $lightGrey
+
+          > div
+            display: inline-block
+            margin-left: 2em
+
+          a
+            color: $lightGrey
+            &:hover
+              text-decoration: underline
+
 .stack > *:not(.active)
   display: none
 
-section.essays
 
+.contacts.panel
+  
   > ul.list
-    list-style-type: none
-    margin: 0
-    padding: 0
 
-    li.item
-      margin-bottom: 1em
-      
-      .meta
-        font-size: 0.875em
-        > a
-          display: inline-block
-          margin-right: 2em
+    > li
 
+      .note
+        font-size: 0.75em
+        line-height: 1em
+        color: $lightGrey

admin/templates/authors.html

@@ -1,6 +1,11 @@
-<h3>Authors</h3>
-<ul>
+<h1>Authors <span class="count">{{authors.length}}</span></h1>
+<ul class="authors list">
   {{#each authors}}
-  <li>{{name}} ({{_id}})</li>
+  <li>
+    <div class="actions">
+      <div><strong>Bio</strong> on {{site}}</div>
+    </div>
+    <a href="#/{{type}}/{{_id}}/edit">{{name}}</a>
+  </li>
   {{/each}}
 </ul>

admin/templates/blocks.html

@@ -0,0 +1,14 @@
+<h1>Blocks <span class="count">{{blocks.length}}</span></h1>
+<ul class="blocks list">
+  {{#each blocks}}
+  <li>
+    <div class="actions">
+      <div>{{code}}</div>
+    </div>
+    <a href="#/{{type}}/{{_id}}/edit">{{name}}</a>
+    <div class="meta">
+      <div>{{site}}</div>
+    </div>
+  </li>
+  {{/each}}
+</ul>

admin/templates/collections.html

@@ -0,0 +1,11 @@
+<h1>Collections <span class="count">{{collections.length}}</span></h1>
+<ul class="collections list">
+  {{#each collections}}
+  <li>
+    <a href="#/{{type}}/{{_id}}/edit">{{name}}</a>
+    <div class="meta">
+      <div><a href="http://{{site}}/{{type}}/{{slug}}" target="_blank">view on {{site}}</a></div>
+    </div>
+  </li>
+  {{/each}}
+</ul>

admin/templates/contacts.html

@@ -0,0 +1,12 @@
+<h1>Contacts <span class="count">{{contacts.length}}</span></h1>
+<ul class="contacts list">
+  {{#each contacts}}
+  <li>
+    <div class="actions">
+      <div><a href="mailto:{{email}}">{{email}}</a></div>
+    </div>
+    <a href="#/{{type}}/{{_id}}/edit">{{name}}</a>
+    <div class="note">{{{note}}}</div>
+  </li>
+  {{/each}}
+</ul>

admin/templates/dashboard.html

@@ -0,0 +1,11 @@
+<h1>Dashboard</h1>
+<ul class="drafts list">
+  {{#each drafts}}
+  <li>
+    <a href="#/{{type}}/{{_id}}/edit">{{title}}</a>
+    <div class="meta">
+      <div><a href="http://{{site}}/{{type}}/{{slug}}" target="_blank">view on {{site}}</a></div>
+    </div>
+  </li>
+  {{/each}}
+</ul>

admin/templates/essays.html

@@ -0,0 +1,14 @@
+<h1>Essays <span class="count">{{essays.length}}</span></h1>
+<ul class="essays list">
+  {{#each essays}}
+  <li>
+    <div class="actions">
+      {{#unless published}}<div><strong>In Draft</strong></div>{{/unless}}
+    </div>
+    <a href="#/{{type}}/{{_id}}/edit">{{title}}</a>
+    <div class="meta">
+      <div><a href="http://{{site}}/{{type}}/{{slug}}" target="_blank">view on {{site}}</a></div>
+    </div>
+  </li>
+  {{/each}}
+</ul>

admin/templates/home.html

@@ -1,31 +0,0 @@
-<div class="row-fluid">
-  
-  <div class="span4">
-    <h3>Sites</h3>
-    <ul>
-      {{#each sites}}
-      <li>{{name}} ({{_id}})</li>
-      {{/each}}
-    </ul>
-  </div>
-
-
-  <div class="span4">
-    <h3>Collections</h3>
-    <ul>
-      {{#each collections}}
-      <li>{{name}} ({{_id}})</li>
-      {{/each}}
-    </ul>
-  </div>
-
-
-  <div class="span4">
-    <h3>Essays</h3>
-    <ul>
-      {{#each essays}}
-      <li>{{title}} ({{_id}})</li>
-      {{/each}}
-    </ul>
-  </div>
-</div>

admin/templates/main-nav.html

@@ -5,4 +5,7 @@
   <li class="authors"><a href="#/authors">Authors</a></li>
   <li class="collections"><a href="#/collections">Collections</a></li>
   <li class="essays"><a href="#/essays">Essays</a></li>
+  <li class="blocks"><a href="#/blocks">Blocks</a></li>
+  <li class="contacts"><a href="#/contacts">Contacts</a></li>
+  <li class="sponsors"><a href="#/sponsors">Sponsors</a></li>
 </ul>

admin/templates/sites.html

@@ -1,6 +1,11 @@
-<h3>Sites</h3>
-<ul>
+<h1>Sites <span class="count">{{sites.length}}</span></h1>
+<ul class="sites list">
   {{#each sites}}
-  <li>{{name}} ({{_id}})</li>
+  <li>
+    <div class="actions">
+      <div><a href="{{link}}" target="_blank">{{_id}}</span></div>
+    </div>
+    <a href="#/{{type}}/{{_id}}/edit">{{name}}</a>
+  </li>
   {{/each}}
 </ul>

admin/templates/sponsors.html

@@ -0,0 +1,15 @@
+<h1>Sponsors <span class="count">{{sponsors.length}}</span></h1>
+<ul class="sponsors list">
+  {{#each sponsors}}
+  <li>
+    <div class="actions">
+      <div>{{site}}</div>
+    </div>
+    <a href="#/{{type}}/{{_id}}/edit">{{name}}</a>
+    <div class="meta">
+      <div><a href="{{link}}">{{link}}</a></div>
+      <div><strong>{{format}}</strong> format</div>
+    </div>
+  </li>
+  {{/each}}
+</ul>

site/templates/collection.html

@@ -13,8 +13,8 @@
 
     {{#if sponsor.text_format}}
     <div class="name">
-      {{#if sponsor.url}}
-        <a href="{{sponsor.url}}">{{{sponsor.name}}}</a>
+      {{#if sponsor.link}}
+        <a href="{{sponsor.link}}">{{{sponsor.name}}}</a>
       {{else}}
         {{{sponsor.name}}}
       {{/if}}
@@ -24,8 +24,8 @@
 
     {{#if sponsor.image_format}}
     <div class="image">
-      {{#if sponsor.url}}
-        <a href="{{sponsor.url}}" target="_blank"><img src="{{sponsor.content}}" alt=""></a>
+      {{#if sponsor.link}}
+        <a href="{{sponsor.link}}" target="_blank"><img src="{{sponsor.content}}" alt=""></a>
       {{else}}
         <img src="{{sponsor.content}}" alt="">
       {{/if}}

site/templates/essay.html

@@ -17,8 +17,8 @@
 
     {{#if sponsor.text_format}}
     <div class="name">
-      {{#if sponsor.url}}
-        <a href="{{sponsor.url}}">{{{sponsor.name}}}</a>
+      {{#if sponsor.link}}
+        <a href="{{sponsor.link}}">{{{sponsor.name}}}</a>
       {{else}}
         {{{sponsor.name}}}
       {{/if}}
@@ -28,8 +28,8 @@
 
     {{#if sponsor.image_format}}
     <div class="image">
-      {{#if sponsor.url}}
-        <a href="{{sponsor.url}}" target="_blank"><img src="{{sponsor.content}}" alt=""></a>
+      {{#if sponsor.link}}
+        <a href="{{sponsor.link}}" target="_blank"><img src="{{sponsor.content}}" alt=""></a>
       {{else}}
         <img src="{{sponsor.content}}" alt="">
       {{/if}}
@@ -55,15 +55,15 @@
   </section>
 
   <section class="author">
-    {{#if author.photo_url}}
-    <div class="photo"><img src="{{author.photo_url}}" alt="{{author.name}}"></div>
+    {{#if author.photo}}
+    <div class="photo"><img src="{{author.photo}}" alt="{{author.name}}"></div>
     {{/if}}
     <div class="content">
       <h5 class="name"><span class="label">Author</span> {{author.name}}</h5>
       <div class="bio">{{{author.bio}}}</div>
       <ul class="links">
         {{#each author.links}}
-        <li><a href="{{url}}" target="_blank">{{label}}</a></li>
+        <li><a href="{{link}}" target="_blank">{{label}}</a></li>
         {{/each}}
       </ul>
     </div>