Implement group indication headline for view and edit post page

webapp/graphql/PostQuery.js

@@ -39,6 +39,11 @@ export default (i18n) => {
             ...locationAndBadges
           }
         }
+        group {
+          id
+          name
+          slug
+        }
       }
     }
   `

webapp/locales/de.json

@@ -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": {

webapp/locales/en.json

@@ -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": {

webapp/pages/post/_id.vue

@@ -1,16 +1,7 @@
 <template>
-  <div>
+  <transition name="slide-up" appear>
-    <ds-flex gutter="small">
+    <nuxt-child />
-      <ds-flex-item :width="{ base: '100%', sm: 2, md: 2, lg: 1 }">
+  </transition>
-        <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>
 </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>

webapp/pages/post/_id/_slug/index.vue

@@ -1,107 +1,129 @@
 <template>
   <transition name="fade" appear>
-    <base-card
+    <div>
-      v-if="post && ready"
+      <ds-space margin="small">
-      :lang="post.language"
+        <ds-heading tag="h1">{{ $t('post.viewPost.title') }}</ds-heading>
-      :class="{
+        <ds-heading v-if="post && post.group" tag="h2">
-        'post-page': true,
+          {{ $t('post.viewPost.forGroup.title', { name: post.group.name }) }}
-        'disabled-content': post.disabled,
+        </ds-heading>
-        '--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-space margin="large" />
-      <ds-section>
+      <ds-flex gutter="small">
-        <comment-list :post="post" @toggleNewCommentForm="toggleNewCommentForm" @reply="reply" />
+        <ds-flex-item :width="{ base: '100%', sm: 2, md: 2, lg: 1 }">
-        <ds-space margin-bottom="large" />
+          <base-card
-        <comment-form
+            v-if="post && ready"
-          v-if="showNewCommentForm && !isBlocked"
+            :lang="post.language"
-          ref="commentForm"
+            :class="{
-          :post="post"
+              'post-page': true,
-          @createComment="createComment"
+              'disabled-content': post.disabled,
-        />
+              '--blur-image': blurred,
-        <ds-placeholder v-if="isBlocked">
+            }"
-          {{ $t('settings.blocked-users.explanation.commenting-disabled') }}
+            :style="heroImageStyle"
-          <br />
+          >
-          {{ $t('settings.blocked-users.explanation.commenting-explanation') }}
+            <template #heroImage v-if="post.image">
-          <page-params-link :pageParams="links.FAQ">
+              <img :src="post.image | proxyApiUrl" class="image" />
-            {{ $t('site.faq') }}
+              <aside v-show="post.image && post.image.sensitive" class="blur-toggle">
-          </page-params-link>
+                <img v-show="blurred" :src="post.image | proxyApiUrl" class="preview" />
-        </ds-placeholder>
+                <base-button
-      </ds-section>
+                  :icon="blurred ? 'eye' : 'eye-slash'"
-    </base-card>
+                  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;

webapp/pages/post/edit/_id.vue

@@ -1,20 +1,29 @@
 <template>
-  <ds-flex :width="{ base: '100%' }" gutter="base">
+  <div>
-    <ds-flex-item :width="{ base: '100%', md: 3 }">
+    <ds-space margin="small">
-      <hc-contribution-form :contribution="contribution" />
+      <ds-heading tag="h1">{{ $t('post.editPost.title') }}</ds-heading>
-    </ds-flex-item>
+      <ds-heading v-if="contribution && contribution.group" tag="h2">
-    <ds-flex-item :width="{ base: '100%', md: 1 }">&nbsp;</ds-flex-item>
+        {{ $t('post.editPost.forGroup.title', { name: contribution.group.name }) }}
-  </ds-flex>
+      </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 }">&nbsp;</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({