Commit eb6450f8 authored by Evan You's avatar Evan You

adjust layout

parent af4efdd4
<template>
<div id="app">
<div class="header">
<a href="http://vuejs.org" target="_blank">
<img class="logo" src="./assets/logo.png">
<ul>
<li>
<router-link v-if="page > 1" :to="'/news/' + (page - 1)">prev</router-link>
<a v-else class="disabled">prev</a>
</li>
<li>
<router-link v-if="hasMore" :to="'/news/' + (page + 1)">more...</router-link>
<a v-else class="disabled">more...</a>
</li>
<li><router-link to="/about">About</router-link></li>
</ul>
</a>
<router-link to="/">News</router-link>
<router-link to="/about">About</router-link>
</div>
<transition name="view" mode="out-in">
<router-view class="view"></router-view>
......@@ -20,20 +13,6 @@
</div>
</template>
<script>
export default {
computed: {
page () {
return Number(this.$route.params.page)
},
hasMore () {
const { storiesPerPage, topStoryIds } = this.$store.state
return this.page < Math.ceil(topStoryIds.length / storiesPerPage)
}
}
}
</script>
<style>
body {
font-family: Roboto, Helvetica, sans-serif;
......
<template>
<div>
<h2>News</h2>
<ul>
<li>
<router-link v-if="page > 1" :to="'/news/' + (page - 1)">prev</router-link>
<a v-else class="disabled">prev</a>
</li>
<li>
<router-link v-if="hasMore" :to="'/news/' + (page + 1)">more...</router-link>
<a v-else class="disabled">more...</a>
</li>
</ul>
<transition :name="transition">
<div class="news-list" :key="$route.params.page">
<transition-group tag="ul" name="item">
......@@ -35,6 +45,13 @@ export default {
computed: {
news () {
return this.$store.getters.news
},
page () {
return Number(this.$route.params.page)
},
hasMore () {
const { storiesPerPage, topStoryIds } = this.$store.state
return this.page < Math.ceil(topStoryIds.length / storiesPerPage)
}
},
created () {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment