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('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;
-
-    &:hover {
-      background: $secondary-dark-bg;
-      color: $secondary-dark-fg;
+    height: 31px;
   }
+
+  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,6 +112,7 @@ const Frontpage = {
         m('aside.sidebar', [
           m('div.categories', [
             m('h4', 'Categories'),
+            m('div',
               Page.Tree.map(function(page) {
                 return [
                   m(m.route.Link, { class: 'root', href: '/page/' + page.path }, page.name),
@@ -121,7 +122,8 @@ const Frontpage = {
                       }))
                     : null),
                 ]
-            }),
+              })
+            ),
           ]),
           m('div.asunaside'),
         ]),

app/frontpage/frontpage.scss

@@ -111,9 +111,8 @@ frontpage {
 @media screen and (max-width: 900px){
   frontpage {
     flex-direction: column;
-  }
 
-  frontpage aside.sidebar {
+    aside.sidebar {
       width: auto;
       flex: 0 0 auto;
       align-self: stretch;
@@ -121,10 +120,21 @@ frontpage {
       border-bottom: 1px solid $border;
       order: 2;
 
+      .categories {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        h4 {
+          align-self: stretch;
+        }
+      }
+
       a {
         max-width: unset;
       }
     }
+  }
 }
 
 .daymode frontpage .asunaside {

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;
+  };
+}