open contribution table style

frontend/src/components/Contributions/ContributionListItem.vue

@@ -164,7 +164,6 @@
         </div>
       </div> -->
       <b-collapse :id="collapsId" class="mt-2" v-model="visible">
-         
         <contribution-messages-list
           :messages="messages_get"
           :state="state"
@@ -172,7 +171,6 @@
           @get-list-contribution-messages="getListContributionMessages"
           @update-state="updateState"
         />
-      
       </b-collapse>
     </div>
   </div>

frontend/src/components/Contributions/OpenCreationsAmount.vue

@@ -1,12 +1,30 @@
 <template>
-  <div class="container">
+  <div class="px-2">
-    <div class="open-creations-amount bg-white appBoxShadow gradido-border-radius p-4">
+    <div>
-      <div class="my-3">
+      <b-row class="small">
-        <ul class="my-3">
+        <b-col>Monatsbeiträge</b-col>
-          <li v-html="textForMonth(new Date(minimalDate), maxGddLastMonth)"></li>
+        <b-col class="d-none d-md-inline">Status</b-col>
-          <li v-html="textForMonth(new Date(), maxGddThisMonth)"></li>
+        <b-col class="d-none d-md-inline">Eingereicht</b-col>
-        </ul>
+        <b-col>offene Stunden</b-col>
-      </div>
+      </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>

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-col cols="12" lg="4" md="4">
-        <b-btn active-class="btn-active" variant="link" block to="#edit">
+        <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-col cols="12" lg="4" md="4">
-        <b-btn active-class="btn-active" variant="link" block to="#my">
+        <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-col cols="12" lg="4" md="4">
-        <b-btn active-class="btn-active" variant="link" block to="#all">
+        <b-btn active-class="btn-active" block variant="link" to="#all">
           <b-icon icon="people" class="mr-2" />
           {{ $t('community.community') }}
         </b-btn>

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">
+    <b-collapse class="pb-4 pt-lg-3" v-model="visible">
-      <div class="word-break mb-4 mt-lg-3 offset-3 offset-lg-2">
+      <div class="word-break mb-4 mt-lg-3 offset-2">
         <div class="font-weight-bold pb-2">{{ $t('form.memo') }}</div>
         {{ memo }}
       </div>

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">
+    <b-collapse class="pb-4 pt-lg-3" v-model="visible">
-      <div class="word-break mb-4 mt-lg-3 offset-3 offset-lg-2">
+      <div class="word-break mb-4 mt-lg-3 offset-2">
         <div class="font-weight-bold pb-2">{{ $t('form.memo') }}</div>
         {{ memo }}
       </div>

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">
+    <b-collapse class="pb-4 pt-lg-3" v-model="visible">
-      <div class="word-break mb-5 mt-lg-3 offset-3 offset-lg-2">
+      <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>

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 -->