Modified the look of forms in admin

admin/controllers/authors.coffee

@@ -57,8 +57,12 @@ class AuthorForm extends Spine.Controller
     @siteChange()
 
   siteChange: ->
-    site = Site.find(@formSite.val())
-    @formSite.parents('.field').find('.site-selected').html "<div class=\"site-name theme-#{site.theme}\">#{site.name_html}</div>"
+    $siteSelected = @formSite.parents('.field').find('.site-selected')
+    site = Site.exists(@formSite.val())
+    if site
+      $siteSelected.html "<div class=\"site-name theme-#{site.theme}\">#{site.name_html}</div>"
+    else
+      $siteSelected.html ""
 
   save: (e) ->
     e.preventDefault()

admin/controllers/blocks.coffee

@@ -55,8 +55,12 @@ class BlockForm extends Spine.Controller
     @siteChange()
 
   siteChange: ->
-    site = Site.find(@formSite.val())
-    @formSite.parents('.field').find('.site-selected').html "<div class=\"site-name theme-#{site.theme}\">#{site.name_html}</div>"
+    $siteSelected = @formSite.parents('.field').find('.site-selected')
+    site = Site.exists(@formSite.val())
+    if site
+      $siteSelected.html "<div class=\"site-name theme-#{site.theme}\">#{site.name_html}</div>"
+    else
+      $siteSelected.html ""
 
   save: (e) ->
     e.preventDefault()

admin/controllers/collections.coffee

@@ -59,8 +59,12 @@ class CollectionForm extends Spine.Controller
     @siteChange()
 
   siteChange: ->
-    site = Site.find(@formSite.val())
-    @formSite.parents('.field').find('.site-selected').html "<div class=\"site-name theme-#{site.theme}\">#{site.name_html}</div>"
+    $siteSelected = @formSite.parents('.field').find('.site-selected')
+    site = Site.exists(@formSite.val())
+    if site
+      $siteSelected.html "<div class=\"site-name theme-#{site.theme}\">#{site.name_html}</div>"
+    else
+      $siteSelected.html ""
 
   save: (e) ->
     e.preventDefault()

admin/models/collection.coffee

@@ -4,7 +4,7 @@ require('lib/spine-couch-ajax')
 BaseModel = require('models/base')
 
 class Collection extends BaseModel
-  @configure "Collection", "site", "slug", "name", "intro", "pinned", "updated_at", "sponsor_id"
+  @configure "Collection", "site", "slug", "name", "intro", "pinned", "updated_at", "sponsor_id", "sponsor_start", "sponsor_end"
 
   @extend Spine.Model.CouchAjax
 
@@ -14,5 +14,10 @@ class Collection extends BaseModel
     return 'Site is required' unless @site
     return 'Slug is required' unless @slug
     return 'Name is required' unless @name
+    if @sponsor_id
+      return 'Sponsor Start Date is required' unless @sponsor_start
+      return 'Sponsor End Date is required' unless @sponsor_end
+      if new Date(@sponsor_start) >= new Date(@sponsor_end)
+        return 'Sponsor Start Date cannot be later the End Date'
 
 module.exports = Collection

admin/models/essay.coffee

@@ -4,7 +4,7 @@ require('lib/spine-couch-ajax')
 BaseModel = require('models/base')
 
 class Essay extends BaseModel
-  @configure "Essay", "site", "slug", "title", "intro", "body", "published", "published_at", "updated_at", "author_id", "sponsor_id", "collections"
+  @configure "Essay", "site", "slug", "title", "intro", "body", "published", "published_at", "updated_at", "author_id", "sponsor_id", "sponsor_start", "sponsor_end", "collections"
   
   @extend Spine.Model.CouchAjax
   
@@ -20,5 +20,10 @@ class Essay extends BaseModel
     return 'Site is required' unless @site
     return 'Slug is required' unless @slug
     return 'Title is required' unless @title
+    if @sponsor_id
+      return 'Sponsor Start Date is required' unless @sponsor_start
+      return 'Sponsor End Date is required' unless @sponsor_end
+      if new Date(@sponsor_start) >= new Date(@sponsor_end)
+        return 'Sponsor Start Date cannot be later the End Date'
 
 module.exports = Essay

admin/static/css/common.styl

@@ -94,7 +94,12 @@ img
   display: block
   border: 0
 
-input, textarea, select
+input[type='text'],
+input[type='search'],
+textarea,
+select
+  -webkit-appearance: none
+  outline: none
   display: block
   width: 100%
   color: $textColor
@@ -102,15 +107,19 @@ input, textarea, select
   font-size: 1em
   font-weight: $normalFont
   word-spacing: 0.2em
-  padding: 5px
+  padding: 5px 0
   margin: 0
-  border: 1px solid #f3f3f3
+  border: 0
+  border-bottom: 2px dotted #f3f3f3
+  border-radius(0)
 
 textarea
   max-width: 100%
   min-width: 50%
   height: 120px
   min-height: 60px
+  border-left: 2px dotted #f3f3f3
+  padding-left: 2px
 
 button, .button
   display: inline-block

admin/static/css/theme.styl

@@ -230,20 +230,38 @@ span.label
     > form
       margin: 1.5em 0
       clearfix()
+
+      .heading
+        color: $primaryColor
      
       .field
-        padding: 5px 0
+        position: relative
+        padding: 10px 0
         clearfix()
 
         label
           display: block
+          padding: 5px 0
           color: $lightGrey
 
+        input[type='text'],
+        input[type='search'],
+        textarea,
+        select
+          display: block
+          width: 100%
+
         input[name='name'],
         input[name='name_html'],
-        input[name='title']
+        input[name='title'],
+        input[name='code']
           font-size: 1.5em
 
+        input[type='checkbox']
+          display: inline-block
+          float: left
+          margin: 4px 10px 4px 0
+
         .field-left
           float: left
           width: 48%
@@ -253,33 +271,36 @@ span.label
           width: 48%
 
         .site-selected
-          font-size: 2em
-
+          position: absolute
+          top: 42px
+          right: 0
+          padding-left: 10px
+          background: #fff
+        
         &.inline
-
+          
           label
             display: inline-block
             width: 20%
             float: left
-            padding: 10px 0
 
-          select, input, textarea
+          input[type='text'],
+          input[type='search'],
+          textarea,
+          select
             display: block
             width: 75%
             float: right
-            margin-left: 10px
 
-        input[type='checkbox']
-          display: inline-block
-          width: auto
-          float: left
-          margin: 4px 10px 4px 0
+          input[type='checkbox']
+            width: auto
+            float: none
+            margin: 4px 10px
 
       .required label:after
         content: ' *'
         color: $textColor
 
-
       .error-message
         display: none
         color: #fff

admin/templates/author-form.html

@@ -8,28 +8,27 @@
 <form class="author">
   <div class="error-message"></div>
 
-  <div class="field">
-    <div class="field-left required">
-      <label>Site</label>
-      <select name="site">
-        {{#each sites}}
-        <option value="{{id}}">{{name}} &mdash; {{id}}</option>
-        {{/each}}
-      </select>
-    </div>
-    <div class="field-right site-selected"></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}}">
+    <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}}">
+    <input type="text" name="email" value="{{email}}" placeholder="person@example.com">
   </div>
   <div class="field required">
     <label>Bio</label>
-    <textarea name="bio">{{bio}}</textarea>
+    <textarea name="bio" placeholder="Provide the author's bio content HTML">{{bio}}</textarea>
   </div>
   <div class="field">
     <label>Photo</label>

admin/templates/block-form.html

@@ -8,24 +8,25 @@
 <form class="block">
   <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>Site</label>
-      <select name="site">
-        {{#each sites}}
-        <option value="{{id}}">{{name}} &mdash; {{id}}</option>
-        {{/each}}
-      </select>
+      <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 class="field-right site-selected"></div>
-  </div>
-  <div class="field required">
-    <label>Code</label>
-    <input type="text" name="code" value="{{code}}" placeholder="like: site_intro or site_promo">
-  </div>
-  <div class="field required">
-    <label>Name</label>
-    <input type="text" name="name" value="{{name}}">
   </div>
   <div class="field required">
     <label>Content HTML</label>

admin/templates/collection-form.html

@@ -8,45 +8,57 @@
 <form class="collection">
   <div class="error-message"></div>
 
-  <div class="field">
-    <div class="field-left required">
-      <label>Site</label>
-      <select name="site">
-        {{#each sites}}
-        <option value="{{id}}">{{name}} &mdash; {{id}}</option>
-        {{/each}}
-      </select>
-    </div>
-    <div class="field-right site-selected"></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}}">
+    <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}}">
-  </div>
-  <div class="field">
-    <label>Intro</label>
-    <textarea name="intro">{{intro}}</textarea>
+    <input type="text" name="slug" value="{{slug}}" placeholder="Choose a lug — all lowercase and hyphens but and NO spaces">
   </div>
   <div class="field">
-    <input type="checkbox" name="pinned" {{#if pinned}}checked{{/if}}>
-    <label>Pinned</label>
+    <label>Intro MD/HTML</label>
+    <textarea name="intro" placeholder="Provide a collection introduction text as Markdown/HTML">{{intro}}</textarea>
   </div>
   <div class="field">
-    <label>Sponsor</label>
-    <select name="sponsor_id">
-      <option value=""></option>
-      {{#each sponsors}}
-      <option value="{{id}}">{{name}}</option>
-      {{/each}}
-    </select>
+    <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>
+
+  <h3 class="heading">Sponsorship</h3>
   <div class="field">
-    <label>Updated At</label>
-    <input type="text" name="updated_at" value="{{updated_at}}" placeholder="ex. Feb 20 2012 6:30 PM or leave blank">
+    <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="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>
   </div>
 </form>
 

admin/templates/collections.html

@@ -6,10 +6,10 @@
 <ul class="collections list">
   {{#each collections}}
   <li>
-    <a href="#/collection/{{id}}">{{name}}</a>
-    <div class="meta">
-      <div><a href="http://{{site}}/collection/{{slug}}" target="_blank">http://{{site}}/collection/{{slug}}</a></div>
+    <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>

admin/templates/contact-form.html

@@ -10,15 +10,15 @@
 
   <div class="field required">
     <label>Name</label>
-    <input type="text" name="name" value="{{name}}">
+    <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="contact@example.com">
+    <input type="text" name="email" value="{{email}}" placeholder="person@example.com">
   </div>
   <div class="field">
     <label>Note</label>
-    <textarea name="note" placeholder="">{{note}}</textarea>
+    <textarea name="note" placeholder="Anything to keep for your eyes only">{{note}}</textarea>
   </div>
 </form>
 

admin/templates/site-form.html

@@ -15,16 +15,16 @@
   <div class="field">
     <div class="field-left required">
       <label>Name</label>
-      <input type="text" name="name" value="{{name}}">
+      <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}}">
+      <input type="text" name="name_html" value="{{name_html}}" placeholder="Evolving <b>Something</b>">
     </div>
   </div>
   <div class="field">
     <label>Tagline</label>
-    <input type="text" name="tagline" value="{{tagline}}">
+    <input type="text" name="tagline" value="{{tagline}}" placeholder="Yet another great Kleks site">
   </div>
   <div class="field">
     <div class="field-left">
@@ -46,23 +46,23 @@
   </div>
   <div class="field">
     <label>Footer HTML</label>
-    <textarea name="footer_html">{{footer_html}}</textarea>
+    <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">{{css}}</textarea>
+    <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}}">
+    <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}}">
+    <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}}">
+    <input type="text" name="google_analytics_code" value="{{google_analytics_code}}" placeholder="UA-XXXXXXXXX-XX">
   </div>
 </form>
 

admin/templates/sponsor-form.html

@@ -10,36 +10,38 @@
 
   <div class="field required">
     <label>Name</label>
-    <input type="text" name="name" value="{{name}}">
+    <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}}">
+    <input type="text" name="link" value="{{link}}" placeholder="Full URL to link image or text to">
   </div>
   <div class="field">
-    <label>Label</label>
-    <input type="text" name="label" value="{{label}}">
-  </div>
-  <div class="field">
-    <label>Format</label>
-    <select name="format">
-      <option value="text">Text</option>
-      <option value="image">Image</option>
-      <option value="video">Video</option>
-    </select>
+    <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">{{content}}</textarea>
+    <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">{{note}}</textarea>
+    <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=""></option>
+      <option value="">Select a contact...</option>
       {{#each contacts}}
       <option value="{{id}}">{{name}}</option>
       {{/each}}

site/server/lists.coffee

@@ -65,9 +65,18 @@ exports.collection = (head, req) ->
     return doc
 
   if sponsor
-    sponsor.text_format = sponsor.format is 'text'
-    sponsor.image_format = sponsor.format is 'image'
-    sponsor.video_format = sponsor.format is 'video'
+    # Check for strat/end dates of sponsorship
+    start = new Date(collection.sponsor_start)
+    end = new Date(collection.sponsor_end)
+    now = new Date()
+    if start <= now and end >= now
+      # let continue on
+      sponsor.text_format = sponsor.format is 'text'
+      sponsor.image_format = sponsor.format is 'image'
+      sponsor.video_format = sponsor.format is 'video'
+    else
+      # let's remove the sponsor
+      sponsor = null
 
   if collection
     return {
@@ -170,9 +179,18 @@ exports.essay = (head, req) ->
     return doc
 
   if sponsor
-    sponsor.text_format = sponsor.format is 'text'
-    sponsor.image_format = sponsor.format is 'image'
-    sponsor.video_format = sponsor.format is 'video'
+    # Check for strat/end dates of sponsorship
+    start = new Date(essay.sponsor_start)
+    end = new Date(essay.sponsor_end)
+    now = new Date()
+    if start <= now and end >= now
+      # let continue on
+      sponsor.text_format = sponsor.format is 'text'
+      sponsor.image_format = sponsor.format is 'image'
+      sponsor.video_format = sponsor.format is 'video'
+    else
+      # let's remove the sponsor
+      sponsor = null
 
   if essay
     return {