127 lines
2.0 KiB
Vue
127 lines
2.0 KiB
Vue
|
<template>
|
||
|
|
<div class="page">
|
||
|
|
<header class="header">
|
||
|
|
<h2 class="title">
|
||
|
|
<a
|
||
|
|
:href="`/s/${shelf.slug}`"
|
||
|
|
class="nolink"
|
||
|
|
>s/{{ shelf.slug }}</a>
|
||
|
|
</h2>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<div class="body">
|
||
|
|
<slot />
|
||
|
|
|
||
|
|
<div class="sidebar">
|
||
|
|
<h4 class="sidebar-title">{{ shelf.slug }}</h4>
|
||
|
|
|
||
|
|
<form
|
||
|
|
class="form compose"
|
||
|
|
@submit.prevent="submitPost"
|
||
|
|
>
|
||
|
|
<div class="form-row">
|
||
|
|
<input
|
||
|
|
v-model="title"
|
||
|
|
placeholder="Title"
|
||
|
|
class="input"
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-row">
|
||
|
|
<input
|
||
|
|
v-model="link"
|
||
|
|
class="input"
|
||
|
|
placeholder="Link"
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-row">
|
||
|
|
<textarea
|
||
|
|
v-model="body"
|
||
|
|
placeholder="Body"
|
||
|
|
class="input body"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-actions">
|
||
|
|
<button class="button button-submit">Post</button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { ref, defineProps } from 'vue';
|
||
|
|
import * as api from '../../assets/js/api';
|
||
|
|
import { navigate } from '../../assets/js/navigate';
|
||
|
|
import { usePageContext } from '../../renderer/usePageContext';
|
||
|
|
|
||
|
|
const { routeParams } = usePageContext();
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
shelf: {
|
||
|
|
type: Object,
|
||
|
|
default: null,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
const title = ref();
|
||
|
|
const link = ref();
|
||
|
|
const body = ref();
|
||
|
|
|
||
|
|
async function submitPost() {
|
||
|
|
const post = await api.post(`/shelves/${routeParams.id}/posts`, {
|
||
|
|
title: title.value,
|
||
|
|
link: link.value,
|
||
|
|
body: body.value,
|
||
|
|
});
|
||
|
|
|
||
|
|
navigate(`/s/${props.shelf.slug}/post/${post.id}`);
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.page {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
padding: 1rem
|
||
|
|
}
|
||
|
|
|
||
|
|
.body {
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
|
||
|
|
.content {
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
flex-grow: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.header {
|
||
|
|
padding: 1rem;
|
||
|
|
border-radius: .25rem;
|
||
|
|
margin-bottom: .5rem;
|
||
|
|
background: var(--background);
|
||
|
|
}
|
||
|
|
|
||
|
|
.title {
|
||
|
|
margin: 0;
|
||
|
|
font-size: 1.25rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sidebar {
|
||
|
|
background: var(--background);
|
||
|
|
width: 20rem;
|
||
|
|
padding: .5rem;
|
||
|
|
border-radius: .25rem;
|
||
|
|
margin-left: .5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sidebar-title {
|
||
|
|
margin: 0 0 1rem 0;
|
||
|
|
font-size: 1.25rem;
|
||
|
|
}
|
||
|
|
</style>
|