styling wip

987a6283 · Evan You · 61426829 · 987a6283 · 987a6283 · 61426829
Commit 987a6283 authored Aug 10, 2016 by Evan You
8 changed files
--- a/index.html
+++ b/index.html
@@ -4,6 +4,7 @@
    <meta charset="utf-8">
    <title>vue-hackernews-2.0</title>
    <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 }}
  </head>
  <body>

--- a/src/App.vue
+++ b/src/App.vue
 <template>
  <div id="app">
    <div class="header">
-      <a href="http://vuejs.org" target="_blank">
-        <img class="logo" src="./assets/logo.png">
-      </a>
+      <div class="inner">
+        <router-link to="/" exact>
+          <img class="logo" src="./assets/logo.png" alt="logo">
+        </router-link>
        <router-link to="/top">Top</router-link>
        <router-link to="/new">New</router-link>
        <router-link to="/show">Show</router-link>
        <router-link to="/ask">Ask</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>
    <transition name="fade" mode="out-in">
-      <router-view></router-view>
+      <router-view class="view"></router-view>
    </transition>
  </div>
 </template>
@@ -20,21 +24,62 @@
 <style lang="stylus">
 body
  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
-  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
  transition all .2s ease

 .fade-enter, .fade-leave-active
  opacity 0
-
-a
-  color #333
-  transition color .15s ease
-  &.router-link-active
-    color #4fc08d
-  &.disabled
-    color #999
 </style>
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/components/Item.vue
+++ b/src/components/Item.vue
@@ -35,5 +35,26 @@ export default {
 <style lang="stylus">
 .news-item
  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>
--- a/src/components/ItemList.vue
+++ b/src/components/ItemList.vue
 <template>
-  <div>
-    <ul class="news-list-nav">
-      <li>
-        <router-link v-if="page > 1" :to="'/' + type + '/' + (page - 1)">prev</router-link>
-        <a v-else class="disabled">prev</a>
-      </li>
-      <li>
-        <router-link v-if="hasMore" :to="'/' + type + '/' + (page + 1)">more...</router-link>
-        <a v-else class="disabled">more...</a>
-      </li>
-      <li>
+  <div class="news">
+    <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>
-      </li>
-    </ul>
+    </div>
    <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">
          <item v-for="item in displayedItems" :key="item.id" :item="item">
          </item>
@@ -112,9 +107,38 @@ export default {
 </script>

 <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
  position absolute
+  margin 30px 0
+  width 100%
  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
  opacity 0

--- a/src/components/Spinner.vue
+++ b/src/components/Spinner.vue
@@ -31,7 +31,7 @@ $duration = 1.4s
    transform scale(0.5) rotate(270deg)

 .spinner .path
-  stroke #4fc08d
+  stroke #ff6600
  stroke-dasharray $offset
  stroke-dashoffset 0
  transform-origin center

--- a/src/router/index.js
+++ b/src/router/index.js
@@ -6,10 +6,10 @@ Vue.use(Router)
 import { createListView } from '../views/CreateListView'
 import ItemView from '../views/ItemView.vue'
 import UserView from '../views/UserView.vue'
-import AboutView from '../views/AboutView.vue'

 export default new Router({
  mode: 'history',
+  scrollBehavior: () => ({ y: 0 }),
  routes: [
    { path: '/top/:page(\\d+)?', component: createListView('top') },
    { path: '/new/:page(\\d+)?', component: createListView('new') },
@@ -18,7 +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: '/about', component: AboutView },
    { path: '*', redirect: '/top/1' }
  ]
 })
--- a/src/views/AboutView.vue
+++ b/src/views/AboutView.vue
-<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>