fix #483

src/components/Widgets/ContentCategory/ContentCategoryList/ContentCategoryList.vue

@@ -40,7 +40,7 @@
       <template v-else>
         <div v-for="(content, contentIndex) in contents.list"
              :key="contentIndex"
-             class="col-md-4">
+             class="col-md-4 col-12">
           <content-item :content="content" />
         </div>
       </template>

src/components/Widgets/ContentCategory/ContentCategoryList/ContentItem.vue

@@ -9,29 +9,7 @@
          @click="goToContentPageShow">
       {{ content.title }}
     </div>
-    <div class="categories">
-      <q-btn v-if="content?.category_info?.id"
-             flat
-             class="category-btn">
-        <div class="category-btn-title q-px-sm">
-          {{ content.category_info.title }}
-        </div>
-      </q-btn>
-      <q-btn v-if="content?.category_info?.parent?.id"
-             flat
-             class="category-btn">
-        <div class="category-btn-title q-px-sm">
-          {{ content.category_info.parent.title }}
-        </div>
-      </q-btn>
-      <q-btn v-if="content?.category_info?.parent?.parent?.id"
-             flat
-             class="category-btn">
-        <div class="category-btn-title q-px-sm">
-          {{ content.category_info.parent.parent.title }}
-        </div>
-      </q-btn>
-    </div>
+    <content-item-categories :content="content" />
     <q-btn color="primary"
            class="show-content-btn"
            :to="{name: 'Public.Content.Show', params: {id: content.id}}">
@@ -42,9 +20,11 @@
 
 <script>
 import { Content } from 'src/models/Content.js'
+import ContentItemCategories from './ContentItemCategories.vue'
 
 export default {
   name: 'ContentItem',
+  components: { ContentItemCategories },
   props: {
     content: {
       type: Content,
@@ -94,32 +74,5 @@ export default {
     border-top-left-radius: 0;
     height: 60px;
   }
-  .categories {
-    display: flex;
-    gap: 4px;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    margin-bottom: 16px;
-    .category-btn {
-      border: 1px solid #000000;
-      border-radius: 20px;
-      padding: 4px;
-      display: flex;
-      justify-content: space-between;
-      gap: 4px;
-      align-items: center;
-      background: transparent;
-      .category-btn-title {
-        font-size: 12px;
-        color: #212121;
-      }
-      &.category-btn__selected {
-        background: #444444;
-        .category-btn-title {
-          color: white;
-        }
-      }
-    }
-  }
 }
 </style>

src/components/Widgets/ContentCategory/ContentCategoryList/ContentItemCategories.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="ContentItemCategories">
+    <template v-if="content?.category_info?.parent?.parent?.id">
+      <q-btn v-if="content?.category_info?.parent?.parent?.id"
+             flat
+             :to="{ name: 'Public.ContentCategoryParentParent.Show', params: { category_id: content.category_info.parent.parent.id } }"
+             class="category-btn">
+        <div class="category-btn-title q-px-sm">
+          {{ content.category_info.parent.parent.title }}
+        </div>
+      </q-btn>
+      <q-btn v-if="content?.category_info?.parent?.id"
+             flat
+             :to="{ name: 'Public.ContentCategoryParent.Show', params: { category_id: content.category_info.parent.id } }"
+             class="category-btn">
+        <div class="category-btn-title q-px-sm">
+          {{ content.category_info.parent.title }}
+        </div>
+      </q-btn>
+      <q-btn v-if="content?.category_info?.id"
+             flat
+             :to="{ name: 'Public.ContentCategory.Show', params: { category_id: content.category_info.id } }"
+             class="category-btn">
+        <div class="category-btn-title q-px-sm">
+          {{ content.category_info.title }}
+        </div>
+      </q-btn>
+    </template>
+    <template v-else-if="content?.category_info?.parent?.id">
+      <q-btn flat
+             :to="{ name: 'Public.ContentCategoryParentParent.Show', params: { category_id: content.category_info.parent.id } }"
+             class="category-btn">
+        <div class="category-btn-title q-px-sm">
+          {{ content.category_info.parent.title }}
+        </div>
+      </q-btn>
+      <q-btn v-if="content?.category_info?.id"
+             flat
+             :to="{ name: 'Public.ContentCategoryParent.Show', params: { category_id: content.category_info.id } }"
+             class="category-btn">
+        <div class="category-btn-title q-px-sm">
+          {{ content.category_info.title }}
+        </div>
+      </q-btn>
+    </template>
+    <template v-else-if="content?.category_info?.id">
+      <q-btn flat
+             :to="{ name: 'Public.ContentCategoryParentParent.Show', params: { category_id: content.category_info.id } }"
+             class="category-btn">
+        <div class="category-btn-title q-px-sm">
+          {{ content.category_info.title }}
+        </div>
+      </q-btn>
+    </template>
+  </div>
+</template>
+
+<script>
+import { Content } from 'src/models/Content.js'
+
+export default {
+  name: 'ContentItemCategories',
+  props: {
+    content: {
+      type: Content,
+      default: new Content()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.ContentItemCategories {
+  display: flex;
+  gap: 4px;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-start;
+  margin-bottom: 16px;
+  height: 76px;
+  .category-btn {
+    border: 1px solid #000000;
+    border-radius: 20px;
+    padding: 4px;
+    display: flex;
+    justify-content: space-between;
+    gap: 4px;
+    height: 36px;
+    align-items: center;
+    background: transparent;
+    .category-btn-title {
+      font-size: 12px;
+      color: #212121;
+    }
+    &.category-btn__selected {
+      background: #444444;
+      .category-btn-title {
+        color: white;
+      }
+    }
+  }
+}
+</style>