More work on file upload, also work on essay front design

README.md

@@ -35,6 +35,11 @@ In CSS `.styl` file we are using the _Lato_ font:
       word-spacing: 0.2em
       line-height: 1.5em
 
+Main Photos
+-----------
+
+Dimension must be **900 x 180** pixels saved as JPG at _70%_ or a PNG with trying to keep file size below 50K.
+
 
 Donation URL
 ------------

admin/controllers/ui/file-upload.coffee

@@ -62,11 +62,18 @@ class FileUploadUI extends Spine.Controller
   itemClick: (e) ->
     # Selecting the main photo
     e.preventDefault()
-    @selectItem(e.currentTarget)
+    e.stopPropagation()
+    item = e.currentTarget
+    if $(item).hasClass('selected')
+      @resetSelection('Nothing is selected')
+    else
+      @selectItem(item)
 
   itemDblClick: (e) ->
     # Removing an attachment
     e.preventDefault()
+    e.stopPropagation()
+    @resetSelection()
     @removeItem(e.currentTarget)
 
   selectItem: (item) =>
@@ -77,9 +84,9 @@ class FileUploadUI extends Spine.Controller
       @fileName.html "Selected: #{name}"
       @fileSelectedInput.val(name)
 
-  resetSelection: ->
+  resetSelection: (msg = '') ->
     @filesList.children().removeClass('selected')
-    @fileName.html ''
+    @fileName.html msg
     @fileSelectedInput.val('')
 
   removeItem: (item) =>
@@ -87,6 +94,9 @@ class FileUploadUI extends Spine.Controller
       name = $(item).attr('data-filename')
       if confirm "Remove this attachment?\n#{name}"
         delete @attachments[name]
+        $(item).remove()
+        @fileSelectedInput.val('') if @fileSelectedInput.val() is name
+        @fileName.html "#{name} was removed"
 
   setupZoneEvents: ->
     @dropzone.on 'dragenter dragover', (e) ->

admin/lib/utils.coffee

@@ -1,6 +1,5 @@
 # Bunch of utility functions
-
-settings    = require('settings/root')
+settings   = require('settings/root')
 
 exports.cleanCode = (code) ->
   code.toLowerCase().replace(/[\ \.\'\"\-]/g, '_')
@@ -9,6 +8,11 @@ exports.cleanSlug = (slug) ->
   slug.toLowerCase().replace(/[\ \.\'\"]/g, '-')
 
 exports.cleanContent = (content) ->
-  dev_host = settings.app.dev_host
-  prod_host = settings.app.prod_host
-  content.replace(/\http(s)?:\/\/admin.kleks.local/g, '')
+  protocol = "http(s)?:\/\/"
+  if settings.app.dev_host
+    dev_host = new RegExp(protocol+settings.app.dev_host, "g")
+    content = content.replace(dev_host, '')
+  if settings.app.prod_host
+    prod_host = new RegExp(protocol+settings.app.prod_host, "g")
+    content = content.replace(prod_host, '')
+  return content

admin/static/css/common.styl

@@ -19,7 +19,7 @@ body
   line-height: 1.5em
 
 h1, h2, h3, h4, h5, h6
-  color: darken($textColor, 4%)
+  color: $textDarkColor
   font-weight: $normalFont
   line-height: 1.2em
   margin: 0

admin/static/css/mixin.styl

@@ -38,7 +38,8 @@ $primaryColor   = $defaultColor
 $lightGrey      = #b0b0b0
 $faintGrey      = #f0f0f0
 $linkColor      = darken($primaryColor, 20%)
-$textColor      = #969696
+$textColor      = #808080
+$textDarkColor  = darken($textColor, 4%)
 
 $normalFont     = 300
 $boldFont       = 400

admin/static/css/theme.styl

@@ -231,7 +231,7 @@ span.label
         font-weight: $heavyFont
         line-height: 1em
 
-      .count
+      .count, .status
         float: right
         color: $lightGrey
         font-weight: 300
@@ -423,15 +423,14 @@ ul.ui-multi-select
     li
       position: relative
       float: left
-      width: 46%
-      margin-right: 4%
+      max-height: 120px
+      margin: 0 4% 10px 0
       overflow: hidden
       -webkit-user-select: none
       cursor: pointer
 
       &.selected
-        border-color: $primaryColor
-        outline: 4px solid rgba($primaryColor, 0.5)
+        outline: 4px solid $primaryColor
 
       > img
         width: 100%

admin/templates/dashboard.html

@@ -3,6 +3,9 @@
   <ul class="drafts list">
     {{#each drafts}}
     <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>

admin/templates/essay-form.html

@@ -1,7 +1,10 @@
 <form class="essay">
 
   <div class="content">
-    <h1>Essay</h1>
+    <h1>
+      Essay
+      <span class="status">{{#if published}}Published{{else}}In Draft{{/if}}</span>
+    </h1>
     <h3 class="item-title">{{title}}</h3>
 
     <div class="error-message"></div>

site/lib/app.coffee

@@ -9,5 +9,35 @@ exports.initialize = (config) ->
   $mainNavIcon = $mainNav.find('> .icon')
   $mainNavList = $mainNav.find('> ul')
   
+  $tocNav = $('.toc-nav')
+  $tocNavIcon = $tocNav.find('> .icon')
+  $tocNavList = $tocNav.find('> ul')
+  
+  $article = $('.container > article')
+
+  hidePopups = (exceptMe) ->
+    $mainNavList.hide() unless $mainNavList is exceptMe
+    $tocNavList.hide() unless $tocNavList is exceptMe
+
+  $('html').on 'click', (e) ->
+    hidePopups()
+  
+  # Setup the Main menu
   $mainNavIcon.on 'click', (e) ->
+    e.stopPropagation()
+    hidePopups($mainNavList)
     $mainNavList.toggle()
+
+  # Setup the TOC menu
+  if $tocNav and $article
+    $article.find('h3').each ->
+      heading = $(@)
+      text = heading.text()
+      headingId = 'TOC-' + text.replace(/[\ \.\?\#\'\"]/g, '-')
+      heading.attr('id', headingId)
+      $tocNavList.append "<li><a href=\"##{headingId}\">#{text}</a></li>"
+
+    $tocNavIcon.on 'click', (e) ->
+      e.stopPropagation()
+      hidePopups($tocNavList)
+      $tocNavList.toggle()

site/static/css/responsive.styl

@@ -26,11 +26,23 @@
   .site-name
     font-size: 2.8em
 
-  .main-nav
-    margin: 0
+  .site-tagline
+    margin-bottom: 2em
+
+  .main-nav,
+  .toc-nav
+    margin: 4px 4px 0 0
+
+  article
+
+    > .photo
+      left: -14px
 
 // Odd one
 @media (max-width: 600px)
+
+  .toc-nav
+    display: none
   
   article
     
@@ -58,9 +70,18 @@
   .site-name
     font-size: 3.5em
 
-  .main-nav
+  .site-tagline
+    margin-bottom: 2.5em
+
+  .main-nav,
+  .toc-nav
     margin: 12px 12px 0 0
 
+  article
+
+    > .photo
+      left: -20px
+
 
 // Portrait tablet to landscape and desktop
 // @media (min-width: 768px) and (max-width: 979px)

site/static/css/setup-theme.styl

@@ -5,9 +5,6 @@ setupTheme($primaryColor = $blueColor, $secondaryColor = $lightGrey, $linkColor
   
   if !$linkColor
     $linkColor = darken($primaryColor, 20%)
-  
-  h1, h2, h3, h4, h5, h6
-    color: darken($textColor, 4%)
 
   a
     color: $linkColor
@@ -26,8 +23,6 @@ setupTheme($primaryColor = $blueColor, $secondaryColor = $lightGrey, $linkColor
     &.plain
       color: $primaryColor
 
-
-
   .container
     border-color: $primaryColor
 

site/static/css/theme.styl

@@ -8,7 +8,7 @@
   border-left: 20px solid $primaryColor
 
 .site-name
-  margin: 0 0 0.8em -0.05em
+  margin: 0 0 5px -0.05em
   font-size: 5.25em
   line-height: 0.8em
   font-weight: $normalFont
@@ -17,22 +17,31 @@
   word-spacing: 0em
   white-space: nowrap
   a
-    color: $lightGrey
+    color: #C4C4C4
   b, strong
     color: $primaryColor
 
+.site-tagline
+  width: 70%
+  color: #C4C4C4
+  font-size: 1.1em
+  line-height: 1em
+  margin: 0 0 3em 0
+
 .site-promo
   color: $primaryColor
   font-size: 1.25em
   font-weight: $boldFont
 
-.main-nav
-  position: absolute
+.main-nav,
+.toc-nav
+  position: fixed
   top: 0
   right: 0
   padding: 0
-  margin: 46px 40px 0 0
+  margin: 20px 20px 0 0
   -webkit-user-select: none
+  z-index: 20
 
   $iconSize = 60px
 
@@ -45,6 +54,7 @@
     padding: 10px
     background: $primaryColor
     cursor: pointer
+    outline: 4px solid #fff
 
     &:hover
       background: darken($primaryColor, 10%)
@@ -62,20 +72,39 @@
   > ul
     display: none
     position: absolute
-    top: $iconSize
+    top: $iconSize+10px
     right: 0
-    min-width: 220px
+    min-width: 260px
+    max-width: 400px
     list-style-type: none
     padding: 0
     margin: 0
     background: $primaryColor
+    box-shadow(-4px 4px 0 rgba(0, 0, 0, 0.1))
+
+    &:before
+      content: ''
+      position: absolute
+      top: -10px
+      right: 0
+      width: $iconSize
+      height: 10px
+      background: $primaryColor
 
     > li
       padding: 0
 
+      &.heading
+        padding: 10px 20px
+        font-size: 1.1em
+        font-weight: $boldFont
+        color: #fff
+        border-bottom: 1px solid rgba(255,255,255,0.5)
+        white-space: nowrap
+
       a
         display: block
-        padding: 7px 12px
+        padding: 10px 20px
         font-size: 1.2em
         font-weight: $normalFont
         color: #fff
@@ -96,11 +125,56 @@
           color: $textColor
           background: #fff
 
+.toc-nav
+  // see .main-nav above
+  right: 70px
+
+  .icon
+
+    div
+      width: 48px
+      height: 24px
+      color: #fff
+      font-size: 22px
+      font-weight: $heavyFont
+      line-height: 1em
+      text-align: center
+      margin-left: -4px
+      overflow: hidden
+
+  > ul
+
+    > li
+
+      a
+        font-size: 1em
+        line-height: 1em
+
 
 article
   
-  a
-    font-weight: 400
+  &.view
+    a
+      font-weight: $boldFont
+
+  > .title
+    color: $textDarkColor
+    margin-bottom: 0.5em;
+
+    a
+      color: $textDarkColor
+      font-weight: $normalFont
+
+  > .photo
+    position: relative
+    left: -40px
+    width: 105%
+    max-height: 180px
+    margin: 0 0 1em 0
+    overflow: hidden
+
+    img
+      width: 100%
 
   > .intro
     margin-bottom: 2em
@@ -111,9 +185,9 @@ article
 
   .sponsor
     float: right
-    width: $normalFontpx
-    max-width: $normalFontpx
-    margin: 0 0 1em 1em
+    width: 300px
+    max-width: 300px
+    margin: 0.4em 0 1em 1em
     text-align: center
     background: lighten($faintGrey, 3%)
     content-box()

site/templates/base.html

@@ -29,6 +29,7 @@
 
   <div class="container">
     <h1 class="site-name"><a href="{{baseURL}}/">{{{site.name_html}}}</a></h1>
+    <h2 class="site-tagline">{{{site.tagline}}}</h2>
 
     <section class="site-promo">
       {{{blocks.site_promo.content}}}

site/templates/collection.html

@@ -1,5 +1,13 @@
+{{#if collection.css}}<style>{{{collection.css}}}</style>{{/if}}
+
 <article class="collection">
-  <h2 class="title">{{collection.name}}</h2>
+  <h2 class="title"><a href="{{baseURL}}/collection/{{collection.slug}}">{{collection.title}}</a></h2>
+
+  {{#if collection.photo}}
+  <section class="photo">
+    <img src="/file/{{collection._id}}/{{collection.photo}}">
+  </section>
+  {{/if}}
   
   {{#if sponsor}}
   <section class="sponsor collection-sponsor">

site/templates/essay.html

@@ -1,7 +1,15 @@
-<article class="essay">
-  <h2 class="title">{{essay.title}}</h2>
+{{#if essay.css}}<style>{{{essay.css}}}</style>{{/if}}
 
-  <section class="intro">
+<article class="view essay">
+  <h2 class="title"><a href="{{baseURL}}/essay/{{essay.slug}}">{{essay.title}}</a></h2>
+
+  {{#if essay.photo}}
+  <section class="photo">
+    <img src="/file/{{essay._id}}/{{essay.photo}}">
+  </section>
+  {{/if}}
+
+  <section class="intro" id="TOC-Introduction">
     {{{essay.intro_html}}}
   </section>
 
@@ -68,4 +76,12 @@
       </ul>
     </div>
   </section>
-</article>
+</article>
+
+<nav class="toc-nav">
+  <div class="icon"><div>TOC</div><span></span><i></i></div>
+  <ul>
+    <li class="heading">Essay's Table of Content</li>
+    <li><a href="#TOC-Introduction">Introduction</a></li>
+  </ul>
+</nav>