Structure of the community prepared

frontend/src/assets/scss/gradido-template.scss

@@ -113,7 +113,11 @@ a:hover,
   height: 50px;
 }
 
-.rounded-right {
+// .rounded-right-17 {
+//   border-top-right-radius: 17px !important;
+//   border-bottom-right-radius: 17px !important;
+// }
+.input-group .rounded-right {
   border-top-right-radius: 17px !important;
   border-bottom-right-radius: 17px !important;
 }

frontend/src/components/Contributions/OpenCreationsAmount.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="open-creations-amount">
+    <b-table striped hover :items="items"></b-table>
+  </div>
+</template>
+<script>
+export default {
+  name: 'OpenCreationsAmount',
+  data() {
+    return {
+      items: [
+        { monat: 'Oktober', status: 'Max. erreicht', eingereicht: '50 h', stundenOffen: '0 h' },
+        { monat: 'November', status: 'einreichen', eingereicht: '20 h', stundenOffen: '30 h' },
+      ],
+    }
+  },
+}
+</script>

frontend/src/components/Template/ContentHeader/GdtAmount.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="wallet-amount">GDT Amount components</div>
+  <div class="wallet-amount">
+    <div>GDT Amount components</div>
+    <div>0.00 GDT</div>
+  </div>
 </template>
 <script>
 export default {

frontend/src/components/Template/ContentHeader/MyCommunity.vue

@@ -1,14 +0,0 @@
-<template>
-  <div class="my-community">
-    <div class="d-flex">
-      <b-button block variant="gradido" class="rounded-right" to="#edit">Schreiben</b-button>
-      <b-button block variant="gradido" class="rounded-0" to="#my">Meine Beiträge</b-button>
-      <b-button block variant="gradido" class="rounded-left" to="#all">Community</b-button>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  name: 'MyCommunity',
-}
-</script>

frontend/src/components/Template/ContentHeader/NavCommunity.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="nav-community">
+    <div class="d-flex justify-content-center">
+      <b-button variant="gradido" class="rounded-right" to="#edit">Schreiben</b-button>
+      <b-button variant="gradido" class="rounded-0" to="#my">Meine Beiträge</b-button>
+      <b-button variant="gradido" class="rounded-left" to="#all">Community</b-button>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'NavCommunity',
+}
+</script>

frontend/src/layouts/templates/ContentHeader.vue

@@ -61,7 +61,7 @@
           </b-col>
         </b-row>
       </b-container>
-      <b-container v-if="path === '/community'"><my-community /></b-container>
+      <b-container v-if="path === '/community'"><nav-community /></b-container>
       <b-container v-if="path === '/settings'">settings content header</b-container>
     </div>
   </div>
@@ -71,14 +71,14 @@
 import GddAmount from '@/components/Template/ContentHeader/GddAmount.vue'
 import GdtAmount from '@/components/Template/ContentHeader/GdtAmount.vue'
 import CommunityMember from '@/components/Template/ContentHeader/CommunityMember.vue'
-import MyCommunity from '@/components/Template/ContentHeader/MyCommunity.vue'
+import NavCommunity from '@/components/Template/ContentHeader/NavCommunity.vue'
 export default {
   name: 'ContentHeader',
   components: {
     GddAmount,
     GdtAmount,
     CommunityMember,
-    MyCommunity,
+    NavCommunity,
   },
   props: {
     balance: { type: Number, required: true },

frontend/src/pages/Community.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="community-page">
+    <open-creations-amount v-if="hashLink === '#edit'" />
     <div>
       <b-tabs no-nav-style v-model="tabIndex" content-class="mt-3" align="center">
         <b-tab>
@@ -43,6 +44,7 @@
 import ContributionForm from '@/components/Contributions/ContributionForm.vue'
 import ContributionList from '@/components/Contributions/ContributionList.vue'
 import ContributionListInfo from '@/components/Contributions/ContributionListInfo.vue'
+import OpenCreationsAmount from '@/components/Contributions/OpenCreationsAmount.vue'
 import { createContribution, updateContribution, deleteContribution } from '@/graphql/mutations'
 import { listContributions, listAllContributions, verifyLogin } from '@/graphql/queries'
 
@@ -52,9 +54,11 @@ export default {
     ContributionListInfo,
     ContributionForm,
     ContributionList,
+    OpenCreationsAmount,
   },
   data() {
     return {
+      hashLink: '',
       tabLinkHashes: ['#edit', '#my', '#all'],
       tabIndex: 0,
       items: [],
@@ -73,19 +77,16 @@ export default {
       updateAmount: '',
     }
   },
-  computed: {
-    hashLink() {
-      return this.$root.hash
-    },
-  },
   mounted() {
     this.$nextTick(() => {
       this.tabIndex = this.tabLinkHashes.findIndex((hashLink) => hashLink === this.$route.hash)
+      this.hashLink = this.$route.hash
     })
   },
   watch: {
     $route(to, from) {
       this.tabIndex = this.tabLinkHashes.findIndex((hashLink) => hashLink === to.hash)
+      this.hashLink = to.hash
     },
   },
   methods: {