More UI tweaks and fixes

api/serveindex.mjs

@@ -110,11 +110,12 @@ export async function serveIndex(ctx, path) {
     }
 
     if (path === '/') {
-      data = await Article.getFrontpageArticles(Number(ctx.query.page || '1'))
+      let currPage = Number(ctx.query.page || '1')
+      data = await Article.getFrontpageArticles(currPage)
 
       if (data.pagination.rowCount > 10) {
         links = {
-          current: { title: 'Page 1' },
+          current: { title: 'Page ' + currPage },
           next: { page: 2, title: 'Next' },
           last: { page: Math.ceil(data.pagination.rowCount / 10), title: 'Last' },
         }
@@ -123,6 +124,10 @@ export async function serveIndex(ctx, path) {
           current: { title: 'Page 1' },
         }
       }
+      if (currPage > 1) {
+        links.previous = { page: currPage - 1, title: 'Previous' }
+        links.first = { page: 1, title: 'First' }
+      }
       data = data.toJSON().map(mapArticle.bind(null, true))
     } else if (path.startsWith('/article/') || path.startsWith('/page/')) {
       let id = path.split('/')[2]

app/_common.scss

@@ -47,13 +47,14 @@ $dark_secondary-light-bg: #ffad42;
 $dark_secondary-light-fg: black;
 $dark_secondary-dark-bg: #e05e00;
 $dark_secondary-dark-fg: white;
+$dark_secondary-darker-fg: #fe791b;
 
 $dark_table-fg: #333;
 $dark_border: #343536;
 $dark_border-fg: #d7dadc;;
 $dark_border-fg-url: #e05e00;
 $dark_title-fg: #808080;
-$dark_meta-fg: #d7dadc;
+$dark_meta-fg: hsl(0, 0%, 55%);
 $dark_meta-light-fg: #999999;
 
 $dark_main-bg: black;

app/article/article.js

@@ -7,7 +7,6 @@ const Article = {
   oninit: function(vnode) {
     this.error = ''
     this.lastarticle = m.route.param('article') || '1'
-    this.loadingnews = false
     this.showcomments = false
 
     if (window.__nfpdata) {
@@ -46,7 +45,7 @@ const Article = {
       vnode.state.error = err.message
     })
     .then(function() {
-      vnode.state.loading = vnode.state.loadingnews = false
+      vnode.state.loading = false
       m.redraw()
     })
   },
@@ -54,6 +53,7 @@ const Article = {
   onupdate: function(vnode) {
     if (this.path !== m.route.param('id')) {
       this.fetchArticle(vnode)
+      m.redraw()
     }
   },
 
@@ -73,7 +73,7 @@ const Article = {
 
     return (
       this.loading ?
-        m('div.loading-spinner')
+        m('article.article', m('div.loading-spinner'))
       : m('article.article', [
           this.article.parent ? m('div.goback', ['« ', m(m.route.Link, { href: '/page/' + this.article.parent.path }, this.article.parent.name)]) : null,
           m('header', m('h1', this.article.name)),

app/article/article.scss

@@ -16,6 +16,12 @@ article.article {
     }
   }
 
+  .loading-spinner {
+    position: relative;
+    flex-grow: 2;
+    height: 300px;
+  }
+
   .cover {
     margin: 0 0 20px;
   }
@@ -103,6 +109,16 @@ article.article {
   }
 }
 
+@media screen and (max-width: 639px){
+  article.article {
+    .fr-view {
+      margin: 0;
+      width: 100%;
+      border: none !important;
+    }
+  }
+}
+
 .darkmodeon {
   article.article {
     header {
@@ -124,5 +140,12 @@ article.article {
     .goback a {
       color: $dark_secondary-dark-bg;
     }
+
+    .entrymeta {
+      color: $dark_meta-fg;
+      a {
+        color: $dark_secondary-dark-bg;
+      }
+    }
   }
 }

app/footer/footer.scss

@@ -75,7 +75,7 @@ footer {
 
     .sitemap {
       a {
-        color: $dark_border-fg-url;
+        color: $dark_secondary-darker-fg;
       }
     }
   }

app/frontpage/frontpage.js

@@ -38,6 +38,7 @@ const Frontpage = {
   onupdate: function(vnode) {
     if (this.lastpage !== (m.route.param('page') || '1')) {
       this.fetchArticles(vnode)
+      m.redraw()
     }
   },
 

app/frontpage/frontpage.scss

@@ -28,6 +28,7 @@ frontpage {
   .frontpage-news {
     display: flex;
     flex-direction: column;
+    flex-grow: 2;
   }
 
   aside.sidebar {
@@ -61,27 +62,24 @@ frontpage {
         padding-left: 10px;
         list-style-type: disc;
         list-style-position: inside;
-
-        a {
-          display: inline-block;
-          padding: 0;
-          max-width: 206px;
-        }
       }
     }
 
     a {
-      padding: 5px 5px 0px;
+      padding: 2px 5px;
       display: block;
       text-decoration: none;
       color: $secondary-dark-bg;
       font-size: 14px;
       font-weight: bold;
+      display: inline-block;
+      max-width: 200px;
     }
   }
 
   .loading-spinner {
     height: 100px;
+    position: relative;
   }  
 
   newsitem {
@@ -104,8 +102,8 @@ frontpage {
     width: 200px;
     flex: 0 0 200px;
 
-    ul li a {
+    a {
-      max-width: 156px;
+      max-width: 150px;
     }
   }
 }
@@ -123,7 +121,7 @@ frontpage {
     border-bottom: 1px solid $border;
     order: 2;
 
-    ul li a {
+    a {
       max-width: unset;
     }
   }

app/menu/menu.scss

@@ -8,7 +8,7 @@
     background: $primary-dark-bg;
     color: $primary-dark-fg;
     padding: 0 10px 0 0;
-    height: 100px;
+    min-height: 100px;
     display: flex;
 
     button.dark {

app/pages/page.js

@@ -36,6 +36,7 @@ const Page = {
       media: null,
     }
     this.loading = true
+    this.loadingnews = true
 
     ApiPage.getPage(this.path)
     .then(function(result) {
@@ -53,8 +54,10 @@ const Page = {
   onupdate: function(vnode) {
     if (this.path !== m.route.param('id')) {
       this.fetchPage(vnode)
+      m.redraw()
     } else if (m.route.param('page') && m.route.param('page') !== this.lastpage) {
       this.fetchArticles(vnode)
+      m.redraw()
     }
   },
 
@@ -109,7 +112,7 @@ const Page = {
 
     return (
       this.loading ?
-        m('div.loading-spinner')
+        m('article.page', m('div.loading-spinner'))
       : m('article.page', [
           bannerPath ? m('.div.page-banner', { style: { 'background-image': 'url("' + bannerPath + '")' } } ) : null,
           this.page.parent

app/pages/page.scss

@@ -15,6 +15,12 @@ article.page {
     }
   }
 
+  .loading-spinner {
+    position: relative;
+    flex-grow: 2;
+    height: 300px;
+  }
+
   .page-banner {
     background-size: cover;
     background-repeat: no-repeat;
@@ -56,12 +62,6 @@ article.page {
     margin-bottom: 20px;
   }
 
-  & > .loading-spinner {
-    width: 240px;
-    height: 50px;
-    position: relative;
-  }
-
   aside.sidebar,
   aside.news {
     h4 {
@@ -179,20 +179,25 @@ aside.news {
 }
 
 @media screen and (max-width: 639px){
-  article.page .container {
+  article.page {
-    flex-direction: column !important;
+    padding: 0;
-  }
 
-  article.page aside.sidebar {
+    .container {
-    width: calc(100% - 80px);
+      flex-direction: column !important;
-    flex: 0 0 auto;
+      border: none !important;
-    margin: 0px 30px 30px;
+    }
-    border-bottom: 1px solid $border;
-    padding: 0 0 5px;
-  }
 
-  article.page .news.single .page-cover {
+    aside.sidebar {
-    margin: 0 0 20px;
+      width: calc(100% - 80px);
+      flex: 0 0 auto;
+      margin: 0px 30px 30px;
+      border-bottom: 1px solid $border;
+      padding: 0 0 5px;
+    }
+
+    .news.single .page-cover {
+      margin: 0 0 20px;
+    }
   }
 }
 
@@ -214,6 +219,18 @@ aside.news {
   }
 }
 
+@media screen and (max-width: 480px){
+  article.page aside.sidebar a {
+    padding: 9px 10px;
+  }
+}
+
+@media (pointer:coarse) {
+  article.page aside.sidebar a {
+    padding: 9px 10px;
+  }
+}
+
 .darkmodeon {
   article.page {
     header {
@@ -238,6 +255,10 @@ aside.news {
         color: $dark_secondary-dark-bg;
       }
     }
+
+    .goback a {
+      color: $dark_secondary-dark-bg;
+    }
   }
 
   aside.news {

app/widgets/common.scss

@@ -58,7 +58,8 @@ newsentry {
 fileinfo {
   padding: 0 5px;
   margin-bottom: 5px;
-  display: block;
+  display: flex;
+  flex-direction: column;
 
   &.slim {
     padding: 0;
@@ -101,6 +102,22 @@ fileinfo {
   }
 }
 
+@media screen and (max-width: 480px){
+  fileinfo,
+  fileinfo.slim {
+    padding: 8px 5px;
+    justify-content: center;
+  }
+}
+
+@media (pointer:coarse) {
+  fileinfo,
+  fileinfo.slim {
+    padding: 8px 5px;
+    justify-content: center;
+  }
+}
+
 newsitem {
   display: flex;
   flex-direction: column;
@@ -229,6 +246,23 @@ pages {
   }
 }
 
+@media screen and (max-width: 440px){
+  newsentry {
+    flex-direction: column;
+    align-items: center;
+
+    a.cover {
+      margin: 0 0 15px;
+      width: 100%;
+
+      img {
+        max-height: unset;
+        width: 100%;
+      }
+    }
+  }
+}
+
 .darkmodeon {
   newsentry {
     color: $dark_meta-fg;

app/widgets/newsentry.js

@@ -12,11 +12,22 @@ const Newsentry = {
   },
 
   view: function(vnode) {
+    var deviceWidth = window.innerWidth
+    var pixelRatio = window.devicePixelRatio || 1
+    var imagePath = ''
+
+    if (vnode.attrs.media) {
+      if (deviceWidth > 440 || pixelRatio <= 1) {
+        imagePath = vnode.attrs.media.small_url
+      } else {
+        imagePath = vnode.attrs.media.medium_url
+      }
+    }
     return m('newsentry', [
-      vnode.attrs.media
+      imagePath
         ? m('a.cover', {
             href: '/article/' + vnode.attrs.path,
-          }, m('img', { src: vnode.attrs.media.small_url, alt: 'Article image for ' + vnode.attrs.name }))
+          }, m('img', { src: imagePath, alt: 'Article image for ' + vnode.attrs.name }))
         : m('a.cover.nobg'),
       m('div.entrycontent', [
         m('div.title', [