From feef1765bf054eb0f526c8a4851290a7517500e0 Mon Sep 17 00:00:00 2001 From: Jonatan Nilsson Date: Thu, 3 Oct 2019 12:55:13 +0000 Subject: [PATCH] Added "publish" button, Minor ui fixes and fix ie11 bug. --- app/admin/articles.scss | 4 ++++ app/admin/editarticle.js | 18 ++++++++++++------ app/app.scss | 20 ++++++++++++++------ app/footer/footer.js | 1 + app/footer/footer.scss | 16 ++++++++++++++-- app/frontpage/frontpage.js | 22 ++++++++++++---------- app/frontpage/frontpage.scss | 30 ++++++++++++++++++++---------- app/index.js | 2 ++ app/polyfill.js | 8 ++++++++ 9 files changed, 87 insertions(+), 34 deletions(-) create mode 100644 app/polyfill.js diff --git a/app/admin/articles.scss b/app/admin/articles.scss index 832e940..cb739da 100644 --- a/app/admin/articles.scss +++ b/app/admin/articles.scss @@ -52,6 +52,10 @@ article.editarticle { height: 300px; position: relative; } + + button.submit { + margin-left: 20px; + } } table { diff --git a/app/admin/editarticle.js b/app/admin/editarticle.js index e2073be..4e05415 100644 --- a/app/admin/editarticle.js +++ b/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', [ diff --git a/app/app.scss b/app/app.scss index 076e2f2..99ada67 100644 --- a/app/app.scss +++ b/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'; diff --git a/app/footer/footer.js b/app/footer/footer.js index fa42c04..a661a71 100644 --- a/app/footer/footer.js +++ b/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'), diff --git a/app/footer/footer.scss b/app/footer/footer.scss index 6cc4c2a..4fbc18f 100644 --- a/app/footer/footer.scss +++ b/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; diff --git a/app/frontpage/frontpage.js b/app/frontpage/frontpage.js index fdae053..4ebd16d 100644 --- a/app/frontpage/frontpage.js +++ b/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'), ]), diff --git a/app/frontpage/frontpage.scss b/app/frontpage/frontpage.scss index 71f1a4b..a185b11 100644 --- a/app/frontpage/frontpage.scss +++ b/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; + } } } } diff --git a/app/index.js b/app/index.js index 07a4d4f..13909a4 100644 --- a/app/index.js +++ b/app/index.js @@ -1,3 +1,5 @@ +require('./polyfill') + const m = require('mithril') window.m = m diff --git a/app/polyfill.js b/app/polyfill.js new file mode 100644 index 0000000..f9db4ec --- /dev/null +++ b/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; + }; +}