rockfic/next
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(components): fix formatting on story listing components

Browse Source
This commit is contained in:
☙◦ The Tablet ❀ GamerGirlandCo ◦❧ 2023-10-10 22:07:57 -04:00
parent dd30f08d9a
commit 6f770a1cb8
Signed by: tablet
GPG Key ID: 924A5F6AF051E87C
3 changed files with 340 additions and 301 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/listings/metaItem.vue
View File

@ -1,9 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
const props = defineProps<{ label?: string }>() const props = defineProps<{ label?: string }>();
</script> </script>
<template> <template>
<span> <span>
<b>{{ label }}</b>: <slot/> <b>{{ label }}</b> : <slot />
</span> </span>
</template> </template>

206
components/listings/singleStory.vue
View File

@ -1,48 +1,52 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { IStory } from "~/models/stories/index"; import type { IStory } from "~/models/stories/index";
import { format } from "date-fns"; import { log } from "~/lib/server/logger";
import icon from "../icon.vue"; import { format } from "date-fns";
import { theme } from "ant-design-vue"; import icon from "../icon.vue";
import metaItem from "./metaItem.vue"; import { theme } from "ant-design-vue";
import metaItem from "./metaItem.vue";
const { useToken } = theme; const { useToken } = theme;
const { token } = useToken() const { token } = useToken();
const dark = inject<Ref<boolean>>("dark") const dark = inject<Ref<boolean>>("dark");
let prop = defineProps<{ story: IStory, last?: boolean }>() let prop = defineProps<{ story: IStory; last?: boolean }>();
const idxo = ((prop.last || false) ? prop.story.chapters.length : 1) - 1 const idxo = (prop.last || false ? prop.story.chapters.length : 1) - 1;
console.log("posti->", prop.story.chapters[ prop.story.chapters.length - 1 ]) // log.debug("posti->", prop.story.chapters[ prop.story.chapters.length - 1 ]);
const shortDate = format(Date.parse( const shortDate = format(
prop.story.chapters[ prop.story.chapters.length - 1 ].posted.toString() Date.parse(
), prop.story.chapters[prop.story.chapters.length - 1]?.posted!.toString(),
"yyyy/MM/dd" ),
) "yyyy/MM/dd",
const longDate = format(Date.parse( );
prop.story.chapters[ prop.story.chapters.length - 1 ].posted.toString() const longDate = format(
), Date.parse(
"iiii',' yyyy-MM-dd" prop.story.chapters[prop.story.chapters.length - 1]?.posted!.toString(),
) ),
"iiii',' yyyy-MM-dd",
);
</script> </script>
<template> <template>
<a-card> <a-card>
<template #title> <template #title>
<div style="padding-top: 1em; padding-bottom: 0.8em;"> <div style="padding-top: 1em; padding-bottom: 0.8em">
<NuxtLink :to="`/story/${story._id}/${idxo + 1}`"> <NuxtLink :to="`/story/${story._id}/${idxo + 1}`">
{{ story.title }} {{ story.title }}
</NuxtLink> </NuxtLink>
<div style="display: flex; font-size: 0.9em; align-items: baseline;" class="headerthing"> <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> <span>
a <NuxtLink :to="`/band/${band._id}`"> {{ band.name }} </NuxtLink
</span> >{{ idx < story.chapters[idxo].bands.length - 1 ? ", " : "" }}
<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> </span>
</div> </div>
<span> <span> fic by </span>
fic by
</span>
<span> <span>
<NuxtLink :to="`/user/${story.author._id}`"> <NuxtLink :to="`/user/${story.author._id}`">
{{ story.author.username }} {{ story.author.username }}
@ -51,29 +55,30 @@ const longDate = format(Date.parse(
</div> </div>
</div> </div>
</template> </template>
<div v-html="story.chapters[ idxo ].summary"/> <div v-html="story.chapters[idxo].summary" />
<a-card v-if="story.ficmas != null" class="ficmasBlurb lessPadding"> <a-card v-if="story.ficmas != null" class="ficmasBlurb lessPadding">
Written as a gift for Written as a gift for
<NuxtLink :to="`/user/${story.ficmas.wisher?._id || 1}`"> <NuxtLink :to="`/user/${story.ficmas.wisher?._id || 1}`">
{{ story.ficmas.wisher?.username || "<...>" }} {{ story.ficmas.wisher?.username || "<...>" }}
</NuxtLink> as part of {{ story.ficmas.year }}&rsquo;s </NuxtLink>
<span v-if="story.ficmas.anniversary"> as part of {{ story.ficmas.year }}&rsquo;s
Anniversary Ficmas Fest <span v-if="story.ficmas.anniversary"> Anniversary Ficmas Fest </span>
</span> <span v-else> A Very Kinky Rockfic Ficmas Fest. </span>
<span v-else>
A Very Kinky Rockfic Ficmas Fest.
</span>
</a-card> </a-card>
<a-card v-if="story.challenge != null" :style="{ <a-card
background: story.challenge.color v-if="story.challenge != null"
}" class="lessPadding"> :style="{
background: story.challenge.color,
}"
class="lessPadding"
>
Entry for the Entry for the
<NuxtLink :to="`/challenge/${story.challenge._id}`"> <NuxtLink :to="`/challenge/${story.challenge._id}`">
{{ story.challenge.name }} {{ story.challenge.name }}
</NuxtLink> </NuxtLink>
challenge. challenge.
</a-card> </a-card>
<a-divider :style="{ borderColor: token[ 'pink-5' ], marginBottom: '1em' }"/> <a-divider :style="{ borderColor: token['pink-5'], marginBottom: '1em' }" />
<div class="storyMeta"> <div class="storyMeta">
<div class="inner"> <div class="inner">
<span v-if="story.chapters.length > 1"> <span v-if="story.chapters.length > 1">
@ -81,11 +86,9 @@ const longDate = format(Date.parse(
{{ story.chapters.length }} chapters {{ story.chapters.length }} chapters
</NuxtLink> </NuxtLink>
</span> </span>
<span v-else> <span v-else> {{ story.chapters.length }} chapter </span>
{{ story.chapters.length }} chapter
</span>
<span> <span>
{{ story.chapters[ idxo ].nsfw ? "Adult" : "Not so adult" }} {{ story.chapters[idxo].nsfw ? "Adult" : "Not so adult" }}
</span> </span>
<span> <span>
{{ story.completed ? "Completed" : "WIP" }} {{ story.completed ? "Completed" : "WIP" }}
@ -94,19 +97,24 @@ const longDate = format(Date.parse(
<div class="outer"> <div class="outer">
<meta-item :span="1" label="Genre(s)"> <meta-item :span="1" label="Genre(s)">
{{ story.chapters[ idxo ].genre.join(", ") }} {{ story.chapters[idxo].genre.join(", ") }}
</meta-item> </meta-item>
<meta-item label="Characters"> <meta-item label="Characters">
{{ story.chapters[ idxo ].characters.join(", ") }} {{ story.chapters[idxo].characters.join(", ") }}
</meta-item> </meta-item>
<meta-item label="Relationship(s)"> <meta-item label="Relationship(s)">
<div style="display: inline-block" v-for="(rel, idx) in story.chapters[ idxo ].relationships"> <div
style="display: inline-block"
v-for="(rel, idx) in story.chapters[idxo].relationships"
>
<span> <span>
{{ Array.isArray(rel) ? rel.join("/") : rel }} {{ Array.isArray(rel) ? rel.join("/") : rel }}
{{ idx < story.chapters[ idxo ].relationships.length - 1 ? "," : "" }} {{
idx < story.chapters[idxo].relationships.length - 1 ? "," : ""
}}
</span> </span>
</div> </div>
<span v-if="story.chapters[ idxo ].relationships.length < 1"> <span v-if="story.chapters[idxo].relationships.length < 1">
<i>N/A</i> <i>N/A</i>
</span> </span>
</meta-item> </meta-item>
@ -123,7 +131,12 @@ const longDate = format(Date.parse(
<div class="stats"> <div class="stats">
<span> <span>
<span class="staticon"> <span class="staticon">
<icon :istyle="!dark ? 'solid' : 'regular'" icolor="#ff2883" :size="12" name="heart"/> <icon
:istyle="!dark ? 'solid' : 'regular'"
icolor="#ff2883"
:size="12"
name="heart"
/>
</span> </span>
<span> <span>
{{ story.favs }} {{ story.favs }}
@ -131,7 +144,12 @@ const longDate = format(Date.parse(
</span> </span>
<span> <span>
<span class="staticon"> <span class="staticon">
<icon :istyle="!dark ? 'solid' : 'regular'" icolor="#1787d7" :size="12" name="book-open" /> <icon
:istyle="!dark ? 'solid' : 'regular'"
icolor="#1787d7"
:size="12"
name="book-open"
/>
</span> </span>
<span> <span>
{{ story.views }} {{ story.views }}
@ -139,7 +157,12 @@ const longDate = format(Date.parse(
</span> </span>
<span> <span>
<span class="staticon"> <span class="staticon">
<icon :istyle="!dark ? 'solid' : 'regular'" icolor="#51e07c" :size="12" name="thumbs-up" /> <icon
:istyle="!dark ? 'solid' : 'regular'"
icolor="#51e07c"
:size="12"
name="thumbs-up"
/>
</span> </span>
<span> <span>
{{ story.recs }} {{ story.recs }}
@ -147,7 +170,12 @@ const longDate = format(Date.parse(
</span> </span>
<span> <span>
<span class="staticon"> <span class="staticon">
<icon :istyle="!dark ? 'solid' : 'regular'" icolor="#c2d420" :size="12" name="download" /> <icon
:istyle="!dark ? 'solid' : 'regular'"
icolor="#c2d420"
:size="12"
name="download"
/>
</span> </span>
<span> <span>
{{ story.downloads }} {{ story.downloads }}
@ -165,76 +193,76 @@ const longDate = format(Date.parse(
</a-card> </a-card>
</template> </template>
<style> <style>
.lessPadding>.ant-card-body { .lessPadding > .ant-card-body {
padding: 0.8em !important; padding: 0.8em !important;
} }
.ant-descriptions-view tr { .ant-descriptions-view tr {
border: none; border: none;
} }
.ant-descriptions-item { .ant-descriptions-item {
padding-bottom: 0 !important; padding-bottom: 0 !important;
} }
.storyMeta .ant-descriptions-item-container, .storyMeta .ant-descriptions-item-container,
.storyMeta .ant-descriptions-item-container>* { .storyMeta .ant-descriptions-item-container > * {
font-size: 1em !important; font-size: 1em !important;
} }
</style> </style>
<style scoped> <style scoped>
.stats { .stats {
padding-top: 0.25em; padding-top: 0.25em;
} }
.stats>*+* { .stats > * + * {
margin-left: 0.5em; margin-left: 0.5em;
} }
.stats>*>*+* { .stats > * > * + * {
margin-left: 0.5em; margin-left: 0.5em;
} }
.headerthing>*+* { .headerthing > * + * {
margin-left: 0.3em; margin-left: 0.3em;
font-size: 0.9em !important; font-size: 0.9em !important;
} }
hr { hr {
background-color: #aaa !important; background-color: #aaa !important;
border: none !important; border: none !important;
} }
.ficmasBlurb { .ficmasBlurb {
background-color: #13b658; background-color: #13b658;
color: white; color: white;
/* border-radius: */ /* border-radius: */
} }
.ficmasBlurb a { .ficmasBlurb a {
color: #000; color: #000;
font-weight: bold; font-weight: bold;
} }
.ficmasBlurb a:hover { .ficmasBlurb a:hover {
text-decoration: underline; text-decoration: underline;
} }
.storyMeta { .storyMeta {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-size: 0.857em !important; font-size: 0.857em !important;
} }
.storyMeta .outer { .storyMeta .outer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-top: 0.5em; margin-top: 0.5em;
} }
.storyMeta .inner>*+*::before { .storyMeta .inner > * + *::before {
content: "♪"; content: "♪";
color: #ff2883; color: #ff2883;
margin: 0 0.7em; margin: 0 0.7em;
} }
</style> </style>

51
components/listings/stories.vue
View File

@ -1,16 +1,23 @@
<script setup lang="ts"> <script setup lang="ts">
; import singleStory from "~/components/listings/singleStory.vue";
import singleStory from '~/components/listings/singleStory.vue'; import { IStory } from "~/models/stories";
const route = useRoute() const route = useRoute();
let curPage = ref(route.query.page || 1) let curPage = ref(route.query.page || 1);
const props = defineProps<{ prefix: string; }>() const props = defineProps<{ prefix?: string; items?: IStory[] }>();
let { data }: any = await useApiFetch(`${props.prefix}/stories`, { let data;
if (!props.prefix) {
data = props.items;
} else if (!props.items) {
data = (
await useApiFetch<any>(`${props.prefix}`, {
query: { query: {
page: curPage page: curPage,
},
})
).data;
} }
}) let rdata = ref(data);
let rdata = ref(data) const pagiChange = async (page, pageSize) => {
const pagiChange = async (page, pageSize) => {
curPage.value = page; curPage.value = page;
// await navigateTo({ // await navigateTo({
// path: useRoute().fullPath, // path: useRoute().fullPath,
@ -18,35 +25,39 @@ const pagiChange = async (page, pageSize) => {
// page // page
// } // }
// }) // })
// let { data }: any = await useApiFetch(`${props.prefix}/stories`, { // let {data: data } = await useApiFetch(`${props.prefix}/stories`, {
// query: { // query: {
// page: curPage // page: curPage
// } // }
// }) // })
// rdata.value = data; // rdata.value = data;
} };
</script> </script>
<template> <template>
<a-list :pagination="{ <a-list
:pagination="{
defaultPageSize: 20, defaultPageSize: 20,
total: rdata.total, total: rdata.total,
defaultCurrent: curPage as number, defaultCurrent: curPage as number,
// onChange: pagiChange, // onChange: pagiChange,
hideOnSinglePage: true, hideOnSinglePage: true,
showSizeChanger: false showSizeChanger: false,
}" :data-source="rdata.stories" item-layout="vertical"> }"
:data-source="rdata.stories"
item-layout="vertical"
>
<template #renderItem="{ item }"> <template #renderItem="{ item }">
<!-- {{ item.title }} --> <!-- {{ item.title }} -->
<single-story :story="item"/> <single-story :story="item" />
</template> </template>
</a-list> </a-list>
</template> </template>
<style scoped> <style scoped>
.ant-list-items>*+* { .ant-list-items > * + * {
margin-top: 1.2em; margin-top: 1.2em;
} }
.ant-pagination { .ant-pagination {
text-align: center; text-align: center;
} }
</style> </style>