From c29b5256497ff9c2922b97195133855cf71ee07d Mon Sep 17 00:00:00 2001
From: Kylart <Kylart.dev@gmail.com>
Date: Thu, 3 Aug 2017 10:46:44 +0200
Subject: [PATCH] Lazyloading on news with better scroll

---
 assets/App.vue          |   2 +-
 assets/stylus/main.styl |   3 --
 components/_index.js    |   4 ++
 components/news.vue     |  84 +++++++++++++++++++++++++++++
 package.json            |   1 +
 pages/news.vue          | 115 +++++-----------------------------------
 6 files changed, 103 insertions(+), 106 deletions(-)
 create mode 100644 components/news.vue

diff --git a/assets/App.vue b/assets/App.vue
index e1f8ae1..f926ff9 100644
--- a/assets/App.vue
+++ b/assets/App.vue
@@ -85,7 +85,7 @@
     <env v-if="$store.state.NODE_ENV"></env>
     <info-results v-show="$store.state.info.show"></info-results>
 
-    <!-- Displayed if an error occurred -->
+    <!-- Displayed for displaying any info -->
     <v-snackbar
       :timeout="5000"
       :top="true"
diff --git a/assets/stylus/main.styl b/assets/stylus/main.styl
index 770190c..0a75056 100644
--- a/assets/stylus/main.styl
+++ b/assets/stylus/main.styl
@@ -68,9 +68,6 @@ $theme := {
 /**
   Custom rules which will be applied globally, allows overriding
  */
-.application--toolbar.application--footer > main > .container
-  min-height calc(100vh - (48px + 24px))
-
 .toolbar__content
   max-height 48px
 
diff --git a/components/_index.js b/components/_index.js
index 9167ba4..59d9d2a 100644
--- a/components/_index.js
+++ b/components/_index.js
@@ -4,6 +4,8 @@ import HistoryModal from './historyModal.vue'
 import InfoModal from './infoModal.vue'
 import InfoResults from './infoResults.vue'
 import Loader from './loader.vue'
+import News from './news.vue'
+import VirtualList from 'vue-virtual-scroll-list'
 import Settings from './settings.vue'
 
 export default {
@@ -13,5 +15,7 @@ export default {
   InfoModal,
   InfoResults,
   Loader,
+  News,
+  VirtualList,
   Settings
 }
diff --git a/components/news.vue b/components/news.vue
new file mode 100644
index 0000000..63f61fc
--- /dev/null
+++ b/components/news.vue
@@ -0,0 +1,84 @@
+<template lang="pug">
+  v-flex(xs12 v-ripple="true").elevation-3.elem
+    v-layout(row wrap)
+      v-flex(xs12)
+        h3.white--text.title {{ item.title }}
+      v-flex(md2 xs3 style="height: 220px;")
+        img(:src="item.image").image
+      v-flex(md10 xs9)
+        v-layout(row wrap)
+          v-flex(xs12)
+            p.synopsis {{ item.text }}
+          v-flex(xs12).link
+            div.button-container
+              v-btn(secondary block @click="open(item.link)") Open
+</template>
+
+<script>
+  export default {
+    props: {
+      item: Object
+    },
+    methods: {
+      open (link) {
+        this.$store.dispatch('openNewsLink', link)
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .elem
+  {
+    position: relative;
+    margin-bottom: 15px;
+    padding: 0;
+    background-color: rgb(60, 60, 60);
+  }
+
+  .elem:hover
+  {
+    transition: all 0.25s;
+    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+    0 8px 10px 1px rgba(0, 0, 0, 0.14),
+    0 3px 14px 2px rgba(0, 0, 0, 0.12) !important;
+  }
+
+  .title
+  {
+    line-height: 24px;
+    margin-top: 10px;
+    padding-left: 2%;
+    padding-right: 2%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .image
+  {
+    height: 220px;
+    max-width: 100%;
+  }
+
+  .synopsis
+  {
+    padding-top: 2%;
+    height: 150px;
+  }
+
+  .link
+  {
+    height: 50%;
+    width: 100%;
+    text-align: right;
+    display: inline-block;
+    padding: 0 5% 0 10%;
+  }
+
+  .button-container
+  {
+    display: inline-block;
+    width: 15%;
+  }
+</style>
diff --git a/package.json b/package.json
index 6adf441..d4d1cb8 100644
--- a/package.json
+++ b/package.json
@@ -53,6 +53,7 @@
     "vue-clipboards": "^1.1.0",
     "vue-router": "^2.7.0",
     "vue-server-renderer": "^2.4.2",
+    "vue-virtual-scroll-list": "^1.1.3",
     "vuetify": "^0.14.8",
     "vuex": "^2.3.1",
     "vuex-router-sync": "^4.1.2"
diff --git a/pages/news.vue b/pages/news.vue
index e124fd9..e7fd113 100644
--- a/pages/news.vue
+++ b/pages/news.vue
@@ -1,53 +1,19 @@
-<template>
-  <v-container fluid style="padding: 0; min-height: 92vh;">
-    <loader v-if="!$store.state.news.length"></loader>
+<template lang="pug">
+  v-container(fluid).pa-0
+    loader(v-if="!$store.state.news.length")
 
-    <v-container fluid v-else>
-      <v-layout row wrap class="news-container">
-        <v-flex xs12 class="refresh-button-container">
-          <v-btn icon
-                 class="refresh-button"
-                 @click="refresh()">
-            <v-icon large>refresh</v-icon>
-          </v-btn>
-        </v-flex>
-        <v-flex xs12
-               class="elem elevation-3"
-               v-ripple="true"
-               v-for="item in $store.state.news" :key="item.name">
-          <v-layout row wrap>
-            <v-flex xs12>
-              <h3 class="title white--text">{{ item.title }}</h3>
-            </v-flex>
-            <v-flex md2 xs3 style="height: 220px;">
-              <img :src="item.image" class="image"/>
-            </v-flex>
-            <v-flex md10 xs9>
-              <v-layout row wrap>
-                <v-flex xs12><p class="synopsis">{{ item.text }}</p></v-flex>
-              </v-layout>
-              <v-layout row wrap xs12 class="link">
-                <div class="button-container">
-                  <v-btn secondary block @click="open(item.link)">Open</v-btn>
-                </div>
-              </v-layout>
-            </v-flex>
-          </v-layout>
-        </v-flex>
-      </v-layout>
-    </v-container>
-  </v-container>
+    v-container(fluid v-else)
+      v-layout(row wrap).news-container
+        v-flex(xs12).refresh-button-container
+          v-btn(icon @click="refresh()").refresh-button
+            v-icon(large) refresh
+        virtual-list(:size="220", :remain="4").list-container
+          news(v-for="item in $store.state.news", :item="item", :key="item.title")
 </template>
 
 <script>
   export default {
-    data () {
-      return {}
-    },
     methods: {
-      open (link) {
-        this.$store.dispatch('openNewsLink', link)
-      },
       refresh () {
         this.$store.dispatch('refreshNews')
       }
@@ -71,69 +37,14 @@
     display: inline-block;
   }
 
-  /* Needed */
-  .icon--large
-  {
-    height: 2.5rem;
-  }
-
   /* ---------- ELEM ---------- */
   .news-container
   {
-    padding: 0 2% 1% 2%;
+    padding: 0 0 1% 1%;
   }
 
-  .elem
+  .list-container
   {
-    position: relative;
-    margin-bottom: 15px;
-    padding: 0;
-    background-color: rgb(60, 60, 60);
-  }
-
-  .elem:hover
-  {
-    transition: all 0.25s;
-    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
-    0 8px 10px 1px rgba(0, 0, 0, 0.14),
-    0 3px 14px 2px rgba(0, 0, 0, 0.12) !important;
-  }
-
-  .title
-  {
-    line-height: 24px;
-    margin-top: 10px;
-    padding-left: 2%;
-    padding-right: 2%;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  .image
-  {
-    height: 220px;
-    max-width: 100%;
-  }
-
-  .synopsis
-  {
-    padding-top: 2%;
-    height: 150px;
-  }
-
-  .link
-  {
-    height: 50%;
-    width: 100%;
-    text-align: right;
-    display: inline-block;
-    padding: 0 5% 0 10%;
-  }
-
-  .button-container
-  {
-    display: inline-block;
-    width: 15%;
+    padding-right: 10px;
   }
 </style>