shack/components/posts/post.vue

256 lines
4.3 KiB
Vue
Raw Normal View History

2023-06-05 23:30:46 +00:00
<template>
2023-06-11 03:32:02 +00:00
<div class="post">
2023-06-25 17:52:00 +00:00
<div class="votes noselect">
<div
class="vote bump"
:class="{ active: hasBump }"
title="Bump"
@click="submitVote(1)"
2023-06-25 17:52:00 +00:00
>+</div>
<div
class="tally"
:title="`${post.vote.total} ${post.vote.total === 1 ? 'vote' : 'votes'}`"
2023-06-25 17:52:00 +00:00
>{{ tally }}</div>
<div
class="vote sink"
:class="{ active: hasSink }"
title="Sink"
@click="submitVote(-1)"
2023-06-25 17:52:00 +00:00
>-</div>
</div>
2023-06-11 03:32:02 +00:00
<a
:href="post.link || `/s/${post.shelf.slug}/post/${post.id}/${post.slug}`"
2023-06-11 03:32:02 +00:00
target="_blank"
class="title-link"
2023-06-05 23:30:46 +00:00
>
2023-06-11 03:32:02 +00:00
<img
class="thumbnail"
:src="blockedIcon"
>
</a>
2023-06-05 23:30:46 +00:00
<div class="body">
2023-06-11 03:32:02 +00:00
<div class="header">
<h2 class="title">
<a
:href="`/s/${post.shelf.slug}/post/${post.id}/${post.slug}`"
2023-06-11 03:32:02 +00:00
class="title-link"
>{{ post.title }}</a>
</h2>
2023-06-05 23:30:46 +00:00
<a
2023-06-11 03:32:02 +00:00
v-if="post.link"
:href="post.link"
target="_blank"
2023-06-05 23:30:46 +00:00
class="link"
2023-06-11 03:32:02 +00:00
>{{ post.link }}</a>
</div>
2023-06-05 23:30:46 +00:00
<div class="meta">
<a
2023-06-11 03:32:02 +00:00
:href="`/s/${post.shelf.slug}`"
2023-06-05 23:30:46 +00:00
class="shelf link"
>s/{{ post.shelf.slug }}</a>
<a
:href="`/user/${post.user.username}`"
class="username link"
>u/{{ post.user.username }}</a>
<span
:title="format(post.createdAt, 'MMMM d, yyyy hh:mm:ss')"
class="timestamp"
2023-06-11 03:32:02 +00:00
>{{ formatDistance(post.createdAt, now, { includeSeconds: true }) }} ago</span>
</div>
<div class="actions">
<a
2023-06-25 17:52:00 +00:00
:href="`/s/${post.shelf.slug}/post/${post.id}`"
2023-06-11 03:32:02 +00:00
class="link comments"
>{{ post.commentCount }} comments</a>
2023-06-05 23:30:46 +00:00
</div>
</div>
2023-06-11 03:32:02 +00:00
<a
:href="`/s/${post.shelf.slug}/post/${post.id}/${post.slug}`"
2023-06-11 03:32:02 +00:00
class="fill"
/>
</div>
2023-06-05 23:30:46 +00:00
</template>
<script setup>
2023-06-25 17:52:00 +00:00
import { ref } from 'vue';
2023-06-05 23:30:46 +00:00
import { format, formatDistance } from 'date-fns';
2023-06-25 17:52:00 +00:00
2023-06-11 03:32:02 +00:00
import blockedIcon from '../../assets/icons/blocked.svg?url'; // eslint-disable-line import/no-unresolved
import { usePageContext } from '../../renderer/usePageContext';
2023-06-25 17:52:00 +00:00
import * as api from '../../assets/js/api';
2023-06-11 03:32:02 +00:00
2023-06-25 17:52:00 +00:00
const { me, now } = usePageContext();
2023-06-05 23:30:46 +00:00
2023-06-25 17:52:00 +00:00
const props = defineProps({
2023-06-05 23:30:46 +00:00
post: {
type: Object,
default: null,
},
2023-06-25 17:52:00 +00:00
shelf: {
type: Object,
default: null,
},
2023-06-05 23:30:46 +00:00
});
2023-06-25 17:52:00 +00:00
const tally = ref(props.post.vote.tally);
const hasBump = ref(props.post.vote.bump);
const hasSink = ref(props.post.vote.sink);
2023-06-25 17:52:00 +00:00
const voting = ref(false);
async function submitVote(value) {
2023-06-25 17:52:00 +00:00
if (!me || voting.value) {
return;
}
voting.value = true;
const undo = (value > 0 && hasBump.value) || (value < 0 && hasSink.value);
const vote = await api.post(`/posts/${props.post.id}/votes`, { value: undo ? 0 : value });
2023-06-25 17:52:00 +00:00
tally.value = vote.tally;
hasBump.value = vote.bump;
hasSink.value = vote.sink;
2023-06-25 17:52:00 +00:00
voting.value = false;
}
2023-06-05 23:30:46 +00:00
</script>
<style scoped>
.post {
display: flex;
color: var(--text);
border-radius: .25rem;
2023-06-11 03:32:02 +00:00
margin-bottom: .25rem;
2023-06-05 23:30:46 +00:00
background: var(--background);
text-decoration: none;
overflow: hidden;
2023-06-05 23:30:46 +00:00
& :hover {
cursor: pointer;
.title {
color: var(--text);
}
}
}
.body {
margin-left: 1rem;
}
2023-06-11 03:32:02 +00:00
.header {
display: flex;
align-items: center;
flex-wrap: wrap;
2023-06-11 03:32:02 +00:00
}
2023-06-05 23:30:46 +00:00
.title {
2023-06-11 03:32:02 +00:00
display: inline-block;
padding: .25rem 0;
margin: .25rem 1rem 0 0;
font-size: 1rem;
font-weight: bold;
2023-06-05 23:30:46 +00:00
color: var(--grey-dark-30);
2023-06-11 03:32:02 +00:00
}
2023-06-05 23:30:46 +00:00
2023-06-11 03:32:02 +00:00
.title-link {
color: inherit;
text-decoration: none;
2023-06-05 23:30:46 +00:00
}
.thumbnail {
width: 7rem;
height: 4rem;
box-sizing: border-box;
padding: 1rem;
border-radius: .25rem;
margin: .5rem;
background: var(--grey-light-10);
opacity: .25;
}
2023-06-25 17:52:00 +00:00
.votes {
width: 3rem;
2023-06-25 17:52:00 +00:00
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.vote,
.tally {
display: flex;
align-items: center;
height: 1rem;
font-weight: bold;
}
.vote {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.5rem;
height: 1rem;
box-sizing: border-box;
padding: .6rem;
margin: .25rem 0;
border-radius: .5rem;
background: var(--shadow-weak-40);
}
.tally {
color: var(--shadow-strong-20);
font-size: .9rem;
}
.bump.active {
color: var(--text-light);
background: var(--bump);
}
.sink.active {
color: var(--text-light);
background: var(--sink);
}
2023-06-05 23:30:46 +00:00
.meta {
display: flex;
flex-wrap: wrap;
gap: 0 1rem;
2023-06-11 03:32:02 +00:00
margin-bottom: .25rem;
2023-06-05 23:30:46 +00:00
font-size: .9rem;
}
2023-06-11 03:32:02 +00:00
.username {
color: inherit;
}
2023-06-05 23:30:46 +00:00
.shelf {
color: inherit;
font-weight: bold;
}
.timestamp {
color: var(--grey-dark-20);
}
2023-06-11 03:32:02 +00:00
.comments {
color: inherit;
font-size: .9rem;
}
.fill {
flex-grow: 1;
}
2023-06-05 23:30:46 +00:00
</style>