Skip to content

Commit 56d3daf

Browse files
yyx990803yyx990803
committed
spinner position
1 parent 987a628 commit 56d3daf

File tree

6 files changed

+48
-39
lines changed

6 files changed

+48
-39
lines changed

‎src/components/Item.vue

+3-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<span class="title">
55
<template v-if="item.url">
66
<a :href="item.url" target="_blank">{{ item.title }}</a>
7-
<span>({{ item.url | host }})</span>
7+
<span class="host">({{ item.url | host }})</span>
88
</template>
99
<template v-else>
1010
<router-link :to="'/item/' + item.id">{{ item.title }}</router-link>
@@ -22,6 +22,7 @@
2222
| <router-link :to="'/item/' + item.id">{{ item.descendants }} comments</router-link>
2323
</span>
2424
</span>
25+
<span class="label" v-if="item.type !== 'story'">{{ item.type }}</span>
2526
</li>
2627
</template>
2728

@@ -49,7 +50,7 @@ export default {
4950
width 80px
5051
text-align center
5152
margin-top -10px
52-
.meta
53+
.meta, .host
5354
font-size .85em
5455
color #999
5556
a

‎src/components/ItemList.vue

+1-6
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<template>
22
<div class="news">
3+
<spinner :show="loading"></spinner>
34
<div class="news-list-nav">
45
<router-link v-if="page > 1" :to="'/' + type + '/' + (page - 1)">&lt; prev</router-link>
56
<a v-else class="disabled">&lt; prev</a>
67
<span>{{ page }}/{{ maxPage }}</span>
78
<router-link v-if="hasMore" :to="'/' + type + '/' + (page + 1)">more &gt;</router-link>
89
<a v-else class="disabled">more &gt;</a>
9-
<spinner :show="loading"></spinner>
1010
</div>
1111
<transition :name="transition">
1212
<div class="news-list" :key="displayedPage" v-if="displayedPage > 0">
@@ -124,11 +124,6 @@ export default {
124124
margin 0 1em
125125
.disabled
126126
color #ccc
127-
.spinner
128-
position absolute
129-
top 50%
130-
left 50%
131-
transform translate(-50%, -50%)
132127
133128
.news-list
134129
position absolute

‎src/components/Spinner.vue

+3
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,9 @@ $offset = 126
1515
$duration = 1.4s
1616
1717
.spinner
18+
position fixed
19+
right 15px
20+
bottom 15px
1821
opacity 0
1922
transition opacity .15s ease
2023
animation rotator $duration linear infinite

‎src/router/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,6 @@ export default new Router({
1818
{ path: '/job/:page(\\d+)?', component: createListView('job') },
1919
{ path: '/item/:id(\\d+)', component: ItemView },
2020
{ path: '/user/:id', component: UserView },
21-
{ path: '*', redirect: '/top/1' }
21+
{ path: '*', redirect: '/top' }
2222
]
2323
})

‎src/views/ItemView.vue

+20-16
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,28 @@
11
<template>
22
<div class="item-view" v-if="item">
3-
<div class="item-view-header">
4-
<a :href="item.url" target="_blank">
5-
<h2>{{ item.title }}</h2>
6-
</a>
7-
<span v-if="item.url">({{ item.url | host }})</span>
8-
<p>
9-
{{ item.score }} points
10-
| by <router-link :to="'/user/' + item.by">{{ item.by }}</router-link>
11-
{{ item.time | timeAgo }} ago
12-
| {{ item.descendants }} comments
13-
</p>
14-
</div>
15-
<ul v-if="item.kids" class="item-view-comments">
16-
<comment v-for="id in item.kids" :id="id"></comment>
17-
</ul>
3+
<spinner :show="!item"></spinner>
4+
<template v-if="item">
5+
<div class="item-view-header">
6+
<a :href="item.url" target="_blank">
7+
<h2>{{ item.title }}</h2>
8+
</a>
9+
<span v-if="item.url">({{ item.url | host }})</span>
10+
<p>
11+
{{ item.score }} points
12+
| by <router-link :to="'/user/' + item.by">{{ item.by }}</router-link>
13+
{{ item.time | timeAgo }} ago
14+
| {{ item.descendants }} comments
15+
</p>
16+
</div>
17+
<ul v-if="item.kids" class="item-view-comments">
18+
<comment v-for="id in item.kids" :id="id"></comment>
19+
</ul>
20+
</template>
1821
</div>
1922
</template>
2023

2124
<script>
25+
import Spinner from '../components/Spinner.vue'
2226
import Comment from '../components/Comment.vue'
2327
2428
function fetchItem (store) {
@@ -29,7 +33,7 @@ function fetchItem (store) {
2933
3034
export default {
3135
name: 'item-view',
32-
components: { Comment },
36+
components: { Spinner, Comment },
3337
computed: {
3438
item () {
3539
return this.$store.state.items[this.$route.params.id]

‎src/views/UserView.vue

+20-14
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,27 @@
11
<template>
2-
<div class="user-view" v-if="user">
3-
<ul>
4-
<li><span class="label">user:</span> {{ user.id }}</li>
5-
<li><span class="label">created:</span> {{ user.created | timeAgo }} ago</li>
6-
<li><span class="label">karma:</span> {{user.karma}}</li>
7-
<li>
8-
<span class="label">about:</span>
9-
<div class="about" v-html="user.about"></div>
10-
</li>
11-
</ul>
12-
<p class="links">
13-
<a :href="'https://news.ycombinator.com/submitted?id=' + user.id">submissions</a><br>
14-
<a :href="'https://news.ycombinator.com/threads?id=' + user.id">comments</a>
15-
</p>
2+
<div class="user-view">
3+
<spinner :show="!user"></spinner>
4+
<template v-if="user">
5+
<ul>
6+
<li><span class="label">user:</span> {{ user.id }}</li>
7+
<li><span class="label">created:</span> {{ user.created | timeAgo }} ago</li>
8+
<li><span class="label">karma:</span> {{user.karma}}</li>
9+
<li>
10+
<span class="label">about:</span>
11+
<div class="about" v-html="user.about"></div>
12+
</li>
13+
</ul>
14+
<p class="links">
15+
<a :href="'https://news.ycombinator.com/submitted?id=' + user.id">submissions</a><br>
16+
<a :href="'https://news.ycombinator.com/threads?id=' + user.id">comments</a>
17+
</p>
18+
</template>
1619
</div>
1720
</template>
1821

1922
<script>
23+
import Spinner from '../components/Spinner.vue'
24+
2025
function fetchUser (store) {
2126
return store.dispatch('FETCH_USER', {
2227
id: store.state.route.params.id
@@ -25,6 +30,7 @@ function fetchUser (store) {
2530
2631
export default {
2732
name: 'user-view',
33+
components: { Spinner },
2834
computed: {
2935
user () {
3036
return this.$store.state.users[this.$route.params.id]

0 commit comments

Comments
 (0)