[F] Fix blog post filtering

src/components/BlogIndex.vue

@@ -1,9 +1,11 @@
 <template>
     <div class="index index-tags" v-if="mode === 'tags'">
-        <Tag v-for="t in meta.tags" :key="t" :tag-name="t[0]" direction="right">{{t[0]}} ({{t[1]}})</Tag>
+        <Tag v-for="t in meta.tags" :key="t" :tag-name="t[0]" direction="right"
+             @click="e => clickTag(e, t)">{{ t[0] }} ({{ t[1] }})</Tag>
     </div>
     <div class="index index-categories" v-else>
-        <span v-for="c in meta.categories" :key="c[0]" class="clickable unselectable" @click="click(c)">{{c[0]}} ({{c[1]}})</span>
+        <span v-for="c in meta.categories" :key="c[0]" class="clickable unselectable"
+              @click="e => clickCat(e, c)">{{ c[0] }} ({{ c[1] }})</span>
     </div>
 </template>
 
@@ -21,9 +23,55 @@ export default class BlogIndexLinks extends Vue
 
     meta: BlogMeta = staticMeta
 
-    click(c: [string, number]): void
+    clickCat(e: MouseEvent, cat: [string, number]): void
     {
-        pushQuery({category: c[0]})
+        e.stopPropagation()
+
+        const c = cat[0]
+        const q: { [id: string]: string | null } = {category: c}
+
+        // Check if the currently selected post is in this category
+        // const url_name = this.$route.query.post
+        // if (url_name)
+        // {
+        //     const posts = staticMeta.posts.filter(it => it.url_name == url_name)
+        //     if (posts && posts[0].category != c)
+        //     {
+        //         // Doesn't include tag, remove post selection
+        //         q.post = null
+        //     }
+        // }
+
+        // Clear tag selection
+        q.tag = null
+
+        pushQuery(q)
+    }
+
+
+    clickTag(e: MouseEvent, tag: [string, number]): void
+    {
+        e.stopPropagation()
+
+        const t = tag[0]
+        const q: { [id: string]: string | null } = {tag: t}
+
+        // Check if the currently selected post is in this tag
+        // const url_name = this.$route.query.post
+        // if (url_name)
+        // {
+        //     const posts = staticMeta.posts.filter(it => it.url_name == url_name)
+        //     if (posts && !posts[0].tags.includes(t))
+        //     {
+        //         // Doesn't include tag, remove post selection
+        //         q.post = null
+        //     }
+        // }
+
+        // Clear category selection
+        q.category = null
+
+        pushQuery(q)
     }
 }
 </script>

src/components/Tag.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="tag-wrap unselectable clickable" @click="e => clickTag(e)">
+    <div class="tag-wrap unselectable clickable">
         <div class="tag fbox-vcenter" :class="direction">
             <div ref="el"><slot></slot></div>
             <div class="after"></div>
@@ -20,28 +20,6 @@ export default class Tag extends Vue
     @Prop() tagName?: string
 
     @Ref() readonly el!: HTMLDivElement
-
-    clickTag(e: MouseEvent): void
-    {
-        e.stopPropagation()
-
-        const t = this.tagName ?? this.el.innerText
-        const q: {[id: string]: string | null} = {tag: t}
-
-        // Check if the currently selected post is in this tag
-        const url_name = this.$route.query.post
-        if (url_name)
-        {
-            const posts = staticMeta.posts.filter(it => it.url_name == url_name)
-            if (posts && !posts[0].tags.includes(t))
-            {
-                // Doesn't include tag, remove post selection
-                q.post = null
-            }
-        }
-
-        pushQuery(q)
-    }
 }
 </script>
 

src/views/Blog.vue

@@ -71,7 +71,7 @@ $width: 600px
 
 #Blog
     width: $width
-    margin: 20px auto
+    margin: 50px auto 20px
 
     #breadcrumb
         color: $color-text-light
@@ -86,6 +86,10 @@ $width: 600px
 // Phone layout
 @media screen and (max-width: $width + 40px)
     #Blog
-        margin: 10px
+        margin: 20px 10px
         width: unset
+
+        #breadcrumb
+            margin-left: 50px
+
 </style>