mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2025-12-12 23:35:58 +00:00
Implement group indication headline for view and edit post page
This commit is contained in:
Wolfgang Huß
parent
fc4e67990b
commit
1703638dd6
@ -39,6 +39,11 @@ export default (i18n) => {
|
||||
...locationAndBadges
|
||||
}
|
||||
}
|
||||
group {
|
||||
id
|
||||
name
|
||||
slug
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
@ -612,6 +612,12 @@
|
||||
"title": "Erstelle einen neuen Beitrag"
|
||||
},
|
||||
"edited": "bearbeitet",
|
||||
"editPost": {
|
||||
"forGroup": {
|
||||
"title": "Für die Gruppe „{name}“"
|
||||
},
|
||||
"title": "Bearbeite deinen Beitrag"
|
||||
},
|
||||
"menu": {
|
||||
"delete": "Beitrag löschen",
|
||||
"edit": "Beitrag bearbeiten",
|
||||
@ -624,6 +630,12 @@
|
||||
"pinned": "Meldung",
|
||||
"takeAction": {
|
||||
"name": "Aktiv werden"
|
||||
},
|
||||
"viewPost": {
|
||||
"forGroup": {
|
||||
"title": "In der Gruppe „{name}“"
|
||||
},
|
||||
"title": "Beitrag"
|
||||
}
|
||||
},
|
||||
"profile": {
|
||||
|
||||
@ -612,6 +612,12 @@
|
||||
"title": "Create A New Post"
|
||||
},
|
||||
"edited": "edited",
|
||||
"editPost": {
|
||||
"forGroup": {
|
||||
"title": "For The Group “{name}”"
|
||||
},
|
||||
"title": "Edit Your Post"
|
||||
},
|
||||
"menu": {
|
||||
"delete": "Delete post",
|
||||
"edit": "Edit post",
|
||||
@ -624,6 +630,12 @@
|
||||
"pinned": "Announcement",
|
||||
"takeAction": {
|
||||
"name": "Take action"
|
||||
},
|
||||
"viewPost": {
|
||||
"forGroup": {
|
||||
"title": "In The Group “{name}”"
|
||||
},
|
||||
"title": "Post"
|
||||
}
|
||||
},
|
||||
"profile": {
|
||||
|
||||
@ -1,16 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<ds-flex gutter="small">
|
||||
<ds-flex-item :width="{ base: '100%', sm: 2, md: 2, lg: 1 }">
|
||||
<transition name="slide-up" appear>
|
||||
<nuxt-child />
|
||||
</transition>
|
||||
</ds-flex-item>
|
||||
<ds-flex-item :width="{ base: '200px' }">
|
||||
<ds-menu :routes="routes" class="post-side-navigation" />
|
||||
</ds-flex-item>
|
||||
</ds-flex>
|
||||
</div>
|
||||
<transition name="slide-up" appear>
|
||||
<nuxt-child />
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -41,40 +32,5 @@ const persistentLinks = PersistentLinks(options)
|
||||
|
||||
export default {
|
||||
mixins: [persistentLinks],
|
||||
computed: {
|
||||
routes() {
|
||||
const { slug, id } = this.$route.params
|
||||
return [
|
||||
{
|
||||
name: this.$t('common.post', null, 1),
|
||||
path: `/post/${id}/${slug}`,
|
||||
children: [
|
||||
{
|
||||
name: this.$t('common.comment', null, 2),
|
||||
path: `/post/${id}/${slug}#comments`,
|
||||
},
|
||||
// TODO implement
|
||||
/* {
|
||||
name: this.$t('common.letsTalk'),
|
||||
path: `/post/${id}/${slug}#lets-talk`
|
||||
}, */
|
||||
// TODO implement
|
||||
/* {
|
||||
name: this.$t('common.versus'),
|
||||
path: `/post/${id}/${slug}#versus`
|
||||
} */
|
||||
],
|
||||
},
|
||||
]
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.post-side-navigation {
|
||||
position: sticky;
|
||||
top: 65px;
|
||||
z-index: 2;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,107 +1,129 @@
|
||||
<template>
|
||||
<transition name="fade" appear>
|
||||
<base-card
|
||||
v-if="post && ready"
|
||||
:lang="post.language"
|
||||
:class="{
|
||||
'post-page': true,
|
||||
'disabled-content': post.disabled,
|
||||
'--blur-image': blurred,
|
||||
}"
|
||||
:style="heroImageStyle"
|
||||
>
|
||||
<template #heroImage v-if="post.image">
|
||||
<img :src="post.image | proxyApiUrl" class="image" />
|
||||
<aside v-show="post.image && post.image.sensitive" class="blur-toggle">
|
||||
<img v-show="blurred" :src="post.image | proxyApiUrl" class="preview" />
|
||||
<base-button
|
||||
:icon="blurred ? 'eye' : 'eye-slash'"
|
||||
filled
|
||||
circle
|
||||
@click="blurred = !blurred"
|
||||
/>
|
||||
</aside>
|
||||
</template>
|
||||
<section class="menu">
|
||||
<user-teaser :user="post.author" :date-time="post.createdAt">
|
||||
<template #dateTime>
|
||||
<ds-text v-if="post.createdAt !== post.updatedAt">({{ $t('post.edited') }})</ds-text>
|
||||
</template>
|
||||
</user-teaser>
|
||||
<client-only>
|
||||
<content-menu
|
||||
placement="bottom-end"
|
||||
resource-type="contribution"
|
||||
:resource="post"
|
||||
:modalsData="menuModalsData"
|
||||
:is-owner="isAuthor"
|
||||
@pinPost="pinPost"
|
||||
@unpinPost="unpinPost"
|
||||
/>
|
||||
</client-only>
|
||||
</section>
|
||||
<ds-space margin-bottom="small" />
|
||||
<h2 class="title hyphenate-text">{{ post.title }}</h2>
|
||||
<ds-space margin-bottom="small" />
|
||||
<content-viewer class="content hyphenate-text" :content="post.content" />
|
||||
<!-- Categories -->
|
||||
<div v-if="categoriesActive" class="categories">
|
||||
<ds-space margin="xx-large" />
|
||||
<ds-space margin="xx-small" />
|
||||
<hc-category
|
||||
v-for="category in post.categories"
|
||||
:key="category.id"
|
||||
:icon="category.icon"
|
||||
:name="$t(`contribution.category.name.${category.slug}`)"
|
||||
v-tooltip="{
|
||||
content: $t(`contribution.category.description.${category.slug}`),
|
||||
placement: 'bottom-start',
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<ds-space margin-bottom="small" />
|
||||
<!-- Tags -->
|
||||
<div v-if="post.tags && post.tags.length" class="tags">
|
||||
<ds-space margin="xx-small" />
|
||||
<hc-hashtag v-for="tag in sortedTags" :key="tag.id" :id="tag.id" />
|
||||
</div>
|
||||
<ds-space margin-top="small">
|
||||
<ds-flex :gutter="{ lg: 'small' }">
|
||||
<!-- Shout Button -->
|
||||
<ds-flex-item
|
||||
:width="{ lg: '15%', md: '22%', sm: '22%', base: '100%' }"
|
||||
class="shout-button"
|
||||
>
|
||||
<hc-shout-button
|
||||
v-if="post.author"
|
||||
:disabled="isAuthor"
|
||||
:count="post.shoutedCount"
|
||||
:is-shouted="post.shoutedByCurrentUser"
|
||||
:post-id="post.id"
|
||||
/>
|
||||
</ds-flex-item>
|
||||
</ds-flex>
|
||||
<div>
|
||||
<ds-space margin="small">
|
||||
<ds-heading tag="h1">{{ $t('post.viewPost.title') }}</ds-heading>
|
||||
<ds-heading v-if="post && post.group" tag="h2">
|
||||
{{ $t('post.viewPost.forGroup.title', { name: post.group.name }) }}
|
||||
</ds-heading>
|
||||
</ds-space>
|
||||
<!-- Comments -->
|
||||
<ds-section>
|
||||
<comment-list :post="post" @toggleNewCommentForm="toggleNewCommentForm" @reply="reply" />
|
||||
<ds-space margin-bottom="large" />
|
||||
<comment-form
|
||||
v-if="showNewCommentForm && !isBlocked"
|
||||
ref="commentForm"
|
||||
:post="post"
|
||||
@createComment="createComment"
|
||||
/>
|
||||
<ds-placeholder v-if="isBlocked">
|
||||
{{ $t('settings.blocked-users.explanation.commenting-disabled') }}
|
||||
<br />
|
||||
{{ $t('settings.blocked-users.explanation.commenting-explanation') }}
|
||||
<page-params-link :pageParams="links.FAQ">
|
||||
{{ $t('site.faq') }}
|
||||
</page-params-link>
|
||||
</ds-placeholder>
|
||||
</ds-section>
|
||||
</base-card>
|
||||
<ds-space margin="large" />
|
||||
<ds-flex gutter="small">
|
||||
<ds-flex-item :width="{ base: '100%', sm: 2, md: 2, lg: 1 }">
|
||||
<base-card
|
||||
v-if="post && ready"
|
||||
:lang="post.language"
|
||||
:class="{
|
||||
'post-page': true,
|
||||
'disabled-content': post.disabled,
|
||||
'--blur-image': blurred,
|
||||
}"
|
||||
:style="heroImageStyle"
|
||||
>
|
||||
<template #heroImage v-if="post.image">
|
||||
<img :src="post.image | proxyApiUrl" class="image" />
|
||||
<aside v-show="post.image && post.image.sensitive" class="blur-toggle">
|
||||
<img v-show="blurred" :src="post.image | proxyApiUrl" class="preview" />
|
||||
<base-button
|
||||
:icon="blurred ? 'eye' : 'eye-slash'"
|
||||
filled
|
||||
circle
|
||||
@click="blurred = !blurred"
|
||||
/>
|
||||
</aside>
|
||||
</template>
|
||||
<section class="menu">
|
||||
<user-teaser :user="post.author" :date-time="post.createdAt">
|
||||
<template #dateTime>
|
||||
<ds-text v-if="post.createdAt !== post.updatedAt">
|
||||
({{ $t('post.edited') }})
|
||||
</ds-text>
|
||||
</template>
|
||||
</user-teaser>
|
||||
<client-only>
|
||||
<content-menu
|
||||
placement="bottom-end"
|
||||
resource-type="contribution"
|
||||
:resource="post"
|
||||
:modalsData="menuModalsData"
|
||||
:is-owner="isAuthor"
|
||||
@pinPost="pinPost"
|
||||
@unpinPost="unpinPost"
|
||||
/>
|
||||
</client-only>
|
||||
</section>
|
||||
<ds-space margin-bottom="small" />
|
||||
<h2 class="title hyphenate-text">{{ post.title }}</h2>
|
||||
<ds-space margin-bottom="small" />
|
||||
<content-viewer class="content hyphenate-text" :content="post.content" />
|
||||
<!-- Categories -->
|
||||
<div v-if="categoriesActive" class="categories">
|
||||
<ds-space margin="xx-large" />
|
||||
<ds-space margin="xx-small" />
|
||||
<hc-category
|
||||
v-for="category in post.categories"
|
||||
:key="category.id"
|
||||
:icon="category.icon"
|
||||
:name="$t(`contribution.category.name.${category.slug}`)"
|
||||
v-tooltip="{
|
||||
content: $t(`contribution.category.description.${category.slug}`),
|
||||
placement: 'bottom-start',
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<ds-space margin-bottom="small" />
|
||||
<!-- Tags -->
|
||||
<div v-if="post.tags && post.tags.length" class="tags">
|
||||
<ds-space margin="xx-small" />
|
||||
<hc-hashtag v-for="tag in sortedTags" :key="tag.id" :id="tag.id" />
|
||||
</div>
|
||||
<ds-space margin-top="small">
|
||||
<ds-flex :gutter="{ lg: 'small' }">
|
||||
<!-- Shout Button -->
|
||||
<ds-flex-item
|
||||
:width="{ lg: '15%', md: '22%', sm: '22%', base: '100%' }"
|
||||
class="shout-button"
|
||||
>
|
||||
<hc-shout-button
|
||||
v-if="post.author"
|
||||
:disabled="isAuthor"
|
||||
:count="post.shoutedCount"
|
||||
:is-shouted="post.shoutedByCurrentUser"
|
||||
:post-id="post.id"
|
||||
/>
|
||||
</ds-flex-item>
|
||||
</ds-flex>
|
||||
</ds-space>
|
||||
<!-- Comments -->
|
||||
<ds-section>
|
||||
<comment-list
|
||||
:post="post"
|
||||
@toggleNewCommentForm="toggleNewCommentForm"
|
||||
@reply="reply"
|
||||
/>
|
||||
<ds-space margin-bottom="large" />
|
||||
<comment-form
|
||||
v-if="showNewCommentForm && !isBlocked"
|
||||
ref="commentForm"
|
||||
:post="post"
|
||||
@createComment="createComment"
|
||||
/>
|
||||
<ds-placeholder v-if="isBlocked">
|
||||
{{ $t('settings.blocked-users.explanation.commenting-disabled') }}
|
||||
<br />
|
||||
{{ $t('settings.blocked-users.explanation.commenting-explanation') }}
|
||||
<page-params-link :pageParams="links.FAQ">
|
||||
{{ $t('site.faq') }}
|
||||
</page-params-link>
|
||||
</ds-placeholder>
|
||||
</ds-section>
|
||||
</base-card>
|
||||
</ds-flex-item>
|
||||
<ds-flex-item :width="{ base: '200px' }">
|
||||
<ds-menu :routes="routes" class="post-side-navigation" />
|
||||
</ds-flex-item>
|
||||
</ds-flex>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
@ -167,6 +189,31 @@ export default {
|
||||
}, 50)
|
||||
},
|
||||
computed: {
|
||||
routes() {
|
||||
const { slug, id } = this.$route.params
|
||||
return [
|
||||
{
|
||||
name: this.$t('common.post', null, 1),
|
||||
path: `/post/${id}/${slug}`,
|
||||
children: [
|
||||
{
|
||||
name: this.$t('common.comment', null, 2),
|
||||
path: `/post/${id}/${slug}#comments`,
|
||||
},
|
||||
// TODO implement
|
||||
/* {
|
||||
name: this.$t('common.letsTalk'),
|
||||
path: `/post/${id}/${slug}#lets-talk`
|
||||
}, */
|
||||
// TODO implement
|
||||
/* {
|
||||
name: this.$t('common.versus'),
|
||||
path: `/post/${id}/${slug}#versus`
|
||||
} */
|
||||
],
|
||||
},
|
||||
]
|
||||
},
|
||||
menuModalsData() {
|
||||
return postMenuModalsData(
|
||||
// "this.post" may not always be defined at the beginning …
|
||||
@ -266,6 +313,11 @@ export default {
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.post-side-navigation {
|
||||
position: sticky;
|
||||
top: 65px;
|
||||
z-index: 2;
|
||||
}
|
||||
.post-page {
|
||||
> .hero-image {
|
||||
position: relative;
|
||||
|
||||
@ -1,20 +1,29 @@
|
||||
<template>
|
||||
<ds-flex :width="{ base: '100%' }" gutter="base">
|
||||
<ds-flex-item :width="{ base: '100%', md: 3 }">
|
||||
<hc-contribution-form :contribution="contribution" />
|
||||
</ds-flex-item>
|
||||
<ds-flex-item :width="{ base: '100%', md: 1 }"> </ds-flex-item>
|
||||
</ds-flex>
|
||||
<div>
|
||||
<ds-space margin="small">
|
||||
<ds-heading tag="h1">{{ $t('post.editPost.title') }}</ds-heading>
|
||||
<ds-heading v-if="contribution && contribution.group" tag="h2">
|
||||
{{ $t('post.editPost.forGroup.title', { name: contribution.group.name }) }}
|
||||
</ds-heading>
|
||||
</ds-space>
|
||||
<ds-space margin="large" />
|
||||
<ds-flex :width="{ base: '100%' }" gutter="base">
|
||||
<ds-flex-item :width="{ base: '100%', md: 3 }">
|
||||
<contribution-form :contribution="contribution" />
|
||||
</ds-flex-item>
|
||||
<ds-flex-item :width="{ base: '100%', md: 1 }"> </ds-flex-item>
|
||||
</ds-flex>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HcContributionForm from '~/components/ContributionForm/ContributionForm'
|
||||
import ContributionForm from '~/components/ContributionForm/ContributionForm'
|
||||
import PostQuery from '~/graphql/PostQuery'
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
HcContributionForm,
|
||||
ContributionForm,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user