Skip to content

N
node-sample
Commit 987a6283 authored by Evan You's avatar Evan You
Browse files
Options

styling wip

parent 61426829
Show whitespace changes
Inline Side-by-side
Showing with 122 additions and 72 deletions
index.html
View file @ 987a6283
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>vue-hackernews-2.0</title> <title>vue-hackernews-2.0</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'>
{{ STYLE }} {{ STYLE }}
</head> </head>
<body> <body>
......
src/App.vue
View file @ 987a6283
<template> <template>
<div id="app"> <div id="app">
<div class="header"> <div class="header">
<a href="http://vuejs.org" target="_blank"> <div class="inner">
<img class="logo" src="./assets/logo.png"> <router-link to="/" exact>
</a> <img class="logo" src="./assets/logo.png" alt="logo">
</router-link>
<router-link to="/top">Top</router-link> <router-link to="/top">Top</router-link>
<router-link to="/new">New</router-link> <router-link to="/new">New</router-link>
<router-link to="/show">Show</router-link> <router-link to="/show">Show</router-link>
<router-link to="/ask">Ask</router-link> <router-link to="/ask">Ask</router-link>
<router-link to="/job">Jobs</router-link> <router-link to="/job">Jobs</router-link>
<router-link to="/about">About</router-link> <a class="github" href="https://github.com/vuejs/vue-hackernews-2.0" target="_blank">
Built with Vue.js
</a>
</div>
</div> </div>
<transition name="fade" mode="out-in"> <transition name="fade" mode="out-in">
<router-view></router-view> <router-view class="view"></router-view>
</transition> </transition>
</div> </div>
</template> </template>
...@@ -20,21 +24,62 @@ ...@@ -20,21 +24,62 @@
<style lang="stylus"> <style lang="stylus">
body body
font-family Roboto, Helvetica, sans-serif font-family Roboto, Helvetica, sans-serif
font-size 15px
background-color lighten(#eceef1, 30%)
margin 0
padding-top 100px
color #34495e
a
color #34495e
text-decoration none
.header
background-color #ff6600
position fixed
z-index 999
top 0
left 0
right 0
.inner
max-width 800px
box-sizing border-box
margin 0px auto
padding 15px 5px
a
color rgba(255, 255, 255, .8)
line-height 24px
transition color .15s ease
display inline-block
vertical-align middle
font-weight 300
letter-spacing .075em
margin-right 1.8em
&:hover
color #fff
&.router-link-active
color #fff
font-weight 400
.github
color #fff
font-size .9em
margin 0
float right
.logo .logo
width 30px width 24px
margin-right 10px
display inline-block
vertical-align middle
.view
max-width 800px
margin 0 auto
position relative
.fade-enter-active, .fade-leave-active .fade-enter-active, .fade-leave-active
transition all .2s ease transition all .2s ease
.fade-enter, .fade-leave-active .fade-enter, .fade-leave-active
opacity 0 opacity 0
a
color #333
transition color .15s ease
&.router-link-active
color #4fc08d
&.disabled
color #999
</style> </style>
src/assets/logo.png
View replaced file @ 61426829 View file @ 987a6283
src/assets/logo.png

6.69 KB | W: | H:

src/assets/logo.png

5.23 KB | W: | H:

src/assets/logo.png
src/assets/logo.png
src/assets/logo.png
src/assets/logo.png
  • 2-up
  • Swipe
  • Onion skin
src/components/Item.vue
View file @ 987a6283
...@@ -35,5 +35,26 @@ export default { ...@@ -35,5 +35,26 @@ export default {
<style lang="stylus"> <style lang="stylus">
.news-item .news-item
background-color #fff background-color #fff
margin 10px 0 padding 20px 30px 20px 80px
border-bottom 1px solid #eee
position relative
line-height 20px
.score
color #ff6600
font-size 1.1em
font-weight 700
position absolute
top 50%
left 0
width 80px
text-align center
margin-top -10px
.meta
font-size .85em
color #999
a
color #999
text-decoration underline
&:hover
color #ff6600
</style> </style>
src/components/ItemList.vue
View file @ 987a6283
<template> <template>
<div> <div class="news">
<ul class="news-list-nav"> <div class="news-list-nav">
<li> <router-link v-if="page > 1" :to="'/' + type + '/' + (page - 1)">&lt; prev</router-link>
<router-link v-if="page > 1" :to="'/' + type + '/' + (page - 1)">prev</router-link> <a v-else class="disabled">&lt; prev</a>
<a v-else class="disabled">prev</a> <span>{{ page }}/{{ maxPage }}</span>
</li> <router-link v-if="hasMore" :to="'/' + type + '/' + (page + 1)">more &gt;</router-link>
<li> <a v-else class="disabled">more &gt;</a>
<router-link v-if="hasMore" :to="'/' + type + '/' + (page + 1)">more...</router-link>
<a v-else class="disabled">more...</a>
</li>
<li>
<spinner :show="loading"></spinner> <spinner :show="loading"></spinner>
</li> </div>
</ul>
<transition :name="transition"> <transition :name="transition">
<div class="news-list" :key="displayedPage"> <div class="news-list" :key="displayedPage" v-if="displayedPage > 0">
<transition-group tag="ul" name="item"> <transition-group tag="ul" name="item">
<item v-for="item in displayedItems" :key="item.id" :item="item"> <item v-for="item in displayedItems" :key="item.id" :item="item">
</item> </item>
...@@ -112,9 +107,38 @@ export default { ...@@ -112,9 +107,38 @@ export default {
</script> </script>
<style lang="stylus"> <style lang="stylus">
.news-list-nav, .news-list
background-color #fff
border-radius 2px
.news-list-nav
padding 15px 30px
position fixed
text-align center
top 55px
left 0
right 0
z-index 998
box-shadow 0 1px 2px rgba(0,0,0,.1)
a
margin 0 1em
.disabled
color #ccc
.spinner
position absolute
top 50%
left 50%
transform translate(-50%, -50%)
.news-list .news-list
position absolute position absolute
margin 30px 0
width 100%
transition all .5s cubic-bezier(.55,0,.1,1) transition all .5s cubic-bezier(.55,0,.1,1)
ul
list-style-type none
padding 0
margin 0
.slide-left-enter, .slide-right-leave-active .slide-left-enter, .slide-right-leave-active
opacity 0 opacity 0
......
src/components/Spinner.vue
View file @ 987a6283
...@@ -31,7 +31,7 @@ $duration = 1.4s ...@@ -31,7 +31,7 @@ $duration = 1.4s
transform scale(0.5) rotate(270deg) transform scale(0.5) rotate(270deg)
.spinner .path .spinner .path
stroke #4fc08d stroke #ff6600
stroke-dasharray $offset stroke-dasharray $offset
stroke-dashoffset 0 stroke-dashoffset 0
transform-origin center transform-origin center
......
src/router/index.js
View file @ 987a6283
...@@ -6,10 +6,10 @@ Vue.use(Router) ...@@ -6,10 +6,10 @@ Vue.use(Router)
import { createListView } from '../views/CreateListView' import { createListView } from '../views/CreateListView'
import ItemView from '../views/ItemView.vue' import ItemView from '../views/ItemView.vue'
import UserView from '../views/UserView.vue' import UserView from '../views/UserView.vue'
import AboutView from '../views/AboutView.vue'
export default new Router({ export default new Router({
mode: 'history', mode: 'history',
scrollBehavior: () => ({ y: 0 }),
routes: [ routes: [
{ path: '/top/:page(\\d+)?', component: createListView('top') }, { path: '/top/:page(\\d+)?', component: createListView('top') },
{ path: '/new/:page(\\d+)?', component: createListView('new') }, { path: '/new/:page(\\d+)?', component: createListView('new') },
...@@ -18,7 +18,6 @@ export default new Router({ ...@@ -18,7 +18,6 @@ export default new Router({
{ path: '/job/:page(\\d+)?', component: createListView('job') }, { path: '/job/:page(\\d+)?', component: createListView('job') },
{ path: '/item/:id(\\d+)', component: ItemView }, { path: '/item/:id(\\d+)', component: ItemView },
{ path: '/user/:id', component: UserView }, { path: '/user/:id', component: UserView },
{ path: '/about', component: AboutView },
{ path: '*', redirect: '/top/1' } { path: '*', redirect: '/top/1' }
] ]
}) })
src/views/AboutView.vue deleted 100644 → 0
View file @ 61426829
<template>
<div>
<h2>vue-hackernews-2.0</h2>
<p>is a demo project built with the following technologies:</p>
<ul>
<li>Vue 2.0</li>
<li>vue-router 2.0</li>
<li>vuex 2.0</li>
<li>Webpack 2.0</li>
</ul>
<p>Check out <a href="https://github.com/vuejs/vue/wiki/Vue-2.0-Beta---Starter-Resources" target="_blank">this guide</a> for getting started on Vue 2.0.</p>
<p>This project showcases these features:</p>
<ul>
<li>
Single file Vue components with:
<ul>
<li>Hot-reload during development</li>
<li>Stylus for CSS pre-processing</li>
<li>CSS extraction for production</li>
</ul>
</li>
<li>
Server-Side Rendering with:
<ul>
<li>Universal application code</li>
<li>Server-side data pre-fetching</li>
<li>Client-side DOM re-hydration</li>
</ul>
</li>
<li>Powerful yet easy-to-use animation system (wait for the lists to update in realtime!)</li>
</ul>
<p><a href="https://github.com/vuejs/vue-hackernews-2.0" target="_blank">Source code on GitHub.</a></p>
</div>
</template>
<script>
export default {
name: 'about-view'
}
</script>
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