spinner position

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

 <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

 <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

 <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]