last content topics #472

src/components/Widgets/Content/ContentCarousel/ContentCarousel.vue

@@ -76,7 +76,7 @@ export default {
         900: {
           perPage: 2
         },
-        500: {
+        600: {
           perPage: 1
         }
       },

src/components/Widgets/Content/LastContentTopics/LastContentTopics.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="ContentTopic"
+       :style="localOptions.style">
+    <div class="ContentTopic-title">
+      <div>
+        <q-banner class="banner">
+          دسته‌بندی موضوعی
+        </q-banner>
+      </div>
+      <div>
+        <q-btn flat
+               :to="{name: 'Public.PostTopic.List'}">
+          مشاهده همه
+          <svg xmlns="http://www.w3.org/2000/svg"
+               width="18.387"
+               height="11.502"
+               viewBox="0 0 18.387 11.502"
+               class="q-ml-sm">
+            <path id="Combined_Shape"
+                  data-name="Combined Shape"
+                  d="M-9.338,11.408a.748.748,0,0,0,.388-.656V6.5h8.2A.751.751,0,0,0,0,5.75.75.75,0,0,0-.75,5h-8.2V.75A.751.751,0,0,0-9.338.093.769.769,0,0,0-9.7,0a.735.735,0,0,0-.4.115l-7.938,5a.747.747,0,0,0-.35.635.742.742,0,0,0,.35.634l7.938,5a.751.751,0,0,0,.4.116A.746.746,0,0,0-9.338,11.408ZM-10.45,9.392l-5.78-3.641,5.78-3.642Z"
+                  transform="translate(18.387)"
+                  fill="#eac38a" />
+          </svg>
+        </q-btn>
+      </div>
+    </div>
+    <div class="ContentTopic-list">
+      <div class="row q-col-gutter-md">
+        <div v-for="post in contentTopicList.list"
+             :key="post.id"
+             class="col-md-6 col-12">
+          <topic-item :content-topic="post" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import TopicItem from './TopicItem.vue'
+import { APIGateway } from 'src/api/APIGateway.js'
+import { ContentTopicList } from 'src/models/ContentTopic.js'
+import { mixinPrefetchServerData, mixinWidget } from 'src/mixin/Mixins.js'
+
+export default {
+  name: 'LastPosts',
+  components: {
+    TopicItem
+  },
+  mixins: [mixinWidget, mixinPrefetchServerData],
+  data () {
+    return {
+      mounted: false,
+      contentTopicList: new ContentTopicList()
+    }
+  },
+  mounted() {
+    this.mounted = true
+  },
+  methods: {
+    prefetchServerDataPromise () {
+      return this.getApiRequest()
+    },
+    prefetchServerDataPromiseThen ({ list }) {
+      this.contentTopicList = new ContentTopicList(list)
+      this.contentTopicList.loading = false
+    },
+    prefetchServerDataPromiseCatch () {
+      this.contentTopicList.loading = false
+    },
+
+    getApiRequest() {
+      this.contentTopicList.loading = true
+      return APIGateway.contentTopic.index()
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.ContentTopic {
+  .ContentTopic-title {
+    display: flex;
+    flex-flow: row;
+    justify-content: space-between;
+    padding-bottom: 33px;
+  }
+}
+</style>

src/components/Widgets/Content/LastContentTopics/TopicItem.vue

@@ -0,0 +1,84 @@
+<template>
+  <q-card class="ContentTopicItem"
+          flat>
+    <div class="thumbnail">
+      <router-link :to="{name: 'Public.Content.Show', params: {id: contentTopic.content}}">
+        <q-img :src="contentTopic.thumbnail" />
+      </router-link>
+    </div>
+    <div class="texts">
+      <div class="title ellipsis-2-lines">
+        <router-link :to="{name: 'Public.Content.Show', params: {id: contentTopic.content}}">
+          {{ contentTopic.title }}
+        </router-link>
+      </div>
+      <div v-if="contentTopic.content_info"
+           class="content"
+           v-html="contentTopic.content_info.description" />
+    </div>
+  </q-card>
+</template>
+
+<script>
+import Assist from 'src/assets/js/Assist.js'
+import { ContentTopic } from 'src/models/ContentTopic.js'
+
+export default {
+  name: 'ContentTopicItem',
+  props: {
+    contentTopic: {
+      type: ContentTopic,
+      default: new ContentTopic()
+    }
+  },
+  methods: {
+    miladiToShamsi (date) {
+      return Assist.miladiToShamsi(date, 'jDD jMMM jYYYY')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.ContentTopicItem {
+  display: flex;
+  flex-flow: row;
+  gap: 24px;
+  justify-content: flex-start;
+  border-radius: 20px;
+  padding: 32px 28px;
+  background: #FBF4EA;
+  $thumbnail-width: 250px;
+  .thumbnail {
+    width: $thumbnail-width;
+    border-radius: 10px;
+    .q-img {
+      width: 100%;
+      border-radius: 10px;
+    }
+  }
+  .texts {
+    width: calc(100% - #{$thumbnail-width});
+    padding-top: 24px;
+    .title {
+      color: #212121;
+      font-size: 16px;
+      font-weight: bold;
+      margin-bottom: 28px;
+    }
+    .content {
+      color: #212121;
+      font-size: 16px;
+    }
+  }
+  @media screen and (max-width: 600px) {
+    flex-flow: column;
+    .thumbnail {
+      width: 100%;
+    }
+    .texts {
+      width: 100%;
+    }
+  }
+}
+</style>

src/components/Widgets/Content/LastContents/LastContents.vue

@@ -1,61 +0,0 @@
-<template>
-  <div class="LastBlogs row q-col-gutter-md"
-       :style="localOptions.style">
-    <div v-for="post in postList.list"
-         :key="post.id"
-         class="col-md-6 col-12">
-      <post-item :post="post" />
-    </div>
-  </div>
-</template>
-
-<script>
-import PostItem from './PostItem.vue'
-import { PostList } from 'src/models/Post.js'
-import { APIGateway } from 'src/api/APIGateway.js'
-import { mixinPrefetchServerData, mixinWidget } from 'src/mixin/Mixins.js'
-
-export default {
-  name: 'LastPosts',
-  components: {
-    PostItem
-  },
-  mixins: [mixinWidget, mixinPrefetchServerData],
-  data () {
-    return {
-      mounted: false,
-      defaultOptions: {
-        categoryId: null,
-        categoryParentId: null,
-        categoryParentParentId: 1
-      },
-      postList: new PostList()
-    }
-  },
-  mounted() {
-    this.mounted = true
-  },
-  methods: {
-    prefetchServerDataPromise () {
-      return this.getApiRequest()
-    },
-    prefetchServerDataPromiseThen ({ list }) {
-      this.postList = new PostList(list)
-      this.postList.loading = false
-    },
-    prefetchServerDataPromiseCatch () {
-      this.postList.loading = false
-    },
-
-    getApiRequest() {
-      this.postList.loading = true
-      return APIGateway.post.index({ category__parent__parent: this.localOptions.categoryParentParentId, category__parent: this.localOptions.categoryParentId, category: this.localOptions.categoryId })
-    }
-  }
-}
-</script>
-
-<style scoped lang="scss">
-.LastBlogs {
-}
-</style>

src/components/Widgets/Content/LastContents/PostItem.vue

@@ -1,98 +0,0 @@
-<template>
-  <q-card class="PostItem"
-          flat>
-    <div class="thumbnail">
-      <router-link :to="{name: 'Public.Post.Show', params: {id: post.id}}">
-        <q-img :src="post.thumbnail" />
-      </router-link>
-    </div>
-    <div class="texts">
-      <div class="category-title">
-        <router-link :to="{name: 'Public.Post.Show', params: {id: post.id}}">
-          {{ post.category_info.title }}
-        </router-link>
-      </div>
-      <div class="title ellipsis-2-lines">
-        <router-link :to="{name: 'Public.Post.Show', params: {id: post.id}}">
-          {{ post.title }}
-        </router-link>
-      </div>
-      <div class="published-date">
-        تاریخ انتشار
-        {{ miladiToShamsi(post.creation_time) }}
-      </div>
-    </div>
-  </q-card>
-</template>
-
-<script>
-import { Post } from 'src/models/Post.js'
-import Assist from 'src/assets/js/Assist.js'
-
-export default {
-  name: 'PostItem',
-  props: {
-    post: {
-      type: Post,
-      default: new Post()
-    }
-  },
-  methods: {
-    miladiToShamsi (date) {
-      return Assist.miladiToShamsi(date, 'jDD jMMM jYYYY')
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.PostItem {
-  display: flex;
-  flex-flow: row;
-  justify-content: flex-start;
-  border: 2px solid transparent;
-  padding: 16px;
-  &:hover {
-    border-radius: 14px;
-    border-color: #0B6AB1;
-  }
-  .thumbnail {
-    width: 148px;
-    .q-img {
-      width: 100%;
-    }
-  }
-  .texts {
-    width: calc(100% - 148px);
-    position: relative;
-    padding-left: 14px;
-    .category-title {
-      width: max-content;
-      border-radius: 3px;
-      background: #E3E7F4;
-      padding: 4px 8px;
-      color: #666;
-      font-size: 14px;
-      font-weight: 500;
-      line-height: 100%;
-      margin-bottom: 8px;
-    }
-    .title {
-      width: 100%;
-      color: #000;
-      text-align: left;
-      font-size: 18px;
-      font-weight: 700;
-    }
-    .published-date {
-      color: #000;
-      text-align: right;
-      font-size: 14px;
-      font-weight: 200;
-      position: absolute;
-      left: 14px;
-      bottom: 0;
-    }
-  }
-}
-</style>

src/components/Widgets/Event/LastEvents/LastEvents.vue

@@ -82,7 +82,7 @@ export default {
         900: {
           perPage: 2
         },
-        500: {
+        600: {
           perPage: 1
         }
       },

src/components/Widgets/Other/ClassroomCarousel/ClassroomCarousel.vue

@@ -82,7 +82,7 @@ export default {
         900: {
           perPage: 2
         },
-        500: {
+        600: {
           perPage: 1
         }
       },

src/components/Widgets/Post/LastPosts/LastPosts.vue

@@ -86,7 +86,7 @@ export default {
         900: {
           perPage: 1
         },
-        500: {
+        600: {
           perPage: 1
         }
       },

src/components/Widgets/Store/StoreProduct/ProductCarousel/ProductCarousel.vue

@@ -76,7 +76,7 @@ export default {
         900: {
           perPage: 2
         },
-        500: {
+        600: {
           perPage: 1
         }
       },