From 544261bac0e26ac191d0e64c5d797e64ead6784f Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 30 Dec 2022 18:11:50 +0100
Subject: [PATCH] open contribution table style

---
 .../Contributions/ContributionListItem.vue    | 16 +++----
 .../Contributions/OpenCreationsAmount.vue     | 44 +++++++++++--------
 .../Template/ContentHeader/NavCommunity.vue   | 14 +++---
 .../Transactions/TransactionCreation.vue      |  4 +-
 .../Transactions/TransactionReceive.vue       |  4 +-
 .../Transactions/TransactionSend.vue          |  4 +-
 frontend/src/layouts/DashboardLayout.vue      |  2 +-
 7 files changed, 47 insertions(+), 41 deletions(-)

diff --git a/frontend/src/components/Contributions/ContributionListItem.vue b/frontend/src/components/Contributions/ContributionListItem.vue
index 930d4ddf8..dfff60840 100644
--- a/frontend/src/components/Contributions/ContributionListItem.vue
+++ b/frontend/src/components/Contributions/ContributionListItem.vue
@@ -164,15 +164,13 @@
         </div>
       </div> -->
       <b-collapse :id="collapsId" class="mt-2" v-model="visible">
-         
-          <contribution-messages-list
-            :messages="messages_get"
-            :state="state"
-            :contributionId="contributionId"
-            @get-list-contribution-messages="getListContributionMessages"
-            @update-state="updateState"
-          />
-      
+        <contribution-messages-list
+          :messages="messages_get"
+          :state="state"
+          :contributionId="contributionId"
+          @get-list-contribution-messages="getListContributionMessages"
+          @update-state="updateState"
+        />
       </b-collapse>
     </div>
   </div>
diff --git a/frontend/src/components/Contributions/OpenCreationsAmount.vue b/frontend/src/components/Contributions/OpenCreationsAmount.vue
index 31ffcc9e2..1b0ad6462 100644
--- a/frontend/src/components/Contributions/OpenCreationsAmount.vue
+++ b/frontend/src/components/Contributions/OpenCreationsAmount.vue
@@ -1,12 +1,30 @@
 <template>
-  <div class="container">
-    <div class="open-creations-amount bg-white appBoxShadow gradido-border-radius p-4">
-      <div class="my-3">
-        <ul class="my-3">
-          <li v-html="textForMonth(new Date(minimalDate), maxGddLastMonth)"></li>
-          <li v-html="textForMonth(new Date(), maxGddThisMonth)"></li>
-        </ul>
-      </div>
+  <div class="px-2">
+    <div>
+      <b-row class="small">
+        <b-col>Monatsbeiträge</b-col>
+        <b-col class="d-none d-md-inline">Status</b-col>
+        <b-col class="d-none d-md-inline">Eingereicht</b-col>
+        <b-col>offene Stunden</b-col>
+      </b-row>
+
+      <b-row>
+        <b-col>{{ $d(new Date(minimalDate), 'monthAndYear') }}</b-col>
+        <b-col class="d-none d-md-inline">
+          {{ maxGddLastMonth > 0 ? 'Einreichen' : 'Max. erreicht' }}
+        </b-col>
+        <b-col class="d-none d-md-inline">{{ (1000 - maxGddLastMonth) / 20 }} h</b-col>
+        <b-col>{{ maxGddLastMonth / 20 }} h</b-col>
+      </b-row>
+
+      <b-row>
+        <b-col>{{ $d(new Date(), 'monthAndYear') }}</b-col>
+        <b-col class="d-none d-md-inline">
+          {{ maxGddThisMonth > 0 ? 'Einreichen' : 'Max. erreicht' }}
+        </b-col>
+        <b-col class="d-none d-md-inline">{{ (1000 - maxGddThisMonth) / 20 }} h</b-col>
+        <b-col>{{ maxGddThisMonth / 20 }} h</b-col>
+      </b-row>
     </div>
   </div>
 </template>
@@ -18,15 +36,5 @@ export default {
     maxGddLastMonth: { type: Number, required: true },
     maxGddThisMonth: { type: Number, required: true },
   },
-
-  methods: {
-    textForMonth(date, availableAmount) {
-      const obj = {
-        monthAndYear: this.$d(date, 'monthAndYear'),
-        creation: availableAmount,
-      }
-      return this.$t('contribution.formText.openAmountForMonth', obj)
-    },
-  },
 }
 </script>
diff --git a/frontend/src/components/Template/ContentHeader/NavCommunity.vue b/frontend/src/components/Template/ContentHeader/NavCommunity.vue
index eeca3eca0..20361e82c 100644
--- a/frontend/src/components/Template/ContentHeader/NavCommunity.vue
+++ b/frontend/src/components/Template/ContentHeader/NavCommunity.vue
@@ -1,20 +1,20 @@
 <template>
-  <div class="nav-community container">
+  <div class="nav-community">
     <b-row class="nav-row">
-      <b-col cols="12" md="4" lg="4" class="mb-2 mb-md-0 mb-lg-0">
-        <b-btn active-class="btn-active" variant="link" block to="#edit">
+      <b-col cols="12" lg="4" md="4">
+        <b-btn active-class="btn-active" block variant="link" to="#edit">
           <b-icon icon="pencil" class="mr-2" />
           {{ $t('community.submitContribution') }}
         </b-btn>
       </b-col>
-      <b-col cols="12" md="4" lg="4" class="text-center mb-2 mb-md-0 mb-lg-0">
-        <b-btn active-class="btn-active" variant="link" block to="#my">
+      <b-col cols="12" lg="4" md="4">
+        <b-btn active-class="btn-active" block variant="link" to="#my">
           <b-icon icon="person" class="mr-2" />
           {{ $t('community.myContributions') }}
         </b-btn>
       </b-col>
-      <b-col cols="12" md="4" lg="4" class="text-right">
-        <b-btn active-class="btn-active" variant="link" block to="#all">
+      <b-col cols="12" lg="4" md="4">
+        <b-btn active-class="btn-active" block variant="link" to="#all">
           <b-icon icon="people" class="mr-2" />
           {{ $t('community.community') }}
         </b-btn>
diff --git a/frontend/src/components/Transactions/TransactionCreation.vue b/frontend/src/components/Transactions/TransactionCreation.vue
index 31bf563f1..38ad0d253 100644
--- a/frontend/src/components/Transactions/TransactionCreation.vue
+++ b/frontend/src/components/Transactions/TransactionCreation.vue
@@ -17,8 +17,8 @@
         <collapse-icon class="text-right" :visible="visible" />
       </b-col>
     </b-row>
-    <b-collapse class="pb-4 pt-5" v-model="visible">
-      <div class="word-break mb-4 mt-lg-3 offset-3 offset-lg-2">
+    <b-collapse class="pb-4 pt-lg-3" v-model="visible">
+      <div class="word-break mb-4 mt-lg-3 offset-2">
         <div class="font-weight-bold pb-2">{{ $t('form.memo') }}</div>
         {{ memo }}
       </div>
diff --git a/frontend/src/components/Transactions/TransactionReceive.vue b/frontend/src/components/Transactions/TransactionReceive.vue
index 060e3b66b..9ce7f8ba8 100644
--- a/frontend/src/components/Transactions/TransactionReceive.vue
+++ b/frontend/src/components/Transactions/TransactionReceive.vue
@@ -42,8 +42,8 @@
         <collapse-icon class="text-right" :visible="visible" />
       </b-col>
     </b-row>
-    <b-collapse class="pb-4 pt-5" v-model="visible">
-      <div class="word-break mb-4 mt-lg-3 offset-3 offset-lg-2">
+    <b-collapse class="pb-4 pt-lg-3" v-model="visible">
+      <div class="word-break mb-4 mt-lg-3 offset-2">
         <div class="font-weight-bold pb-2">{{ $t('form.memo') }}</div>
         {{ memo }}
       </div>
diff --git a/frontend/src/components/Transactions/TransactionSend.vue b/frontend/src/components/Transactions/TransactionSend.vue
index 2b471e3a1..f87184ffc 100644
--- a/frontend/src/components/Transactions/TransactionSend.vue
+++ b/frontend/src/components/Transactions/TransactionSend.vue
@@ -41,8 +41,8 @@
         <collapse-icon class="text-right" :visible="visible" />
       </b-col>
     </b-row>
-    <b-collapse class="pb-4 pt-2" v-model="visible">
-      <div class="word-break mb-5 mt-lg-3 offset-3 offset-lg-2">
+    <b-collapse class="pb-4 pt-lg-3" v-model="visible">
+      <div class="word-break mb-5 mt-lg-3 offset-2">
         <div class="font-weight-bold pb-2">{{ $t('form.memo') }}</div>
         <div class="">{{ memo }}</div>
       </div>
diff --git a/frontend/src/layouts/DashboardLayout.vue b/frontend/src/layouts/DashboardLayout.vue
index cc706e2b6..8de95c52e 100755
--- a/frontend/src/layouts/DashboardLayout.vue
+++ b/frontend/src/layouts/DashboardLayout.vue
@@ -35,7 +35,7 @@
         </b-col>
         <!-- ContentHeader && Content -->
         <b-col>
-          <b-row>
+          <b-row class="px-lg-3">
             <b-col cols="12">
               <b-row class="d-lg-flex" cols="12">
                 <!-- ContentHeader -->