ecrire 0.29.0 → 0.30.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 972644840a974c24fcf476528edce7ffff3360a5
-  data.tar.gz: 50ab53263e7654829b081cc356a13dde20afcf24
+  metadata.gz: 23d8ccb53d87bb00aba6e240fefbd0da621e5954
+  data.tar.gz: 35d8d3c29186530fb4e303b410fdced9a0a6fdd9
 SHA512:
-  metadata.gz: 342ed664666e9efa6a4787ceb059aee6608b62a0e1ed647d971d0b847db0d98ffced77f9e97915c136cf318eace3e4d3d2841e8b25fb72d29a42ba0def2945aa
-  data.tar.gz: 7954cd679f01d36420e87b1bd2dc8ae18e0f3fa9cc9e8d480be1f77cb88d1952a277f735eb7eda400c8b0360f30642efaa2a8b0e2dd2891095829d65f51f4189
+  metadata.gz: de6a9644b8a2ec963f10a3161cd553f0180e8e53e7b7f69fc3f9c87e75b1e4337b4cbaf88b78510565a6c97e01d48ca3a38b39cfd69f01dc9733e173d7c59a60
+  data.tar.gz: ae21a45067f498ff5376bfb365606687b17669eff3efe1d38c030f365443ae01ae6c08c575eeb7871fcd039a7abcab61716ea65a9f19c528d5fa4c3106956d60

data/Rakefile

@@ -85,6 +85,15 @@ namespace :template do
     Ecrire::Commands::Server.new(Port: 3000).run!
   end
 
+  desc 'Run console for template development'
+  task :console do
+    require 'ecrire/commands/console'
+    Dir.chdir 'lib/ecrire/theme/template'
+    Rails.env = ENV['RAILS_ENV'] = 'development'
+    Ecrire::Commands::Console.new.run!
+  end
+
+  desc 'Routes available in your current template configuration'
   task :routes do
     Dir.chdir 'lib/ecrire/theme/template'
     Rails.env = ENV['RAILS_ENV'] = 'development'

data/lib/ecrire/app/assets/javascripts/admin/posts/{filter.js.coffee → filter.coffee}

@@ -3,7 +3,6 @@ ObserveJS.bind 'Posts.Filter', class
     for el in @element().elements
       switch el.type
         when 'text', 'hidden' then @on 'input', el, @search
-        when 'radio' then @on 'change', el, @search
 
     document.querySelector('input.search').focus()
 
@@ -12,7 +11,6 @@ ObserveJS.bind 'Posts.Filter', class
     for el in @element().elements
       switch el.type
         when 'text', 'hidden' then xhr.data.set(el.name, el.value) if el.value.length > 0
-        when 'radio' then xhr.data.set(el.name, el.value) if el.checked == true && el.value.length > 0
     xhr.send()
 
     document.querySelector('input.search').focus()

data/lib/ecrire/app/assets/javascripts/admin/posts/filters/{tags.js.coffee → tags.coffee}

@@ -17,25 +17,25 @@ ObserveJS.bind 'Posts.Filter.Tags', class
 
     input = @element().querySelector('input[type=hidden]')
     span = @retrieve('span.tag')
-    span.textContent = el.textContent
+    span.textContent = el.dataset.name
     input.value = el.getAttribute('oid')
 
     @retrieve('svg.placeholder').remove()
-    @element().appendChild(span)
     @element().appendChild(@retrieve('svg.clear'))
+    @element().appendChild(span)
     @element().classList.add 'tagged'
 
     document.querySelector("[as='Overlay']").instance.remove()
 
     @changed(input)
 
-  action: =>
-    input = @element().querySelector('input[type=hidden]')
-    if @element().classList.contains('tagged')
+  action: (e) =>
+    if @retrieve('svg.clear').contains(e.target)
       @retrieve('svg.clear').remove()
-      @retrieve('span.tag').remove()
+      @retrieve('span').remove()
       @element().appendChild(@retrieve('svg.placeholder'))
-      @element().classList.remove('tagged')
+      @element().classList.remove 'tagged'
+      input = @element().querySelector('input[type=hidden]')
       input.value = null
       @changed(input)
     else

data/lib/ecrire/app/assets/javascripts/admin/posts/header.coffee

@@ -19,7 +19,10 @@ ObserveJS.bind 'Post.Header', class
     @resize()
 
   resize:  =>
-    height = @maxHeight - window.scrollY
+    if document.querySelector('main').classList.contains('overlayed')
+      return
+
+    height = @maxHeight - document.body.scrollTop
     if height < 0
       height = 0
 

data/lib/ecrire/app/assets/javascripts/admin/posts/list.coffee

@@ -1,6 +1,8 @@
 ObserveJS.bind 'Posts.List', class
   loaded: =>
     @on 'posts:index', document, @refresh
+    @on 'posts:drafts', document, @refresh
+    @on 'posts:published', document, @refresh
 
   refresh: (e) =>
     @element().innerHTML = e.HTML.innerHTML

data/lib/ecrire/app/assets/javascripts/admin/posts/title.coffee

@@ -2,10 +2,14 @@ ObserveJS.bind 'Post.Title', class
   loaded: =>
     @on 'titles:index', @show
     @on 'titles:update', document, @refresh
+    @on 'titles:create', document, @refresh
 
   show: (e) =>
+    e.HTML.dataset.y = document.body.scrollTop
     document.body.appendChild(e.HTML)
+    e.HTML.querySelector('form input[type=text]').focus()
 
   refresh: (e) =>
-    @element().textContent = e.HTML.children[0].textContent
+    if e.HTML?
+      @element().textContent = e.HTML.dataset.name
 

data/lib/ecrire/app/assets/javascripts/admin/posts/titles.coffee

@@ -1,8 +1,16 @@
 ObserveJS.bind 'Post.Titles', class
   loaded: =>
+    @on 'submit', @clear
     @on 'titles:update', document, @refresh
     @on 'titles:create', document, @refresh
 
-  refresh: (e) =>
-    @element().innerHTML = e.HTML.innerHTML
 
+  clear: =>
+    @element().querySelector('div.errors')?.remove()
+
+  refresh: (e) =>
+    if e.HTML?
+      e = new CustomEvent('dialog:close', {bubbles: true})
+      @element().dispatchEvent(e)
+    else if e.ErrorHTML?
+      @element().insertBefore(e.ErrorHTML, @element().querySelector('h2'))

data/lib/ecrire/app/assets/javascripts/admin/profiles/menu.coffee

@@ -0,0 +1,6 @@
+ObserveJS.bind 'Profiles.Menu', class
+  loaded: =>
+    @on 'profiles:show', @show
+
+  show: (e) =>
+    @element().appendChild(e.HTML)

data/lib/ecrire/app/assets/javascripts/shared/{overlay.js.coffee → overlay.coffee}

@@ -2,8 +2,9 @@ ObserveJS.bind 'Overlay', class
   loaded: =>
     @on 'click', @clicked
     @on 'keyup', document, @escaped
+    @on 'dialog:close', @remove
 
-    @y = window.scrollY
+    @y = @element().dataset.y || document.body.scrollTop
     main = document.body.querySelector('main')
     main.classList.add('overlayed')
     main.style.top = "-#{@y}px"

data/lib/ecrire/app/assets/javascripts/shared/{popup.js.coffee → popup.coffee}

@@ -1,7 +1,10 @@
 ObserveJS.bind 'Popup', class
   loaded: =>
+    if btn = @element().querySelector('.close')
+      @on 'click', btn, @remove
     @on 'click', document, @clicked
     @on 'keyup', document, @escaped
+    @on 'dialog:close', @remove
 
   clicked: (e) =>
     el = e.target

data/lib/ecrire/app/assets/stylesheets/admin/base.scss

@@ -14,6 +14,8 @@ html {
 }
 
 body {
+  @include background(linear-gradient(darken($bright-blue, 5%), $bright-blue));
+
   margin: 0;
   padding: 0;
   font-family: $fonts;
@@ -23,7 +25,16 @@ body {
 }
 
 a {
+
+  @include transition(color 0.2s ease-in);
+
   color: $link-color;
+  text-decoration: none;
+
+  &:hover {
+    color: darken($link-color, 25%);
+  }
+
 }
 
 ol.list {
@@ -34,13 +45,17 @@ h1, h2, h3, h4, h5 {
   font-weight: 100;
 }
 
+h1 {
+  font-size: 2.5em;
+}
+
 ul, ol {
   margin: 0;
   padding: 0;
   list-style-type: none;
 
   li {
-    margin: 1em 0;
+    padding: 1em 0;
   }
 }
 
@@ -60,30 +75,66 @@ input {
   outline: none;
 }
 
-button, input[type=submit] {
-  border: 1px solid transparent;
-  background: none;
+button, input[type=submit], .button {
+  @include transition(border-color 0.2s, background-color 0.2s, box-shadow 0.2s, color 0.2s);
+
+  padding: 4px 8px;
+  margin: 0 0.5em;
+
+  border: 1px solid rgba(black, 0.25);
+  border-radius: 2px;
+
+  color: lighten($navy-blue, 100%);
+  background-color: rgba(white, 0.05);
+
   font-family: inherit;
-  font-size: inherit;
+  font-size: 0.8em;
   font-weight: inherit;
+
+  text-decoration: none;
+
   cursor: pointer;
-  color: inherit;
   outline: none;
-}
 
-button, input {
-  border-radius: 2px;
+  box-shadow: inset 0 1px 0 0 transparent;
+
+  &.selected {
+    background-color: rgba(black, 0.3);
+    border-color: rgba(black, 0.3);
+    box-shadow: none;
+  }
+
+  &:hover:not(.selected) {
+    background-color: rgba(white, 0.05);
+    color: white;
+    border-color: rgba(black, 0.3);
+    box-shadow: inset 0 1px 0 0 rgba(white, 0.35);
+  }
+
+  &:active:not(.selected) {
+    box-shadow: inset 0 1px 2px 0 rgba(black, 0.3);
+    background-color: rgba(black, 0.3);
+  }
 }
 
 main {
   @include flex(1 100%);
   @include display(flex);
-  @include flex-direction(column);
+
   position: relative;
-  width: 100%;
   z-index: 1;
+
+  top: 0;
+  left:0;
+  right:0;
+  bottom:0;
 }
 
+main > section {
+  @include flex(0 1 60vw);
+  background: white;
+  margin: 0 auto 0 0;
+}
 
 .hidden {
   display: none;
@@ -100,35 +151,3 @@ main {
   color: #FEFEFE;
 }
 
-.button {
-  @include transition(border-color 0.1s, background-color 0.1s, box-shadow 0.2s, color 0.1s);
-  border: 1px solid rgba(black, 0.25);
-  border-radius: 2px;
-  text-decoration: none;
-  padding: 4px 8px;
-  margin: 0 0.5em;
-  font-size: 0.8em;
-  text-transform: uppercase;
-  font-weight: bold;
-  background-color: rgba(white, 0.05);
-  color: lighten($navy-blue, 100%);
-  box-shadow: inset 0 1px 0 0 transparent, 0 0 2px 0 transparent;
-
-  &.selected {
-    background-color: rgba(black, 0.3);
-    border-color: rgba(black, 0.3);
-    box-shadow: none;
-  }
-
-  &:hover:not(.selected) {
-    background-color: rgba(white, 0.05);
-    color: white;
-    border-color: rgba(black, 0.3);
-    box-shadow: inset 0 1px 0 0 rgba(white, 0.35), 0 0 2px 0 rgba(black, 0.2);
-  }
-
-  &:active:not(.selected) {
-    box-shadow: inset 0 1px 2px 0 rgba(black, 0.3), 0 0 2px 0 transparent;
-    background-color: rgba(black, 0.3);
-  }
-}

data/lib/ecrire/app/assets/stylesheets/admin/navigation.scss

@@ -1,106 +1,185 @@
-nav#Menu.admin section {
+#AdminNavigation {
   @include display(flex);
-  height: 100%;
+  @include flex-direction(column);
+  @include flex(1 0 180px);
+  max-width: 200px;
+  margin-left: auto;
+  color: $light-blue;
+  border-left: 1px solid rgba(0,0,0,0.1);
 }
 
-nav#Menu.admin {
+#AdminNavigation > a.home {
   @include display(flex);
-  @include align-content(flex-start);
   @include align-items(center);
-  @include justify-content(space-between);
-  @include flex-wrap(wrap);
+  @include justify-content(center);
 
-  height: 3em;
-  font-family: $fonts;
-  font-size: 16px;
-  font-weight: bold;
-  padding: 0 2em;
-  z-index: 1000;
-  position: fixed;
-  left: 0;
-  right: 0;
-  top: 0;
+  padding: 8px 12px;
+  margin-top: auto;
+
+  &:hover > svg {
+    fill: lighten($light-blue, 45%);
+  }
+
+  & > svg {
+    @include transition(fill 0.2s ease-in);
+    width: 14px;
+    height: 14px;
+    margin-right: 12px;
 
-  background-color: lighten($gray-blue, 25%);
-  color: darken($gray-blue, 30%);
-  border-bottom: 1px solid darken($gray-blue, 75%);
-
-  .button {
-    @include display(flex);
-    @include flex(0 0 auto);
-    @include align-items(center);
-    @include justify-content(center);
-
-    border-radius: 0;
-    border: none;
-    background: none;
-
-    height: 100%;
-
-    text-decoration: none;
-    padding: 4px 2em;
-    margin: 0;
-    font-size: 0.8em;
-    text-transform: uppercase;
-    font-weight: lighter;
-    color: inherit;
-    text-shadow: none;
-
-    &.selected {
-      color: lighten($navy-blue, 100%);
-    }
-
-    &:hover:not(.selected) {
-      text-decoration: underline;
-      box-shadow: none;
-    }
-
-    &:active:not(.selected) {
-      color: lighten($navy-blue, 100%);
-      text-decoration: underline;
-      box-shadow: none;
-    }
+    fill: $light-blue;
   }
 }
 
-nav#Menu.admin form.logout {
+#AdminNavigation > div.current.user {
+  position: relative;
+  margin-bottom: 1vh;
+}
+
+#AdminNavigation > div.current.user > a.home {
+  text-align: center;
+  display: block;
+  font-size: 0.8em;
+}
+
+#AdminNavigation > div.current.user > a.profile.menu {
   @include display(flex);
-  @include flex(0 0 auto);
   @include align-items(center);
-  @include justify-content(center);
+  @include align-content(center);
+  @include justify-content(space-between);
 
-  margin: 0;
-  height: 100%;
+  border-radius: 2px;
+  margin: 2vh 5% 0 5%;
+  background-color: rgba(darken($bright-blue, 25%), 0.2);
+  padding: 4px 8px;
 
-  input {
-    @include transition(box-shadow 0.1s ease, background-color 0.1s ease);
+  &:hover svg {
+    fill: lighten($bright-blue, 25%);
+  }
+}
 
-    background-color: lighten($red, 15%);
-    color: darken($red, 25%);
+#AdminNavigation > div.current.user > a.profile.menu > span {
+  text-align: center;
+}
+
+#AdminNavigation > div.current.user > a.profile.menu > svg {
+  @include transition(fill 0.1s ease-in);
 
-    cursor: pointer;
-    outline: none;
+  width: 18px;
+  height: 18px;
+  fill: rgba(darken($bright-blue, 25%), 0.7);
+}
 
-    padding: 6px 10px;
-    margin: 0;
+#AdminNavigation h2 {
+  @include display(flex);
+  @include align-items(center);
 
-    border: none;
-    border-radius: 2px;
+  font-size: 1.2em;
+  padding: 8px;
+  margin: 0 1vw;
+  font-weight: bold;
+}
 
-    font-size: 0.9em;
-    font-family: inherit;
+#AdminNavigation h2.selected, #AdminNavigation h2 + div > a.selected {
+    color: white;
     font-weight: bold;
+  }
 
-    box-shadow: 0 1px 1px 0 transparent;
+#AdminNavigation h2 > a {
+  @include flex(1);
+  color: inherit;
+}
+
+#AdminNavigation h2 + div {
+  @include display(flex);
+  @include flex-direction(column);
+
+  margin: 0 1vw 1vh 1vw;
+}
 
-    &:hover {
-      box-shadow: 0 0.5px 0.5px 0 darken($red, 15%);
-    }
+#AdminNavigation h2 + div > a {
+  padding: 8px 20px;
+  color: $light-blue;
+  font-size: 0.8em;
+}
 
-    &:active {
-      box-shadow: 0 1px 1px 0 transparent;
-      background-color: darken($red, 5%);
-    }
+#AdminNavigation a {
+  color: $light-blue;
+  &:hover {
+    color: lighten($light-blue, 45%);
   }
+}
 
+#AdminNavigation form.logout {
+  margin-top: auto;
+  border-top: 1px solid $light-blue;
+  text-align: center;
 }
+
+#AdminNavigation form.logout input[type=submit] {
+  width: 100%;
+}
+
+#AdminNavigation [as='Popup'] {
+  position: absolute;
+  margin: 2vh 5% 0 5%;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: auto;
+
+  background-color: $light-blue;
+}
+
+#AdminNavigation [as='Popup'] > div.current.user {
+  @include display(flex);
+  @include align-items(center);
+  @include align-content(center);
+  @include justify-content(space-between);
+
+  padding: 4px 8px;
+}
+
+#AdminNavigation [as='Popup'] > div.current.user > a {
+  @include display(flex);
+  @include flex(0 auto);
+  padding: 0;
+  cursor: pointer;
+}
+
+#AdminNavigation [as='Popup'] > div.current.user > a > svg {
+  width: 18px;
+  height: 18px;
+  margin-top: 2px;
+  fill: rgba(darken($bright-blue, 25%), 0.7);
+}
+
+#AdminNavigation [as='Popup'] > form.logout {
+  @include display(flex);
+  margin: 8px 0;
+  color: $red;
+}
+
+#AdminNavigation [as='Popup'] > form.logout > button {
+  @include display(flex);
+  @include align-items(center);
+  @include align-content(center);
+
+  width: 100%;
+  padding: 4px 8px;
+  margin: 8px;
+  font-weight: bold;
+  background: $red;
+  color: darken($red, 25%);
+
+  &:hover {
+    color: lighten($red, 50%);
+  }
+}
+
+#AdminNavigation [as='Popup'] > form.logout > button > svg {
+  width: 12px;
+  height: 12px;
+  fill: darken($red, 15%);
+  margin: 1px 8px 0 0;
+}
+