Improve UI by adding 2nd paginator and making 1st one movable (#54)

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>
@@ -76,11 +76,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
 

src/components/ItemList.vue

 <template>
-  <div class="news-view">
+  <div>
     <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>
+    <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">
@@ -16,11 +10,13 @@
         </transition-group>
       </div>
     </transition>
+    <news-list-nav :page="page" :maxPage="maxPage" :type="type" v-if="displayedPage > 0"></news-list-nav>
   </div>
 </template>
 
 <script>
 import Spinner from './Spinner.vue'
+import NewsListNav from './NewsListNav.vue'
 import Item from './Item.vue'
 import { watchList } from '../store/api'
 
@@ -31,6 +27,7 @@ export default {
 
   components: {
     Spinner,
+    NewsListNav,
     Item
   },
 
@@ -60,9 +57,6 @@ export default {
     maxPage () {
       const { itemsPerPage, lists } = this.$store.state
       return Math.ceil(lists[this.type].length / itemsPerPage)
-    },
-    hasMore () {
-      return this.page < this.maxPage
     }
   },
 
@@ -112,31 +106,10 @@ export default {
 </script>
 
 <style lang="stylus">
-.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
   width 100%
+  max-width 800px
+  margin 30px auto
   transition all .5s cubic-bezier(.55,0,.1,1)
   ul
     list-style-type none

src/components/NewsListNav.vue

+<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
+  text-align center
+  z-index 998
+  box-shadow 0 1px 2px rgba(0,0,0,.1)
+  a
+    margin 0 1em
+  .disabled
+    color #ccc
+</style>