[M] Separate life and post views

src/components/Post.vue

@@ -0,0 +1,140 @@
+<template>
+    <div class="post" :class="{'service': p.type === 'service'}">
+        <div class="reply" v-if="p.reply">
+            <img class="thumb" v-if="p.reply.thumb" :src="p.reply.thumb" alt="">
+            <div class="mtext"><span>{{p.reply.text}}</span></div>
+        </div>
+        <div class="images" v-if="p.images && p.images.length === 1">
+            <img v-for="i in p.images" :key="i" :src="i.url" alt="image">
+        </div>
+        <div class="images" v-if="p.images && p.images.length !== 1">
+            <div class="img" v-for="i in p.images" :key="i"
+                 :style="{'background-image': `url(${i.url})`, ...getImageStyle(p, i)}"></div>
+        </div>
+        <div class="text">{{p.text}}</div>
+        <div class="info font-code unselectable">
+            <div class="id">#{{p.id}}</div>
+            <div class="f-grow1"></div>
+            <div class="date">{{p.date}}</div>
+            <div class="views" v-if="p.views">{{p.views}}<i class="fas fa-eye"/></div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import {Options, Vue} from 'vue-class-component';
+import {Prop} from "vue-property-decorator";
+import {Image, Post} from "@/views/Life.vue";
+
+@Options({components: {}})
+export default class PostView extends Vue
+{
+    @Prop({required: true}) p!: Post
+
+    getImageStyle(post: Post, i: Image): unknown
+    {
+        if (post.img_group_style)
+        {
+            return {}
+        }
+        else return {
+
+        }
+    }
+}
+</script>
+
+<style lang="sass" scoped>
+@import "src/css/colors"
+
+.post.service
+    .id
+        display: none
+
+.post
+    width: 100%
+    background: #fdf9f1
+    border-radius: 20px
+    margin-bottom: 20px
+    padding: 12px 20px 8px
+    overflow: auto
+    overflow-x: hidden
+    box-sizing: border-box
+    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -1px rgb(0 0 0 / 6%)
+
+    text-align: left
+
+    > *
+        margin-bottom: 10px
+    > *:last-child
+        margin-bottom: 0
+
+    .reply
+        display: flex
+        font-size: 0.8em
+
+        .thumb
+            margin-left: 10px
+            height: 40px
+            width: 40px
+            object-fit: cover
+
+        .mtext
+            flex: 1
+            max-height: 40px
+            margin-left: 10px
+            color: lighten($color-text-main, 20)
+            display: -webkit-box
+            -webkit-line-clamp: 2 /* number of lines to show */
+            line-clamp: 2
+            -webkit-box-orient: vertical
+            overflow: hidden
+
+
+    .reply:before
+        content: " "
+        border: 2px solid lighten($color-text-main, 20)
+        border-radius: 2px
+
+    .reply + .images
+        margin: 0 -20px 10px
+
+    .images
+        margin: -12px -20px 10px
+        display: flex
+
+        .img
+            flex: 1
+            height: 200px
+            width: 200px
+            background-size: cover
+            background-repeat: no-repeat
+            background-position: center
+
+            margin-right: 2px
+
+        .img:last-child
+            margin-right: 0
+
+        img
+            max-width: 100%
+            min-width: 100%
+            width: auto
+            height: auto
+
+    .text
+        white-space: pre-line
+
+    .info
+        display: flex
+        color: lighten($color-text-main, 40)
+        div
+            margin: 0 10px
+
+        div:first-child, div:last-child
+            margin: 0
+
+        i
+            font-size: 0.8em
+            margin-left: 4px
+</style>

src/views/Life.vue

@@ -1,25 +1,6 @@
 <template>
-    <div id="Blog" v-if="posts.length !== 0">
+    <div id="Life" v-if="posts.length !== 0">
-        <div class="post" v-for="p in posts" :key="p.id" :class="{'service': p.type === 'service'}">
+        <PostView :p="p" v-for="p in posts" :key="p.id"/>
-            <div class="reply" v-if="p.reply">
-                <img class="thumb" v-if="p.reply.thumb" :src="p.reply.thumb" alt="">
-                <div class="mtext"><span>{{p.reply.text}}</span></div>
-            </div>
-            <div class="images" v-if="p.images && p.images.length === 1">
-                <img v-for="i in p.images" :key="i" :src="i.url" alt="image">
-            </div>
-            <div class="images" v-if="p.images && p.images.length !== 1">
-                <div class="img" v-for="i in p.images" :key="i"
-                     :style="{'background-image': `url(${i.url})`, ...getImageStyle(p, i)}"></div>
-            </div>
-            <div class="text">{{p.text}}</div>
-            <div class="info font-code">
-                <div class="id">#{{p.id}}</div>
-                <div class="f-grow1"></div>
-                <div class="date">{{p.date}}</div>
-                <div class="views" v-if="p.views">{{p.views}}<i class="fas fa-eye"/></div>
-            </div>
-        </div>
     </div>
 </template>
 
@@ -27,6 +8,7 @@
 import {Options, Vue} from 'vue-class-component';
 import {backendUrl} from "@/constants";
 import moment from "moment";
+import PostView from "@/components/Post.vue";
 
 export interface Image {
     href: string
@@ -66,7 +48,7 @@ export interface Post {
     }
 }
 
-@Options({components: {}})
+@Options({components: {PostView}})
 export default class Blog extends Vue
 {
     posts: Post[] = []
@@ -81,122 +63,20 @@ export default class Blog extends Vue
             console.log(it)
         })
     }
-    
-    getImageStyle(post: Post, i: Image): unknown
-    {
-        if (post.img_group_style)
-        {
-            return {}
-        }
-        else return {
-
-        }
-    }
 }
 </script>
 
 <style lang="sass" scoped>
 @import "src/css/colors"
 
-#Blog
+#Life
     margin: 20px auto
     font-size: 0.8em
     width: min(450px, 80vw)
 
-.post.service
-    .id
-        display: none
-
-.post
-    width: 100%
-    background: #fdf9f1
-    border-radius: 20px
-    margin-bottom: 20px
-    padding: 12px 20px 8px
-    overflow: auto
-    overflow-x: hidden
-    box-sizing: border-box
-    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -1px rgb(0 0 0 / 6%)
-
-    text-align: left
-
-    > *
-        margin-bottom: 10px
-    > *:last-child
-        margin-bottom: 0
-
-    .reply
-        display: flex
-        font-size: 0.8em
-
-        .thumb
-            margin-left: 10px
-            height: 40px
-            width: 40px
-            object-fit: cover
-
-        .mtext
-            flex: 1
-            max-height: 40px
-            margin-left: 10px
-            color: lighten($color-text-main, 20)
-            display: -webkit-box
-            -webkit-line-clamp: 2 /* number of lines to show */
-            line-clamp: 2
-            -webkit-box-orient: vertical
-            overflow: hidden
-
-
-    .reply:before
-        content: " "
-        border: 2px solid lighten($color-text-main, 20)
-        border-radius: 2px
-
-    .reply + .images
-        margin: 0 -20px 10px
-
-    .images
-        margin: -12px -20px 10px
-        display: flex
-
-        .img
-            flex: 1
-            height: 200px
-            width: 200px
-            background-size: cover
-            background-repeat: no-repeat
-            background-position: center
-
-            margin-right: 2px
-
-        .img:last-child
-            margin-right: 0
-
-        img
-            max-width: 100%
-            min-width: 100%
-            width: auto
-            height: auto
-
-    .text
-        white-space: pre-line
-
-    .info
-        display: flex
-        color: lighten($color-text-main, 40)
-        div
-            margin: 0 10px
-
-        div:first-child, div:last-child
-            margin: 0
-
-        i
-            font-size: 0.8em
-            margin-left: 4px
-
 // Phone layout
 @media screen and (max-width: 570px)
-    #Blog
+    #Life
         margin: 20px 20px 0
         width: unset
 </style>