Some tweaks and fixes

Fixed typo in migration. Fixed some accessibility stuff. Added footer.

app/admin/admin.scss

@@ -4,7 +4,7 @@
   display: flex;
   flex-direction: column;
   background: $primary-bg;
-  padding: 0 20px 20px;
+  padding: 0 20px 50px;
 }
 
 .admin-actions {

app/app.scss

@@ -240,6 +240,7 @@ table {
 }
 
 @import 'menu/menu';
+@import 'footer/footer';
 @import 'login/login';
 @import 'admin/admin';
 @import 'widgets/common';

app/article/article.js

@@ -55,7 +55,7 @@ const Article = {
             this.article.media
               ? m('a.cover', {
                   href: this.article.media.url,
-                }, m('img', { src: this.article.media.medium_url }))
+                }, m('img', { src: this.article.media.medium_url, alt: 'Cover image for ' + this.article.name }))
               : null,
             this.article.description ? m.trust(this.article.description) : null,
             (this.article.files && this.article.files.length
@@ -76,3 +76,26 @@ const Article = {
 }
 
 module.exports = Article
+
+/*
+<div id="disqus_thread"></div>
+<script>
+
+/**
+*  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
+*  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
+/*
+var disqus_config = function () {
+this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
+this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
+};
+/
+(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);
+})();
+</script>
+<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
+*/

app/article/article.scss

@@ -1,6 +1,6 @@
 article.article {
   background: white;
-  padding: 0 0 20px;
+  padding: 0 0 40px;
 
   header {
     text-align: center;

app/footer/footer.js

@@ -0,0 +1,41 @@
+const m = require('mithril')
+const { Tree } = require('../api/page')
+const Authentication = require('../authentication')
+
+const Footer = {
+  oninit: function(vnode) {
+    this.year = new Date().getFullYear()
+  },
+
+  view: function() {
+    console.log(Tree)
+    return [
+      m('div.sitemap', [
+        m('div', 'Sitemap'),
+        m(m.route.Link, { class: 'root', href: '/' }, 'Home'),
+        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),
+          ]
+        }),
+        !Authentication.currentUser
+          ? m(m.route.Link, { class: 'root', href: '/login' }, 'Login')
+          : null,
+        m('div.meta', ['©'
+            + this.year
+            + ' NFP Encodes - nfp@nfp.moe - ',
+            m('a', { href: 'https://www.iubenda.com/privacy-policy/31076050', target: '_blank' }, 'Privacy Policy'),
+            ' (Fuck EU)',
+        ])
+      ]),
+      m('div.footer-logo'),
+    ]
+  },
+}
+
+module.exports = Footer

app/footer/footer.scss

@@ -0,0 +1,60 @@
+
+footer {
+  margin-top: 0px;
+  border-top: 1px solid $border;
+  display: flex;
+  padding: 20px;
+  background: $border;
+
+  .sitemap {
+    display: flex;
+    flex: 2 1 auto;
+    flex-direction: column;
+    text-align: center;
+    align-items: center;
+    font-size: 11px;
+    font-weight: bold;
+
+    a {
+      text-decoration: none;
+      color: #8f3c00;
+    }
+
+    a.root {
+      display: block;
+      margin: 2px;
+      padding: 2px 0 0;
+    }
+
+    ul {
+      margin: 2px 0 0;
+      display: flex;
+      padding: 0;
+
+      li {
+        padding: 2px 5px;
+        list-style-type: disc;
+        list-style-position: inside;
+      }
+    }
+  }
+
+  .footer-logo {
+    background: url('./img/tsun.png') center no-repeat transparent;
+    background-size: contain;
+    width: 119px;
+    height: 150px;
+  }
+
+  .meta {
+    flex-grow: 2;
+    display: flex;
+    flex-wrap: wrap;
+    padding-top: 5px;
+    align-items: flex-end;
+    text-align: center;
+    justify-content: center;
+
+    a { margin: 0 3px; }
+  }
+}

app/frontpage/frontpage.js

@@ -52,11 +52,25 @@ module.exports = {
   },
 
   view: function(vnode) {
+    var bannerPath = ''
+    if (this.featured && this.featured.banner) {
+      var deviceWidth = window.innerWidth
+      var pixelRatio = window.devicePixelRatio || 1
+      if (deviceWidth < 400 && pixelRatio <= 1) {
+        bannerPath = this.featured.banner.small_url
+      } else if ((deviceWidth < 800 && pixelRatio <= 1)
+                || (deviceWidth < 600 && pixelRatio > 1)) {
+        bannerPath = this.featured.banner.medium_url
+      } else {
+        bannerPath = this.featured.banner.url
+      }
+    }
+
     return [
       (this.featured && this.featured.banner
         ? m('a.frontpage-banner', {
             href: '/article/' + this.featured.path,
-            style: { 'background-image': 'url("' + this.featured.banner.url + '")' },
+            style: { 'background-image': 'url("' + bannerPath + '")' },
           },
           this.featured.name
         )

app/frontpage/frontpage.scss

@@ -23,7 +23,7 @@ frontpage {
   flex-direction: column;
   align-self: center;
   margin: 0 20px;
-  padding: 0 20px;
+  padding: 0 20px 40px;
   width: calc(100% - 40px);
   max-width: 1000px;
   flex: 2 0 0;

app/index.js

@@ -3,6 +3,7 @@ const m = require('mithril')
 m.route.prefix = ''
 
 const Menu = require('./menu/menu')
+const Footer = require('./footer/footer')
 const Frontpage = require('./frontpage/frontpage')
 const Login = require('./login/login')
 const Logout = require('./login/logout')
@@ -17,6 +18,7 @@ const EditStaff = require('./admin/editstaff')
 
 const menuRoot = document.getElementById('nav')
 const mainRoot = document.getElementById('main')
+const footerRoot = document.getElementById('footer')
 
 m.route(mainRoot, '/', {
   '/': Frontpage,
@@ -32,3 +34,4 @@ m.route(mainRoot, '/', {
   '/admin/staff/:id': EditStaff,
 })
 m.mount(menuRoot, Menu)
+m.mount(footerRoot, Footer)

app/login/login.js

@@ -106,6 +106,7 @@ const Login = {
   view: function(vnode) {
     return [
       m('div.login-wrapper', [
+        m('div.login-icon'),
         m('article.login', [
           m('header', [
             m('h1', 'NFP.moe login'),

app/login/login.scss

@@ -6,6 +6,15 @@
   flex-direction: column;
   justify-content: center;
   background: $border;
+  padding: 40px 0;
+
+  .login-icon {
+    background: url('./img/login.png') center no-repeat transparent;
+    background-size: contain;
+    width: 106px;
+    height: 130px;
+    align-self: center;
+  }
 }
 
 article.login {

app/menu/menu.js

@@ -54,9 +54,7 @@ const Menu = {
               ])
             : null
           ),
-        ] : [
+        ] : null),
-          m(m.route.Link, { href: '/login' }, 'Login'),
-        ]),
       ]),
       m('nav', [
         m(m.route.Link, {

app/pages/page.js

@@ -90,7 +90,7 @@ const Page = {
               : null,
             this.page.description
               ? m('.fr-view', [
-                  this.page.media ? m('img.page-cover', { src: this.page.media.url } ) : null,
+                  this.page.media ? m('img.page-cover', { src: this.page.media.url, alt: 'Cover image for ' + this.page.name } ) : null,
                   m.trust(this.page.description),
                   this.news.length && this.page.description
                     ? m('aside.news', [
@@ -107,7 +107,7 @@ const Page = {
                 ])
               : this.news.length
                 ? m('aside.news.single', [
-                    this.page.media ? m('img.page-cover', { src: this.page.media.url } ) : null,
+                    this.page.media ? m('img.page-cover', { src: this.page.media.url, alt: 'Cover image for ' + this.page.name } ) : null,
                     m('h4', 'Latest posts under ' + this.page.name + ':'),
                     this.loadingnews ? m('div.loading-spinner') : this.news.map(function(article) {
                       return m(Newsentry, article)
@@ -118,7 +118,7 @@ const Page = {
                     }),
                   ])
                 : this.page.media
-                  ? m('img.page-cover.single', { src: this.page.media.url } )
+                  ? m('img.page-cover.single', { src: this.page.media.url, alt: 'Cover image for ' + this.page.name } )
                   : null,
           ]),
           Authentication.currentUser

app/pages/page.scss

@@ -1,6 +1,6 @@
 article.page {
   background: white;
-  padding: 0 0 20px;
+  padding: 0 0 40px;
 
   header {
     text-align: center;

app/widgets/newsentry.js

@@ -17,7 +17,7 @@ const Newsentry = {
       vnode.attrs.media
         ? m('a.cover', {
             href: '/article/' + vnode.attrs.path,
-          }, m('img', { src: vnode.attrs.media.small_url }))
+          }, m('img', { src: vnode.attrs.media.small_url, alt: 'Article image for ' + vnode.attrs.name }))
         : m('a.cover.nobg'),
       m('div.entrycontent', [
         m('div.title', [

app/widgets/newsitem.js

@@ -3,6 +3,7 @@ const Fileinfo = require('./fileinfo')
 
 const Newsitem = {
   view: function(vnode) {
+    var pixelRatio = window.devicePixelRatio || 1
     return m('newsitem', [
       m(m.route.Link,
         { href: '/article/' + vnode.attrs.path, class: 'title' },
@@ -12,7 +13,7 @@ const Newsitem = {
         vnode.attrs.media
           ? m('a.cover', {
               href: '/article/' + vnode.attrs.path,
-            }, m('img', { src: vnode.attrs.media.medium_url }))
+            }, m('img', { alt: 'Image for news item ' + vnode.attrs.name, src: pixelRatio > 1 ? vnode.attrs.media.medium_url : vnode.attrs.media.small_url }))
           : m('a.cover.nobg'),
         m('div.entrycontent', [
           (vnode.attrs.description

migrations/20190219105500_base.js

@@ -79,7 +79,7 @@ exports.up = function up(knex, Promise) {
     }),
     knex.schema.createTable('files', function(table) {
       table.increments()
-      table.integer('articdle_id')
+      table.integer('article_id')
         .references('articles.id')
       table.text('filename')
       table.text('filetype')

public/index.html

@@ -13,6 +13,7 @@
   <div class="maincontainer">
     <div id="nav"></div>
     <main id="main"></main>
+    <footer id="footer"></footer>
   </div>
   <script type="text/javascript" src="/assets/app.js?v=2"></script>
 </body>