Render new icons for all types and few others

like trash icon for delete and such

admin/static/css/mixin.styl

@@ -177,6 +177,7 @@ iconic(content = '\67', color = $textColor, pos = 'before')
     line-height: 1em
     font-size: 1em
     color: color
+    -webkit-font-smoothing: antialiased
 
 clearfix()
   *zoom: 1

admin/static/css/theme.styl

@@ -54,12 +54,20 @@ span.label
     border: 1px solid $faintGrey
     outline: none
 
+  .icon
+    position: absolute
+    top: 8px
+    right: 10px
+    color: $lightGrey
+    font-size: 1.5em
+    line-height: 1em
+
   .clear-filter
     display: none
     position: absolute
     top: 0
     right: 0
-    width: 20px
+    width: 22px
     height: 20px
     background: #D3A924
     padding: 0
@@ -73,7 +81,8 @@ span.label
       display: block
 
   .selected-site
-    padding: 10px 10px
+    position: relative
+    padding: 10px 40px 10px 10px
     border: 1px solid $faintGrey
     border-top: 0
     line-height: 1em
@@ -81,9 +90,7 @@ span.label
     -webkit-user-select: none
 
     .icon
-      float: right
-      margin: 5px 5px 0 0
-      arrow('top', 10px, $lightGrey)
+      top: 10px
 
     &:hover
       background: lighten($faintGrey, 50%)
@@ -289,6 +296,19 @@ span.label
           button, .button
             margin: 0 10px 10px 0
 
+        .delete-button
+          display: inline-block
+          float: right
+          height: 44px
+          width: 44px
+          background: #ddd
+          line-height: 44px
+          text-align: center
+          cursor: pointer
+          &:hover
+            color: #fff
+            background: #D3A924
+
         input[type='text'],
         input[type='search'],
         textarea,
@@ -297,11 +317,10 @@ span.label
 
         ::-webkit-input-placeholder
           color: #d3d3d3
-
+      
       &.form
         z-index: 20
 
-
     h1
       margin: 0 0 0.5em -0.05em
 
@@ -330,19 +349,35 @@ span.label
       clearfix()
 
       > li
-        font-size: 1.5em
-        line-height: 1.2em
         border-bottom: 1px dotted $faintGrey
-        padding: 0.5em 0
+        padding: 1em 0
         clearfix()
 
+        > a
+          display: block
+          font-size: 1.5em
+          line-height: 1.2em
+          &:hover
+            color: $textDarkColor
+          &.site-name
+            font-size: 2em
+          &.title
+            padding-left: 1.5em
+            .icon
+              margin-left: -1.5em
+              margin-right: 0.5em
+              color: $textColor
+
         .note
-          font-size: 0.6em
+          margin-top: 0.5em
+          font-size: 0.9em
           line-height: 1em
           color: $lightGrey
         
         .meta
-          font-size: 0.6em
+          margin-top: 0.5em
+          padding-left: 2.5em
+          font-size: 0.9em
           line-height: 1em
           color: $lightGrey
 
@@ -357,21 +392,31 @@ span.label
 
         .actions
           float: right
-          font-size: 0.6em
-          line-height: 3em
+          margin-left: 1em
+          font-size: 1.5em
+          line-height: 1.3em
           color: $lightGrey
 
           > div
             display: inline-block
-            margin-left: 1em
+            font-size: 0.6em
+            line-height: 3em
 
           a
             color: $lightGrey
             &:hover
               text-decoration: underline
 
+    .no-data
+      color: $lightGrey
+      padding: 2em 1em
+      margin-bottom: 2em
+      text-align: center
+      border: 1px dotted #ddd
+
     form
       margin: 0
+      height: 100%
 
       .heading
         color: $primaryColor
@@ -388,6 +433,10 @@ span.label
           padding: 5px 0
           color: $lightGrey
 
+        .note
+          font-size: 0.8em
+          margin-bottom: 0.5em
+
         input[type='text'],
         input[type='search'],
         textarea,
@@ -554,6 +603,15 @@ span.label
   display: none
 
 
+.panel.dashboard
+
+  .content
+
+    > h3
+      color: $lightGrey
+      margin-bottom: 0.5em
+
+
 ul.ui-multi-select
   list-style-type: none
   padding: 2px

admin/templates/author-form.html

@@ -48,7 +48,7 @@
     <div class="buttons">
       <button class="save-button" tabindex="0">Save</button>
       <button class="cancel-button plain" tabindex="0">Cancel</button>
-      {{#if _id}}<a class="delete-button" href="#" tabindex="0">delete {{type}}</a>{{/if}}
+      {{#if _id}}<div class="delete-button"><i class="icon-trash"></i></div>{{/if}}
     </div>
 
     <div class="top-spacer"></div>

admin/templates/authors.html

@@ -10,7 +10,7 @@
       <div class="actions">
         <div><strong>Bio</strong> on {{site}}</div>
       </div>
-      <a href="#/author/{{id}}">{{name}}</a>
+      <a class="title" href="#/author/{{id}}"><i class="icon icon-author"></i>{{name}}</a>
     </li>
     {{/each}}
   </ul>

admin/templates/block-form.html

@@ -36,7 +36,7 @@
     <div class="buttons">
       <button class="save-button" tabindex="0">Save</button>
       <button class="cancel-button plain" tabindex="0">Cancel</button>
-      {{#if _id}}<a class="delete-button" href="#" tabindex="0">delete {{type}}</a>{{/if}}
+      {{#if _id}}<div class="delete-button"><i class="icon-trash"></i></div>{{/if}}
     </div>
 
     <div class="top-spacer"></div>

admin/templates/blocks.html

@@ -10,7 +10,7 @@
       <div class="actions">
         <div>{{code}}</div>
       </div>
-      <a href="#/block/{{id}}">{{name}}</a>
+      <a class="title" href="#/block/{{id}}"><i class="icon icon-block"></i>{{name}}</a>
       <div class="meta">
         <div>{{site}}</div>
       </div>

admin/templates/collection-form.html

@@ -44,7 +44,7 @@
     <div class="buttons">
       <button class="save-button" tabindex="0">Save</button>
       <button class="cancel-button plain" tabindex="0">Cancel</button>
-      {{#if _id}}<a class="delete-button" href="#" tabindex="0">delete {{type}}</a>{{/if}}
+      {{#if _id}}<div class="delete-button"><i class="icon-trash"></i></div>{{/if}}
     </div>
 
     <div class="top-spacer"></div>

admin/templates/collections.html

@@ -10,7 +10,7 @@
       <div class="actions">
         <div><a href="http://{{site}}/collection/{{slug}}" target="_blank">{{site}}</a></div>
       </div>
-      <a href="#/collection/{{id}}">{{name}}</a>
+      <a class="title" href="#/collection/{{id}}"><i class="icon icon-collection"></i>{{name}}</a>
     </li>
     {{/each}}
   </ul>

admin/templates/contact-form.html

@@ -24,7 +24,7 @@
     <div class="buttons">
       <button class="save-button" tabindex="0">Save</button>
       <button class="cancel-button plain" tabindex="0">Cancel</button>
-      {{#if _id}}<a class="delete-button" href="#" tabindex="0">delete {{type}}</a>{{/if}}
+      {{#if _id}}<div class="delete-button"><i class="icon-trash"></i></div>{{/if}}
     </div>
 
     <div class="top-spacer"></div>

admin/templates/contacts.html

@@ -10,7 +10,7 @@
       <div class="actions">
         <div><a href="mailto:{{email}}">{{email}}</a></div>
       </div>
-      <a href="#/contact/{{id}}">{{name}}</a>
+      <a class="title" href="#/contact/{{id}}"><i class="icon icon-contact"></i>{{name}}</a>
       <div class="note">{{{note}}}</div>
     </li>
     {{/each}}

admin/templates/dashboard.html

@@ -5,9 +5,10 @@
     {{#each essays}}
     <li>
       <div class="actions">
-        {{#unless published}}<div><strong>In Draft</strong></div>{{/unless}}
+        {{#unless collections}}<i class="icon-collection" title="Not in a collection"></i>{{/unless}}
+        {{#unless published}}<i class="icon-pencil" title="In draft mode"></i>{{/unless}}
       </div>
-      <a href="#/{{type}}/{{id}}">{{title}}</a>
+      <a class="title" href="#/{{type}}/{{id}}"><i class="icon icon-{{type}}"></i>{{title}}</a>
       <div class="meta">
         <div><a href="http://{{site}}/{{type}}/{{slug}}" target="_blank"><strong>{{type}}</strong> on {{site}}</a></div>
       </div>
@@ -19,9 +20,10 @@
     {{#each scenes}}
     <li>
       <div class="actions">
-        {{#unless published}}<div><strong>In Draft</strong></div>{{/unless}}
+        {{#unless collections}}<i class="icon-collection" title="Not in a collection"></i>{{/unless}}
+        {{#unless published}}<i class="icon-pencil" title="In draft mode"></i>{{/unless}}
       </div>
-      <a href="#/{{type}}/{{id}}">{{title}}</a>
+      <a class="title" href="#/{{type}}/{{id}}"><i class="icon icon-{{type}}"></i>{{title}}</a>
       <div class="meta">
         <div><a href="http://{{site}}/{{type}}/{{slug}}" target="_blank"><strong>{{type}}</strong> on {{site}}</a></div>
       </div>

admin/templates/essay-form.html

@@ -48,7 +48,7 @@
     <div class="buttons">
       <button class="save-button" tabindex="0">Save</button>
       <button class="cancel-button plain" tabindex="0">Cancel</button>
-      {{#if _id}}<a class="delete-button" href="#" tabindex="0">delete {{type}}</a>{{/if}}
+      {{#if _id}}<div class="delete-button"><i class="icon-trash"></i></div>{{/if}}
     </div>
 
     <div class="top-spacer"></div>

admin/templates/essays.html

@@ -8,10 +8,10 @@
     {{#each essays}}
     <li>
       <div class="actions">
-        {{#unless published}}<div><strong>In Draft</strong></div>{{/unless}}
-        {{#unless collections}}<div>No Collections</div>{{/unless}}
+        {{#unless collections}}<i class="icon-collection" title="Not in a collection"></i>{{/unless}}
+        {{#unless published}}<i class="icon-pencil" title="In draft mode"></i>{{/unless}}
       </div>
-      <a href="#/essay/{{id}}">{{title}}</a>
+      <a class="title" href="#/essay/{{id}}"><i class="icon icon-essay"></i>{{title}}</a>
       <div class="meta">
         <div><a href="http://{{site}}/essay/{{slug}}" target="_blank">view on {{site}}</a></div>
       </div>

admin/templates/filter-box.html

@@ -1,7 +1,8 @@
 <input class="filter-input" type="text" value="" placeholder="Filter..." tabindex="1">
+<i class="icon icon-search"></i>
 <span class="clear-filter">x</span>
 <div class="selected-site">
-  <i class="icon"></i>
+  <i class="icon icon-down-open"></i>
   <span class="site-name">All sites</span>
 </div>
 <ul class="site-selector">

admin/templates/main-nav.html

@@ -5,17 +5,19 @@
   <input type="submit" name="submit" value="Sign In" class="button">
 </form>
 <ul>
+  <li class="dashboards"><a class="active" href="#/"><i class="icon icon-gauge"></i>Dashboard</a></li>
   <li class="essays"><a href="#/essays"><i class="icon icon-essay"></i>Essays</a></li>
-  <!-- <li class="videos"><a href="#/videos"><i class="icon icon-video"></i>Videos</a></li> -->
+  <li class="videos"><a href="#/videos"><i class="icon icon-video"></i>Videos</a></li>
   <li class="scenes"><a href="#/scenes"><i class="icon icon-scene"></i>Scenes</a></li>
   <!-- <li class="profiles"><a href="#/profiles"><i class="icon icon-profile"></i>Profiles</a></li> -->
   <li class="collections"><a href="#/collections"><i class="icon icon-collection"></i>Collections</a></li>
   <li class="seperator"></li>
-  <li class="sites"><a href="#/sites">Sites</a></li>
-  <li class="blocks"><a href="#/blocks">Blocks</a></li>
-  <li class="authors"><a href="#/authors">Authors</a></li>
-  <li class="sponsors"><a href="#/sponsors">Sponsors</a></li>
-  <li class="contacts"><a href="#/contacts">Contacts</a></li>
+  <li class="sites"><a href="#/sites"><i class="icon icon-site"></i>Sites</a></li>
+  <li class="blocks"><a href="#/blocks"><i class="icon icon-block"></i>Blocks</a></li>
+  <li class="authors"><a href="#/authors"><i class="icon icon-author"></i>Authors</a></li>
+  <li class="sponsors"><a href="#/sponsors"><i class="icon icon-sponsor"></i>Sponsors</a></li>
+  <li class="contacts"><a href="#/contacts"><i class="icon icon-contact"></i>Contacts</a></li>
   <li class="seperator"></li>
-  <li class="logout"><a class="logout-button">Sign Out</a></li>
-</ul>
+  <li class="logout"><a class="logout-button"><i class="icon icon-off"></i>Sign Out</a></li>
+</ul>
+<div class="user-greeting"></div>

admin/templates/scene-form.html

@@ -44,7 +44,7 @@
     <div class="buttons">
       <button class="save-button" tabindex="0">Save</button>
       <button class="cancel-button plain" tabindex="0">Cancel</button>
-      {{#if _id}}<a class="delete-button" href="#" tabindex="0">delete {{type}}</a>{{/if}}
+      {{#if _id}}<div class="delete-button"><i class="icon-trash"></i></div>{{/if}}
     </div>
 
     <div class="top-spacer"></div>

admin/templates/scenes.html

@@ -8,9 +8,10 @@
     {{#each scenes}}
     <li>
       <div class="actions">
-        {{#unless published}}<div><strong>In Draft</strong></div>{{/unless}}
+        {{#unless collections}}<i class="icon-collection" title="Not in a collection"></i>{{/unless}}
+        {{#unless published}}<i class="icon-pencil" title="In draft mode"></i>{{/unless}}
       </div>
-      <a href="#/scene/{{id}}">{{title}}</a>
+      <a class="title" href="#/scene/{{id}}"><i class="icon icon-scene"></i>{{title}}</a>
       <div class="meta">
         <div><a href="http://{{site}}/scene/{{slug}}" target="_blank">view on {{site}}</a></div>
       </div>

admin/templates/site-form.html

@@ -80,7 +80,7 @@
     <div class="buttons">
       <button class="save-button" tabindex="0">Save</button>
       <button class="cancel-button plain" tabindex="0">Cancel</button>
-      {{#if _id}}<a class="delete-button" href="#" tabindex="0">delete {{type}}</a>{{/if}}
+      {{#if _id}}<div class="delete-button"><i class="icon-trash"></i></div>{{/if}}
     </div>
 
     <div class="top-spacer"></div>

admin/templates/sponsor-form.html

@@ -51,7 +51,7 @@
     <div class="buttons">
       <button class="save-button" tabindex="0">Save</button>
       <button class="cancel-button plain" tabindex="0">Cancel</button>
-      {{#if _id}}<a class="delete-button" href="#" tabindex="0">delete {{type}}</a>{{/if}}
+      {{#if _id}}<div class="delete-button"><i class="icon-trash"></i></div>{{/if}}
     </div>
 
     <div class="top-spacer"></div>

admin/templates/sponsors.html

@@ -10,7 +10,7 @@
       <div class="actions">
         <div>{{site}}</div>
       </div>
-      <a href="#/sponsor/{{id}}">{{name}}</a>
+      <a class="title" href="#/sponsor/{{id}}"><i class="icon icon-sponsor"></i>{{name}}</a>
       <div class="meta">
         <div><a href="{{link}}">{{link}}</a></div>
         <div><strong>{{format}}</strong> format</div>

site/static/css/theme.styl

@@ -58,6 +58,7 @@
     cursor: pointer
     outline: 5px solid rgba(255,255,255,0.9)
     white-space: nowrap
+    overflow: hidden
 
     &:hover, &:active
       background: darken($primaryColor, 10%)
@@ -68,10 +69,16 @@
       margin-bottom: 5px
       background: #fff
     i
-      arrow('top', 12px, #fff, 12px, 7px)
-      margin: 0 auto
-      display: block
-      top: 2px
+      // arrow('top', 12px, #fff, 12px, 7px)
+      // margin: 0 auto
+      // display: block
+      // top: 2px
+      position: relative
+      top: -8px
+      left: 50%
+      margin-left: -0.5em
+      color: white
+      line-height: 10px
 
   > ul
     display: none
@@ -111,6 +118,9 @@
         &.active
           background: darken($primaryColor, 10%)
 
+        i
+          margin-right: 0.5em
+
       &.heading
         padding: 7px 20px
         font-size: 1.1em
@@ -124,10 +134,12 @@
           font-weight: $normalFont
           line-height: 1em
 
-        a
+        &.as-link
           padding: 0
-          font-size: inherit
-          font-weight: inherit
+
+          a
+            font-size: inherit
+            font-weight: inherit
 
       &.search-box
         padding: 10px
@@ -180,7 +192,7 @@
   &.second
     right: 70px
 
-  $iconWidth = 144px
+  $iconWidth = 146px
 
   .icon
     width: $iconWidth
@@ -193,7 +205,7 @@
       font-weight: $normalFont
       line-height: 1em
       text-align: center
-      margin: 3px 6px
+      margin: 3px 0
       border: 0
       padding: 0
       overflow: hidden

site/templates/base.html

@@ -52,7 +52,7 @@
 
     <nav class="main-nav">
       <div class="icon" data-track-click="Main Nav Icon">
-        <span></span><span></span><span></span><i></i>
+        <span></span><span></span><span></span><i class="icon-down-open"></i>
       </div>
       <ul>
         <li class="heading">Main Menu</li>

site/templates/doc.html

@@ -55,7 +55,7 @@
 
 <nav class="toc-nav {{doc.type}}">
   <div class="icon" data-track-click="Document Nav Icon">
-    <div><span></span></div><i></i>
+    <div><span></span></div><i class="icon-down-open"></i>
   </div>
   <ul>
     <li class="heading">{{doc.type_tc}}'s Table of Content</li>
@@ -65,12 +65,11 @@
 
 <nav class="collection-nav" data-id="{{collection._id}}" data-slug="{{collection.slug}}">
   <div class="icon" data-track-click="Collection Nav Icon">
-    <div>Collection</div><i></i>
+    <div>Collection</div><i class="icon-down-open"></i>
   </div>
   <ul>
-    <li class="heading">
-      <small>{{doc.type_tc}}s in Collection:</small><br>
-      <a href="{{baseURL}}/collection/{{collection.slug}}">{{collection.name}}</a>
+    <li class="heading as-link">
+      <a href="{{baseURL}}/collection/{{collection.slug}}"><i class=" icon-collection"></i>{{collection.name}}</a>
     </li>
   </ul>
 </nav>