diff options
| -rw-r--r-- | components/ModelBoxCard.vue | 62 | ||||
| -rw-r--r-- | components/ModelLoading.vue | 2 | ||||
| -rw-r--r-- | pages/index.vue | 11 |
3 files changed, 73 insertions, 2 deletions
diff --git a/components/ModelBoxCard.vue b/components/ModelBoxCard.vue new file mode 100644 index 0000000..6ac9f43 --- /dev/null +++ b/components/ModelBoxCard.vue @@ -0,0 +1,62 @@ +<template lang="pug"> + .model.shadow-sm.rounded-lg.bg-white.p-4.w-full.h-80.duration-300( + class="hover:ease-out hover:shadow-md" + ) + a(:href="'/models/'+model.id") + .image.bg-gray-900.rounded-xl.w-full.h-48 + img( + v-if="coverImage >= 0" + :src="baseAPI + '' + model.uploads[coverImage].filepath" + ) + + .space-y-3.mt-5 + h1.truncate.text-xl.font-medium + a(:href="'/models/'+model.id" class="hover:underline") {{ model.name }} + div + .mr-3.float-left + user-avatar(:data="model.author") + p.leading-8 + a.text-green-800(class="hover:text-green-700" :href="'/users/'+model.author.username") + | @ + span.underline {{ model.author.username }} + +</template> + +<script> +import UserAvatar from "@/components/UserAvatar.vue"; + +export default { + name: "ModelBoxCard", + props: ["model"], + components: { + "user-avatar": UserAvatar, + }, + data() { + return { + coverImage: -1, + baseAPI: "", + }; + }, + methods: { + imageIndex(uploads) { + if (!uploads) return -1; + + for (const i in uploads) { + if ( + uploads[i].filepath.indexOf(".png") || + uploads[i].filepath.indexOf(".jpg") || + uploads[i].filepath.indexOf(".jpeg") || + uploads[i].filepath.indexOf(".webp") + ) + return i; + } + + return -1; + }, + }, + created() { + this.coverImage = this.imageIndex(this.model.uploads); + this.baseAPI = this.$config.api; + }, +}; +</script> diff --git a/components/ModelLoading.vue b/components/ModelLoading.vue index 5db1c51..3ce43e7 100644 --- a/components/ModelLoading.vue +++ b/components/ModelLoading.vue @@ -1,6 +1,6 @@ <template lang="pug"> .grid.grid-cols-4.gap-4 - .model.shadow-xlg.rounded-lg.bg-white.p-4.w-full.h-80.animate-pulse + .model.shadow-xl.rounded-lg.bg-white.p-4.w-full.h-80.animate-pulse .image.bg-green-100.rounded-xl.w-full.h-48 .space-y-3.mt-5 .grid.grid-cols-3.gap-4 diff --git a/pages/index.vue b/pages/index.vue index 2c84032..cecc169 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -1,11 +1,18 @@ <template lang="pug"> .mx-auto.max-w-7xl.py-6(class="sm:px-6 lg:px-8") model-loading(v-if="isLoading") - + section(v-else) + .grid.grid-cols-4.gap-4 + model-box-card( + v-for="model in models" + :key="model.id" + :model="model" + ) </template> <script> import ModelLoading from "@/components/ModelLoading.vue"; +import ModelBoxCard from "@/components/ModelBoxCard.vue"; import { mapGetters } from "vuex"; @@ -17,10 +24,12 @@ export default { }, components: { "model-loading": ModelLoading, + "model-box-card": ModelBoxCard, }, computed: { ...mapGetters(["isLoading"]), ...mapGetters("auth", ["isLogged"]), + ...mapGetters("models", ["models"]), }, created() { this.$store.dispatch("models/getModels"); |