spinner position

Author: yyx990803

src/components/Item.vue

@@ -4,7 +4,7 @@
  <span class="title">
  <template v-if="item.url">
  <a :href="item.url" target="_blank">{{ item.title }}</a>
- <span>({{ item.url | host }})</span>
+ <span class="host">({{ item.url | host }})</span>
  </template>
  <template v-else>
  <router-link :to="'/item/' + item.id">{{ item.title }}</router-link>
@@ -22,6 +22,7 @@
  | <router-link :to="'/item/' + item.id">{{ item.descendants }} comments</router-link>
  </span>
  </span>
+ <span class="label" v-if="item.type !== 'story'">{{ item.type }}</span>
  </li>
 </template>
 
@@ -49,7 +50,7 @@ export default {
  width 80px
  text-align center
  margin-top -10px
- .meta
+ .meta, .host
  font-size .85em
  color #999
  a

src/components/ItemList.vue

@@ -1,12 +1,12 @@
 <template>
  <div class="news">
+ <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>
- <spinner :show="loading"></spinner>
  </div>
  <transition :name="transition">
  <div class="news-list" :key="displayedPage" v-if="displayedPage > 0">
@@ -124,11 +124,6 @@ export default {
  margin 0 1em
  .disabled
  color #ccc
- .spinner
- position absolute
- top 50%
- left 50%
- transform translate(-50%, -50%)
 
 .news-list
  position absolute

src/components/Spinner.vue

@@ -15,6 +15,9 @@ $offset = 126
 $duration = 1.4s
 
 .spinner
+ position fixed
+ right 15px
+ bottom 15px
  opacity 0
  transition opacity .15s ease
  animation rotator $duration linear infinite

src/router/index.js

@@ -18,6 +18,6 @@ export default new Router({
  { path: '/job/:page(\\d+)?', component: createListView('job') },
  { path: '/item/:id(\\d+)', component: ItemView },
  { path: '/user/:id', component: UserView },
- { path: '*', redirect: '/top/1' }
+ { path: '*', redirect: '/top' }
  ]
 })

src/views/ItemView.vue

@@ -1,24 +1,28 @@
 <template>
  <div class="item-view" v-if="item">
- <div class="item-view-header">
- <a :href="item.url" target="_blank">
- <h2>{{ item.title }}</h2>
- </a>
- <span v-if="item.url">({{ item.url | host }})</span>
- <p>
- {{ item.score }} points
- | by <router-link :to="'/user/' + item.by">{{ item.by }}</router-link>
- {{ item.time | timeAgo }} ago
- | {{ item.descendants }} comments
- </p>
- </div>
- <ul v-if="item.kids" class="item-view-comments">
- <comment v-for="id in item.kids" :id="id"></comment>
- </ul>
+ <spinner :show="!item"></spinner>
+ <template v-if="item">
+ <div class="item-view-header">
+ <a :href="item.url" target="_blank">
+ <h2>{{ item.title }}</h2>
+ </a>
+ <span v-if="item.url">({{ item.url | host }})</span>
+ <p>
+ {{ item.score }} points
+ | by <router-link :to="'/user/' + item.by">{{ item.by }}</router-link>
+ {{ item.time | timeAgo }} ago
+ | {{ item.descendants }} comments
+ </p>
+ </div>
+ <ul v-if="item.kids" class="item-view-comments">
+ <comment v-for="id in item.kids" :id="id"></comment>
+ </ul>
+ </template>
  </div>
 </template>
 
 <script>
+import Spinner from '../components/Spinner.vue'
 import Comment from '../components/Comment.vue'
 
 function fetchItem (store) {
@@ -29,7 +33,7 @@ function fetchItem (store) {
 
 export default {
  name: 'item-view',
- components: { Comment },
+ components: { Spinner, Comment },
  computed: {
  item () {
  return this.$store.state.items[this.$route.params.id]

src/views/UserView.vue

@@ -1,22 +1,27 @@
 <template>
- <div class="user-view" v-if="user">
- <ul>
- <li><span class="label">user:</span> {{ user.id }}</li>
- <li><span class="label">created:</span> {{ user.created | timeAgo }} ago</li>
- <li><span class="label">karma:</span> {{user.karma}}</li>
- <li>
- <span class="label">about:</span>
- <div class="about" v-html="user.about"></div>
- </li>
- </ul>
- <p class="links">
- <a :href="'https://news.ycombinator.com/submitted?id=' + user.id">submissions</a><br>
- <a :href="'https://news.ycombinator.com/threads?id=' + user.id">comments</a>
- </p>
+ <div class="user-view">
+ <spinner :show="!user"></spinner>
+ <template v-if="user">
+ <ul>
+ <li><span class="label">user:</span> {{ user.id }}</li>
+ <li><span class="label">created:</span> {{ user.created | timeAgo }} ago</li>
+ <li><span class="label">karma:</span> {{user.karma}}</li>
+ <li>
+ <span class="label">about:</span>
+ <div class="about" v-html="user.about"></div>
+ </li>
+ </ul>
+ <p class="links">
+ <a :href="'https://news.ycombinator.com/submitted?id=' + user.id">submissions</a><br>
+ <a :href="'https://news.ycombinator.com/threads?id=' + user.id">comments</a>
+ </p>
+ </template>
  </div>
 </template>
 
 <script>
+import Spinner from '../components/Spinner.vue'
+
 function fetchUser (store) {
  return store.dispatch('FETCH_USER', {
  id: store.state.route.params.id
@@ -25,6 +30,7 @@ function fetchUser (store) {
 
 export default {
  name: 'user-view',
+ components: { Spinner },
  computed: {
  user () {
  return this.$store.state.users[this.$route.params.id]