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

fix(pages, components): update story page

Browse Source 
make elements look less crowded on mobile
This commit is contained in:
☙◦ The Tablet ❀ GamerGirlandCo ◦❧ 2024-11-11 22:34:44 -05:00
parent 1b891c6b2c
commit b65f618b7e
Signed by: tablet
GPG Key ID: 924A5F6AF051E87C
3 changed files with 27 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/story/create/singleChapter.vue
View File

@ -16,7 +16,7 @@
name: NamePath; name: NamePath;
data: FormChapter; data: FormChapter;
}>(); }>();
let acData = toRef(data); let acData = toRef(() => data);
let { data: _bands } = await useApiFetch<IBand[]>("/band/all"); let { data: _bands } = await useApiFetch<IBand[]>("/band/all");
let bands = ref(_bands); let bands = ref(_bands);
provide("curName", name + "."); provide("curName", name + ".");

11
components/story/view/storyInfo.vue
View File

@ -2,12 +2,13 @@
import { format } from "date-fns"; import { format } from "date-fns";
import { type SingleChapterResult } from "@client/types/slightlyDifferentStory"; import { type SingleChapterResult } from "@client/types/slightlyDifferentStory";
import icon from "~/components/icon.vue"; import icon from "~/components/icon.vue";
const story = inject<SingleChapterResult | null>("story"); const story = inject<SingleChapterResult | null>("story");
console.log("storyyy--info", story); console.log("storyyy--info", story);
const dark = inject<Ref<boolean>>("dark"); const dark = inject<Ref<boolean>>("dark");
</script> </script>
<template> <template>
<a-card style="width: 45%; float: left; margin-right: 1.2em" v-if="!!story"> <a-card class="story-info-card" style="" v-if="!!story">
<a-descriptions :label-style="{ fontWeight: 'bold' }" :colon="false" :column="1"> <a-descriptions :label-style="{ fontWeight: 'bold' }" :colon="false" :column="1">
<a-descriptions-item label="Author"> <a-descriptions-item label="Author">
<nuxt-link :to="`/user/${story?.author._id}`">{{ story?.author.username }}</nuxt-link> <nuxt-link :to="`/user/${story?.author._id}`">{{ story?.author.username }}</nuxt-link>
@ -118,4 +119,12 @@
.stats > * > * + * { .stats > * > * + * {
margin-left: 0.8em; margin-left: 0.8em;
} }
@media (min-width: 968px) {
.story-info-card {
width: 45%;
float: left;
margin-right: 1.2em;
}
}
</style> </style>

18
pages/story/[id]/[cidx]/index.vue
View File

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { SingleChapterResult } from "@client/types/slightlyDifferentStory"; import { SingleChapterResult } from "@client/types/slightlyDifferentStory";
import { theme } from "ant-design-vue"; import { Grid, theme } from "ant-design-vue";
import { storyMiddleware } from "@client/middleware"; import { storyMiddleware } from "@client/middleware";
import forChapter from "~/components/reviews/forChapter.vue"; import forChapter from "~/components/reviews/forChapter.vue";
import storyInfo from "~/components/story/view/storyInfo.vue"; import storyInfo from "~/components/story/view/storyInfo.vue";
@ -26,6 +26,7 @@
title: `"${story.value.title}" by ${story.value.author.username}${and.value}`, title: `"${story.value.title}" by ${story.value.author.username}${and.value}`,
}); });
await recordView(story.value._id!); await recordView(story.value._id!);
const bp = Grid.useBreakpoint();
</script> </script>
<template> <template>
<a-typography-title> <a-typography-title>
@ -36,9 +37,9 @@
<a-card <a-card
:style="{ :style="{
backgroundColor: dark ? 'rgb(191, 54, 67)' : token.colorError, backgroundColor: dark ? 'rgb(191, 54, 67)' : token.colorError,
display: 'flow-root',
color: '#fff', color: '#fff',
}" }"
class="maybe-flow-root"
> >
<div> <div>
<a-typography-title :level="2"> Disclaimer </a-typography-title> <a-typography-title :level="2"> Disclaimer </a-typography-title>
@ -81,3 +82,16 @@
<for-chapter :endpoint="`/story/${rtr.params.id}/${rtr.params.cidx}`" /> <for-chapter :endpoint="`/story/${rtr.params.id}/${rtr.params.cidx}`" />
</div> </div>
</template> </template>
<style>
.flow-root {
display: flow-root;
}
.maybe-flow-root {
display: block;
}
@media (min-width: 968px) {
.maybe-flow-root {
display: flow-root;
}
}
</style>