From 97c64003a797648e12e5767bdf520d3a9f88d09b Mon Sep 17 00:00:00 2001
From: Jonatan Nilsson <jonatan@nilsson.is>
Date: Wed, 2 Oct 2019 17:40:32 +0000
Subject: [PATCH] More tweaks and fixes

Remove accidental debug statement in login page
---
 api/article/model.mjs         |  2 +-
 api/authentication/helper.mjs |  2 --
 api/media/resize.mjs          | 10 +++++++---
 api/page/model.mjs            |  5 +++++
 api/page/routes.mjs           |  2 +-
 api/serveindex.mjs            | 27 ++++++++++++++++-----------
 app/admin/pages.js            |  2 +-
 app/article/article.js        | 17 +++++++++++++++--
 app/article/article.scss      | 10 +++++++++-
 app/footer/footer.scss        | 26 +++++++++++++++++++++++++-
 app/frontpage/frontpage.js    |  3 +--
 app/frontpage/frontpage.scss  | 32 +++++++++++++-------------------
 app/pages/page.js             | 16 +++++++++++++---
 app/pages/page.scss           |  5 +++++
 app/widgets/common.scss       | 16 ++++++++++++++--
 app/widgets/fileinfo.js       |  8 +++++++-
 app/widgets/newsitem.js       |  9 +++++++--
 17 files changed, 140 insertions(+), 52 deletions(-)

diff --git a/api/article/model.mjs b/api/article/model.mjs
index f81f5ce..78c60d0 100644
--- a/api/article/model.mjs
+++ b/api/article/model.mjs
@@ -136,7 +136,7 @@ const Article = bookshelf.createModel({
       .fetchPage({
         pageSize: 10,
         page: page,
-        withRelated: ['files', 'media', 'banner'],
+        withRelated: ['files', 'media', 'banner', 'parent'],
       })
   },
 })
diff --git a/api/authentication/helper.mjs b/api/authentication/helper.mjs
index eeb417b..1425a2e 100644
--- a/api/authentication/helper.mjs
+++ b/api/authentication/helper.mjs
@@ -20,8 +20,6 @@ export default class AuthHelper {
         })
         .fetch({ require: true })
 
-      console.log(ctx.request.body.password, staff.get('password'))
-
       await this.Staff.compare(ctx.request.body.password, staff.get('password'))
     } catch (err) {
       if (err.message === 'EmptyResponse' || err.message === 'PasswordMismatch') {
diff --git a/api/media/resize.mjs b/api/media/resize.mjs
index adc59ea..47c4a40 100644
--- a/api/media/resize.mjs
+++ b/api/media/resize.mjs
@@ -18,7 +18,7 @@ export default class Resizer {
               withoutEnlargement: true,
             })
             .jpeg({
-              quality: 80,
+              quality: 90,
             })
             .toFile(output)
             .then(() => output)
@@ -33,7 +33,7 @@ export default class Resizer {
               withoutEnlargement: true,
             })
             .jpeg({
-              quality: 80,
+              quality: 90,
             })
             .toFile(output)
             .then(() => output)
@@ -43,8 +43,12 @@ export default class Resizer {
     let output = this.Media.getSubUrl(input, 'large')
 
     return this.sharp(input)
+            .resize(1280, 1280, {
+              fit: sharp.fit.inside,
+              withoutEnlargement: true,
+            })
             .jpeg({
-              quality: 80,
+              quality: 90,
             })
             .toFile(output)
             .then(() => output)
diff --git a/api/page/model.mjs b/api/page/model.mjs
index 30c1adb..782745f 100644
--- a/api/page/model.mjs
+++ b/api/page/model.mjs
@@ -1,3 +1,4 @@
+
 import bookshelf from '../bookshelf.mjs'
 import Media from '../media/model.mjs'
 import Staff from '../staff/model.mjs'
@@ -37,6 +38,9 @@ const Page = bookshelf.createModel({
 
   children() {
     return this.hasManyFiltered(Page, 'children', 'parent_id')
+      .query(qb => {
+        qb.orderBy('name', 'ASC')
+      })
   },
 
   news() {
@@ -65,6 +69,7 @@ const Page = bookshelf.createModel({
     return this.query(qb => {
       qb.where({ parent_id: null })
       qb.select(['id', 'name', 'path'])
+      qb.orderBy('name', 'ASC')
     }).fetchAll({ withRelated: ['children'] })
   },
 })
diff --git a/api/page/routes.mjs b/api/page/routes.mjs
index debdd50..82c00b7 100644
--- a/api/page/routes.mjs
+++ b/api/page/routes.mjs
@@ -18,7 +18,7 @@ export default class PageRoutes {
       filter.parent_id = null
     }
 
-    ctx.body = await this.Page.getAll(ctx, filter, ctx.state.filter.includes)
+    ctx.body = await this.Page.getAll(ctx, filter, ctx.state.filter.includes, 'name')
   }
 
   /** GET: /api/pages/:id */
diff --git a/api/serveindex.mjs b/api/serveindex.mjs
index 4e5d46d..8699141 100644
--- a/api/serveindex.mjs
+++ b/api/serveindex.mjs
@@ -10,20 +10,20 @@ const body = readFileSync('./public/index.html').toString()
 const bodyTemplate = dot.template(body)
 const frontend = config.get('frontend:url')
 
-function mapArticle(x) {
+function mapArticle(trim = false, x, includeBanner = false, includeFiles = true) {
   return {
     id: x.id,
-    created_at: x.created_at,
     published_at: x.published_at,
     path: x.path,
     description: x.description,
     name: x.name,
     media: x.media && ({
+      link: !trim && x.media.link || null,
       large_url: x.media.large_url,
       medium_url: x.media.medium_url,
       small_url: x.media.small_url,
     }) || null,
-    banner: x.banner && ({
+    banner: x.banner && includeBanner && ({
       large_url: x.banner.large_url,
       medium_url: x.banner.medium_url,
       small_url: x.banner.small_url,
@@ -33,16 +33,20 @@ function mapArticle(x) {
       name: x.parent.name,
       path: x.parent.path,
     }),
-    files: x.files && x.files.map(f => ({
+    files: x.files && includeFiles && x.files.map(f => ({
       filename: f.filename,
       url: f.url,
       magnet: f.magnet,
       meta: f.meta.torrent && ({
         torrent: {
-          files: f.meta.torrent.files.map(tf => ({
-            name: tf.name,
-            size: tf.size,
-          })),
+          name: f.meta.torrent.name,
+          files: f.meta.torrent.files.map(tf => {
+            if (trim && f.meta.torrent.files.length > 4) return 1
+            return {
+              name: tf.name,
+              size: tf.size,
+            }
+          }),
         },
       }) || {},
     })) || [],
@@ -57,6 +61,7 @@ function mapPage(x) {
     description: x.description,
     name: x.name,
     media: x.media && ({
+      link: x.media.link,
       large_url: x.media.large_url,
       medium_url: x.media.medium_url,
       small_url: x.media.small_url,
@@ -92,7 +97,7 @@ export async function serveIndex(ctx, path) {
     ))
     featured = await Article.getFeatured(['files', 'media', 'banner'])
     if (featured) {
-      featured = mapArticle(featured.toJSON())
+      featured = mapArticle(true, featured.toJSON(), true, false)
     }
 
     if (path === '/') {
@@ -109,7 +114,7 @@ export async function serveIndex(ctx, path) {
           current: { title: 'Page 1' },
         }
       }
-      data = data.toJSON().map(mapArticle)
+      data = data.toJSON().map(mapArticle.bind(null, true))
     } else if (path.startsWith('/article/') || path.startsWith('/page/')) {
       let id = path.split('/')[2]
       if (id) {
@@ -117,7 +122,7 @@ export async function serveIndex(ctx, path) {
         if (path.startsWith('/article/')) {
           found = await Article.getSingle(id, ['media', 'parent', 'banner', 'files'], false, null, true)
           if (found) {
-            found = mapArticle(found.toJSON())
+            found = mapArticle(false, found.toJSON())
           }
           data = found
         } else {
diff --git a/app/admin/pages.js b/app/admin/pages.js
index 87e9adf..acc0972 100644
--- a/app/admin/pages.js
+++ b/app/admin/pages.js
@@ -56,7 +56,7 @@ const AdminPages = {
     return [
       m('tr', [
         m('td', [
-          page.parent_id ? m('span.subpage', '| >') : null,
+          page.parent_id ? m('span.subpage', ' - ') : null,
           m(m.route.Link, { href: '/admin/pages/' + page.id }, page.name),
         ]),
         m('td', m(m.route.Link, { href: '/page/' + page.path }, '/page/' + page.path)),
diff --git a/app/article/article.js b/app/article/article.js
index 81ceaaa..45ea1eb 100644
--- a/app/article/article.js
+++ b/app/article/article.js
@@ -58,6 +58,19 @@ const Article = {
   },
 
   view: function(vnode) {
+    var deviceWidth = window.innerWidth
+    var imagePath = ''
+
+    if (this.article.media) {
+      var pixelRatio = window.devicePixelRatio || 1
+      if ((deviceWidth < 800 && pixelRatio <= 1)
+                || (deviceWidth < 600 && pixelRatio > 1)) {
+        imagePath = this.article.media.medium_url
+      } else {
+        imagePath = this.article.media.large_url
+      }
+    }
+
     return (
       this.loading ?
         m('div.loading-spinner')
@@ -67,8 +80,8 @@ const Article = {
             this.article.media
               ? m('a.cover', {
                   rel: 'noopener',
-                  href: this.article.media.url,
-                }, m('img', { src: this.article.media.medium_url, alt: 'Cover image for ' + this.article.name }))
+                  href: this.article.media.link,
+                }, m('img', { src: imagePath, alt: 'Cover image for ' + this.article.name }))
               : null,
             this.article.description ? m.trust(this.article.description) : null,
             (this.article.files && this.article.files.length
diff --git a/app/article/article.scss b/app/article/article.scss
index d260c80..504d8a4 100644
--- a/app/article/article.scss
+++ b/app/article/article.scss
@@ -17,7 +17,7 @@ article.article {
   }
 
   .cover {
-    margin: 0 -10px 20px;
+    margin: 0 0 20px;
   }
 
   .admin-actions {
@@ -44,6 +44,14 @@ article.article {
     }
   }
 
+  fileinfo {
+    font-size: 0.8em;
+
+    ul {
+      padding-left: 0;
+    }
+  }
+
   .opencomments {
     border: none;
     align-self: center;
diff --git a/app/footer/footer.scss b/app/footer/footer.scss
index c64903d..c482035 100644
--- a/app/footer/footer.scss
+++ b/app/footer/footer.scss
@@ -15,6 +15,7 @@ footer {
     align-items: center;
     font-size: 11px;
     font-weight: bold;
+    padding-right: 20px;
 
     a {
       text-decoration: none;
@@ -30,7 +31,12 @@ footer {
     ul {
       margin: 2px 0 0;
       display: flex;
-      padding: 0;
+      flex-wrap: wrap;
+      padding: 0 0 10px;
+      justify-content: center;
+      border-bottom: 1px solid white;
+      margin-bottom: 10px;
+      min-width: 300px;
 
       li {
         padding: 2px 5px;
@@ -45,6 +51,7 @@ footer {
     background-size: contain;
     width: 119px;
     height: 150px;
+    flex: 0 0 119px;
   }
 
   .meta {
@@ -107,6 +114,23 @@ only screen and (                min-resolution: 2dppx) {
 }
 
 @media screen and (max-width: 480px){
+  footer {
+    flex-direction: column;
+    align-items: center;
+
+    .footer-logo {
+      margin-top: 20px;
+    }
+
+    .sitemap {
+      padding-right: 0px;
+
+      ul {
+        align-self: stretch;
+      }
+    }
+  }
+
   footer .sitemap a.root,
   footer .sitemap a.child {
     padding: 9px 10px;
diff --git a/app/frontpage/frontpage.js b/app/frontpage/frontpage.js
index 5ea125a..585529b 100644
--- a/app/frontpage/frontpage.js
+++ b/app/frontpage/frontpage.js
@@ -17,8 +17,6 @@ const Frontpage = {
       this.featured = window.__nfpfeatured
     }
 
-    console.log(this.featured)
-
     if (window.__nfpdata
         && window.__nfplinks) {
       this.links = window.__nfplinks
@@ -85,6 +83,7 @@ const Frontpage = {
   },
 
   view: function(vnode) {
+    console.log(this.articles)
     var deviceWidth = window.innerWidth
 
     var bannerPath = ''
diff --git a/app/frontpage/frontpage.scss b/app/frontpage/frontpage.scss
index 19e18fb..33e9bc7 100644
--- a/app/frontpage/frontpage.scss
+++ b/app/frontpage/frontpage.scss
@@ -87,7 +87,13 @@ frontpage {
   }
 
   .asunaside {
-    display: none;
+    display: block;
+    width: 200px;
+    height: 480px;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: top left;
+    align-self: center;
   }
 }
 
@@ -98,7 +104,7 @@ frontpage {
   }
 }
 
-@media screen and (max-width: 800px){
+@media screen and (max-width: 900px){
   frontpage {
     flex-direction: column;
   }
@@ -113,24 +119,12 @@ frontpage {
   }
 }
 
-@media screen and (min-width: 800px){
-  frontpage .asunaside {
-    display: block;
-    width: 200px;
-    height: 480px;
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: top left;
-    align-self: center;
-  }
+.daymode frontpage .asunaside {
+  background-image: url("/assets/img/asuna_frontpage.jpg");
+}
 
-  .daymode frontpage .asunaside {
-    background-image: url("/assets/img/asuna_frontpage.jpg");
-  }
-
-  .darkmodeon frontpage .asunaside {
-    background-image: url("/assets/img/dark_asuna_frontpage.jpg");
-  }
+.darkmodeon frontpage .asunaside {
+  background-image: url("/assets/img/dark_asuna_frontpage.jpg");
 }
 
 @media screen and (max-width: 480px){
diff --git a/app/pages/page.js b/app/pages/page.js
index 8a2b00e..de5c21a 100644
--- a/app/pages/page.js
+++ b/app/pages/page.js
@@ -83,10 +83,11 @@ const Page = {
 
   view: function(vnode) {
     var deviceWidth = window.innerWidth
+    var pixelRatio = window.devicePixelRatio || 1
     var bannerPath = ''
+    var imagePath = ''
 
     if (this.page && this.page.banner) {
-      var pixelRatio = window.devicePixelRatio || 1
       if (deviceWidth < 400 && pixelRatio <= 1) {
         bannerPath = this.page.banner.small_url
       } else if ((deviceWidth < 800 && pixelRatio <= 1)
@@ -97,6 +98,15 @@ const Page = {
       }
     }
 
+    if (this.page && this.page.media) {
+      if ((deviceWidth < 1000 && pixelRatio <= 1)
+                || (deviceWidth < 800 && pixelRatio > 1)) {
+        imagePath = this.page.media.medium_url
+      } else {
+        imagePath = this.page.media.large_url
+      }
+    }
+
     return (
       this.loading ?
         m('div.loading-spinner')
@@ -116,7 +126,7 @@ const Page = {
               : null,
             this.page.description
               ? m('.fr-view', [
-                  this.page.media ? m('img.page-cover', { src: this.page.media.medium_url, alt: 'Cover image for ' + this.page.name } ) : null,
+                  imagePath ? m('a', { href: this.page.media.link}, m('img.page-cover', { src: imagePath, alt: 'Cover image for ' + this.page.name } )) : null,
                   m.trust(this.page.description),
                   this.news.length && this.page.description
                     ? m('aside.news', [
@@ -133,7 +143,7 @@ const Page = {
                 ])
               : this.news.length
                 ? m('aside.news.single', [
-                    this.page.media ? m('img.page-cover', { src: this.page.media.medium_url, alt: 'Cover image for ' + this.page.name } ) : null,
+                    imagePath ? m('a', { href: this.page.media.link}, m('img.page-cover', { src: imagePath, 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)
diff --git a/app/pages/page.scss b/app/pages/page.scss
index e85b168..bc23217 100644
--- a/app/pages/page.scss
+++ b/app/pages/page.scss
@@ -144,6 +144,7 @@ aside.news {
     border-top: none;
     margin-top: 0;
     align-self: flex-start;
+    margin: 0;
 
     & > h4 {
       padding: 0 5px 5px;
@@ -171,6 +172,10 @@ aside.news {
     border-bottom: 1px solid $border;
     padding: 0 0 5px;
   }
+
+  article.page .news.single .page-cover {
+    margin: 0 0 20px;
+  }
 }
 
 @media screen and (max-width: 360px){
diff --git a/app/widgets/common.scss b/app/widgets/common.scss
index 9c1ce5f..da2bd74 100644
--- a/app/widgets/common.scss
+++ b/app/widgets/common.scss
@@ -84,6 +84,10 @@ fileinfo {
     }
   }
 
+  .trimmed {
+    padding: 3px 0 5px 25px;
+  }
+
   ul {
     margin: 10px 0;
     padding-left: 0;
@@ -166,9 +170,13 @@ newsitem {
     font-size: 11px;
     color: $meta-fg;
     font-weight: bold;
-    display: flex;
-    align-items: flex-end;
     padding: 10px 0;
+
+    a {
+      color: $secondary-dark-bg;
+      margin: 0 5px;
+      text-decoration: none;
+    }
   }
 }
 
@@ -255,6 +263,10 @@ pages {
 
     .entrymeta {
       color: $dark_meta-fg;
+
+      a {
+        color: $dark_secondary-dark-bg;
+      }
     }
   }
 
diff --git a/app/widgets/fileinfo.js b/app/widgets/fileinfo.js
index 014cece..27a41d9 100644
--- a/app/widgets/fileinfo.js
+++ b/app/widgets/fileinfo.js
@@ -57,7 +57,10 @@ const Fileinfo = {
           : null,
         m('span', this.getTitle(vnode)),
       ]),
-      vnode.attrs.file.meta.torrent && !vnode.attrs.slim
+      vnode.attrs.file.meta.torrent
+          && !vnode.attrs.slim
+          && vnode.attrs.file.meta.torrent.files.length > 1
+          && (!vnode.attrs.trim || vnode.attrs.file.meta.torrent.files.length <= 4)
         ? m('ul', vnode.attrs.file.meta.torrent.files.map(function(file) {
             return m('li', [
               file.name + ' ',
@@ -65,6 +68,9 @@ const Fileinfo = {
             ])
           }))
         : null,
+      vnode.attrs.trim && vnode.attrs.file.meta.torrent.files.length > 4
+        ? m('div.trimmed', '...' + vnode.attrs.file.meta.torrent.files.length + ' files...')
+        : null,
     ])
   },
 }
diff --git a/app/widgets/newsitem.js b/app/widgets/newsitem.js
index 7289a7c..40781f1 100644
--- a/app/widgets/newsitem.js
+++ b/app/widgets/newsitem.js
@@ -22,10 +22,15 @@ const Newsitem = {
               : null),
           (vnode.attrs.files && vnode.attrs.files.length
             ? vnode.attrs.files.map(function(file) {
-                return m(Fileinfo, { file: file })
+                return m(Fileinfo, { file: file, trim: true })
               })
             : null),
-          m('span.entrymeta', 'Posted ' + vnode.attrs.published_at.replace('T', ' ').split('.')[0]),
+          m('span.entrymeta', [
+            'Posted ',
+            (vnode.attrs.parent ? 'in' : ''),
+            (vnode.attrs.parent ? m(m.route.Link, { href: '/page/' + vnode.attrs.parent.path }, vnode.attrs.parent.name) : null),
+            'at ' + (vnode.attrs.published_at.replace('T', ' ').split('.')[0]).substr(0, 16),
+          ]),
         ]),
       ]),
     ])