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

src/App.vue

@@ -16,7 +16,7 @@
       </nav>
     </header>
     <transition name="fade" mode="out-in">
-      <router-view></router-view>
+      <router-view class="view"></router-view>
     </transition>
   </div>
 </template>
@@ -76,6 +76,11 @@ 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>
+  <div class="news-view">
     <spinner :show="loading"></spinner>
-    <news-list-nav :page="page" :maxPage="maxPage" :type="type" v-if="displayedPage > 0"></news-list-nav>
+    <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>
     <transition :name="transition">
       <div class="news-list" :key="displayedPage" v-if="displayedPage > 0">
         <transition-group tag="ul" name="item">
@@ -10,13 +16,11 @@
         </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'
 
@@ -27,7 +31,6 @@ export default {
 
   components: {
     Spinner,
-    NewsListNav,
     Item
   },
 
@@ -57,6 +60,9 @@ export default {
     maxPage () {
       const { itemsPerPage, lists } = this.$store.state
       return Math.ceil(lists[this.type].length / itemsPerPage)
+    },
+    hasMore () {
+      return this.page < this.maxPage
     }
   },
 
@@ -106,10 +112,31 @@ 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>