Skip to content

Commit 987a628

Browse files
yyx990803yyx990803
committed
styling wip
1 parent 6142682 commit 987a628

File tree

8 files changed

+128
-78
lines changed

8 files changed

+128
-78
lines changed

‎index.html

+1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<meta charset="utf-8">
55
<title>vue-hackernews-2.0</title>
66
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
7+
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'>
78
{{ STYLE }}
89
</head>
910
<body>

‎src/App.vue

+64-19
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,85 @@
11
<template>
22
<div id="app">
33
<div class="header">
4-
<a href="http://vuejs.org" target="_blank">
5-
<img class="logo" src="./assets/logo.png">
6-
</a>
7-
<router-link to="/top">Top</router-link>
8-
<router-link to="/new">New</router-link>
9-
<router-link to="/show">Show</router-link>
10-
<router-link to="/ask">Ask</router-link>
11-
<router-link to="/job">Jobs</router-link>
12-
<router-link to="/about">About</router-link>
4+
<div class="inner">
5+
<router-link to="/" exact>
6+
<img class="logo" src="./assets/logo.png" alt="logo">
7+
</router-link>
8+
<router-link to="/top">Top</router-link>
9+
<router-link to="/new">New</router-link>
10+
<router-link to="/show">Show</router-link>
11+
<router-link to="/ask">Ask</router-link>
12+
<router-link to="/job">Jobs</router-link>
13+
<a class="github" href="https://github.com/vuejs/vue-hackernews-2.0" target="_blank">
14+
Built with Vue.js
15+
</a>
16+
</div>
1317
</div>
1418
<transition name="fade" mode="out-in">
15-
<router-view></router-view>
19+
<router-view class="view"></router-view>
1620
</transition>
1721
</div>
1822
</template>
1923

2024
<style lang="stylus">
2125
body
2226
font-family Roboto, Helvetica, sans-serif
27+
font-size 15px
28+
background-color lighten(#eceef1, 30%)
29+
margin 0
30+
padding-top 100px
31+
color #34495e
32+
33+
a
34+
color #34495e
35+
text-decoration none
36+
37+
.header
38+
background-color #ff6600
39+
position fixed
40+
z-index 999
41+
top 0
42+
left 0
43+
right 0
44+
.inner
45+
max-width 800px
46+
box-sizing border-box
47+
margin 0px auto
48+
padding 15px 5px
49+
a
50+
color rgba(255, 255, 255, .8)
51+
line-height 24px
52+
transition color .15s ease
53+
display inline-block
54+
vertical-align middle
55+
font-weight 300
56+
letter-spacing .075em
57+
margin-right 1.8em
58+
&:hover
59+
color #fff
60+
&.router-link-active
61+
color #fff
62+
font-weight 400
63+
.github
64+
color #fff
65+
font-size .9em
66+
margin 0
67+
float right
2368
2469
.logo
25-
width 30px
70+
width 24px
71+
margin-right 10px
72+
display inline-block
73+
vertical-align middle
74+
75+
.view
76+
max-width 800px
77+
margin 0 auto
78+
position relative
2679
2780
.fade-enter-active, .fade-leave-active
2881
transition all .2s ease
2982
3083
.fade-enter, .fade-leave-active
3184
opacity 0
32-
33-
a
34-
color #333
35-
transition color .15s ease
36-
&.router-link-active
37-
color #4fc08d
38-
&.disabled
39-
color #999
4085
</style>

‎src/assets/logo.png

-1.46 KB
Loading

‎src/components/Item.vue

+22-1
Original file line numberDiff line numberDiff line change
@@ -35,5 +35,26 @@ export default {
3535
<style lang="stylus">
3636
.news-item
3737
background-color #fff
38-
margin 10px 0
38+
padding 20px 30px 20px 80px
39+
border-bottom 1px solid #eee
40+
position relative
41+
line-height 20px
42+
.score
43+
color #ff6600
44+
font-size 1.1em
45+
font-weight 700
46+
position absolute
47+
top 50%
48+
left 0
49+
width 80px
50+
text-align center
51+
margin-top -10px
52+
.meta
53+
font-size .85em
54+
color #999
55+
a
56+
color #999
57+
text-decoration underline
58+
&:hover
59+
color #ff6600
3960
</style>

‎src/components/ItemList.vue

+39-15
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,15 @@
11
<template>
2-
<div>
3-
<ul class="news-list-nav">
4-
<li>
5-
<router-link v-if="page > 1" :to="'/' + type + '/' + (page - 1)">prev</router-link>
6-
<a v-else class="disabled">prev</a>
7-
</li>
8-
<li>
9-
<router-link v-if="hasMore" :to="'/' + type + '/' + (page + 1)">more...</router-link>
10-
<a v-else class="disabled">more...</a>
11-
</li>
12-
<li>
13-
<spinner :show="loading"></spinner>
14-
</li>
15-
</ul>
2+
<div class="news">
3+
<div class="news-list-nav">
4+
<router-link v-if="page > 1" :to="'/' + type + '/' + (page - 1)">&lt; prev</router-link>
5+
<a v-else class="disabled">&lt; prev</a>
6+
<span>{{ page }}/{{ maxPage }}</span>
7+
<router-link v-if="hasMore" :to="'/' + type + '/' + (page + 1)">more &gt;</router-link>
8+
<a v-else class="disabled">more &gt;</a>
9+
<spinner :show="loading"></spinner>
10+
</div>
1611
<transition :name="transition">
17-
<div class="news-list" :key="displayedPage">
12+
<div class="news-list" :key="displayedPage" v-if="displayedPage > 0">
1813
<transition-group tag="ul" name="item">
1914
<item v-for="item in displayedItems" :key="item.id" :item="item">
2015
</item>
@@ -112,9 +107,38 @@ export default {
112107
</script>
113108

114109
<style lang="stylus">
110+
.news-list-nav, .news-list
111+
background-color #fff
112+
border-radius 2px
113+
114+
.news-list-nav
115+
padding 15px 30px
116+
position fixed
117+
text-align center
118+
top 55px
119+
left 0
120+
right 0
121+
z-index 998
122+
box-shadow 0 1px 2px rgba(0,0,0,.1)
123+
a
124+
margin 0 1em
125+
.disabled
126+
color #ccc
127+
.spinner
128+
position absolute
129+
top 50%
130+
left 50%
131+
transform translate(-50%, -50%)
132+
115133
.news-list
116134
position absolute
135+
margin 30px 0
136+
width 100%
117137
transition all .5s cubic-bezier(.55,0,.1,1)
138+
ul
139+
list-style-type none
140+
padding 0
141+
margin 0
118142
119143
.slide-left-enter, .slide-right-leave-active
120144
opacity 0

‎src/components/Spinner.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ $duration = 1.4s
3131
transform scale(0.5) rotate(270deg)
3232
3333
.spinner .path
34-
stroke #4fc08d
34+
stroke #ff6600
3535
stroke-dasharray $offset
3636
stroke-dashoffset 0
3737
transform-origin center

‎src/router/index.js

+1-2
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@ Vue.use(Router)
66
import { createListView } from '../views/CreateListView'
77
import ItemView from '../views/ItemView.vue'
88
import UserView from '../views/UserView.vue'
9-
import AboutView from '../views/AboutView.vue'
109

1110
export default new Router({
1211
mode: 'history',
12+
scrollBehavior: () => ({ y: 0 }),
1313
routes: [
1414
{ path: '/top/:page(\\d+)?', component: createListView('top') },
1515
{ path: '/new/:page(\\d+)?', component: createListView('new') },
@@ -18,7 +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: '/about', component: AboutView },
2221
{ path: '*', redirect: '/top/1' }
2322
]
2423
})

‎src/views/AboutView.vue

-40
This file was deleted.

0 commit comments

Comments
 (0)