Implement displaying of 'myRole', 'groupType', and 'actionRadius' on group profile

webapp/locales/de.json

@@ -371,14 +371,35 @@
     "following": "Folge Ich"
   },
   "group": {
+    "actionRadii": {
+      "continental": "Kontinentale Gruppe",
+      "global": "Globale Gruppe",
+      "interplanetary": "Interplanetare Gruppe",
+      "national": "Nationale Gruppe",
+      "regional": "Regionale Gruppe"
+    },
+    "actionRadius": "Aktionsradius",
     "foundation": "Gründung",
-    "goal": "Ziel:",
+    "goal": "Ziel der Gruppe",
     "joinLeaveButton": {
       "iAmMember": "Bin Mitglied",
       "join": "Beitreten"
     },
     "membersCount": "Mitglieder",
-    "membersListTitle": "Gruppenmitglieder"
+    "membersListTitle": "Gruppenmitglieder",
+    "role": "Deine Rolle in der Gruppe",
+    "roles": {
+      "admin": "Administrator",
+      "owner": "Inhaber",
+      "pending": "Ausstehendes Mitglied",
+      "usual": "Einfaches Mitglied"
+    },
+    "type": "Gruppentyp",
+    "types": {
+      "closed": "Geschlossene Gruppe",
+      "hidden": "Versteckte Gruppe",
+      "public": "Öffentliche Gruppe"
+    }
   },
   "hashtags-filter": {
     "clearSearch": "Suche löschen",

webapp/locales/en.json

@@ -371,14 +371,35 @@
     "following": "Following"
   },
   "group": {
+    "actionRadii": {
+      "continental": "Continental Group",
+      "global": "Global Group",
+      "interplanetary": "Interplanetary Group",
+      "national": "National Group",
+      "regional": "Regional Group"
+    },
+    "actionRadius": "Action radius",
     "foundation": "Foundation",
-    "goal": "Goal:",
+    "goal": "Goal of group",
     "joinLeaveButton": {
       "iAmMember": "I'm a member",
       "join": "Join"
     },
     "membersCount": "Members",
-    "membersListTitle": "Group Members"
+    "membersListTitle": "Group Members",
+    "role": "Your role in the group",
+    "roles": {
+      "admin": "Administrator",
+      "owner": "Owner",
+      "pending": "Pending Member",
+      "usual": "Simple Member"
+    },
+    "type": "Group type",
+    "types": {
+      "closed": "Closed Group",
+      "hidden": "Hidden Group",
+      "public": "Public Group"
+    }
   },
   "hashtags-filter": {
     "clearSearch": "Clear search",

webapp/pages/group/_id/_slug.vue

@@ -102,11 +102,44 @@
             <!-- implement:
               v-if="!user.isMuted && !user.isBlocked" -->
           </div>
+          <hr />
+          <ds-space margin-top="small" margin-bottom="small">
+            <ds-text
+              v-if="isGroupMember"
+              class="centered-text hyphenate-text"
+              color="soft"
+              size="small"
+            >
+              <div class="describing-text">
+                {{ $t('group.role') }}
+              </div>
+              <br />
+              <ds-chip color="primary">{{ $t('group.roles.' + group.myRole) }}</ds-chip>
+            </ds-text>
+            <ds-text class="centered-text hyphenate-text" color="soft" size="small">
+              <div class="describing-text">
+                {{ $t('group.type') }}
+              </div>
+              <br />
+              <ds-chip color="primary">{{ $t('group.types.' + group.groupType) }}</ds-chip>
+            </ds-text>
+            <ds-text class="centered-text hyphenate-text" color="soft" size="small">
+              <div class="describing-text">
+                {{ $t('group.actionRadius') }}
+              </div>
+              <br />
+              <ds-chip color="primary">{{ $t('group.actionRadii.' + group.actionRadius) }}</ds-chip>
+            </ds-text>
+          </ds-space>
           <template v-if="group.about">
             <hr />
             <ds-space margin-top="small" margin-bottom="small">
-              <ds-text color="soft" size="small" class="hyphenate-text">
-                {{ $t('group.goal') }} {{ group.about }}
+              <ds-text class="centered-text hyphenate-text" color="soft" size="small">
+                <div class="describing-text">
+                  {{ $t('group.goal') }}
+                </div>
+                <br />
+                <ds-chip>{{ group.about }}</ds-chip>
               </ds-text>
             </ds-space>
           </template>
@@ -525,4 +558,10 @@ export default {
     margin-bottom: $space-x-small;
   }
 }
+.centered-text {
+  text-align: center;
+}
+.describing-text {
+  margin-bottom: -12px;
+}
 </style>