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

yyx990803 · yyx990803 · commit bbdf57e832f9 · 2017-01-19T23:49:00.000-05:00
This reverts commit b04ea0c.
diff --git a/src/App.vue b/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
 
diff --git a/src/components/ItemList.vue b/src/components/ItemList.vue
@@ -1,7 +1,13 @@
 <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
diff --git a/src/components/NewsListNav.vue b/src/components/NewsListNav.vue
