fix(pages, components): update story page
make elements look less crowded on mobile
This commit is contained in:
parent
1b891c6b2c
commit
b65f618b7e
@ -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 + ".");
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user