complete styling

Author: yyx990803

src/views/ItemView.vue

@@ -15,9 +15,11 @@
           {{ item.time | timeAgo }} ago
         </p>
       </div>
-      <div v-if="item.kids" class="item-view-comments">
-        <p class="item-view-comments-header">{{ item.descendants }} comments</p>
-        <ul class="comment-children">
+      <div class="item-view-comments">
+        <p class="item-view-comments-header">
+          {{ item.kids ? item.descendants + ' comments' : 'No comments yet.'}}
+        </p>
+        <ul v-if="item.kids" class="comment-children">
           <comment v-for="id in item.kids" :id="id"></comment>
         </ul>
       </div>

src/views/UserView.vue

@@ -2,17 +2,14 @@
   <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>
+      <h1>User : {{ user.id }}</h1>
+      <ul class="meta">
+        <li><span class="label">Created:</span> {{ user.created | timeAgo }} ago</li>
+        <li><span class="label">Karma:</span> {{user.karma}}</li>
+        <li v-if="user.about" v-html="user.about" class="about"></li>
       </ul>
       <p class="links">
-        <a :href="'https://news.ycombinator.com/submitted?id=' + user.id">submissions</a><br>
+        <a :href="'https://news.ycombinator.com/submitted?id=' + user.id">submissions</a> |
         <a :href="'https://news.ycombinator.com/threads?id=' + user.id">comments</a>
       </p>
     </template>
@@ -42,3 +39,23 @@ export default {
   }
 }
 </script>
+
+<style lang="stylus">
+.user-view
+  background-color #fff
+  box-sizing border-box
+  padding 2em 3em
+  h1
+    margin 0
+    font-size 1.5em
+  .meta
+    list-style-type none
+    padding 0
+  .label
+    display inline-block
+    min-width 4em
+  .about
+    margin 1em 0
+  .links a
+    text-decoration underline
+</style>