Sidebar in layout, improved filter box, ui multi-select

admin/controllers/authors.coffee

@@ -103,7 +103,7 @@ class AuthorForm extends Spine.Controller
       @back()
 
   cancel: (e) ->
-    e.preventDefault
+    e.preventDefault()
     if @dirtyForm
       if confirm "You may have some unsaved changes.\nAre you sure you want to cancel?"
         @back()
@@ -114,7 +114,7 @@ class AuthorForm extends Spine.Controller
     @navigate('/authors/list')
 
   preventSubmit: (e) ->
-    e.preventDefault
+    e.preventDefault()
     
   deactivate: ->
     super

admin/controllers/blocks.coffee

@@ -87,7 +87,7 @@ class BlockForm extends Spine.Controller
       @back()
 
   cancel: (e) ->
-    e.preventDefault
+    e.preventDefault()
     if @dirtyForm
       if confirm "You may have some unsaved changes.\nAre you sure you want to cancel?"
         @back()
@@ -98,7 +98,7 @@ class BlockForm extends Spine.Controller
     @navigate('/blocks/list')
 
   preventSubmit: (e) ->
-    e.preventDefault
+    e.preventDefault()
     
   deactivate: ->
     super

admin/controllers/collections.coffee

@@ -103,7 +103,7 @@ class CollectionForm extends Spine.Controller
       @back()
 
   cancel: (e) ->
-    e.preventDefault
+    e.preventDefault()
     if @dirtyForm
       if confirm "You may have some unsaved changes.\nAre you sure you want to cancel?"
         @back()
@@ -114,7 +114,7 @@ class CollectionForm extends Spine.Controller
     @navigate('/collections/list')
 
   preventSubmit: (e) ->
-    e.preventDefault
+    e.preventDefault()
     
   deactivate: ->
     super

admin/controllers/contacts.coffee

@@ -68,7 +68,7 @@ class ContactForm extends Spine.Controller
       @back()
   
   cancel: (e) ->
-    e.preventDefault
+    e.preventDefault()
     if @dirtyForm
       if confirm "You may have some unsaved changes.\nAre you sure you want to cancel?"
         @back()
@@ -79,7 +79,7 @@ class ContactForm extends Spine.Controller
     @navigate('/contacts/list')
 
   preventSubmit: (e) ->
-    e.preventDefault
+    e.preventDefault()
     
   deactivate: ->
     super

admin/controllers/dashboard.coffee

@@ -4,8 +4,9 @@ templates   = require('duality/templates')
 
 Essay       = require('models/essay')
 
-class Dashboard extends Spine.Controller
-  className: 'authors panel'
+
+class DashboardOne extends Spine.Controller
+  className: 'dashboard one panel'
 
   constructor: ->
     super
@@ -19,4 +20,16 @@ class Dashboard extends Spine.Controller
     @
 
 
+class Dashboard extends Spine.Stack
+  className: 'dashboards panel'
+
+  controllers:
+    one: DashboardOne
+
+  default: 'one'
+
+  routes:
+    '/dashboard/one': 'one'
+
+
 module.exports = Dashboard

admin/controllers/essays.coffee

@@ -2,6 +2,8 @@ Spine       = require('spine/core')
 # $           = Spine.$
 templates   = require('duality/templates')
 
+MultiSelect = require('controllers/ui/multi-select')
+
 Essay       = require('models/essay')
 Author      = require('models/author')
 Collection  = require('models/collection')
@@ -19,7 +21,7 @@ class EssayForm extends Spine.Controller
     'select[name=site]':       'formSite'
     'select[name=author_id]':  'formAuthorId'
     'select[name=sponsor_id]': 'formSponsorId'
-    'select[name=collections]': 'formCollections'
+    '.collections-list':       'collectionsList'
     '.save-button':            'saveButton'
     '.cancel-button':          'cancelButton'
 
@@ -47,6 +49,8 @@ class EssayForm extends Spine.Controller
     else
       @title = 'New Essay'
       @item = {}
+
+    @item.collections ?= []
     
     @item.sites = Site.all().sort(Site.nameSort)
     @item.sponsors = Sponsor.all().sort(Sponsor.nameSort)
@@ -82,10 +86,11 @@ class EssayForm extends Spine.Controller
   
   makeCollectionsList: (site) ->
     collections = Collection.findAllByAttribute('site', site.id)
-    @formCollections.empty()
-    for collection in collections
-      @formCollections.append "<option value=\"#{collection.id}\" data-slug=\"#{collection.slug}\">#{collection.name}</option>"
-    @formCollections.val (c.id for c in @item.collections)
+    @collectionSelect = new MultiSelect
+      items: collections
+      selectedItems: (c.id for c in @item.collections)
+      valueFields: ['id','slug']
+    @collectionsList.html @collectionSelect.el
 
   save: (e) ->
     e.preventDefault()
@@ -97,16 +102,7 @@ class EssayForm extends Spine.Controller
     # Convert some boolean properties
     @item.published = Boolean(@item.published)
 
-    # Pull all selected collections
-    collections = []
-    @formCollections.children('option:selected').each ->
-      $option = $(@)
-      id = $option.attr('value')
-      slug = $option.attr('data-slug')
-      if id and slug
-        collections.push id: id, slug: slug
-    @item.collections = collections
-    @log @item.collections
+    @item.collections = @collectionSelect.selected()
 
     # Take care of some dates if need be
     try
@@ -135,7 +131,7 @@ class EssayForm extends Spine.Controller
       @back()
 
   cancel: (e) ->
-    e.preventDefault
+    e.preventDefault()
     if @dirtyForm
       if confirm "You may have some unsaved changes.\nAre you sure you want to cancel?"
         @back()
@@ -146,7 +142,7 @@ class EssayForm extends Spine.Controller
     @navigate('/essays/list')
 
   preventSubmit: (e) ->
-    e.preventDefault
+    e.preventDefault()
     
   deactivate: ->
     super

admin/controllers/filter-box.coffee

@@ -2,7 +2,10 @@ Spine       = require('spine/core')
 $           = Spine.$
 templates   = require('duality/templates')
 
-Site  = require('models/site')
+Site        = require('models/site')
+
+KEYCODE_ENTER = 13
+KEYCODE_ESC   = 27
 
 
 class FilterBox extends Spine.Controller
@@ -23,11 +26,20 @@ class FilterBox extends Spine.Controller
 
   setup: ->
     @filterInput = $(@el).find('input.filter-input')
+    @filterClear = $(@el).find('.clear-filter')
     @selectedSite = $(@el).find('.selected-site')
     @siteSelector = $(@el).find('ul.site-selector')
     
     @filterInput.on 'keyup', (e) =>
-      @filter()
+      if e.keyCode is KEYCODE_ESC
+        @clear()
+      else if e.keyCode is KEYCODE_ENTER
+        @filter()
+      else
+        @filter()
+
+    @filterClear.on 'click', (e) =>
+      @clear()
     
     @selectedSite.on 'click', (e) =>
       @siteSelector.toggle()
@@ -44,8 +56,16 @@ class FilterBox extends Spine.Controller
       $item.addClass('selected')
       @filter()
 
+  clear: ->
+    @filterInput.val('')
+    @filter()
+
   filter: =>
     @query = $.trim(@filterInput.val())
+    if @query
+      @filterClear.addClass('active')
+    else
+      @filterClear.removeClass('active')
     Spine.trigger 'filterbox:change',
       query: @query
       siteId: @siteId

admin/controllers/sites.coffee

@@ -77,7 +77,7 @@ class SiteForm extends Spine.Controller
       @back()
   
   cancel: (e) ->
-    e.preventDefault
+    e.preventDefault()
     if @dirtyForm
       if confirm "You may have some unsaved changes.\nAre you sure you want to cancel?"
         @back()
@@ -88,7 +88,7 @@ class SiteForm extends Spine.Controller
     @navigate('/sites/list')
 
   preventSubmit: (e) ->
-    e.preventDefault
+    e.preventDefault()
     
   deactivate: ->
     super

admin/controllers/sponsors.coffee

@@ -77,7 +77,7 @@ class SponsorForm extends Spine.Controller
       @back()
   
   cancel: (e) ->
-    e.preventDefault
+    e.preventDefault()
     if @dirtyForm
       if confirm "You may have some unsaved changes.\nAre you sure you want to cancel?"
         @back()
@@ -88,7 +88,7 @@ class SponsorForm extends Spine.Controller
     @navigate('/sponsors/list')
 
   preventSubmit: (e) ->
-    e.preventDefault
+    e.preventDefault()
     
   deactivate: ->
     super

admin/controllers/ui/multi-select.coffee

@@ -0,0 +1,66 @@
+Spine     = require('spine/core')
+$         = Spine.$
+
+class MultiSelect extends Spine.Controller
+  tag: 'ul'
+  className: 'ui-multi-select'
+  tagClass: ''
+  itemTag: 'li'
+  itemClass: '' 
+  items: []
+  selectedItems: []
+  keyField: 'id'
+  nameField: 'name'
+  valueField: 'id'
+  valueFields: null
+  emptyText: 'Nothing to select here.'
+
+  constructor: ->
+    super
+    @el.addClass(@tagClass) if @tagClass
+    @render()
+
+  render: =>
+    @el.html $("<#{@itemTag}/>").html(@emptyText) unless @items
+
+    # create and render all options in the list
+    for item in @items
+      # create a list option item
+      $option = $("<#{@itemTag}/>")
+      $option.html item[@nameField]
+      $option.attr("data-#{@keyField}", item[@keyField])
+      if @valueFields
+        for field in @valueFields
+          $option.attr("data-#{field}", item[field])
+      else
+        $option.attr("data-#{@valueField}", item[@valueField])
+      
+      # add some needed classes
+      $option.addClass(@itemClass) if @itemClass
+      $option.addClass('selected') if item[@keyField] in @selectedItems
+
+      # setup a selection toggle
+      $option.on 'click', (e) ->
+        e.preventDefault()
+        $(@).toggleClass('selected')
+      
+      # add the created option to the list
+      @el.append $option
+    @
+
+  selected: =>
+    cls = @
+    items = []
+    @el.children('.selected').each ->
+      $option = $(@)
+      if cls.valueFields
+        obj = {}
+        for field in cls.valueFields
+          obj[field] = $option.attr("data-#{field}")
+        items.push obj
+      else
+        items.push $option.attr("data-#{cls.valueField}")
+    return items
+
+
+module.exports = MultiSelect

admin/static/css/common.styl

@@ -103,6 +103,7 @@ select
   display: block
   width: 100%
   color: $textColor
+  background: transparent
   font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif
   font-size: 1em
   font-weight: $normalFont
@@ -142,7 +143,7 @@ button, .button
     border: 1px solid #f3f3f3
 
     &:hover
-      background: #f3f3f3
+      background: #fafafa
 
   &.small
     padding: 0 5px

admin/static/css/theme.styl

@@ -4,9 +4,6 @@ $availableThemeColors = 'theme-default' $defaultColor, 'theme-blue' $blueColor,
 
 $navbarWidth  = 180px
 
-body
-  background: #f3f3f3
-
 #app
   position: absolute
   top: 0
@@ -39,9 +36,9 @@ span.label
 
 .filter-box
   position: absolute
-  top: 20px
-  right: 30px
-  width: 30%
+  top: 0
+  right: 0
+  width: 35%
   background: #fff
   z-index: 10
 
@@ -49,15 +46,34 @@ span.label
     display: block
     width: 100%
     color: $lightGrey
+    background: #fff
     font-size: 1.5em
     font-weight: $normalFont
-    padding: 5px 10px
+    padding: 5px 40px 5px 10px
     margin: 0
     border: 1px solid #f3f3f3
     outline: none
 
+  .clear-filter
+    display: none
+    position: absolute
+    top: 0
+    right: 0
+    width: 20px
+    height: 20px
+    background: #D3A924
+    padding: 0
+    margin: 10px
+    color: white
+    text-align: center
+    line-height: 1em
+    cursor: pointer
+
+    &.active
+      display: block
+
   .selected-site
-    padding: 5px 5px 5px 10px
+    padding: 10px 10px
     border: 1px solid #f3f3f3
     border-top: 0
     line-height: 1em
@@ -70,7 +86,7 @@ span.label
       arrow('top', 10px, $lightGrey)
 
     &:hover
-      background: #f3f3f3
+      background: #fafafa
 
   ul.site-selector
     display: none
@@ -89,7 +105,7 @@ span.label
       cursor: pointer
 
       &:hover
-        background: #f3f3f3
+        background: #fafafa
 
       &.selected
         opacity: 0.5
@@ -146,10 +162,9 @@ span.label
   position: absolute
   top: 0
   left: $navbarWidth
-  right: 20%
+  right: 0
   bottom: 0
-  max-width: 900px
-  background: #fff
+  min-width: 800px
   overflow: hidden
 
   .panel
@@ -158,28 +173,72 @@ span.label
     bottom: 0
     left: 0
     right: 0
-    overflow: auto
-    padding: 20px 30px
-    background: #fff
+    overflow: hidden
+
+    > .panel
+      background: #f3f3f3
+      overflow: auto
+
+      .content
+        position: relative
+        float: left
+        width: 65%
+        min-height: 100%
+        padding: 20px 3%
+        background: #fff
+
+      .sidebar
+        float: right
+        width: 35%
+        padding: 20px 3%
+
+        .top-spacer
+          display: block
+          height: 3em
+
+        .buttons
+          position: fixed
+          width: 26%
+          margin-top: -21px
+          padding-top: 20px
+          padding-bottom: 10px
+          border-bottom: 1px solid #fff
+          background: #F3F3F3
+          z-index: 10
+
+          button, .button
+            margin: 0 10px 10px 0
 
-    > h1
+        input[type='text'],
+        input[type='search'],
+        textarea,
+        select
+          border-color: #d3d3d3
+
+        ::-webkit-input-placeholder
+          color: #d3d3d3
+
+      &.form
+        z-index: 20
+
+
+    h1
       margin: 0 0 0.5em -0.05em
 
+      .new
+        font-weight: $heavyFont
+        line-height: 1em
+
       .count
+        float: right
         color: $lightGrey
         font-weight: 300
-        margin-left: 1em
+        margin-left: 0.5em
 
     .item-title
       color: $primaryColor
 
-    .buttons
-      float: right
-
-      button, .button
-        margin: 5px 0 5px 10px
-
-    > ul.list
+    ul.list
       list-style-type: none
       margin: 0
       padding: 0
@@ -227,9 +286,8 @@ span.label
             &:hover
               text-decoration: underline
 
-    > form
-      margin: 1.5em 0
-      clearfix()
+    form
+      margin: 0
 
       .heading
         color: $primaryColor
@@ -308,10 +366,31 @@ span.label
         padding: 5px 10px
         background: orange
 
-.stack > .panel > .form.panel
-  z-index: 20
-
 .stack .panel:not(.active)
   display: none
 
 
+ul.ui-multi-select
+  list-style-type: none
+  padding: 0
+  margin: 0
+  -webkit-user-select: none
+
+  > li
+    display: inline-block
+    padding: 4px 10px
+    margin: 0 12px 12px 0
+    max-width: 100%
+    background: #fff
+    border: 1px solid #f3f3f3
+    ellipsis()
+    cursor: pointer
+
+    &:hover
+      background: #fafafa
+
+    &.selected
+      color: $linkColor
+      font-weight: $boldFont
+      border-color: $primaryColor
+      outline: 2px solid rgba($primaryColor, 0.5)

admin/templates/author-form.html

@@ -1,51 +1,57 @@
-<div class="buttons">
-  <button class="save-button">Save</button>
-  <button class="cancel-button plain">Cancel</button>
-</div>
-<h1>Author</h1>
-<h3 class="item-title">{{name}}</h3>
-
 <form class="author">
-  <div class="error-message"></div>
+  
+  <div class="content">
+    <h1>Author</h1>
+    <h3 class="item-title">{{name}}</h3>
+
+    <div class="error-message"></div>
 
-  <div class="field required">
-    <label>Site</label>
-    <select name="site">
-      <option value="" disabled>Choose a site...</option>
-      {{#each sites}}
-      <option value="{{id}}">{{name}} &mdash; {{id}}</option>
+    <div class="field required">
+      <label>Site</label>
+      <select name="site">
+        <option value="" disabled>Choose a site...</option>
+        {{#each sites}}
+        <option value="{{id}}">{{name}} &mdash; {{id}}</option>
+        {{/each}}
+      </select>
+      <div class="site-selected"></div>
+    </div>
+    <div class="field required">
+      <label>Name</label>
+      <input type="text" name="name" value="{{name}}" placeholder="Fullname of author">
+    </div>
+    <div class="field required">
+      <label>Email</label>
+      <input type="text" name="email" value="{{email}}" placeholder="person@example.com">
+    </div>
+    <div class="field required">
+      <label>Bio</label>
+      <textarea name="bio" placeholder="Provide the author's bio content HTML">{{bio}}</textarea>
+    </div>
+    <div class="field">
+      <label>Photo</label>
+      <input type="text" name="photo" value="{{photo}}" placeholder="URL to photo including http://">
+    </div>
+    
+    <h4 class="heading">
+      Links
+      <a class="button small add-link" href="#">+</a>
+    </h4>
+    <div class="field inline links-list">
+      {{#each links}}
+        {{{include "partials/link-form.html"}}}
       {{/each}}
-    </select>
-    <div class="site-selected"></div>
-  </div>
-  <div class="field required">
-    <label>Name</label>
-    <input type="text" name="name" value="{{name}}" placeholder="Fullname of author">
-  </div>
-  <div class="field required">
-    <label>Email</label>
-    <input type="text" name="email" value="{{email}}" placeholder="person@example.com">
+    </div>
   </div>
-  <div class="field required">
-    <label>Bio</label>
-    <textarea name="bio" placeholder="Provide the author's bio content HTML">{{bio}}</textarea>
-  </div>
-  <div class="field">
-    <label>Photo</label>
-    <input type="text" name="photo" value="{{photo}}" placeholder="URL to photo including http://">
-  </div>
-  
-  <h4 class="heading">
-    Links
-    <a class="button small add-link" href="#">+</a>
-  </h4>
-  <div class="field inline links-list">
-    {{#each links}}
-      {{{include "partials/link-form.html"}}}
-    {{/each}}
+
+  <div class="sidebar">
+    <div class="buttons">
+      <button class="save-button">Save</button>
+      <button class="cancel-button plain">Cancel</button>
+      {{#if id}}<a class="delete-button" href="#">delete {{type}}</a>{{/if}}
+    </div>
+
+    <div class="top-spacer"></div>
   </div>
-</form>
 
-{{#if id}}
-<button class="delete-button plain">Delete {{type}}</button>
-{{/if}}
+</form>

admin/templates/authors.html

@@ -1,15 +1,21 @@
-<h1>
-  Authors
-  <a class="new" href="#/author/new">+</a>
-  <span class="count">{{authors.length}}</span>
-</h1>
-<ul class="authors list">
-  {{#each authors}}
-  <li>
-    <div class="actions">
-      <div><strong>Bio</strong> on {{site}}</div>
-    </div>
-    <a href="#/author/{{id}}">{{name}}</a>
-  </li>
-  {{/each}}
-</ul>
+<div class="content">
+  <h1>
+    Authors
+    <a class="new" href="#/author/new">+</a>
+    <span class="count">{{authors.length}}</span>
+  </h1>
+  <ul class="authors list">
+    {{#each authors}}
+    <li>
+      <div class="actions">
+        <div><strong>Bio</strong> on {{site}}</div>
+      </div>
+      <a href="#/author/{{id}}">{{name}}</a>
+    </li>
+    {{/each}}
+  </ul>
+</div>
+
+<div class="sidebar">
+  
+</div>

admin/templates/block-form.html

@@ -1,39 +1,45 @@
-<div class="buttons">
-  <button class="save-button">Save</button>
-  <button class="cancel-button plain">Cancel</button>
-</div>
-<h1>Block</h1>
-<h3 class="item-title">{{name}}</h3>
-
 <form class="block">
-  <div class="error-message"></div>
+  
+  <div class="content">
+    <h1>Block</h1>
+    <h3 class="item-title">{{name}}</h3>
 
-  <div class="field required">
-    <label>Site</label>
-    <select name="site">
-      <option value="" disabled>Choose a site...</option>
-      {{#each sites}}
-      <option value="{{id}}">{{name}} &mdash; {{id}}</option>
-      {{/each}}
-    </select>
-    <div class="site-selected"></div>
-  </div>
-  <div class="field">
-    <div class="field-left required">
-      <label>Code</label>
-      <input type="text" name="code" value="{{code}}" placeholder="ie. site_intro or site_promo">
+    <div class="error-message"></div>
+
+    <div class="field required">
+      <label>Site</label>
+      <select name="site">
+        <option value="" disabled>Choose a site...</option>
+        {{#each sites}}
+        <option value="{{id}}">{{name}} &mdash; {{id}}</option>
+        {{/each}}
+      </select>
+      <div class="site-selected"></div>
+    </div>
+    <div class="field">
+      <div class="field-left required">
+        <label>Code</label>
+        <input type="text" name="code" value="{{code}}" placeholder="ie. site_intro or site_promo">
+      </div>
+      <div class="field-right required">
+        <label>Name</label>
+        <input type="text" name="name" value="{{name}}" placeholder="Used in admin list only">
+      </div>
     </div>
-    <div class="field-right required">
-      <label>Name</label>
-      <input type="text" name="name" value="{{name}}" placeholder="Used in admin list only">
+    <div class="field required">
+      <label>Content HTML</label>
+      <textarea name="content" placeholder="HTML content of the block">{{content}}</textarea>
     </div>
   </div>
-  <div class="field required">
-    <label>Content HTML</label>
-    <textarea name="content" placeholder="HTML content of the block">{{content}}</textarea>
+
+  <div class="sidebar">
+    <div class="buttons">
+      <button class="save-button">Save</button>
+      <button class="cancel-button plain">Cancel</button>
+      {{#if id}}<a class="delete-button" href="#">delete {{type}}</a>{{/if}}
+    </div>
+
+    <div class="top-spacer"></div>
   </div>
-</form>
 
-{{#if id}}
-<button class="delete-button plain">Delete {{type}}</button>
-{{/if}}
+</form>

admin/templates/blocks.html

@@ -1,18 +1,24 @@
-<h1>
-  Blocks
-  <a class="new" href="#/block/new">+</a>
-  <span class="count">{{blocks.length}}</span>
-</h1>
-<ul class="blocks list">
-  {{#each blocks}}
-  <li>
-    <div class="actions">
-      <div>{{code}}</div>
-    </div>
-    <a href="#/block/{{id}}">{{name}}</a>
-    <div class="meta">
-      <div>{{site}}</div>
-    </div>
-  </li>
-  {{/each}}
-</ul>
+<div class="content">
+  <h1>
+    Blocks
+    <a class="new" href="#/block/new">+</a>
+    <span class="count">{{blocks.length}}</span>
+  </h1>
+  <ul class="blocks list">
+    {{#each blocks}}
+    <li>
+      <div class="actions">
+        <div>{{code}}</div>
+      </div>
+      <a href="#/block/{{id}}">{{name}}</a>
+      <div class="meta">
+        <div>{{site}}</div>
+      </div>
+    </li>
+    {{/each}}
+  </ul>
+</div>
+
+<div class="sidebar">
+  
+</div>

admin/templates/collection-form.html

@@ -1,67 +1,73 @@
-<div class="buttons">
-  <button class="save-button">Save</button>
-  <button class="cancel-button plain">Cancel</button>
-</div>
-<h1>Collection</h1>
-<h3 class="item-title">{{name}}</h3>
-
 <form class="collection">
-  <div class="error-message"></div>
 
-  <div class="field required">
-    <label>Site</label>
-    <select name="site">
-      <option value="" disabled>Choose a site...</option>
-      {{#each sites}}
-      <option value="{{id}}">{{name}} &mdash; {{id}}</option>
-      {{/each}}
-    </select>
-    <div class="site-selected"></div>
-  </div>
-  <div class="field required">
-    <label>Name</label>
-    <input type="text" name="name" value="{{name}}" placeholder="Collection name in titlecase">
-  </div>
-  <div class="field required">
-    <label>Slug</label>
-    <input type="text" name="slug" value="{{slug}}" placeholder="All lowercase and hyphens but and NO spaces">
-  </div>
-  <div class="field">
-    <label>Intro MD/HTML</label>
-    <textarea name="intro" placeholder="Provide a collection introduction text as Markdown/HTML">{{intro}}</textarea>
-  </div>
-  <div class="field">
-    <div class="field-left">
-      <label>Pinned</label>
-      <input type="checkbox" name="pinned" {{#if pinned}}checked{{/if}}>
+  <div class="content">
+    <h1>Collection</h1>
+    <h3 class="item-title">{{name}}</h3>
+
+    <div class="error-message"></div>
+
+    <div class="field required">
+      <label>Site</label>
+      <select name="site">
+        <option value="" disabled>Choose a site...</option>
+        {{#each sites}}
+        <option value="{{id}}">{{name}} &mdash; {{id}}</option>
+        {{/each}}
+      </select>
+      <div class="site-selected"></div>
+    </div>
+    <div class="field required">
+      <label>Name</label>
+      <input type="text" name="name" value="{{name}}" placeholder="Collection name in titlecase">
+    </div>
+    <div class="field required">
+      <label>Slug</label>
+      <input type="text" name="slug" value="{{slug}}" placeholder="All lowercase and hyphens but and NO spaces">
+    </div>
+    <div class="field">
+      <label>Intro MD/HTML</label>
+      <textarea name="intro" placeholder="Provide a collection introduction text as Markdown/HTML">{{intro}}</textarea>
     </div>
-    <div class="field-right">
-      <label>Updated</label>
-      <input type="text" name="updated_at" value="{{updated_at}}" placeholder="ex. Feb 20 2012 6:30 PM or leave blank">
+    <div class="field">
+      <div class="field-left">
+        <label>Pinned</label>
+        <input type="checkbox" name="pinned" {{#if pinned}}checked{{/if}}>
+      </div>
+      <div class="field-right">
+        <label>Updated</label>
+        <input type="text" name="updated_at" value="{{updated_at}}" placeholder="ex. Feb 20 2012 6:30 PM or leave blank">
+      </div>
     </div>
   </div>
 
-  <h3 class="heading">Sponsorship</h3>
-  <div class="field">
-    <div class="field-left">
-      <label>Sponsor</label>
-      <select name="sponsor_id">
-        <option value="">Select a sponsor...</option>
-        {{#each sponsors}}
-        <option value="{{id}}">{{name}}</option>
-        {{/each}}
-      </select>
+  <div class="sidebar">
+    <div class="buttons">
+      <button class="save-button">Save</button>
+      <button class="cancel-button plain">Cancel</button>
+      {{#if id}}<a class="delete-button" href="#">delete {{type}}</a>{{/if}}
     </div>
-    <div class="field-right">
-      <label>Start</label>
-      <input type="text" name="sponsor_start" value="{{sponsor_start}}" placeholder="ex. Feb 20 2012 6:30 PM">
-      <br class="clearfix">
-      <label>End</label>
-      <input type="text" name="sponsor_end" value="{{sponsor_end}}" placeholder="ex. Feb 20 2012 6:30 PM">
+
+    <div class="top-spacer"></div>
+
+    <h3 class="heading">Sponsorship</h3>
+    <div class="field">
+      <div class="field-left">
+        <label>Sponsor</label>
+        <select name="sponsor_id">
+          <option value="">Select a sponsor...</option>
+          {{#each sponsors}}
+          <option value="{{id}}">{{name}}</option>
+          {{/each}}
+        </select>
+      </div>
+      <div class="field-right">
+        <label>Start</label>
+        <input type="text" name="sponsor_start" value="{{sponsor_start}}" placeholder="Feb 20 2012 6:30 PM">
+        <br class="clearfix">
+        <label>End</label>
+        <input type="text" name="sponsor_end" value="{{sponsor_end}}" placeholder="Feb 20 2012 6:30 PM">
+      </div>
     </div>
   </div>
-</form>
 
-{{#if id}}
-<button class="delete-button plain">Delete {{type}}</button>
-{{/if}}
+</form>

admin/templates/collections.html

@@ -1,15 +1,21 @@
-<h1>
-  Collections
-  <a class="new" href="#/collection/new">+</a>
-  <span class="count">{{collections.length}}</span>
-</h1>
-<ul class="collections list">
-  {{#each collections}}
-  <li>
-    <div class="actions">
-      <div><a href="http://{{site}}/collection/{{slug}}" target="_blank">{{site}}</a></div>
-    </div>
-    <a href="#/collection/{{id}}">{{name}}</a>
-  </li>
-  {{/each}}
-</ul>
+<div class="content">
+  <h1>
+    Collections
+    <a class="new" href="#/collection/new">+</a>
+    <span class="count">{{collections.length}}</span>
+  </h1>
+  <ul class="collections list">
+    {{#each collections}}
+    <li>
+      <div class="actions">
+        <div><a href="http://{{site}}/collection/{{slug}}" target="_blank">{{site}}</a></div>
+      </div>
+      <a href="#/collection/{{id}}">{{name}}</a>
+    </li>
+    {{/each}}
+  </ul>
+</div>
+
+<div class="sidebar">
+  
+</div>

admin/templates/contact-form.html

@@ -1,27 +1,33 @@
-<div class="buttons">
-  <button class="save-button">Save</button>
-  <button class="cancel-button plain">Cancel</button>
-</div>
-<h1>Contact</h1>
-<h3 class="item-title">{{name}}</h3>
-
 <form class="contact">
-  <div class="error-message"></div>
 
-  <div class="field required">
-    <label>Name</label>
-    <input type="text" name="name" value="{{name}}" placeholder="Fullname of contact person">
-  </div>
-  <div class="field">
-    <label>Email</label>
-    <input type="text" name="email" value="{{email}}" placeholder="person@example.com">
+  <div class="content">
+    <h1>Contact</h1>
+    <h3 class="item-title">{{name}}</h3>
+
+    <div class="error-message"></div>
+
+    <div class="field required">
+      <label>Name</label>
+      <input type="text" name="name" value="{{name}}" placeholder="Fullname of contact person">
+    </div>
+    <div class="field">
+      <label>Email</label>
+      <input type="text" name="email" value="{{email}}" placeholder="person@example.com">
+    </div>
+    <div class="field">
+      <label>Note</label>
+      <textarea name="note" placeholder="Anything to keep for your eyes only">{{note}}</textarea>
+    </div>
   </div>
-  <div class="field">
-    <label>Note</label>
-    <textarea name="note" placeholder="Anything to keep for your eyes only">{{note}}</textarea>
+
+  <div class="sidebar">
+    <div class="buttons">
+      <button class="save-button">Save</button>
+      <button class="cancel-button plain">Cancel</button>
+      {{#if id}}<a class="delete-button" href="#">delete {{type}}</a>{{/if}}
+    </div>
+
+    <div class="top-spacer"></div>
   </div>
-</form>
 
-{{#if id}}
-<button class="delete-button plain">Delete {{type}}</button>
-{{/if}}
+</form>

admin/templates/contacts.html

@@ -1,16 +1,22 @@
-<h1>
-  Contacts
-  <a class="new" href="#/contact/new">+</a>
-  <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="#/contact/{{id}}">{{name}}</a>
-    <div class="note">{{{note}}}</div>
-  </li>
-  {{/each}}
-</ul>
+<div class="content">
+  <h1>
+    Contacts
+    <a class="new" href="#/contact/new">+</a>
+    <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="#/contact/{{id}}">{{name}}</a>
+      <div class="note">{{{note}}}</div>
+    </li>
+    {{/each}}
+  </ul>
+</div>
+
+<div class="sidebar">
+  
+</div>

admin/templates/dashboard.html

@@ -1,11 +1,17 @@
-<h1>Dashboard</h1>
-<ul class="drafts list">
-  {{#each drafts}}
-  <li>
-    <a href="#/essay/{{id}}">{{title}}</a>
-    <div class="meta">
-      <div><a href="http://{{site}}/essay/{{slug}}" target="_blank">view on {{site}}</a></div>
-    </div>
-  </li>
-  {{/each}}
-</ul>
+<div class="content">
+  <h1>Dashboard</h1>
+  <ul class="drafts list">
+    {{#each drafts}}
+    <li>
+      <a href="#/essay/{{id}}">{{title}}</a>
+      <div class="meta">
+        <div><a href="http://{{site}}/essay/{{slug}}" target="_blank">view on {{site}}</a></div>
+      </div>
+    </li>
+    {{/each}}
+  </ul>
+</div>
+
+<div class="sidebar">
+  
+</div>

admin/templates/essay-form.html

@@ -1,81 +1,87 @@
-<div class="buttons">
-  <button class="save-button">Save</button>
-  <button class="cancel-button plain">Cancel</button>
-</div>
-<h1>Essay</h1>
-<h3 class="item-title">{{title}}</h3>
-
 <form class="essay">
-  <div class="error-message"></div>
 
-  <div class="field required">
-    <label>Site</label>
-    <select name="site">
-      <option value="" disabled>Choose a site...</option>
-      {{#each sites}}
-      <option value="{{id}}">{{name}} &mdash; {{id}}</option>
-      {{/each}}
-    </select>
-    <div class="site-selected"></div>
-  </div>
-  <div class="field required">
-    <label>Title</label>
-    <input type="text" name="title" value="{{title}}" placeholder="Write a smart title">
-  </div>
-  <div class="field">
-    <div class="field-left required">
-      <label>Slug</label>
-      <input type="text" name="slug" value="{{slug}}" placeholder="All lowercase and hyphens but and NO spaces">
+  <div class="content">
+    <h1>Essay</h1>
+    <h3 class="item-title">{{title}}</h3>
+
+    <div class="error-message"></div>
+
+    <div class="field required">
+      <label>Site</label>
+      <select name="site">
+        <option value="" disabled>Choose a site...</option>
+        {{#each sites}}
+        <option value="{{id}}">{{name}} &mdash; {{id}}</option>
+        {{/each}}
+      </select>
+      <div class="site-selected"></div>
     </div>
-    <div class="field-right">
-      <label>Author</label>
-      <select name="author_id"></select>
+    <div class="field required">
+      <label>Collections</label>
+      <div class="collections-list"></div>
     </div>
-  </div>
-  <div class="field">
-    <label>Intro MD/HTML</label>
-    <textarea name="intro" placeholder="Provide an essay introduction text as Markdown/HTML">{{intro}}</textarea>
-  </div>
-  <div class="field">
-    <label>Body MD/HTML</label>
-    <textarea name="body" placeholder="Write your essay content as Markdown/HTML">{{body}}</textarea>
-  </div>
-  <div class="field">
-    <label>Collections</label>
-    <select name="collections" multiple></select>
-  </div>
-  <div class="field">
-    <div class="field-left">
-      <label>Published</label>
-      <input type="checkbox" name="published" {{#if published}}checked{{/if}}>
+    <div class="field required">
+      <label>Title</label>
+      <input type="text" name="title" value="{{title}}" placeholder="Write a smart title">
+    </div>
+    <div class="field">
+      <div class="field-left required">
+        <label>Slug</label>
+        <input type="text" name="slug" value="{{slug}}" placeholder="All lowercase and hyphens but and NO spaces">
+      </div>
+      <div class="field-right required">
+        <label>Author</label>
+        <select name="author_id"></select>
+      </div>
+    </div>
+    <div class="field">
+      <label>Intro MD/HTML</label>
+      <textarea name="intro" placeholder="Provide an essay introduction text as Markdown/HTML">{{intro}}</textarea>
+    </div>
+    <div class="field">
+      <label>Body MD/HTML</label>
+      <textarea name="body" placeholder="Write your essay content as Markdown/HTML">{{body}}</textarea>
     </div>
-    <div class="field-right">
-      <label>Published At</label>
-      <input type="text" name="published_at" value="{{published_at}}" placeholder="ex. Feb 20 2012 6:30 PM or leave blank">
+    <div class="field">
+      <div class="field-left">
+        <label>Published</label>
+        <input type="checkbox" name="published" {{#if published}}checked{{/if}}>
+      </div>
+      <div class="field-right">
+        <label>Published At</label>
+        <input type="text" name="published_at" value="{{published_at}}" placeholder="ex. Feb 20 2012 6:30 PM or leave blank">
+      </div>
     </div>
   </div>
 
-  <h3 class="heading">Sponsorship</h3>
-  <div class="field">
-    <div class="field-left">
-      <label>Sponsor</label>
-      <select name="sponsor_id">
-        <option value="">Select a sponsor...</option>
-        {{#each sponsors}}
-        <option value="{{id}}">{{name}}</option>
-        {{/each}}
-      </select>
+  <div class="sidebar">
+    <div class="buttons">
+      <button class="save-button">Save</button>
+      <button class="cancel-button plain">Cancel</button>
+      {{#if id}}<a class="delete-button" href="#">delete {{type}}</a>{{/if}}
     </div>
-    <div class="field-right">
-      <label>Start</label>
-      <input type="text" name="sponsor_start" value="{{sponsor_start}}" placeholder="ex. Feb 20 2012 6:30 PM">
-      <br class="clearfix">
-      <label>End</label>
-      <input type="text" name="sponsor_end" value="{{sponsor_end}}" placeholder="ex. Feb 20 2012 6:30 PM">
+
+    <div class="top-spacer"></div>
+
+    <h3 class="heading">Sponsorship</h3>
+    <div class="field">
+      <div class="field-left">
+        <label>Sponsor</label>
+        <select name="sponsor_id">
+          <option value="">Select a sponsor...</option>
+          {{#each sponsors}}
+          <option value="{{id}}">{{name}}</option>
+          {{/each}}
+        </select>
+      </div>
+      <div class="field-right">
+        <label>Start</label>
+        <input type="text" name="sponsor_start" value="{{sponsor_start}}" placeholder="Feb 20 2012 6:30 PM">
+        <br class="clearfix">
+        <label>End</label>
+        <input type="text" name="sponsor_end" value="{{sponsor_end}}" placeholder="Feb 20 2012 6:30 PM">
+      </div>
     </div>
   </div>
-</form>
 
-{{#if id}}
-<button class="delete-button plain">Delete {{type}}</button>
-{{/if}}
+</form>

admin/templates/essays.html

@@ -1,18 +1,24 @@
-<h1>
-  Essays
-  <a class="new" href="#/essay/new">+</a>
-  <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="#/essay/{{id}}">{{title}}</a>
-    <div class="meta">
-      <div><a href="http://{{site}}/essay/{{slug}}" target="_blank">view on {{site}}</a></div>
-    </div>
-  </li>
-  {{/each}}
-</ul>
+<div class="content">
+  <h1>
+    Essays
+    <a class="new" href="#/essay/new">+</a>
+    <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="#/essay/{{id}}">{{title}}</a>
+      <div class="meta">
+        <div><a href="http://{{site}}/essay/{{slug}}" target="_blank">view on {{site}}</a></div>
+      </div>
+    </li>
+    {{/each}}
+  </ul>
+</div>
+
+<div class="sidebar">
+  
+</div>

admin/templates/filter-box.html

@@ -1,4 +1,5 @@
-<input class="filter-input" type="text" value="" placeholder="filter">
+<input class="filter-input" type="text" value="" placeholder="Filter..." tabindex="1">
+<span class="clear-filter">x</span>
 <div class="selected-site">
   <i class="icon"></i>
   <span class="site-name">All sites</span>

admin/templates/site-form.html

@@ -1,71 +1,77 @@
-<div class="buttons">
-  <button class="save-button">Save</button>
-  <button class="cancel-button plain">Cancel</button>
-</div>
-<h1>Site</h1>
-<h3 class="item-title">{{name}}</h3>
-
 <form class="site">
-  <div class="error-message"></div>
+  
+  <div class="content">
+    <h1>Site</h1>
+    <h3 class="item-title">{{name}}</h3>
 
-  <div class="field required">
-    <label>Site ID</label>
-    <input type="text" name="_id" value="{{_id}}" placeholder="www.example.com">
-  </div>
-  <div class="field">
-    <div class="field-left required">
-      <label>Name</label>
-      <input type="text" name="name" value="{{name}}" placeholder="Evolving Something">
+    <div class="error-message"></div>
+
+    <div class="field required">
+      <label>Site ID</label>
+      <input type="text" name="_id" value="{{_id}}" placeholder="www.example.com">
     </div>
-    <div class="field-right required">
-      <label>Name HTML</label>
-      <input type="text" name="name_html" value="{{name_html}}" placeholder="Evolving <b>Something</b>">
+    <div class="field">
+      <div class="field-left required">
+        <label>Name</label>
+        <input type="text" name="name" value="{{name}}" placeholder="Evolving Something">
+      </div>
+      <div class="field-right required">
+        <label>Name HTML</label>
+        <input type="text" name="name_html" value="{{name_html}}" placeholder="Evolving <b>Something</b>">
+      </div>
     </div>
-  </div>
-  <div class="field">
-    <label>Tagline</label>
-    <input type="text" name="tagline" value="{{tagline}}" placeholder="Yet another great Kleks site">
-  </div>
-  <div class="field">
-    <div class="field-left">
-      <label>Theme</label>
-      <select name="theme">
-        {{#each themes}}
-        <option value="{{.}}">{{.}}</option>
-        {{/each}}
-      </select>
+    <div class="field">
+      <label>Tagline</label>
+      <input type="text" name="tagline" value="{{tagline}}" placeholder="Yet another great Kleks site">
     </div>
-    <div class="field-right">
-      <label>Link</label>
-      <input type="text" name="link" value="{{link}}" placeholder="http://www.example.com">
+    <div class="field">
+      <div class="field-left">
+        <label>Theme</label>
+        <select name="theme">
+          {{#each themes}}
+          <option value="{{.}}">{{.}}</option>
+          {{/each}}
+        </select>
+      </div>
+      <div class="field-right">
+        <label>Link</label>
+        <input type="text" name="link" value="{{link}}" placeholder="http://www.example.com">
+      </div>
+    </div>
+    <div class="field">
+      <label>Menu HTML</label>
+      <textarea name="menu_html" placeholder="only LI items">{{menu_html}}</textarea>
+    </div>
+    <div class="field">
+      <label>Footer HTML</label>
+      <textarea name="footer_html" placeholder="Content to show on all pages in the footer">{{footer_html}}</textarea>
+    </div>
+    <div class="field">
+      <label>CSS</label>
+      <textarea name="css" placeholder="Custom CSS to override on site">{{css}}</textarea>
+    </div>
+    <div class="field">
+      <label>SEO Description</label>
+      <input type="text" name="seo_description" value="{{seo_description}}" placeholder="Keep it concise and short">
+    </div>
+    <div class="field">
+      <label>SEO Keywords</label>
+      <input type="text" name="seo_keywords" value="{{seo_keywords}}" placeholder="Short list of comma seperated keywords">
+    </div>
+    <div class="field">
+      <label>Google Analytics Code</label>
+      <input type="text" name="google_analytics_code" value="{{google_analytics_code}}" placeholder="UA-XXXXXXXXX-XX">
     </div>
   </div>
-  <div class="field">
-    <label>Menu HTML</label>
-    <textarea name="menu_html" placeholder="only LI items">{{menu_html}}</textarea>
-  </div>
-  <div class="field">
-    <label>Footer HTML</label>
-    <textarea name="footer_html" placeholder="Content to show on all pages in the footer">{{footer_html}}</textarea>
-  </div>
-  <div class="field">
-    <label>CSS</label>
-    <textarea name="css" placeholder="Custom CSS to override on site">{{css}}</textarea>
-  </div>
-  <div class="field">
-    <label>SEO Description</label>
-    <input type="text" name="seo_description" value="{{seo_description}}" placeholder="Keep it concise and short">
-  </div>
-  <div class="field">
-    <label>SEO Keywords</label>
-    <input type="text" name="seo_keywords" value="{{seo_keywords}}" placeholder="Short list of comma seperated keywords">
-  </div>
-  <div class="field">
-    <label>Google Analytics Code</label>
-    <input type="text" name="google_analytics_code" value="{{google_analytics_code}}" placeholder="UA-XXXXXXXXX-XX">
+
+  <div class="sidebar">
+    <div class="buttons">
+      <button class="save-button">Save</button>
+      <button class="cancel-button plain">Cancel</button>
+      {{#if id}}<a class="delete-button" href="#">delete {{type}}</a>{{/if}}
+    </div>
+
+    <div class="top-spacer"></div>
   </div>
-</form>
 
-{{#if id}}
-<button class="delete-button plain">Delete {{type}}</button>
-{{/if}}
+</form>

admin/templates/sites.html

@@ -1,18 +1,24 @@
-<h1>
-  Sites
-  <a class="new" href="#/site/new">+</a>
-  <span class="count">{{sites.length}}</span>
-</h1>
-<ul class="sites list">
-  {{#each sites}}
-  <li>
-    <div class="actions">
-      <div><a href="{{link}}" target="_blank">{{id}}</span></div>
-    </div>
-    <a class="site-name theme-{{theme}}" href="#/site/{{id}}">{{{name_html}}}</a>
-    <div class="meta">
-      {{#if tagline}}<div>{{{tagline}}}</div>{{/if}}
-    </div>
-  </li>
-  {{/each}}
-</ul>
+<div class="content">
+  <h1>
+    Sites
+    <a class="new" href="#/site/new">+</a>
+    <span class="count">{{sites.length}}</span>
+  </h1>
+  <ul class="sites list">
+    {{#each sites}}
+    <li>
+      <div class="actions">
+        <div><a href="{{link}}" target="_blank">{{id}}</a></div>
+      </div>
+      <a class="site-name theme-{{theme}}" href="#/site/{{id}}">{{{name_html}}}</a>
+      <div class="meta">
+        {{#if tagline}}<div>{{{tagline}}}</div>{{/if}}
+      </div>
+    </li>
+    {{/each}}
+  </ul>
+</div>
+
+<div class="sidebar">
+  
+</div>

admin/templates/sponsor-form.html

@@ -1,54 +1,60 @@
-<div class="buttons">
-  <button class="save-button">Save</button>
-  <button class="cancel-button plain">Cancel</button>
-</div>
-<h1>Sponsor</h1>
-<h3 class="item-title">{{name}}</h3>
-
 <form class="sponsor">
-  <div class="error-message"></div>
 
-  <div class="field required">
-    <label>Name</label>
-    <input type="text" name="name" value="{{name}}" placeholder="Type the sponsorship name">
-  </div>
-  <div class="field">
-    <label>Link</label>
-    <input type="text" name="link" value="{{link}}" placeholder="Full URL to link image or text to">
-  </div>
-  <div class="field">
-    <div class="field-left">
-      <label>Format</label>
-      <select name="format" placeholder="Select a format...">
-        <option value="text">Text</option>
-        <option value="image">Image</option>
-        <option value="video">Video</option>
-      </select>
+  <div class="content">
+    <h1>Sponsor</h1>
+    <h3 class="item-title">{{name}}</h3>
+
+    <div class="error-message"></div>
+
+    <div class="field required">
+      <label>Name</label>
+      <input type="text" name="name" value="{{name}}" placeholder="Type the sponsorship name">
     </div>
-    <div class="field-right">
-      <label>Label</label>
-      <input type="text" name="label" value="{{label}}" placeholder="Text to override the 'Sponsored By' label if need be">
+    <div class="field">
+      <label>Link</label>
+      <input type="text" name="link" value="{{link}}" placeholder="Full URL to link image or text to">
+    </div>
+    <div class="field">
+      <div class="field-left">
+        <label>Format</label>
+        <select name="format" placeholder="Select a format...">
+          <option value="text">Text</option>
+          <option value="image">Image</option>
+          <option value="video">Video</option>
+        </select>
+      </div>
+      <div class="field-right">
+        <label>Label</label>
+        <input type="text" name="label" value="{{label}}" placeholder="Text to override the 'Sponsored By' label if need be">
+      </div>
+    </div>
+    <div class="field">
+      <label>Content</label>
+      <textarea name="content" placeholder="Type text or paste embed code of an image or video">{{content}}</textarea>
+    </div>
+    <div class="field">
+      <label>Note</label>
+      <textarea name="note" placeholder="Type a private note for your eyes only">{{note}}</textarea>
+    </div>
+    <div class="field">
+      <label>Contact</label>
+      <select name="contact_id">
+        <option value="">Select a contact...</option>
+        {{#each contacts}}
+        <option value="{{id}}">{{name}}</option>
+        {{/each}}
+      </select>
     </div>
   </div>
-  <div class="field">
-    <label>Content</label>
-    <textarea name="content" placeholder="Type text or paste embed code of an image or video">{{content}}</textarea>
-  </div>
-  <div class="field">
-    <label>Note</label>
-    <textarea name="note" placeholder="Type a private note for your eyes only">{{note}}</textarea>
-  </div>
-  <div class="field">
-    <label>Contact</label>
-    <select name="contact_id">
-      <option value="">Select a contact...</option>
-      {{#each contacts}}
-      <option value="{{id}}">{{name}}</option>
-      {{/each}}
-    </select>
+
+  <div class="sidebar">
+    <div class="buttons">
+      <button class="save-button">Save</button>
+      <button class="cancel-button plain">Cancel</button>
+      {{#if id}}<a class="delete-button" href="#">delete {{type}}</a>{{/if}}
+    </div>
+
+    <div class="top-spacer"></div>
   </div>
-</form>
 
-{{#if id}}
-<button class="delete-button plain">Delete {{type}}</button>
-{{/if}}
+</form>

admin/templates/sponsors.html

@@ -1,19 +1,25 @@
-<h1>
-  Sponsors
-  <a class="new" href="#/sponsor/new">+</a>
-  <span class="count">{{sponsors.length}}</span>
-</h1>
-<ul class="sponsors list">
-  {{#each sponsors}}
-  <li>
-    <div class="actions">
-      <div>{{site}}</div>
-    </div>
-    <a href="#/sponsor/{{id}}">{{name}}</a>
-    <div class="meta">
-      <div><a href="{{link}}">{{link}}</a></div>
-      <div><strong>{{format}}</strong> format</div>
-    </div>
-  </li>
-  {{/each}}
-</ul>
+<div class="content">
+  <h1>
+    Sponsors
+    <a class="new" href="#/sponsor/new">+</a>
+    <span class="count">{{sponsors.length}}</span>
+  </h1>
+  <ul class="sponsors list">
+    {{#each sponsors}}
+    <li>
+      <div class="actions">
+        <div>{{site}}</div>
+      </div>
+      <a href="#/sponsor/{{id}}">{{name}}</a>
+      <div class="meta">
+        <div><a href="{{link}}">{{link}}</a></div>
+        <div><strong>{{format}}</strong> format</div>
+      </div>
+    </li>
+    {{/each}}
+  </ul>
+</div>
+
+<div class="sidebar">
+  
+</div>

site/static/css/theme.styl

@@ -90,11 +90,11 @@
         padding: 10px
         
         input
-          background: #fff
           border: 0
           padding: 5px 10px
           font-size: 1.2em
           color: $textColor
+          background: #fff
 
 
 article