Added "publish" button, Minor ui fixes and fix ie11 bug.

app/admin/articles.scss

@@ -52,6 +52,10 @@ article.editarticle {
       height: 300px;
       position: relative;
     }
+
+    button.submit {
+      margin-left: 20px;
+    }
   }
 
   table {

app/admin/editarticle.js

@@ -78,7 +78,7 @@ const EditArticle = {
       banner: null,
       files: [],
       is_featured: false,
-      published_at: new Date().toISOString(),
+      published_at: new Date(new Date().setFullYear(3000)).toISOString(),
     }
     this.editedPath = false
     this.loadedFroala = Froala.loadedFroala
@@ -102,7 +102,7 @@ const EditArticle = {
         m.redraw()
       })
     } else {
-      EditArticle.parsePublishedAt(vnode, new Date())
+      EditArticle.parsePublishedAt(vnode, null)
       document.title = 'Create Article - Admin NFP Moe'
       if (vnode.state.froala) {
         vnode.state.froala.html.set(this.article.description)
@@ -256,6 +256,7 @@ const EditArticle = {
   },
 
   view: function(vnode) {
+    const showPublish = new Date(this.article.published_at) > new Date()
     const parents = this.getFlatTree()
     const staffers = this.getStaffers()
     return (
@@ -337,10 +338,15 @@ const EditArticle = {
                 oninput: this.updateValue.bind(this, 'is_featured'),
               }),
               m('div.loading-spinner', { hidden: this.loadedFroala }),
-              m('input', {
-                type: 'submit',
-                value: 'Save',
-              }),
+              m('div', [
+                m('input', {
+                  type: 'submit',
+                  value: 'Save',
+                }),
+                showPublish
+                  ? m('button.submit', { onclick: function() { vnode.state.article.published_at = new Date().toISOString() }}, 'Publish')
+                  : null,
+              ]),
             ]),
             this.article.files.length
               ? m('files', [

app/app.scss

@@ -151,20 +151,20 @@ form {
     }
   }
 
-  input[type=submit] {
+  input[type=submit],
+  button.submit {
     align-self: center;
     padding: 0.5em;
     margin: 0.5em 0;
     min-width: 150px;
-    border: none;
     border: 1px solid $secondary-bg;
     background: $secondary-light-bg;
     color: $secondary-light-fg;
+    height: 31px;
+  }
 
-    &:hover {
-      background: $secondary-dark-bg;
-      color: $secondary-dark-fg;
-    }
+  button.submit::-moz-focus-inner { 
+    border: 0;
   }
 }
 
@@ -172,6 +172,14 @@ a, button {
   outline: none;
 }
 
+button::-moz-focus-inner,
+input[type="button"]::-moz-focus-inner,
+input[type="submit"]::-moz-focus-inner,
+input[type="reset"]::-moz-focus-inner {
+  padding: 0 !important;
+  border: 0 none !important;
+ }
+
 @import 'froala';
 
 @import 'menu/menu';

app/footer/footer.js

@@ -9,6 +9,7 @@ const Footer = {
 
   view: function() {
     return [
+      m('div.footer-filler'),
       m('div.sitemap', [
         m('div', 'Sitemap'),
         m(m.route.Link, { class: 'root', href: '/' }, 'Home'),

app/footer/footer.scss

@@ -15,7 +15,7 @@ footer {
     align-items: center;
     font-size: 11px;
     font-weight: bold;
-    padding-right: 20px;
+    padding: 0 20px;
 
     a {
       text-decoration: none;
@@ -46,9 +46,15 @@ footer {
     }
   }
 
+  .footer-filler {
+    width: 119px;
+    flex: 0 0 119px;
+  }
+
   .footer-logo {
     background: center no-repeat transparent;
     background-size: contain;
+    align-self: center;
     width: 119px;
     height: 150px;
     flex: 0 0 119px;
@@ -113,6 +119,12 @@ only screen and (                min-resolution: 2dppx) {
   }
 }
 
+@media screen and (max-width: 900px){
+  footer .footer-filler {
+    display: none;
+  }
+}
+
 @media screen and (max-width: 480px){
   footer {
     flex-direction: column;
@@ -123,7 +135,7 @@ only screen and (                min-resolution: 2dppx) {
     }
 
     .sitemap {
-      padding-right: 0px;
+      padding: 0px;
 
       ul {
         align-self: stretch;

app/frontpage/frontpage.js

@@ -112,16 +112,18 @@ const Frontpage = {
         m('aside.sidebar', [
           m('div.categories', [
             m('h4', 'Categories'),
-            Page.Tree.map(function(page) {
-              return [
-                m(m.route.Link, { class: 'root', href: '/page/' + page.path }, page.name),
-                (page.children.length
-                  ? m('ul', page.children.map(function(subpage) {
-                      return m('li', m(m.route.Link, { class: 'child', href: '/page/' + subpage.path }, subpage.name))
-                    }))
-                  : null),
-              ]
-            }),
+            m('div',
+              Page.Tree.map(function(page) {
+                return [
+                  m(m.route.Link, { class: 'root', href: '/page/' + page.path }, page.name),
+                  (page.children.length
+                    ? m('ul', page.children.map(function(subpage) {
+                        return m('li', m(m.route.Link, { class: 'child', href: '/page/' + subpage.path }, subpage.name))
+                      }))
+                    : null),
+                ]
+              })
+            ),
           ]),
           m('div.asunaside'),
         ]),

app/frontpage/frontpage.scss

@@ -111,18 +111,28 @@ frontpage {
 @media screen and (max-width: 900px){
   frontpage {
     flex-direction: column;
-  }
 
-  frontpage aside.sidebar {
-    width: auto;
-    flex: 0 0 auto;
-    align-self: stretch;
-    margin: 20px 0 30px;
-    border-bottom: 1px solid $border;
-    order: 2;
+    aside.sidebar {
+      width: auto;
+      flex: 0 0 auto;
+      align-self: stretch;
+      margin: 20px 0 30px;
+      border-bottom: 1px solid $border;
+      order: 2;
 
-    a {
-      max-width: unset;
+      .categories {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        h4 {
+          align-self: stretch;
+        }
+      }
+
+      a {
+        max-width: unset;
+      }
     }
   }
 }

app/index.js

@@ -1,3 +1,5 @@
+require('./polyfill')
+
 const m = require('mithril')
 window.m = m
 

app/polyfill.js

@@ -0,0 +1,8 @@
+if (!String.prototype.endsWith) {
+  String.prototype.endsWith = function(search, this_len) {
+    if (this_len === undefined || this_len > this.length) {
+      this_len = this.length;
+    }
+    return this.substring(this_len - search.length, this_len) === search;
+  };
+}