102 lines
1.4 KiB
Vue
102 lines
1.4 KiB
Vue
<template>
|
|
<div class="page">
|
|
<div class="content">
|
|
<Post
|
|
:post="post"
|
|
:shelf="shelf"
|
|
/>
|
|
|
|
<p
|
|
v-if="post.body"
|
|
class="body"
|
|
>{{ post.body }}</p>
|
|
|
|
<Writer
|
|
v-if="me"
|
|
:post="post"
|
|
/>
|
|
|
|
<div
|
|
v-else
|
|
class="body"
|
|
>
|
|
<a
|
|
href="/account/login"
|
|
class="link"
|
|
>Log in</a> or
|
|
<a
|
|
href="/account/create"
|
|
class="link"
|
|
>sign up</a> to comment
|
|
</div>
|
|
|
|
<ul class="comments nolist">
|
|
<li
|
|
v-for="comment in comments"
|
|
:key="comment.id"
|
|
>
|
|
<Comment
|
|
:comment="comment"
|
|
:post="post"
|
|
:shelf="shelf"
|
|
/>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="sidebar">
|
|
{{ shelf.name }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import Post from '../../components/posts/post.vue';
|
|
import Comment from '../../components/comments/comment.vue';
|
|
import Writer from '../../components/comments/writer.vue';
|
|
|
|
import { usePageContext } from '../../renderer/usePageContext';
|
|
|
|
const { me, pageData } = usePageContext();
|
|
|
|
const {
|
|
shelf,
|
|
post,
|
|
comments,
|
|
} = pageData;
|
|
</script>
|
|
|
|
<style scoped>
|
|
.page {
|
|
display: flex;
|
|
}
|
|
|
|
.content {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.body {
|
|
box-sizing: border-box;
|
|
padding: 1rem;
|
|
border-radius: .5rem;
|
|
margin: 0 0 .5rem 0;
|
|
background: var(--background);
|
|
}
|
|
|
|
.title {
|
|
margin: 0 0 .5rem 0;
|
|
}
|
|
|
|
.post {
|
|
margin-bottom: .5rem;
|
|
}
|
|
|
|
.sidebar {
|
|
background: var(--background);
|
|
width: 20rem;
|
|
padding: .5rem;
|
|
border-radius: .5rem;
|
|
margin-left: .5rem;
|
|
}
|
|
</style>
|