Merge branch '5059-epic-groups' of github.com:Ocelot-Social-Community/Ocelot-Social into search-groups

cypress/integration/Moderation.ReportContent/I_click_on_the_author.js

@@ -1,7 +1,7 @@
 import { When } from "cypress-cucumber-preprocessor/steps";
 
 When('I click on the author', () => {
-  cy.get('.user-teaser')
+  cy.get('[data-test="avatarUserLink"]')
     .click()
     .url().should('include', '/profile/')
 })

webapp/components/NotificationMenu/NotificationMenu.vue

@@ -112,16 +112,6 @@ export default {
 </script>
 
 <style lang="scss">
-.notifications-menu {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-
-  .base-button {
-    overflow: visible;
-  }
-}
-
 .notifications-menu-popover {
   max-width: 500px;
   margin-bottom: $size-height-base;

webapp/components/PageFooter/PageFooter.vue

@@ -50,4 +50,9 @@ export default {
   margin-left: 0.2rem;
   margin-right: 0.2rem;
 }
+@media only screen and (max-width: 810px) {
+  .ds-footer {
+    display: none;
+  }
+}
 </style>

webapp/components/PostTeaser/PostTeaser.vue

@@ -15,7 +15,7 @@
         <img :src="post.image | proxyApiUrl" class="image" />
       </template>
       <client-only>
-        <user-teaser :user="post.author" :date-time="post.createdAt" />
+        <user-teaser :user="post.author" :group="post.group" :date-time="post.createdAt" />
       </client-only>
       <h2 class="title hyphenate-text">{{ post.title }}</h2>
       <!-- TODO: replace editor content with tiptap render view -->

webapp/components/UserTeaser/UserTeaser.story.js

@@ -56,6 +56,41 @@ export const user = {
   followedBy: [],
   socialMedia: [],
 }
+export const group = {
+  id: 'g2',
+  name: 'Yoga Practice',
+  slug: 'yoga-practice',
+  about: null,
+  description: `<h3>What Is yoga?</h3><p>Yoga is not just about practicing asanas. It's about how we do it.</p><p class="">And practicing asanas doesn't have to be yoga, it can be more athletic than yogic.</p><h3>What makes practicing asanas yogic?</h3><p class="">The important thing is:</p><ul><li><p>Use the exercises (consciously) for your personal development.</p></li></ul>`,
+  descriptionExcerpt: `<h3>What Is yoga?</h3><p>Yoga is not just about practicing asanas. It's about how we do it.</p><p>And practicing asanas doesn't have to be yoga, it can be more athletic than yogic.</p><h3>What makes practicing asanas yogic?</h3><p>The important thing is:</p><ul><li><p>Use the exercises …</p></li></ul>`,
+  groupType: 'public',
+  actionRadius: 'interplanetary',
+  categories: [
+    {
+      id: 'cat4',
+      icon: 'psyche',
+      name: 'psyche',
+      slug: 'psyche',
+      description: 'Seele, Gefühle, Glück',
+    },
+    {
+      id: 'cat5',
+      icon: 'movement',
+      name: 'body-and-excercise',
+      slug: 'body-and-excercise',
+      description: 'Sport, Yoga, Massage, Tanzen, Entspannung',
+    },
+    {
+      id: 'cat17',
+      icon: 'spirituality',
+      name: 'spirituality',
+      slug: 'spirituality',
+      description: 'Religion, Werte, Ethik',
+    },
+  ],
+  locationName: null,
+  location: null,
+}
 
 storiesOf('UserTeaser', module)
   .addDecorator(withA11y)
@@ -68,7 +103,7 @@ storiesOf('UserTeaser', module)
     }),
     template: '<user-teaser :user="user" />',
   }))
-  .add('with Date', () => ({
+  .add('with date', () => ({
     components: { UserTeaser },
     store: helpers.store,
     data: () => ({
@@ -98,3 +133,21 @@ storiesOf('UserTeaser', module)
     }),
     template: '<user-teaser :user="user" :date-time="new Date()" />',
   }))
+  .add('with group and date', () => ({
+    components: { UserTeaser },
+    store: helpers.store,
+    data: () => ({
+      user,
+      group,
+    }),
+    template: '<user-teaser :user="user" :group="group" :date-time="new Date()" />',
+  }))
+  .add('with group and date – wide', () => ({
+    components: { UserTeaser },
+    store: helpers.store,
+    data: () => ({
+      user,
+      group,
+    }),
+    template: '<user-teaser :user="user" :group="group" wide :date-time="new Date()" />',
+  }))

webapp/components/UserTeaser/UserTeaser.vue

@@ -4,38 +4,58 @@
     <span class="info anonymous">{{ $t('profile.userAnonym') }}</span>
   </div>
   <div v-else :class="[{ 'disabled-content': user.disabled }]" placement="top-start">
-    <nuxt-link :to="userLink" :class="['user-teaser']">
+    <div :class="['user-teaser']">
+      <nuxt-link :to="userLink" data-test="avatarUserLink">
         <profile-avatar v-if="showAvatar" :profile="user" size="small" />
-      <div class="info">
+      </nuxt-link>
+      <div class="info flex-direction-column">
+        <div :class="wide ? 'flex-direction-row' : 'flex-direction-column'">
+          <nuxt-link :to="userLink">
             <span class="text">
               <span class="slug">{{ userSlug }}</span>
-          <span v-if="dateTime">{{ userName }}</span>
+              <span v-if="!userOnly" class="name">{{ userName }}</span>
             </span>
-        <span v-if="dateTime" class="text">
+          </nuxt-link>
+          <span v-if="wide">&nbsp;</span>
+          <span v-if="group">
+            <span class="text">
+              {{ $t('group.in') }}
+            </span>
+            <nuxt-link :to="groupLink">
+              <span class="text">
+                <span class="slug">{{ groupSlug }}</span>
+                <span v-if="!userOnly" class="name">{{ groupName }}</span>
+              </span>
+            </nuxt-link>
+          </span>
+        </div>
+        <span v-if="!userOnly" class="text">
           <base-icon name="clock" />
-          <hc-relative-date-time :date-time="dateTime" />
+          <relative-date-time :date-time="dateTime" />
           <slot name="dateTime"></slot>
         </span>
         <span v-else class="text">{{ userName }}</span>
       </div>
-    </nuxt-link>
+    </div>
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
 
-import HcRelativeDateTime from '~/components/RelativeDateTime'
+import RelativeDateTime from '~/components/RelativeDateTime'
 import ProfileAvatar from '~/components/_new/generic/ProfileAvatar/ProfileAvatar'
 
 export default {
   name: 'UserTeaser',
   components: {
-    HcRelativeDateTime,
+    RelativeDateTime,
     ProfileAvatar,
   },
   props: {
     user: { type: Object, default: null },
+    group: { type: Object, default: null },
+    wide: { type: Boolean, default: false },
     showAvatar: { type: Boolean, default: true },
     dateTime: { type: [Date, String], default: null },
     showPopover: { type: Boolean, default: true },
@@ -64,6 +84,22 @@ export default {
       const { name } = this.user || {}
       return name || this.$t('profile.userAnonym')
     },
+    userOnly() {
+      return !this.dateTime && !this.group
+    },
+    groupLink() {
+      const { id, slug } = this.group
+      if (!(id && slug)) return ''
+      return { name: 'group-id-slug', params: { slug, id } }
+    },
+    groupSlug() {
+      const { slug } = this.group || {}
+      return slug && `&${slug}`
+    },
+    groupName() {
+      const { name } = this.group || {}
+      return name || this.$t('profile.userAnonym')
+    },
   },
   methods: {
     optimisticFollow({ followedByCurrentUser }) {
@@ -93,17 +129,11 @@ export default {
   }
 
   > .info {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
     padding-left: $space-xx-small;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 
-    color: $text-color-soft;
-    font-size: $font-size-small;
-
     &.anonymous {
       font-size: $font-size-base;
     }
@@ -112,6 +142,23 @@ export default {
       color: $color-primary;
       font-size: $font-size-base;
     }
+
+    .name {
+      color: $text-color-soft;
+      font-size: $font-size-small;
+    }
+  }
+
+  .flex-direction-column {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  .flex-direction-row {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
   }
 
   .text {

webapp/constants/headerMenu.js

@@ -1,12 +1,12 @@
 export default {
   MENU: [
     // {
-    //   nameIdent: 'ocelotRebranding.newsFeed',
+    //   nameIdent: 'nameIdent',
     //   path: '/',
     // },
     // {
-    //   nameIdent: 'ocelotRebranding.about',
+    //   nameIdent: 'nameIdent',
-    //   url: 'https://ocelot.org',
+    //   url: 'https://ocelot.social',
     // },
   ],
 }

webapp/graphql/PostQuery.js

@@ -69,6 +69,11 @@ export const filterPosts = (i18n) => {
           ...userCounts
           ...locationAndBadges
         }
+        group {
+          id
+          name
+          slug
+        }
       }
     }
   `
@@ -99,6 +104,11 @@ export const profilePagePosts = (i18n) => {
           ...userCounts
           ...locationAndBadges
         }
+        group {
+          id
+          name
+          slug
+        }
       }
     }
   `

webapp/layouts/default.vue

@@ -3,7 +3,9 @@
     <div class="main-navigation">
       <ds-container class="main-navigation-container" style="padding: 10px 10px">
         <div>
-          <ds-flex class="main-navigation-flex">
+          <!-- header menu -->
+          <ds-flex v-if="!showMobileMenu" class="main-navigation-flex">
+            <!-- logo -->
             <ds-flex-item :width="{ base: LOGOS.LOGO_HEADER_WIDTH }" style="margin-right: 20px">
               <a
                 v-if="LOGOS.LOGO_HEADER_CLICK.externalLink"
@@ -19,11 +21,12 @@
                 <logo logoType="header" />
               </nuxt-link>
             </ds-flex-item>
-
+            <!-- dynamic-brand-menu -->
             <ds-flex-item
               v-for="item in menu"
               :key="item.name"
               :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
+              class="branding-menu"
               :width="{ base: 'auto' }"
               style="margin-right: 20px"
             >
@@ -38,26 +41,26 @@
                 </ds-text>
               </nuxt-link>
             </ds-flex-item>
+
+            <!-- search-field -->
             <ds-flex-item
-              :width="{ base: '40%', sm: '40%', md: '40%', lg: '0%' }"
+              v-if="isLoggedIn"
-              class="mobile-hamburger-menu"
+              id="nav-search-box"
-            >
+              :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
-              <base-button icon="bars" @click="toggleMobileMenuView" circle />
+              class="header-search"
-            </ds-flex-item>
-            <ds-flex-item
               :width="{
                 base: '45%',
-                sm: '45%',
+                sm: '40%',
-                md: isHeaderMenu ? 'auto' : '45%',
+                md: isHeaderMenu ? 'auto' : '40%',
                 lg: isHeaderMenu ? 'auto' : '50%',
               }"
-              :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
               style="flex-shrink: 0; flex-grow: 1"
-              id="nav-search-box"
-              v-if="isLoggedIn"
             >
               <search-field />
             </ds-flex-item>
+            <!-- filter-menu 
+                TODO: Filter is only visible on index    
+            -->
             <ds-flex-item
               v-if="isLoggedIn"
               :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
@@ -67,6 +70,7 @@
                 <filter-menu v-show="showFilterMenuDropdown" />
               </client-only>
             </ds-flex-item>
+            <!-- locale-switch -->
             <ds-flex-item
               style="flex-basis: auto"
               :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
@@ -82,23 +86,134 @@
                 <locale-switch class="topbar-locale-switch" placement="top" offset="8" />
                 <template v-if="isLoggedIn">
                   <client-only>
+                    <!-- notification-menu -->
                     <notification-menu placement="top" />
                   </client-only>
                   <div v-if="inviteRegistration">
                     <client-only>
+                      <!-- invite-button -->
                       <invite-button placement="top" />
                     </client-only>
                   </div>
+                  <!-- group button -->
                   <client-only v-if="SHOW_GROUP_BUTTON_IN_HEADER">
                     <group-button />
                   </client-only>
                   <client-only>
+                    <!-- avatar-menu -->
                     <avatar-menu placement="top" />
                   </client-only>
                 </template>
               </div>
             </ds-flex-item>
           </ds-flex>
+
+          <!-- mobile header menu -->
+          <div v-else>
+            <!-- logo, hamburger-->
+            <ds-flex>
+              <ds-flex-item :width="{ base: LOGOS.LOGO_HEADER_WIDTH }" style="margin-right: 20px">
+                <nuxt-link :to="{ name: 'index' }" v-scroll-to="'.main-navigation'">
+                  <logo logoType="header" />
+                </nuxt-link>
+              </ds-flex-item>
+
+              <!-- hamburger button -->
+              <ds-flex-item class="mobile-hamburger-menu">
+                <client-only>
+                  <div style="display: inline-flex; padding-right: 20px">
+                    <notification-menu />
+                  </div>
+                </client-only>
+                <base-button icon="bars" @click="toggleMobileMenuView" circle />
+              </ds-flex-item>
+            </ds-flex>
+            <!-- search, filter-->
+            <ds-flex class="mobile-menu">
+              <!-- search-field mobile-->
+              <ds-flex-item
+                v-if="isLoggedIn"
+                :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
+                style="padding: 20px"
+              >
+                <search-field />
+              </ds-flex-item>
+              <!-- filter menu mobile-->
+              <ds-flex-item
+                v-if="isLoggedIn"
+                :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
+                style="flex-grow: 0; flex-basis: auto; padding: 20px 0"
+              >
+                <client-only>
+                  <filter-menu v-show="showFilterMenuDropdown" />
+                </client-only>
+              </ds-flex-item>
+            </ds-flex>
+            <!-- switch language, notification, invite, profil -->
+            <ds-flex style="margin: 0 20px">
+              <!-- locale-switch mobile-->
+              <ds-flex-item :class="{ 'hide-mobile-menu': !toggleMobileMenu }">
+                <locale-switch class="topbar-locale-switch" placement="top" offset="8" />
+              </ds-flex-item>
+              <!-- invite-button mobile-->
+              <ds-flex-item
+                :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
+                style="text-align: center"
+              >
+                <client-only>
+                  <invite-button placement="top" />
+                </client-only>
+              </ds-flex-item>
+              <!-- group button mobile -->
+              <ds-flex-item
+                v-if="SHOW_GROUP_BUTTON_IN_HEADER"
+                :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
+                style="text-align: center"
+              >
+                <client-only>
+                  <group-button />
+                </client-only>
+              </ds-flex-item>
+              <ds-flex-item
+                :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
+                style="text-align: end"
+              >
+                <client-only>
+                  <!-- avatar-menu mobile-->
+                  <avatar-menu placement="top" />
+                </client-only>
+              </ds-flex-item>
+            </ds-flex>
+            <div
+              :class="{ 'hide-mobile-menu': !toggleMobileMenu }"
+              class="mobile-menu footer-mobile"
+            >
+              <!-- dynamic branding menu  -->
+              <ul v-if="isHeaderMenu" class="dynamic-branding-mobil">
+                <li v-for="item in menu" :key="item.name">
+                  <a v-if="item.url" :href="item.url" target="_blank">
+                    <ds-text size="large" bold>
+                      {{ $t(item.nameIdent) }}
+                    </ds-text>
+                  </a>
+                  <nuxt-link v-else :to="item.path">
+                    <ds-text size="large" bold>
+                      {{ $t(item.nameIdent) }}
+                    </ds-text>
+                  </nuxt-link>
+                </li>
+              </ul>
+              <hr />
+              <!-- dynamic footer menu in header  -->
+              <ul class="dynamic-footer-mobil">
+                <li v-for="pageParams in links.FOOTER_LINK_LIST" :key="pageParams.name">
+                  <page-params-link :pageParams="pageParams">
+                    {{ $t(pageParams.internalPage.footerIdent) }}
+                  </page-params-link>
+                </li>
+              </ul>
+            </div>
+          </div>
         </div>
       </ds-container>
     </div>
@@ -118,44 +233,49 @@
 <script>
 import { mapGetters } from 'vuex'
 import { SHOW_GROUP_BUTTON_IN_HEADER } from '~/constants/groups.js'
+import links from '~/constants/links.js'
 import LOGOS from '../constants/logos.js'
 import headerMenu from '../constants/headerMenu.js'
 import seo from '~/mixins/seo'
 import AvatarMenu from '~/components/AvatarMenu/AvatarMenu'
 import FilterMenu from '~/components/FilterMenu/FilterMenu.vue'
+import GroupButton from '~/components/Group/GroupButton'
 import InviteButton from '~/components/InviteButton/InviteButton'
 import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
 import Logo from '~/components/Logo/Logo'
 import SearchField from '~/components/features/SearchField/SearchField.vue'
 import Modal from '~/components/Modal'
-import GroupButton from '~/components/Group/GroupButton'
 import NotificationMenu from '~/components/NotificationMenu/NotificationMenu'
 import PageFooter from '~/components/PageFooter/PageFooter'
+import PageParamsLink from '~/components/_new/features/PageParamsLink/PageParamsLink.vue'
 
 export default {
   components: {
     AvatarMenu,
     FilterMenu,
+    GroupButton,
     InviteButton,
     LocaleSwitch,
     Logo,
     Modal,
     NotificationMenu,
     PageFooter,
-    GroupButton,
+    PageParamsLink,
     SearchField,
   },
   mixins: [seo],
   data() {
     return {
+      inviteRegistration: this.$env.INVITE_REGISTRATION === true, // for 'false' in .env INVITE_REGISTRATION is of type undefined and not(!) boolean false, because of internal handling,
+      categoriesActive: this.$env.CATEGORIES_ACTIVE,
+      links,
       LOGOS,
       SHOW_GROUP_BUTTON_IN_HEADER,
       isHeaderMenu: headerMenu.MENU.length > 0,
       menu: headerMenu.MENU,
       mobileSearchVisible: false,
+      windowWidth: null,
       toggleMobileMenu: false,
-      inviteRegistration: this.$env.INVITE_REGISTRATION === true, // for 'false' in .env INVITE_REGISTRATION is of type undefined and not(!) boolean false, because of internal handling,
-      categoriesActive: this.$env.CATEGORIES_ACTIVE,
     }
   },
   computed: {
@@ -166,12 +286,22 @@ export default {
       const [firstRoute] = this.$route.matched
       return firstRoute && firstRoute.name === 'index'
     },
+    showMobileMenu() {
+      if (!this.windowWidth) return false
+      return this.windowWidth < 810
+    },
   },
   methods: {
     toggleMobileMenuView() {
       this.toggleMobileMenu = !this.toggleMobileMenu
     },
   },
+  mounted() {
+    this.windowWidth = window.innerWidth
+    window.addEventListener('resize', () => {
+      this.windowWidth = window.innerWidth
+    })
+  },
 }
 </script>
 
@@ -213,18 +343,38 @@ export default {
   margin-left: auto;
   text-align: right;
 }
-@media only screen and (min-width: 730px) {
+
-  .mobile-hamburger-menu {
+.mobile-menu {
-    display: none;
+  margin: 0 20px;
-  }
 }
-@media only screen and (max-width: 730px) {
+.mobile-search {
+  margin-top: 20px;
+}
+
+.dynamic-branding-mobil,
+.dynamic-footer-mobil {
+  line-height: 30px;
+  font-size: large;
+}
+.dynamic-branding-mobil li {
+  margin: 17px 0;
+}
+
+@media only screen and (max-width: 810px) {
   #nav-search-box,
   .main-navigation-right {
     margin: 10px 0px;
   }
+  .main-navigation-right {
+    width: 100%;
+  }
   .hide-mobile-menu {
     display: none;
   }
 }
+@media only screen and (min-width: 810px) {
+  .main-navigation-right {
+    width: 100%;
+  }
+}
 </style>

webapp/locales/de.json

@@ -426,6 +426,7 @@
     "general": "Allgemein",
     "goal": "Ziel der Gruppe",
     "groupCreated": "Die Gruppe wurde angelegt!",
+    "in": "in",
     "joinLeaveButton": {
       "iAmMember": "Bin Mitglied",
       "join": "Beitreten"

webapp/locales/en.json

@@ -426,6 +426,7 @@
     "general": "General",
     "goal": "Goal of group",
     "groupCreated": "The group was created!",
+    "in": "in",
     "joinLeaveButton": {
       "iAmMember": "I'm a member",
       "join": "Join"

webapp/pages/group/_id/_slug.spec.js

@@ -244,8 +244,8 @@ describe('GroupProfileSlug', () => {
           })
 
           it('has group slug', () => {
-            expect(wrapper.find('[data-test="at"]').exists()).toBe(true)
+            // expect(wrapper.find('[data-test="ampersand"]').exists()).toBe(true)
-            expect(wrapper.text()).toContain('yoga-practice')
+            expect(wrapper.text()).toContain('&yoga-practice')
           })
 
           describe('displays no(!) group location – because is "null"', () => {
@@ -397,8 +397,8 @@ describe('GroupProfileSlug', () => {
           })
 
           it('has group slug', () => {
-            expect(wrapper.find('[data-test="at"]').exists()).toBe(true)
+            // expect(wrapper.find('[data-test="ampersand"]').exists()).toBe(true)
-            expect(wrapper.text()).toContain('yoga-practice')
+            expect(wrapper.text()).toContain('&yoga-practice')
           })
 
           describe('displays no(!) group location – because is "null"', () => {
@@ -510,8 +510,8 @@ describe('GroupProfileSlug', () => {
           })
 
           it('has group slug', () => {
-            expect(wrapper.find('[data-test="at"]').exists()).toBe(true)
+            // expect(wrapper.find('[data-test="ampersand"]').exists()).toBe(true)
-            expect(wrapper.text()).toContain('yoga-practice')
+            expect(wrapper.text()).toContain('&yoga-practice')
           })
 
           describe('displays no(!) group location – because is "null"', () => {
@@ -623,8 +623,8 @@ describe('GroupProfileSlug', () => {
           })
 
           it('has group slug', () => {
-            expect(wrapper.find('[data-test="at"]').exists()).toBe(true)
+            // expect(wrapper.find('[data-test="ampersand"]').exists()).toBe(true)
-            expect(wrapper.text()).toContain('yoga-practice')
+            expect(wrapper.text()).toContain('&yoga-practice')
           })
 
           describe('displays no(!) group location – because is "null"', () => {
@@ -740,8 +740,8 @@ describe('GroupProfileSlug', () => {
           })
 
           it('has group slug', () => {
-            expect(wrapper.find('[data-test="at"]').exists()).toBe(true)
+            // expect(wrapper.find('[data-test="ampersand"]').exists()).toBe(true)
-            expect(wrapper.text()).toContain('school-for-citizens')
+            expect(wrapper.text()).toContain('&school-for-citizens')
           })
 
           describe('displays group location', () => {
@@ -857,8 +857,8 @@ describe('GroupProfileSlug', () => {
           })
 
           it('has group slug', () => {
-            expect(wrapper.find('[data-test="at"]').exists()).toBe(true)
+            // expect(wrapper.find('[data-test="ampersand"]').exists()).toBe(true)
-            expect(wrapper.text()).toContain('school-for-citizens')
+            expect(wrapper.text()).toContain('&school-for-citizens')
           })
 
           describe('displays group location', () => {
@@ -974,8 +974,8 @@ describe('GroupProfileSlug', () => {
           })
 
           it('has group slug', () => {
-            expect(wrapper.find('[data-test="at"]').exists()).toBe(true)
+            // expect(wrapper.find('[data-test="ampersand"]').exists()).toBe(true)
-            expect(wrapper.text()).toContain('school-for-citizens')
+            expect(wrapper.text()).toContain('&school-for-citizens')
           })
 
           describe('displays group location', () => {
@@ -1091,8 +1091,8 @@ describe('GroupProfileSlug', () => {
           })
 
           it('has group slug', () => {
-            expect(wrapper.find('[data-test="at"]').exists()).toBe(true)
+            // expect(wrapper.find('[data-test="ampersand"]').exists()).toBe(true)
-            expect(wrapper.text()).toContain('school-for-citizens')
+            expect(wrapper.text()).toContain('&school-for-citizens')
           })
 
           describe('displays group location', () => {
@@ -1212,8 +1212,8 @@ describe('GroupProfileSlug', () => {
           })
 
           it('has group slug', () => {
-            expect(wrapper.find('[data-test="at"]').exists()).toBe(true)
+            // expect(wrapper.find('[data-test="ampersand"]').exists()).toBe(true)
-            expect(wrapper.text()).toContain('investigative-journalism')
+            expect(wrapper.text()).toContain('&investigative-journalism')
           })
 
           describe('displays group location', () => {
@@ -1332,8 +1332,8 @@ describe('GroupProfileSlug', () => {
           })
 
           it('has group slug', () => {
-            expect(wrapper.find('[data-test="at"]').exists()).toBe(true)
+            // expect(wrapper.find('[data-test="ampersand"]').exists()).toBe(true)
-            expect(wrapper.text()).toContain('investigative-journalism')
+            expect(wrapper.text()).toContain('&investigative-journalism')
           })
 
           describe('displays group location', () => {
@@ -1452,8 +1452,8 @@ describe('GroupProfileSlug', () => {
           })
 
           it('has no(!) group slug', () => {
-            expect(wrapper.find('[data-test="at"]').exists()).toBe(false)
+            // expect(wrapper.find('[data-test="ampersand"]').exists()).toBe(false)
-            expect(wrapper.text()).not.toContain('investigative-journalism')
+            expect(wrapper.text()).not.toContain('&investigative-journalism')
           })
 
           describe('displays not(!) group location', () => {
@@ -1560,8 +1560,8 @@ describe('GroupProfileSlug', () => {
           })
 
           it('has no(!) group slug', () => {
-            expect(wrapper.find('[data-test="at"]').exists()).toBe(false)
+            // expect(wrapper.find('[data-test="ampersand"]').exists()).toBe(false)
-            expect(wrapper.text()).not.toContain('investigative-journalism')
+            expect(wrapper.text()).not.toContain('&investigative-journalism')
           })
 
           describe('displays not(!) group location', () => {

webapp/pages/group/_id/_slug.vue

@@ -38,8 +38,8 @@
             </ds-heading>
             <!-- group slug -->
             <ds-text align="center" color="soft">
-              <base-icon name="at" data-test="at" />
+              <!-- <base-icon name="at" data-test="ampersand" /> -->
-              {{ groupSlug }}
+              {{ `&${groupSlug}` }}
             </ds-text>
             <!-- group location -->
             <ds-text v-if="group && group.location" align="center" color="soft" size="small">

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

@@ -33,7 +33,7 @@
               </aside>
             </template>
             <section class="menu">
-              <user-teaser :user="post.author" :date-time="post.createdAt">
+              <user-teaser :user="post.author" :group="post.group" wide :date-time="post.createdAt">
                 <template #dateTime>
                   <ds-text v-if="post.createdAt !== post.updatedAt">
                     ({{ $t('post.edited') }})

webapp/pages/profile/_id/_slug.vue

@@ -31,8 +31,8 @@
               {{ userName }}
             </ds-heading>
             <ds-text align="center" color="soft">
-              <base-icon name="at" />
+              <!-- <base-icon name="at" data-test="at" /> -->
-              {{ userSlug }}
+              {{ `@${userSlug}` }}
             </ds-text>
             <ds-text v-if="user.location" align="center" color="soft" size="small">
               <base-icon name="map-marker" />