deal with polls

Evan You · Evan You · commit 5f6d6b9c947a · 2014-10-09T18:26:47.000-04:00
diff --git a/css/style.css b/css/style.css
@@ -90,6 +90,16 @@ a {
 .story .subtext a:hover {
   text-decoration: underline;
 }
+.story .poll-options {
+  padding-left: 30px;
+  list-style-type: disc;
+}
+.story .poll-options li {
+  margin: 12px 0;
+}
+.story .poll-options li p {
+  margin: 8px 0;
+}
 .story.current {
   background-color: #ededdf;
 }
diff --git a/css/style.styl b/css/style.styl
@@ -77,7 +77,14 @@ a
     a
       color $gray
   .subtext a:hover
-      text-decoration underline
+    text-decoration underline
+  .poll-options
+    padding-left 30px
+    list-style-type disc
+    li
+      margin 12px 0
+      p
+        margin 8px 0
   &.current
     background-color darken($bg, 5%)
 
diff --git a/index.html b/index.html
@@ -15,20 +15,26 @@
       <span class="index">{{index}}.</span>
       <p>
         <a class="title" href="{{href}}" target="_blank">{{title}}</a>
-        <span class="domain" v-show="!isJob">
+        <span class="domain" v-show="showDomain">
           ({{url | domain}})
         </span>
       </p>
       <p class="subtext">
-        <span v-show="!isJob">
+        <span v-show="showInfo">
           {{score}} points by
           <a v-on="click:$root.openUser(by)">{{by}}</a>
         </span>
         {{time | fromNow}} ago
-        <span class="comments-link" v-show="!isJob">
+        <span class="comments-link" v-show="showInfo">
           | <a v-on="click:$root.openComments($data)">comments</a>
         </span>
       </p>
+      <ul class="poll-options" v-if="pollOptions">
+        <li v-repeat="pollOptions">
+          <p>{{text}}</p>
+          <p class="subtext">{{score}} points</p>
+        </li>
+      </ul>
     </script>
 
     <!-- comment component template -->
@@ -81,7 +87,7 @@ <h1><a href="#1">Hacker News</a></h1>
 
       <!-- comments sidebar -->
       <div class="sidebar comments" v-if="inspectedStory" v-transition>
-        <div class="story" v-component="story" v-with="inspectedStory"></div>
+        <div class="story inspected" v-component="story" v-with="inspectedStory"></div>
         <p v-show="!inspectedComments.length">No comments yet.</p>
         <ul>
           <li class="comment" v-repeat="inspectedComments" v-component="comment"></li>
@@ -110,5 +116,6 @@ <h1><a href="#1">Hacker News</a></h1>
     </div>
     <script src="js/store.js"></script>
     <script src="js/app.js"></script>
+    <script src="js/router.js"></script>
   </body>
 </html>
diff --git a/js/app.js b/js/app.js
@@ -11,12 +11,23 @@ Vue.component('story', {
     href: function () {
       return this.url || ('http://news.ycombinator.com/item?id=' + this.id)
     },
-    isJob: function () {
-      return this.type === 'job'
+    showInfo: function () {
+      return this.type === 'story' || this.type === 'poll'
+    },
+    showDomain: function () {
+      return this.type === 'story'
     },
     highlighted: function () {
       return this.$root.inspectedStory.id === this.id
     }
+  },
+  compiled: function () {
+    // render poll options
+    if (this.type === 'poll' && this.$el.classList.contains('inspected')) {
+      store.fetchItems(this.parts, function (options) {
+        this.$add('pollOptions', options)
+      }.bind(this))
+    }
   }
 })
 
