From 225d4ab157c5c5402d1c175da890a7806492ec0e Mon Sep 17 00:00:00 2001
From: Limon Monte <limon.monte@gmail.com>
Date: Sat, 22 Oct 2016 17:30:11 +0200
Subject: [PATCH 1/3] Make NewsListNav standalone component

---
 src/components/ItemList.vue    | 31 +++---------------------
 src/components/NewsListNav.vue | 43 ++++++++++++++++++++++++++++++++++
 2 files changed, 46 insertions(+), 28 deletions(-)
 create mode 100644 src/components/NewsListNav.vue

diff --git a/src/components/ItemList.vue b/src/components/ItemList.vue
index d4d0b2382..50cc37855 100644
--- a/src/components/ItemList.vue
+++ b/src/components/ItemList.vue
@@ -1,13 +1,7 @@
 <template>
   <div class="news-view">
     <spinner :show="loading"></spinner>
-    <div class="news-list-nav">
-      <router-link v-if="page > 1" :to="'/' + type + '/' + (page - 1)">&lt; prev</router-link>
-      <a v-else class="disabled">&lt; prev</a>
-      <span>{{ page }}/{{ maxPage }}</span>
-      <router-link v-if="hasMore" :to="'/' + type + '/' + (page + 1)">more &gt;</router-link>
-      <a v-else class="disabled">more &gt;</a>
-    </div>
+    <newsListNav :page="page" :maxPage="maxPage" :type="type"></newsListNav>
     <transition :name="transition">
       <div class="news-list" :key="displayedPage" v-if="displayedPage > 0">
         <transition-group tag="ul" name="item">
@@ -21,6 +15,7 @@
 
 <script>
 import Spinner from './Spinner.vue'
+import NewsListNav from './NewsListNav.vue'
 import Item from './Item.vue'
 import { watchList } from '../store/api'
 
@@ -29,6 +24,7 @@ export default {
 
   components: {
     Spinner,
+    NewsListNav,
     Item
   },
 
@@ -57,9 +53,6 @@ export default {
     maxPage () {
       const { itemsPerPage, lists } = this.$store.state
       return Math.ceil(lists[this.type].length / itemsPerPage)
-    },
-    hasMore () {
-      return this.page < this.maxPage
     }
   },
 
@@ -110,24 +103,6 @@ export default {
 .news-view
   padding-top 45px
 
-.news-list-nav, .news-list
-  background-color #fff
-  border-radius 2px
-
-.news-list-nav
-  padding 15px 30px
-  position fixed
-  text-align center
-  top 55px
-  left 0
-  right 0
-  z-index 998
-  box-shadow 0 1px 2px rgba(0,0,0,.1)
-  a
-    margin 0 1em
-  .disabled
-    color #ccc
-
 .news-list
   position absolute
   margin 30px 0
diff --git a/src/components/NewsListNav.vue b/src/components/NewsListNav.vue
new file mode 100644
index 000000000..38c9ae46e
--- /dev/null
+++ b/src/components/NewsListNav.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="news-list-nav">
+    <router-link v-if="page > 1" :to="'/' + type + '/' + (page - 1)">&lt; prev</router-link>
+    <a v-else class="disabled">&lt; prev</a>
+    <span>{{ page }}/{{ maxPage }}</span>
+    <router-link v-if="hasMore" :to="'/' + type + '/' + (page + 1)">more &gt;</router-link>
+    <a v-else class="disabled">more &gt;</a>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'news-list-nav',
+
+  props: ['page', 'maxPage', 'type'],
+
+  computed: {
+    hasMore () {
+      return this.page < this.maxPage
+    }
+  }
+}
+</script>
+
+<style lang="stylus">
+.news-list-nav, .news-list
+  background-color #fff
+  border-radius 2px
+
+.news-list-nav
+  padding 15px 30px
+  position fixed
+  text-align center
+  top 55px
+  left 0
+  right 0
+  z-index 998
+  box-shadow 0 1px 2px rgba(0,0,0,.1)
+  a
+    margin 0 1em
+  .disabled
+    color #ccc
+</style>
\ No newline at end of file

From 817513b6887932280f25d72d0c096dcbed62404c Mon Sep 17 00:00:00 2001
From: Limon Monte <limon.monte@gmail.com>
Date: Sat, 22 Oct 2016 17:49:46 +0200
Subject: [PATCH 2/3] UI improvement: add 2nd NewsListNav to the bottom, make
 1st movable

---
 src/App.vue                    |  7 +------
 src/components/ItemList.vue    | 12 +++++-------
 src/components/NewsListNav.vue |  6 +-----
 3 files changed, 7 insertions(+), 18 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 9e68e1492..69e72ad36 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -16,7 +16,7 @@
       </div>
     </div>
     <transition name="fade" mode="out-in">
-      <router-view class="view"></router-view>
+      <router-view></router-view>
     </transition>
   </div>
 </template>
@@ -74,11 +74,6 @@ a
   display inline-block
   vertical-align middle
 
-.view
-  max-width 800px
-  margin 0 auto
-  position relative
-
 .fade-enter-active, .fade-leave-active
   transition all .2s ease
 
diff --git a/src/components/ItemList.vue b/src/components/ItemList.vue
index 50cc37855..59220411f 100644
--- a/src/components/ItemList.vue
+++ b/src/components/ItemList.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="news-view">
+  <div>
     <spinner :show="loading"></spinner>
-    <newsListNav :page="page" :maxPage="maxPage" :type="type"></newsListNav>
+    <newsListNav :page="page" :maxPage="maxPage" :type="type" v-if="displayedPage > 0"></newsListNav>
     <transition :name="transition">
       <div class="news-list" :key="displayedPage" v-if="displayedPage > 0">
         <transition-group tag="ul" name="item">
@@ -10,6 +10,7 @@
         </transition-group>
       </div>
     </transition>
+    <newsListNav :page="page" :maxPage="maxPage" :type="type" v-if="displayedPage > 0"></newsListNav>
   </div>
 </template>
 
@@ -100,13 +101,10 @@ export default {
 </script>
 
 <style lang="stylus">
-.news-view
-  padding-top 45px
-
 .news-list
-  position absolute
-  margin 30px 0
   width 100%
+  max-width 800px
+  margin 30px auto
   transition all .5s cubic-bezier(.55,0,.1,1)
   ul
     list-style-type none
diff --git a/src/components/NewsListNav.vue b/src/components/NewsListNav.vue
index 38c9ae46e..b9a3321cb 100644
--- a/src/components/NewsListNav.vue
+++ b/src/components/NewsListNav.vue
@@ -29,15 +29,11 @@ export default {
 
 .news-list-nav
   padding 15px 30px
-  position fixed
   text-align center
-  top 55px
-  left 0
-  right 0
   z-index 998
   box-shadow 0 1px 2px rgba(0,0,0,.1)
   a
     margin 0 1em
   .disabled
     color #ccc
-</style>
\ No newline at end of file
+</style>

From 281f7e887ff7ae27baf8cc299c79d0e297b5ffd6 Mon Sep 17 00:00:00 2001
From: Limon Monte <limonte@users.noreply.github.com>
Date: Wed, 18 Jan 2017 09:58:05 +0200
Subject: [PATCH 3/3] Use kebab-case

---
 src/components/ItemList.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ItemList.vue b/src/components/ItemList.vue
index 59220411f..cb18d417e 100644
--- a/src/components/ItemList.vue
+++ b/src/components/ItemList.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <spinner :show="loading"></spinner>
-    <newsListNav :page="page" :maxPage="maxPage" :type="type" v-if="displayedPage > 0"></newsListNav>
+    <news-list-nav :page="page" :maxPage="maxPage" :type="type" v-if="displayedPage > 0"></news-list-nav>
     <transition :name="transition">
       <div class="news-list" :key="displayedPage" v-if="displayedPage > 0">
         <transition-group tag="ul" name="item">
@@ -10,7 +10,7 @@
         </transition-group>
       </div>
     </transition>
-    <newsListNav :page="page" :maxPage="maxPage" :type="type" v-if="displayedPage > 0"></newsListNav>
+    <news-list-nav :page="page" :maxPage="maxPage" :type="type" v-if="displayedPage > 0"></news-list-nav>
   </div>
 </template>