frontend changes

web/src/App.vue

@@ -3,23 +3,30 @@
         <section id="sidebar">
             <div id="sidebar-header">
                 <router-link :to="{name: 'about'}">i</router-link>
+                <button class="refresh" @click="refresh">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 65 65">
+                        <g fill="currentColor">
+                            <path d="M32.5 5a27.3 27.3 0 00-14.7 4.28l-5.75-5.75v16.11h16.11l-6.4-6.4a21.83 21.83 0 0110.74-2.81A22.1 22.1 0 0154.57 32.5c0 2.9-.57 5.66-1.6 8.2l4.74 2.76A27.53 27.53 0 0032.5 5zM43.23 51.75a21.82 21.82 0 01-10.73 2.82A22.1 22.1 0 0110.43 32.5c0-2.74.52-5.35 1.44-7.77l-4.73-2.85A27.53 27.53 0 0032.5 60c5.4 0 10.43-1.58 14.7-4.29l5.75 5.76V45.36H36.84l6.39 6.39z"/>
+                        </g>
+                    </svg>
+                </button>
             </div>
-            <Stories></Stories>
+            <Stories ref="stories"></Stories>
         </section>
         <section id="mainpane">
             <div id="mainpane-header"></div>
 
             <router-view></router-view>
             <header>
-<!--                <router-link :to="{name:'stories'}">Go to Home</router-link>-->
-<!--                <router-link :to="{name:'about'}">Go to About</router-link>-->
+                <!--                <router-link :to="{name:'stories'}">Go to Home</router-link>-->
+                <!--                <router-link :to="{name:'about'}">Go to About</router-link>-->
             </header>
         </section>
     </div>
 </template>
 
 <script lang="ts">
-import {defineComponent} from 'vue'
+import {defineComponent, ref} from 'vue'
 import Stories from "./views/Stories.vue";
 
 export default defineComponent({
@@ -28,6 +35,11 @@ export default defineComponent({
         return {
             message: "ffd Vue"
         };
+    },
+    methods: {
+        refresh(): void {
+            (this.$refs.stories as typeof Stories).refreshStories()
+        }
     }
 });
 </script>

web/src/components/Comment.vue

@@ -1,13 +1,14 @@
 <template>
     <div v-if="!item.deleted">
-        <div :class="{comment:true,fromauthor:item.by===originalAuthor}" v-if="!firstLayer">
+        <div :class="{comment:true, fromauthor:item.by===originalAuthor, textpost:textPost, dead:item.dead}" v-if="!firstLayer">
             <div class="comment-header" @click="toogleCollapse">
                 <div class="author">{{ item.by }}</div>
-                <div class="time">{{ dateToText(item.time) }}</div>
+                <div class="time">{{ prettyTime }}</div>
+                <div v-if="item.dead">[dead]</div>
             </div>
             <div class="text" v-html="item.text" v-if="!collapsed"></div>
         </div>
-        <div v-for="kid in item.kids" :key="kid.id" class="kids" v-if="!collapsed">
+        <div v-for="kid in item.kids" :key="kid.id" class="kids" v-if="!collapsed && !textPost">
             <comment :item="kid" :original-author="originalAuthor"></comment>
         </div>
     </div>
@@ -27,6 +28,10 @@ export default defineComponent({
         firstLayer: {
             type: Boolean,
             default: () => false
+        },
+        textPost: {
+            type: Boolean,
+            default: () => false
         }
     },
     data() {
@@ -34,14 +39,18 @@ export default defineComponent({
             collapsed: false
         }
     },
+    computed: {
+        prettyTime(): string {
+            if (!this.item) {
+                return ""
+            }
+            return dateToText(this.item.time)
+        }
+    },
     methods: {
         toogleCollapse(): void {
-            console.log("toggle")
             this.collapsed = !this.collapsed;
         },
-        dateToText(num: number): string {
-            return dateToText(num)
-        }
     }
 })
 </script>

web/src/components/Header.vue

@@ -1,6 +1,15 @@
 <template>
     <div class="item-header">
-        <h2>{{ item.title }}</h2>
+        <h2>
+            <span v-if="item.dead">[dead]</span>
+            {{ item.title }}
+        </h2>
+        <div>
+            <span>{{ item.score }}</span>
+            <span>{{ item.by }}</span>
+            <span>{{ prettyTime }}</span>
+            <span>{{ item.descendants }}</span>
+        </div>
         <a :href="item.url">{{ item.url }}</a>
         <a :href="hnURL">{{ hnURL }}</a>
     </div>
@@ -9,6 +18,7 @@
 <script lang="ts">
 import {defineComponent, PropType} from "vue";
 import {Item} from "../interfaces";
+import {dateToText} from "../utils";
 
 
 export default defineComponent({
@@ -19,6 +29,12 @@ export default defineComponent({
     computed: {
         hnURL(): string {
             return "https://news.ycombinator.com/item?id=" + this.item.id
+        },
+        prettyTime(): string {
+            if (!this.item) {
+                return ""
+            }
+            return dateToText(this.item.time)
         }
     }
 })

web/src/style/_layout.scss

@@ -44,6 +44,34 @@ html, body {
   width: 100%;
 }
 
+#sidebar-header {
+  display: flex;
+  justify-content: space-between;
+
+  button, a {
+    text-decoration: none;
+    display: block;
+    border: none;
+    background: none;
+    color: white;
+    height: 100%;
+
+    svg {
+      width: 32px;
+      transition: all .2s;
+    }
+
+    &:hover, &:focus {
+      svg {
+        transform: rotate(270deg);
+      }
+    }
+  }
+
+  button {
+    cursor: pointer;
+  }
+}
 
 .item-header {
   background: $color;
@@ -53,6 +81,7 @@ html, body {
 
   h2 {
     margin-top: 0;
+    margin-bottom: .3rem;
   }
 
   a {
@@ -60,4 +89,13 @@ html, body {
     color: white;
     text-decoration: none;
   }
+
+  div {
+    display: flex;
+    justify-content: left;
+
+    span {
+      padding-right: 5px;
+    }
+  }
 }

web/src/style/main.scss

@@ -81,11 +81,21 @@ pre {
     }
 
     .points {
-      background: lightgray;
+      background: rgba(0, 0, 0, .031);
+      color: #888;
     }
   }
+
   .load-more {
-    height: 50px;
+    width: 100%;
+    background: #ccc;
+    display: flex;
+    justify-content: center;
+    cursor: pointer;
+
+    div {
+      padding: 1rem 0;
+    }
   }
 }
 
@@ -105,9 +115,18 @@ pre {
     padding: 10px 15px;
   }
 
-  &.fromauthor {
+  &.fromauthor:not(.textpost) {
     box-shadow: 3px 0 0 $color inset;
   }
+
+  &.textpost {
+    background: #FFF1E7;
+    border-bottom: 5px solid $color;
+  }
+
+  &.dead {
+    color: #777
+  }
 }
 
 .comment-header {

web/src/views/Comments.vue

@@ -1,6 +1,7 @@
 <template>
     <div class="comments">
         <Header :item="story"></Header>
+        <comment v-if="!story.url" :item="story" :original-author="story.by" :text-post="true"></comment>
         <div v-if="loading">LOADING</div>
         <comment :item="story" :original-author="story.by" :first-layer="true"></comment>
         <!--        <pre class="debug"><code>{{ story }}</code></pre>-->

web/src/views/Reader.vue

@@ -2,7 +2,7 @@
     <div class="reader">
         <div v-if="loading">loading article</div>
         <h1>{{ readerData.title }}</h1>
-        <div>{{ prettyDate }}</div>
+        <div v-if="!loading">{{ prettyDate }}</div>
         <div>{{ prettyAuthors }}</div>
         <div class="reader-html" v-html="readerData.html"></div>
 <!--        <pre class="debug"><code>{{ readerData }}</code></pre>-->

web/src/views/Stories.vue

@@ -12,7 +12,9 @@
                 <div class="points">{{ story.score }}</div>
             </router-link>
         </div>
-        <div class="load-more storywrapper" @click="loadStory">LOAD MORE</div>
+        <div class="load-more storywrapper" @click="loadStory">
+            <div>Load More</div>
+        </div>
         <!--        <pre class="debug"><code>{{ stories }}</code></pre>-->
     </div>
 </template>
@@ -44,6 +46,10 @@ export default defineComponent({
               })
               .then(data => (this.stories.push(...data)))
         },
+        refreshStories(): void {
+            this.stories = [] as Item[]
+            this.loadStory()
+        },
         isActiveStory(item: Item): boolean {
             return this.$route.params.item === item.id.toString()
         },