119 lines
3.6 KiB
Vue
119 lines
3.6 KiB
Vue
<script lang="ts" setup>
|
|
import { format } from "date-fns";
|
|
import { type SingleChapterResult } from "@client/types/slightlyDifferentStory";
|
|
import icon from "~/components/icon.vue";
|
|
const story = inject<SingleChapterResult | null>("story");
|
|
console.log("storyyy--info", story);
|
|
const dark = inject<Ref<boolean>>("dark");
|
|
</script>
|
|
<template>
|
|
<a-card style="width: 45%; float: left; margin-right: 1.2em" v-if="!!story">
|
|
<a-descriptions :label-style="{ fontWeight: 'bold' }" :colon="false" :column="1">
|
|
<a-descriptions-item label="Author">
|
|
<nuxt-link :to="`/user/${story?.author._id}`">{{ story?.author.username }}</nuxt-link>
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="Bands">
|
|
<div class="wrapLong" v-for="(item, index) in story?.currentChapter.bands">
|
|
<span>
|
|
<nuxt-link :to="`/band/${item._id}`">
|
|
{{ item.name }}
|
|
</nuxt-link>
|
|
{{ (index < story!.currentChapter?.bands.length - 1 && ", ") || "" }}
|
|
</span>
|
|
</div>
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="Genre(s)">
|
|
<div class="wrapLong" v-for="(item, index) in story?.currentChapter.genre">
|
|
<span>
|
|
{{ item }}
|
|
{{ (index < story!.currentChapter?.genre.length - 1 && ", ") || "" }}
|
|
</span>
|
|
</div>
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="Relationship(s)">
|
|
<div class="wrapLong" v-for="(item, index) in story?.currentChapter.relationships">
|
|
<span>
|
|
{{ item.join("/") }}
|
|
{{ (index < story!.currentChapter?.relationships.length - 1 && ", ") || "" }}
|
|
</span>
|
|
</div>
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="Character(s)">
|
|
<div class="wrapLong">
|
|
<span v-for="(item, index) in story?.currentChapter.characters">
|
|
{{ item }}{{ (index < story!.currentChapter?.characters.length - 1 && ", ") || "" }}
|
|
</span>
|
|
</div>
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="Rating">
|
|
{{ story?.currentChapter.nsfw ? "Adult" : "Suitable for most audiences" }}
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="Summary">
|
|
<div v-html="story?.currentChapter.summary"></div>
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="Date posted">
|
|
<a-tooltip>
|
|
<template #title>
|
|
{{ format(Date.parse(story?.currentChapter.posted as unknown as string), "EEEE, LLL dd yyyy @ hh:mm:ss.SSS aa") }}
|
|
</template>
|
|
{{ format(Date.parse(story?.currentChapter.posted as unknown as string), "yyyy-MM-dd") }}
|
|
</a-tooltip>
|
|
</a-descriptions-item>
|
|
</a-descriptions>
|
|
<a-divider />
|
|
<div class="stats">
|
|
<span>
|
|
<span class="staticon">
|
|
<icon :istyle="!dark ? 'solid' : 'regular'" icolor="#ff2883" :size="12" name="heart" />
|
|
</span>
|
|
<span>
|
|
{{ story.favs }}
|
|
</span>
|
|
</span>
|
|
<span>
|
|
<span class="staticon">
|
|
<icon :istyle="!dark ? 'solid' : 'regular'" icolor="#1787d7" :size="12" name="book-open" />
|
|
</span>
|
|
<span>
|
|
{{ story.views }}
|
|
</span>
|
|
</span>
|
|
<span>
|
|
<span class="staticon">
|
|
<icon :istyle="!dark ? 'solid' : 'regular'" icolor="#51e07c" :size="12" name="thumbs-up" />
|
|
</span>
|
|
<span>
|
|
{{ story.recs }}
|
|
</span>
|
|
</span>
|
|
<span>
|
|
<span class="staticon">
|
|
<icon :istyle="!dark ? 'solid' : 'regular'" icolor="#c2d420" :size="12" name="download" />
|
|
</span>
|
|
<span>
|
|
{{ story.downloads }}
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</a-card>
|
|
</template>
|
|
<style scoped>
|
|
.wrapLong {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.stats {
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
}
|
|
|
|
.stats > * {
|
|
display: flex;
|
|
}
|
|
|
|
.stats > * > * + * {
|
|
margin-left: 0.8em;
|
|
}
|
|
</style>
|