tommy/mobilizon
1
0
Fork 0
forked from potsda.mn/mobilizon
Code Pull requests Activity

refactor(front): cleanup PostListItem.vue

Browse source 
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2023-05-26 17:34:06 +02:00
parent b0a564f64f
commit 759b26e203
No known key found for this signature in database
GPG key ID: A061B9DDE0CA0773
1 changed files with 10 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
js/src/components/Post/PostListItem.vue
View file

@ -18,7 +18,7 @@
</h3> </h3>
<p class="flex gap-2"> <p class="flex gap-2">
<Clock /> <Clock />
<span dir="auto" class="" v-if="isBeforeLastWeek">{{ <span dir="auto" class="" v-if="publishedAt && isBeforeLastWeek">{{
formatDateTimeString( formatDateTimeString(
publishedAt.toString(), publishedAt.toString(),
undefined, undefined,
@ -26,7 +26,7 @@
"short" "short"
) )
}}</span> }}</span>
<span v-else>{{ <span v-else-if="publishedAt">{{
formatDistanceToNow(publishedAt, { formatDistanceToNow(publishedAt, {
locale: dateFnsLocale, locale: dateFnsLocale,
addSuffix: true, addSuffix: true,
@ -75,30 +75,22 @@ const dateFnsLocale = inject<Locale>("dateFnsLocale");
const postTags = computed(() => (props.post.tags ?? []).slice(0, 3)); const postTags = computed(() => (props.post.tags ?? []).slice(0, 3));
const publishedAt = computed((): Date => { const publishedAt = computed((): Date | undefined => {
return new Date((props.post.publishAt ?? props.post.insertedAt) as Date); const date = props.post.publishAt ?? props.post.insertedAt;
if (!date) return undefined;
return new Date(date);
}); });
const isBeforeLastWeek = computed((): boolean => { const isBeforeLastWeek = computed((): boolean => {
return isBefore(publishedAt.value, subWeeks(new Date(), 1)); return (
publishedAt.value !== undefined &&
isBefore(publishedAt.value, subWeeks(new Date(), 1))
);
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use "@/styles/_mixins" as *; @use "@/styles/_mixins" as *;
// .post-minimalist-card-wrapper {
// display: grid;
// grid-gap: 5px 10px;
// grid-template-areas: "preview" "body";
// text-decoration: none;
// // width: 100%;
// // color: initial;
// // @include desktop {
// grid-template-columns: 200px 3fr;
// grid-template-areas: "preview body";
// // }
.title-info-wrapper { .title-info-wrapper {
.post-minimalist-title { .post-minimalist-title {
font-size: 18px; font-size: 18px;