More work on fullscreen and some fixes plus tweaks

admin/controllers/authors.coffee

@@ -1,5 +1,5 @@
 Spine       = require('spine/core')
-# $           = Spine.$
+$           = Spine.$
 templates   = require('duality/templates')
 
 Author      = require('models/author')
@@ -154,5 +154,10 @@ class Authors extends Spine.Stack
     '/author/new':   'form'
     '/author/:id':   'form'
 
+  constructor: ->
+    super
+    for k, v of @controllers
+      @[k].active => @active()
+
 
 module.exports = Authors

admin/controllers/blocks.coffee

@@ -138,5 +138,10 @@ class Blocks extends Spine.Stack
     '/block/new':   'form'
     '/block/:id':   'form'
 
+  constructor: ->
+    super
+    for k, v of @controllers
+      @[k].active => @active()
+
 
 module.exports = Blocks

admin/controllers/collections.coffee

@@ -168,5 +168,10 @@ class Collections extends Spine.Stack
     '/collection/new':   'form'
     '/collection/:id':   'form'
 
+  constructor: ->
+    super
+    for k, v of @controllers
+      @[k].active => @active()
+
 
 module.exports = Collections

admin/controllers/contacts.coffee

@@ -119,5 +119,10 @@ class Contacts extends Spine.Stack
     '/contact/new':   'form'
     '/contact/:id':   'form'
 
+  constructor: ->
+    super
+    for k, v of @controllers
+      @[k].active => @active()
+
 
 module.exports = Contacts

admin/controllers/essays.coffee

@@ -34,6 +34,7 @@ class EssayForm extends Spine.Controller
     '.upload-ui':              'fileUploadContainer'
     '.save-button':            'saveButton'
     '.cancel-button':          'cancelButton'
+    'button.fullscreen-button': 'fullscreenButton'
 
   events:
     'submit form':              'preventSubmit'
@@ -42,6 +43,7 @@ class EssayForm extends Spine.Controller
     'click .delete-button':     'destroy'
     'change select[name=site]': 'siteChange'
     'blur input[name=slug]':    'updateSlug'
+    'click .fullscreen-button': 'fullscreen'
     'click .import-button':     'import'
 
   constructor: ->
@@ -90,14 +92,14 @@ class EssayForm extends Spine.Controller
 
     # Use Sisyphus to auto save forms to LocalStorage
     @form.sisyphus
-      customKeyPrefix: ''
+      customKeyPrefix: 'CUSTOM_PREFIX'
       timeout: 0
       autoRelease: true
-      name: if @editing then @item.id else 'new-essay'
-      onSave: -> console.log "Saved to local storage"
-      onBeforeRestore: -> alert "About to restore from local storage"
-      onRestore: -> alert "Restored from local storage"
-      onRelease: -> console.log "Local storage was released"
+      name: 'ABC123XXX' #if @editing then @item.id else 'new-essay'
+      # onSave: -> console.log "Saved to local storage"
+      # onBeforeRestore: -> alert "About to restore from local storage"
+      # onRestore: -> alert "Restored from local storage"
+      # onRelease: -> console.log "Local storage was released"
       excludeFields: []
 
   siteChange: ->
@@ -111,7 +113,7 @@ class EssayForm extends Spine.Controller
       $siteSelected.html ""
 
   makeAuthorsList: (site) ->
-    authors = Author.findAllByAttribute('site', site.id)
+    authors = Author.findAllByAttribute('site', site.id).sort(Author.nameSort)
     @formAuthorId.empty()
       .append "<option value=\"\">Select an author...</option>"
     for author in authors
@@ -119,7 +121,7 @@ class EssayForm extends Spine.Controller
     @formAuthorId.val(@item.author_id)
   
   makeCollectionsList: (site) ->
-    collections = Collection.findAllByAttribute('site', site.id)
+    collections = Collection.findAllByAttribute('site', site.id).sort(Collection.nameSort)
     @collectionSelectUI = new MultiSelectUI
       items: collections
       selectedItems: (c.id for c in @item.collections)
@@ -131,10 +133,20 @@ class EssayForm extends Spine.Controller
     unless slug.val()
       slug.val utils.cleanSlug(@formTitle.val())
 
+  fullscreen: (e) =>
+    e?.preventDefault()
+    @fullscreenButtonText ?= @fullscreenButton.html()
+    if @form.hasClass('fullscreen')
+      @form.removeClass('fullscreen')
+      @fullscreenButton.html @fullscreenButtonText
+    else
+      @form.addClass('fullscreen')
+      @fullscreenButton.html "&lt; Exit #{@fullscreenButtonText}"
+
   import: (e) =>
     # For importing old HTML to Markdown directly from old location
-    e.preventDefault()
-    url = $.trim @formBody.val()
+    e?.preventDefault()
+    url = $.trim prompt("Paste a URL from #{@formSite.val()}")
     if url
       $.ajax
         type: 'GET'
@@ -245,5 +257,10 @@ class Essays extends Spine.Stack
     '/essay/new':   'form'
     '/essay/:id':   'form'
 
+  constructor: ->
+    super
+    for k, v of @controllers
+      @[k].active => @active()
+
 
 module.exports = Essays

admin/controllers/filter-box.coffee

@@ -42,7 +42,11 @@ class FilterBox extends Spine.Controller
       @clear()
     
     @selectedSite.on 'click', (e) =>
+      e.stopPropagation()
       @siteSelector.toggle()
+
+    $('html').on 'click', (e) =>
+      @siteSelector.hide()
     
     @siteSelector.find('li').on 'click', (e) =>
       $item = $(e.currentTarget)

admin/controllers/index.coffee

@@ -1,7 +1,7 @@
 Spine       = require('spine/core')
 require('spine/route')
 require('spine/manager')
-# require('lib/fastclick')
+require('lib/fastclick')
 require('lib/sisyphus')
 
 templates   = require('duality/templates')
@@ -9,6 +9,7 @@ session     = require('session')
 
 MainNav     = require('controllers/main-nav')
 MainStack   = require('controllers/main-stack')
+HelpUI      = require('controllers/ui/help')
 
 Site        = require('models/site')
 Author      = require('models/author')
@@ -53,10 +54,11 @@ class App extends Spine.Controller
 
     @mainNav   = new MainNav
     @mainStack = new MainStack
+    @helpUI    = new HelpUI
 
-    @append @mainNav, @mainStack
+    @append @mainNav, @mainStack, @helpUI
 
-    Spine.Route.setup()
+    Spine.Route.setup(history: true)
 
     @doOtherStuff()
 
@@ -64,7 +66,7 @@ class App extends Spine.Controller
     # Use the fastclick module for touch devices.
     # Add a class of `needsclick` of the original click
     # is needed.
-    # new FastClick(document.body)
+    new FastClick(document.body)
 
 
 module.exports = App

admin/controllers/sites.coffee

@@ -128,5 +128,10 @@ class Sites extends Spine.Stack
     '/site/new':   'form'
     '/site/:id':   'form'
 
+  constructor: ->
+    super
+    for k, v of @controllers
+      @[k].active => @active()
+
 
 module.exports = Sites

admin/controllers/sponsors.coffee

@@ -128,5 +128,10 @@ class Sponsors extends Spine.Stack
     '/sponsor/new':   'form'
     '/sponsor/:id':   'form'
 
+  constructor: ->
+    super
+    for k, v of @controllers
+      @[k].active => @active()
+
 
 module.exports = Sponsors

admin/controllers/ui/help.coffee

@@ -0,0 +1,38 @@
+Spine       = require('spine/core')
+$           = Spine.$
+templates   = require('duality/templates')
+
+
+class HelpUI extends Spine.Controller
+  tag: 'div'
+  className: 'ui-help'
+
+  events:
+    'click .close-button':    'close'
+
+  constructor: ->
+    super
+    @render()
+    @hide()
+    @hookButtons()
+
+  render: ->
+    @html templates.render('help.html', {}, {})
+
+  show: ->
+    @el.show()
+
+  hide: ->
+    @el.hide()
+
+  close: (e) ->
+    e?.preventDefault()
+    @hide()
+  
+  hookButtons: ->
+    $('body').on 'click', '.markdown-help', (e) =>
+      e?.preventDefault()
+      @el.toggle()
+
+
+module.exports = HelpUI

admin/controllers/ui/multi-select.coffee

@@ -14,6 +14,7 @@ class MultiSelectUI extends Spine.Controller
   valueField: 'id'
   valueFields: null
   emptyText: 'Nothing to select here.'
+  jumpToFirst: true
 
   constructor: ->
     super
@@ -46,6 +47,8 @@ class MultiSelectUI extends Spine.Controller
       
       # add the created option to the list
       @el.append $option
+
+    setTimeout(@scrollToSelected, 2000) if @jumpToFirst
     @
 
   selected: =>
@@ -62,5 +65,8 @@ class MultiSelectUI extends Spine.Controller
         items.push $option.attr("data-#{cls.valueField}")
     return items
 
+  scrollToSelected: =>
+    @el.scrollTop(@el.find('.selected:first').position().top)
+
 
 module.exports = MultiSelectUI

admin/static/css/common.styl

@@ -43,6 +43,7 @@ h6
 a
   color: $linkColor
   text-decoration: none
+  cursor: pointer
 
   &:hover
     text-decoration: none
@@ -120,10 +121,11 @@ textarea
   height: 120px
   min-height: 60px
   border-left: 2px dotted $faintGrey
-  padding-left: 2px
+  padding-left: 5px
 
 button, .button
   display: inline-block
+  vertical-align: middle
   padding: 10px 30px
   font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif
   font-size: 1.1em
@@ -147,7 +149,8 @@ button, .button
 
   &.small
     padding: 0px 10px
-    font-size: 1em
+    font-size: 18px
+    font-weight: $normalFont
     line-height: 1.5em
 
 ::-webkit-input-placeholder

admin/static/css/theme.styl

@@ -194,7 +194,7 @@ span.label
 
         .top-spacer
           display: block
-          height: 3em
+          height: 4em
 
         .buttons
           position: fixed
@@ -294,7 +294,8 @@ span.label
 
       .heading
         color: $primaryColor
-        margin: 1em 0 0.4em 0
+        margin: 0.5em 0 0 0
+        font-size: 1.4em
      
       .field
         position: relative
@@ -319,24 +320,15 @@ span.label
         input[name='code']
           font-size: 1.5em
 
+        textarea[name='body'],
+        textarea[name='content']
+          height: 600px
+
         input[type='checkbox']
           display: inline-block
           float: left
           margin: 4px 10px 4px 0
 
-        textarea
-
-          &.fullscreen
-            position: fixed
-            top: 0
-            bottom: 0
-            left: 0
-            width: 50%
-            padding: 5px
-            background: white
-            border-left: 20px solid $primaryColor
-            z-index: 10
-
         .field-left
           float: left
           width: 48%
@@ -381,6 +373,70 @@ span.label
         color: #fff
         padding: 5px 10px
         background: orange
+      
+      &.fullscreen
+
+        &:before
+          content: ''
+          position: fixed
+          top: 0
+          bottom: 0
+          left: 0
+          right: 0
+          background: $primaryColor
+          z-index: 99
+
+        input[name='title'],
+        input[name='name']
+          position: fixed
+          top: 0
+          left: 20%
+          right: 20%
+          width: auto
+          color: #fff
+          font-size: 1.8em
+          z-index: 100
+
+        textarea[name='body'],
+        textarea[name='content']
+          position: fixed
+          top: 60px
+          bottom: 0
+          left: 20%
+          right: 20%
+          width: auto
+          height: 90%
+          padding: 10px
+          border: 0
+          background: white
+          // outline: 10px solid rgba(255, 255, 255, 0.5)
+          z-index: 100
+
+        button.fullscreen-button,
+        .markdown-help:first-of-type
+          position: fixed
+          top: 10px
+          left: 10px
+          padding: 0 10px
+          font-size: 18px
+          font-weight: 300
+          background: darken($primaryColor, 5%)
+          color: #fff
+          border: 0
+          z-index: 100
+
+          &:hover
+            background: darken($primaryColor, 10%)
+
+        .markdown-help:first-of-type
+          position: fixed
+          top: 10px
+          left: auto
+          right: 10px
+
+          &:after
+            content: ' Help'
+            color: #fff
 
 .stack .panel:not(.active)
   display: none
@@ -388,16 +444,20 @@ span.label
 
 ul.ui-multi-select
   list-style-type: none
-  padding: 0
+  padding: 2px
   margin: 0
+  max-height: 100px
+  border-bottom: 2px dotted $faintGrey
+  overflow-y: auto
+  overflow-x: hidden
   -webkit-user-select: none
 
   > li
     display: inline-block
     padding: 4px 10px
     margin: 0 12px 12px 0
-    max-width: 100%
-    background: #fff
+    // max-width: 100%
+    width: 48%
     border: 1px solid $faintGrey
     ellipsis()
     cursor: pointer
@@ -407,10 +467,34 @@ ul.ui-multi-select
 
     &.selected
       color: $linkColor
+      background: #fff
       font-weight: $boldFont
       border-color: $primaryColor
       outline: 2px solid rgba($primaryColor, 0.5)
 
+      &:before
+        content: '•'
+        display: block
+        float: right
+        vertical-align: top
+        margin-top: 5px
+        color: $primaryColor
+        font-size: 1.5em
+        line-height: 0.5em
+
+  .sidebar &
+    border-color: #d3d3d3
+
+    > li
+      width: 95%
+      border: 1px solid darken($faintGrey, 10%)
+
+      &:hover
+        background: lighten($faintGrey, 10%)
+
+      &.selected
+        background: lighten($faintGrey, 30%)
+
 .ui-file-upload
   
   .dropzone
@@ -453,4 +537,48 @@ ul.ui-multi-select
         border: 1px solid #e3e3e3
         em
           font-weight: $boldFont
-          font-size: 0.8em
+          font-size: 0.8em
+
+.ui-help
+  position: absolute
+  top: 15%
+  right: 20px
+  bottom: 20px
+  max-width: 450px
+  padding: 20px
+  background: #333
+  color: #fff
+  font-size: 0.8em
+  overflow: auto
+  z-index: 110
+  
+  > h3
+    color: $primaryColor
+    margin: 1em 0
+
+  .close-button
+    float: right
+
+  > table
+    width: 100%
+    border-collapse: separate
+    border-spacing: 0 5px
+    
+    tbody
+
+      td
+        padding: 5px 10px
+        
+      td:first-of-type
+        width: 40%
+        padding: 5px 10px 5px 0
+        font-size: 1.1em
+
+      td:nth-child(2)
+        width: 5px
+        padding: 0
+        border: 1px solid rgba(255, 255, 255, 0.1)
+        border-right: 0
+
+      td:last-of-type
+        padding: 5px 0 5px 10px

admin/templates/block-form.html

@@ -27,7 +27,7 @@
       </div>
     </div>
     <div class="field required">
-      <label>Content HTML</label>
+      <label>Content as HTML</label>
       <textarea name="content" placeholder="HTML content of the block">{{content}}</textarea>
     </div>
   </div>

admin/templates/collection-form.html

@@ -25,7 +25,7 @@
       <input type="text" name="slug" value="{{slug}}" placeholder="All lowercase and hyphens but NO spaces">
     </div>
     <div class="field">
-      <label>Intro MD/HTML</label>
+      <label>Intro as <a class="markdown-help">Markdown/HTML</a></label>
       <textarea name="intro" placeholder="Provide a collection introduction text as Markdown/HTML">{{intro}}</textarea>
     </div>
     <div class="field">

admin/templates/essay-form.html

@@ -3,6 +3,7 @@
   <div class="content">
     <h1>
       Essay
+      <button class="fullscreen-button small">Fullscreen</button>
       <span class="status">{{#if published}}Published{{else}}In Draft{{/if}}</span>
     </h1>
     <h3 class="item-title">{{title}}</h3>
@@ -19,10 +20,6 @@
       </select>
       <div class="site-selected"></div>
     </div>
-    <div class="field required">
-      <label>Collections</label>
-      <div class="collections-list"></div>
-    </div>
     <div class="field required">
       <label>Title</label>
       <input type="text" name="title" value="{{title}}" placeholder="Write a smart title">
@@ -38,14 +35,24 @@
       </div>
     </div>
     <div class="field">
-      <label>Intro MD/HTML</label>
+      <label>Intro as <a class="markdown-help">Markdown/HTML</a></label>
       <textarea name="intro" placeholder="Provide an essay introduction text as Markdown/HTML">{{intro}}</textarea>
     </div>
     <div class="field">
-      <label>Body MD/HTML</label>
+      <label>Content as <a class="markdown-help">Markdown/HTML</a> | <a class="fullscreen-button">Fullscreen</a> | <a class="import-button">Import</a></label>
       <textarea name="body" placeholder="Write your essay content as Markdown/HTML">{{body}}</textarea>
-      <button class="import-button small">Import</button>
     </div>
+  </div>
+
+  <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 class="field">
       <div class="field-left">
         <label>Published</label>
@@ -56,17 +63,12 @@
         <input type="text" name="published_at" value="{{published_at}}" placeholder="ex. Feb 20 2012 6:30 PM or leave blank">
       </div>
     </div>
-  </div>
 
-  <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}}
+    <h3 class="heading">Collections *</h3>
+    <div class="field">
+      <div class="collections-list"></div>
     </div>
 
-    <div class="top-spacer"></div>
-
     <h3 class="heading">Files</h3>
     <div class="field">
       <div class="upload-ui"></div>

admin/templates/help.html

@@ -0,0 +1,73 @@
+<button class="close-button small">X</button>
+<h2>Help</h2>
+
+<h3>Markdown Reference</h3>
+<table>
+  <tbody>
+    <tr>
+      <td>### Heading 3</td>
+      <td></td>
+      <td><h3>Heading 3</h3></td>
+    </tr>
+    <tr>
+      <td>#### Heading 4</td>
+      <td></td>
+      <td><h4>Heading 4</h4></td>
+    </tr>
+    <tr>
+      <td>**bold text**</td>
+      <td></td>
+      <td><strong>bold text</strong></td>
+    </tr>
+    <tr>
+      <td>_italic text_</td>
+      <td></td>
+      <td><em>italic text</em></td>
+    </tr>
+    <tr>
+      <td>> Quoted text</td>
+      <td></td>
+      <td><blockquote>Quoted text without quotes</blockquote></td>
+    </tr>
+    <tr>
+      <td>
+        * Bullet list<br>
+        - or this<br>
+        + or even this
+      </td>
+      <td></td>
+      <td>
+        <ul style="margin: 0;">
+          <li>Bullet list</li>
+          <li>or this</li>
+          <li>or even this</li>
+        </ul>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        1. Numbered list<br>
+        1. another item<br>
+        4. and another
+      </td>
+      <td></td>
+      <td>
+        <ol style="margin: 0;">
+          <li>Numbered list</li>
+          <li>order doesn't matter</li>
+          <li>just like so</li>
+        </ol>
+      </td>
+    </tr>
+    <tr>
+      <td>Link to [my site](http://mysite.com "Some title")</td>
+      <td></td>
+      <td>Link to <a title="Some title">my site</a></td>
+    </tr>
+    <tr>
+      <td><a href="http://daringfireball.net/projects/markdown/dingus" target="_blank">Online reference</a></td>
+      <td></td>
+      <td>Use this site to practice writing Markdwon style.</td>
+    </tr>
+  </tbody>
+</table>