diff --git a/app/app.scss b/app/app.scss index 0863cfa..076e2f2 100644 --- a/app/app.scss +++ b/app/app.scss @@ -168,6 +168,10 @@ form { } } +a, button { + outline: none; +} + @import 'froala'; @import 'menu/menu'; diff --git a/app/article/article.js b/app/article/article.js index 0779d9b..b92d18c 100644 --- a/app/article/article.js +++ b/app/article/article.js @@ -8,6 +8,7 @@ const Article = { this.error = '' this.lastarticle = m.route.param('article') || '1' this.loadingnews = false + this.showcomments = false if (window.__nfpdata) { this.path = m.route.param('id') @@ -20,6 +21,7 @@ const Article = { fetchArticle: function(vnode) { this.path = m.route.param('id') + this.showcomments = false this.article = { id: 0, name: '', @@ -81,6 +83,26 @@ const Article = { m(m.route.Link, { href: '/admin/articles/' + this.article.id }, 'Edit article'), ]) : null, + this.showcomments + ? m('div.commentcontainer', [ + m('div#disqus_thread', { oncreate: function() { + /*eslint-disable */ + window.disqus_config = function () { + this.page.url = '/article/' + vnode.state.article.path + this.page.identifier = 'article-' + vnode.state.article.id + }; + (function() { // DON'T EDIT BELOW THIS LINE + var d = document, s = d.createElement('script'); + s.src = 'https://nfp-moe.disqus.com/embed.js'; + s.setAttribute('data-timestamp', +new Date()); + (d.head || d.body).appendChild(s); + })() + /*eslint-enable */ + }}, m('div.loading-spinner')), + ]) + : m('button.opencomments', { + onclick: function() { vnode.state.showcomments = true }, + }, 'Open comment discussion'), ]) ) }, diff --git a/app/article/article.scss b/app/article/article.scss index c7330ec..d260c80 100644 --- a/app/article/article.scss +++ b/app/article/article.scss @@ -43,6 +43,28 @@ article.article { padding: 0 5px; } } + + .opencomments { + border: none; + align-self: center; + width: calc(100% - 40px); + max-width: 300px; + background: transparent; + font-size: 1.2em; + color: $secondary-dark-bg; + cursor: pointer; + height: 50px; + margin: 0 0 30px; + } + + .commentcontainer { + align-self: center; + width: calc(100% - 40px); + max-width: 800px; + margin-bottom: 30px; + min-height: 50px; + position: relative; + } } .darkmodeon {