style(components): fix formatting on story listing components
This commit is contained in:
parent
dd30f08d9a
commit
6f770a1cb8
GPG Key ID:
924A5F6AF051E87C
@ -1,9 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{ label?: string }>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span>
|
||||
<b>{{ label }}</b>: <slot/>
|
||||
</span>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{ label?: string }>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span>
|
||||
<b>{{ label }}</b> : <slot />
|
||||
</span>
|
||||
</template>
|
||||
|
||||
@ -1,240 +1,268 @@
|
||||
<script lang="ts" setup>
|
||||
import type { IStory } from "~/models/stories/index";
|
||||
import { format } from "date-fns";
|
||||
import icon from "../icon.vue";
|
||||
import { theme } from "ant-design-vue";
|
||||
import metaItem from "./metaItem.vue";
|
||||
|
||||
const { useToken } = theme;
|
||||
const { token } = useToken()
|
||||
const dark = inject<Ref<boolean>>("dark")
|
||||
let prop = defineProps<{ story: IStory, last?: boolean }>()
|
||||
const idxo = ((prop.last || false) ? prop.story.chapters.length : 1) - 1
|
||||
console.log("posti->", prop.story.chapters[ prop.story.chapters.length - 1 ])
|
||||
const shortDate = format(Date.parse(
|
||||
prop.story.chapters[ prop.story.chapters.length - 1 ].posted.toString()
|
||||
),
|
||||
"yyyy/MM/dd"
|
||||
)
|
||||
const longDate = format(Date.parse(
|
||||
prop.story.chapters[ prop.story.chapters.length - 1 ].posted.toString()
|
||||
),
|
||||
"iiii',' yyyy-MM-dd"
|
||||
)
|
||||
</script>
|
||||
<template>
|
||||
<a-card>
|
||||
<template #title>
|
||||
<div style="padding-top: 1em; padding-bottom: 0.8em;">
|
||||
<NuxtLink :to="`/story/${story._id}/${idxo + 1}`">
|
||||
{{ story.title }}
|
||||
</NuxtLink>
|
||||
<div style="display: flex; font-size: 0.9em; align-items: baseline;" class="headerthing">
|
||||
<span>
|
||||
a
|
||||
</span>
|
||||
<div style="" v-for="(band, idx) in story.chapters[ idxo ].bands.filter(a => !!a)">
|
||||
<span>
|
||||
<NuxtLink :to="`/band/${band._id}`">
|
||||
{{ band.name }}
|
||||
</NuxtLink>{{ idx < story.chapters[ idxo ].bands.length - 1 ? ", " : "" }}
|
||||
</span>
|
||||
</div>
|
||||
<span>
|
||||
fic by
|
||||
</span>
|
||||
<span>
|
||||
<NuxtLink :to="`/user/${story.author._id}`">
|
||||
{{ story.author.username }}
|
||||
</NuxtLink>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div v-html="story.chapters[ idxo ].summary"/>
|
||||
<a-card v-if="story.ficmas != null" class="ficmasBlurb lessPadding">
|
||||
Written as a gift for
|
||||
<NuxtLink :to="`/user/${story.ficmas.wisher?._id || 1}`">
|
||||
{{ story.ficmas.wisher?.username || "<...>" }}
|
||||
</NuxtLink> as part of {{ story.ficmas.year }}’s
|
||||
<span v-if="story.ficmas.anniversary">
|
||||
Anniversary Ficmas Fest
|
||||
</span>
|
||||
<span v-else>
|
||||
A Very Kinky Rockfic Ficmas Fest.
|
||||
</span>
|
||||
</a-card>
|
||||
<a-card v-if="story.challenge != null" :style="{
|
||||
background: story.challenge.color
|
||||
}" class="lessPadding">
|
||||
Entry for the
|
||||
<NuxtLink :to="`/challenge/${story.challenge._id}`">
|
||||
{{ story.challenge.name }}
|
||||
</NuxtLink>
|
||||
challenge.
|
||||
</a-card>
|
||||
<a-divider :style="{ borderColor: token[ 'pink-5' ], marginBottom: '1em' }"/>
|
||||
<div class="storyMeta">
|
||||
<div class="inner">
|
||||
<span v-if="story.chapters.length > 1">
|
||||
<NuxtLink :to="`/story/${story._id}/chapters`">
|
||||
{{ story.chapters.length }} chapters
|
||||
</NuxtLink>
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ story.chapters.length }} chapter
|
||||
</span>
|
||||
<span>
|
||||
{{ story.chapters[ idxo ].nsfw ? "Adult" : "Not so adult" }}
|
||||
</span>
|
||||
<span>
|
||||
{{ story.completed ? "Completed" : "WIP" }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="outer">
|
||||
<meta-item :span="1" label="Genre(s)">
|
||||
{{ story.chapters[ idxo ].genre.join(", ") }}
|
||||
</meta-item>
|
||||
<meta-item label="Characters">
|
||||
{{ story.chapters[ idxo ].characters.join(", ") }}
|
||||
</meta-item>
|
||||
<meta-item label="Relationship(s)">
|
||||
<div style="display: inline-block" v-for="(rel, idx) in story.chapters[ idxo ].relationships">
|
||||
<span>
|
||||
{{ Array.isArray(rel) ? rel.join("/") : rel }}
|
||||
{{ idx < story.chapters[ idxo ].relationships.length - 1 ? "," : "" }}
|
||||
</span>
|
||||
</div>
|
||||
<span v-if="story.chapters[ idxo ].relationships.length < 1">
|
||||
<i>N/A</i>
|
||||
</span>
|
||||
</meta-item>
|
||||
<meta-item label="Last updated">
|
||||
<a-tooltip>
|
||||
<template #title>
|
||||
{{ longDate }}
|
||||
</template>
|
||||
{{ shortDate }}
|
||||
</a-tooltip>
|
||||
</meta-item>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<span>
|
||||
<span class="staticon">
|
||||
<icon istyle="solid" icolor="#0083aa" :size="12" name="comment" />
|
||||
</span>
|
||||
<span>
|
||||
{{ story.reviews }}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</a-card>
|
||||
</template>
|
||||
<style>
|
||||
.lessPadding>.ant-card-body {
|
||||
padding: 0.8em !important;
|
||||
}
|
||||
|
||||
.ant-descriptions-view tr {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.ant-descriptions-item {
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.storyMeta .ant-descriptions-item-container,
|
||||
.storyMeta .ant-descriptions-item-container>* {
|
||||
font-size: 1em !important;
|
||||
}
|
||||
</style>
|
||||
<style scoped>
|
||||
.stats {
|
||||
padding-top: 0.25em;
|
||||
}
|
||||
|
||||
.stats>*+* {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
.stats>*>*+* {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
.headerthing>*+* {
|
||||
margin-left: 0.3em;
|
||||
font-size: 0.9em !important;
|
||||
}
|
||||
|
||||
hr {
|
||||
background-color: #aaa !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.ficmasBlurb {
|
||||
background-color: #13b658;
|
||||
color: white;
|
||||
/* border-radius: */
|
||||
}
|
||||
|
||||
.ficmasBlurb a {
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ficmasBlurb a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.storyMeta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 0.857em !important;
|
||||
}
|
||||
|
||||
.storyMeta .outer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
.storyMeta .inner>*+*::before {
|
||||
content: "♪";
|
||||
color: #ff2883;
|
||||
margin: 0 0.7em;
|
||||
}
|
||||
</style>
|
||||
<script lang="ts" setup>
|
||||
import type { IStory } from "~/models/stories/index";
|
||||
import { log } from "~/lib/server/logger";
|
||||
import { format } from "date-fns";
|
||||
import icon from "../icon.vue";
|
||||
import { theme } from "ant-design-vue";
|
||||
import metaItem from "./metaItem.vue";
|
||||
|
||||
const { useToken } = theme;
|
||||
const { token } = useToken();
|
||||
const dark = inject<Ref<boolean>>("dark");
|
||||
let prop = defineProps<{ story: IStory; last?: boolean }>();
|
||||
const idxo = (prop.last || false ? prop.story.chapters.length : 1) - 1;
|
||||
// log.debug("posti->", prop.story.chapters[ prop.story.chapters.length - 1 ]);
|
||||
const shortDate = format(
|
||||
Date.parse(
|
||||
prop.story.chapters[prop.story.chapters.length - 1]?.posted!.toString(),
|
||||
),
|
||||
"yyyy/MM/dd",
|
||||
);
|
||||
const longDate = format(
|
||||
Date.parse(
|
||||
prop.story.chapters[prop.story.chapters.length - 1]?.posted!.toString(),
|
||||
),
|
||||
"iiii',' yyyy-MM-dd",
|
||||
);
|
||||
</script>
|
||||
<template>
|
||||
<a-card>
|
||||
<template #title>
|
||||
<div style="padding-top: 1em; padding-bottom: 0.8em">
|
||||
<NuxtLink :to="`/story/${story._id}/${idxo + 1}`">
|
||||
{{ story.title }}
|
||||
</NuxtLink>
|
||||
<div
|
||||
style="display: flex; font-size: 0.9em; align-items: baseline"
|
||||
class="headerthing"
|
||||
>
|
||||
<span> a </span>
|
||||
<div
|
||||
style=""
|
||||
v-for="(band, idx) in story.chapters[idxo].bands.filter((a) => !!a)"
|
||||
>
|
||||
<span>
|
||||
<NuxtLink :to="`/band/${band._id}`"> {{ band.name }} </NuxtLink
|
||||
>{{ idx < story.chapters[idxo].bands.length - 1 ? ", " : "" }}
|
||||
</span>
|
||||
</div>
|
||||
<span> fic by </span>
|
||||
<span>
|
||||
<NuxtLink :to="`/user/${story.author._id}`">
|
||||
{{ story.author.username }}
|
||||
</NuxtLink>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div v-html="story.chapters[idxo].summary" />
|
||||
<a-card v-if="story.ficmas != null" class="ficmasBlurb lessPadding">
|
||||
Written as a gift for
|
||||
<NuxtLink :to="`/user/${story.ficmas.wisher?._id || 1}`">
|
||||
{{ story.ficmas.wisher?.username || "<...>" }}
|
||||
</NuxtLink>
|
||||
as part of {{ story.ficmas.year }}’s
|
||||
<span v-if="story.ficmas.anniversary"> Anniversary Ficmas Fest </span>
|
||||
<span v-else> A Very Kinky Rockfic Ficmas Fest. </span>
|
||||
</a-card>
|
||||
<a-card
|
||||
v-if="story.challenge != null"
|
||||
:style="{
|
||||
background: story.challenge.color,
|
||||
}"
|
||||
class="lessPadding"
|
||||
>
|
||||
Entry for the
|
||||
<NuxtLink :to="`/challenge/${story.challenge._id}`">
|
||||
{{ story.challenge.name }}
|
||||
</NuxtLink>
|
||||
challenge.
|
||||
</a-card>
|
||||
<a-divider :style="{ borderColor: token['pink-5'], marginBottom: '1em' }" />
|
||||
<div class="storyMeta">
|
||||
<div class="inner">
|
||||
<span v-if="story.chapters.length > 1">
|
||||
<NuxtLink :to="`/story/${story._id}/chapters`">
|
||||
{{ story.chapters.length }} chapters
|
||||
</NuxtLink>
|
||||
</span>
|
||||
<span v-else> {{ story.chapters.length }} chapter </span>
|
||||
<span>
|
||||
{{ story.chapters[idxo].nsfw ? "Adult" : "Not so adult" }}
|
||||
</span>
|
||||
<span>
|
||||
{{ story.completed ? "Completed" : "WIP" }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="outer">
|
||||
<meta-item :span="1" label="Genre(s)">
|
||||
{{ story.chapters[idxo].genre.join(", ") }}
|
||||
</meta-item>
|
||||
<meta-item label="Characters">
|
||||
{{ story.chapters[idxo].characters.join(", ") }}
|
||||
</meta-item>
|
||||
<meta-item label="Relationship(s)">
|
||||
<div
|
||||
style="display: inline-block"
|
||||
v-for="(rel, idx) in story.chapters[idxo].relationships"
|
||||
>
|
||||
<span>
|
||||
{{ Array.isArray(rel) ? rel.join("/") : rel }}
|
||||
{{
|
||||
idx < story.chapters[idxo].relationships.length - 1 ? "," : ""
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
<span v-if="story.chapters[idxo].relationships.length < 1">
|
||||
<i>N/A</i>
|
||||
</span>
|
||||
</meta-item>
|
||||
<meta-item label="Last updated">
|
||||
<a-tooltip>
|
||||
<template #title>
|
||||
{{ longDate }}
|
||||
</template>
|
||||
{{ shortDate }}
|
||||
</a-tooltip>
|
||||
</meta-item>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<span>
|
||||
<span class="staticon">
|
||||
<icon istyle="solid" icolor="#0083aa" :size="12" name="comment" />
|
||||
</span>
|
||||
<span>
|
||||
{{ story.reviews }}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</a-card>
|
||||
</template>
|
||||
<style>
|
||||
.lessPadding > .ant-card-body {
|
||||
padding: 0.8em !important;
|
||||
}
|
||||
|
||||
.ant-descriptions-view tr {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.ant-descriptions-item {
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.storyMeta .ant-descriptions-item-container,
|
||||
.storyMeta .ant-descriptions-item-container > * {
|
||||
font-size: 1em !important;
|
||||
}
|
||||
</style>
|
||||
<style scoped>
|
||||
.stats {
|
||||
padding-top: 0.25em;
|
||||
}
|
||||
|
||||
.stats > * + * {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
.stats > * > * + * {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
.headerthing > * + * {
|
||||
margin-left: 0.3em;
|
||||
font-size: 0.9em !important;
|
||||
}
|
||||
|
||||
hr {
|
||||
background-color: #aaa !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.ficmasBlurb {
|
||||
background-color: #13b658;
|
||||
color: white;
|
||||
/* border-radius: */
|
||||
}
|
||||
|
||||
.ficmasBlurb a {
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ficmasBlurb a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.storyMeta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 0.857em !important;
|
||||
}
|
||||
|
||||
.storyMeta .outer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
.storyMeta .inner > * + *::before {
|
||||
content: "♪";
|
||||
color: #ff2883;
|
||||
margin: 0 0.7em;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,52 +1,63 @@
|
||||
<script setup lang="ts">
|
||||
;
|
||||
import singleStory from '~/components/listings/singleStory.vue';
|
||||
const route = useRoute()
|
||||
let curPage = ref(route.query.page || 1)
|
||||
const props = defineProps<{ prefix: string; }>()
|
||||
let { data }: any = await useApiFetch(`${props.prefix}/stories`, {
|
||||
query: {
|
||||
page: curPage
|
||||
}
|
||||
})
|
||||
let rdata = ref(data)
|
||||
const pagiChange = async (page, pageSize) => {
|
||||
curPage.value = page;
|
||||
// await navigateTo({
|
||||
// path: useRoute().fullPath,
|
||||
// query: {
|
||||
// page
|
||||
// }
|
||||
// })
|
||||
// let { data }: any = await useApiFetch(`${props.prefix}/stories`, {
|
||||
// query: {
|
||||
// page: curPage
|
||||
// }
|
||||
// })
|
||||
// rdata.value = data;
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<a-list :pagination="{
|
||||
defaultPageSize: 20,
|
||||
total: rdata.total,
|
||||
defaultCurrent: curPage as number,
|
||||
// onChange: pagiChange,
|
||||
hideOnSinglePage: true,
|
||||
showSizeChanger: false
|
||||
}" :data-source="rdata.stories" item-layout="vertical">
|
||||
<template #renderItem="{ item }">
|
||||
<!-- {{ item.title }} -->
|
||||
<single-story :story="item"/>
|
||||
</template>
|
||||
</a-list>
|
||||
</template>
|
||||
<style scoped>
|
||||
.ant-list-items>*+* {
|
||||
margin-top: 1.2em;
|
||||
}
|
||||
|
||||
.ant-pagination {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
<script setup lang="ts">
|
||||
import singleStory from "~/components/listings/singleStory.vue";
|
||||
import { IStory } from "~/models/stories";
|
||||
const route = useRoute();
|
||||
let curPage = ref(route.query.page || 1);
|
||||
const props = defineProps<{ prefix?: string; items?: IStory[] }>();
|
||||
let data;
|
||||
if (!props.prefix) {
|
||||
data = props.items;
|
||||
} else if (!props.items) {
|
||||
data = (
|
||||
await useApiFetch<any>(`${props.prefix}`, {
|
||||
query: {
|
||||
page: curPage,
|
||||
},
|
||||
})
|
||||
).data;
|
||||
}
|
||||
let rdata = ref(data);
|
||||
const pagiChange = async (page, pageSize) => {
|
||||
curPage.value = page;
|
||||
// await navigateTo({
|
||||
// path: useRoute().fullPath,
|
||||
// query: {
|
||||
// page
|
||||
// }
|
||||
// })
|
||||
// let {data: data } = await useApiFetch(`${props.prefix}/stories`, {
|
||||
// query: {
|
||||
// page: curPage
|
||||
// }
|
||||
// })
|
||||
// rdata.value = data;
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<a-list
|
||||
:pagination="{
|
||||
defaultPageSize: 20,
|
||||
total: rdata.total,
|
||||
defaultCurrent: curPage as number,
|
||||
// onChange: pagiChange,
|
||||
hideOnSinglePage: true,
|
||||
showSizeChanger: false,
|
||||
}"
|
||||
:data-source="rdata.stories"
|
||||
item-layout="vertical"
|
||||
>
|
||||
<template #renderItem="{ item }">
|
||||
<!-- {{ item.title }} -->
|
||||
<single-story :story="item" />
|
||||
</template>
|
||||
</a-list>
|
||||
</template>
|
||||
<style scoped>
|
||||
.ant-list-items > * + * {
|
||||
margin-top: 1.2em;
|
||||
}
|
||||
|
||||
.ant-pagination {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user