Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jan 18, 2017
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
225d4ab
Make NewsListNav standalone component
Oct 22, 2016
817513b
UI improvement: add 2nd NewsListNav to the bottom, make 1st movable
Oct 22, 2016
281f7e8
Use kebab-case
limonte Jan 18, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 1 addition & 6 deletions src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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

Expand Down
41 changes: 7 additions & 34 deletions src/components/ItemList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,7 @@
<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">
Expand All @@ -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'

Expand All @@ -29,6 +25,7 @@ export default {

components: {
Spinner,
NewsListNav,
Item
},

Expand Down Expand Up @@ -57,9 +54,6 @@ export default {
maxPage () {
const { itemsPerPage, lists } = this.$store.state
return Math.ceil(lists[this.type].length / itemsPerPage)
},
hasMore () {
return this.page < this.maxPage
}
},

Expand Down Expand Up @@ -107,31 +101,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
Expand Down
39 changes: 39 additions & 0 deletions src/components/NewsListNav.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
<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>