From 5694706aed1f1a0efd172153f3d61c95760bad24 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Mon, 2 Jan 2023 14:54:57 +0100
Subject: [PATCH] collapse gdd and gdt transaction  decay style

---
 .../DecayInformation-Decay.vue                | 16 ++---
 .../DecayInformation-Long.vue                 | 59 ++++++++++---------
 .../DecayInformations/DecayInformation.vue    |  6 +-
 .../src/components/TransactionCollapse.vue    |  8 +--
 .../TransactionRows/DurationRow.vue           |  4 +-
 .../Transactions/TransactionCreation.vue      |  6 +-
 .../Transactions/TransactionReceive.vue       |  6 +-
 .../Transactions/TransactionSend.vue          |  4 --
 8 files changed, 49 insertions(+), 60 deletions(-)

diff --git a/frontend/src/components/DecayInformations/DecayInformation-Decay.vue b/frontend/src/components/DecayInformations/DecayInformation-Decay.vue
index 26481cff3..7abdb0f2b 100644
--- a/frontend/src/components/DecayInformations/DecayInformation-Decay.vue
+++ b/frontend/src/components/DecayInformations/DecayInformation-Decay.vue
@@ -1,20 +1,16 @@
 <template>
   <div class="decayinformation-decay">
+    <div class="mb-3">
+      <b-icon icon="droplet-half" class="mr-2" />
+      <b>{{ $t('decay.calculation_decay') }}</b>
+    </div>
     <b-row>
       <b-col>
-        <div class="text-center pb-3">
-          <b-icon icon="droplet-half" class="mr-2" />
-          <b>{{ $t('decay.calculation_decay') }}</b>
-        </div>
-      </b-col>
-    </b-row>
-    <b-row>
-      <b-col offset="1" cols="11">
         <b-row>
-          <b-col cols="5" class="text-right">
+          <b-col cols="12" lg="4" md="4">
             <div>{{ $t('decay.decay') }}</div>
           </b-col>
-          <b-col cols="7">
+          <b-col offset="1" offset-md="0" offset-lg="0">
             <div>
               {{ previousBookedBalance | GDD }}
               {{ decay === '0' ? $t('math.minus') : '' }}
diff --git a/frontend/src/components/DecayInformations/DecayInformation-Long.vue b/frontend/src/components/DecayInformations/DecayInformation-Long.vue
index 6e063df2d..04b2bdf98 100644
--- a/frontend/src/components/DecayInformations/DecayInformation-Long.vue
+++ b/frontend/src/components/DecayInformations/DecayInformation-Long.vue
@@ -1,22 +1,28 @@
 <template>
-  <div class="decayinformation-long">
-    <b-row>
-      <b-col>
-        <div>
-          <div class="text-center pb-3">
-            <b-icon icon="droplet-half" class="mr-2" />
-            <b>{{ $t('decay.calculation_decay') }}</b>
-          </div>
+  <div class="decayinformation-long px-2">
+    <div class="word-break mb-5 mt-lg-3">
+      <div class="font-weight-bold pb-2">{{ $t('form.memo') }}</div>
+      <div class="">{{ memo }}</div>
+    </div>
+    <div class="mb-3">
+      <b-icon icon="droplet-half" class="mr-2" />
+      <b>{{ $t('decay.calculation_decay') }}</b>
+    </div>
+    <!-- <b-row>
+      <b-col offset="">
+        <div class="pb-3">
+          <b-icon icon="droplet-half" class="mr-2" />
+          <b>{{ $t('decay.calculation_decay') }}</b>
         </div>
       </b-col>
-    </b-row>
+    </b-row> -->
     <b-row>
-      <b-col offset="1" cols="11">
+      <b-col>
         <b-row>
-          <b-col cols="5" class="text-right">
+          <b-col cols="12" lg="4" md="4">
             <div>{{ $t('decay.last_transaction') }}</div>
           </b-col>
-          <b-col cols="7">
+          <b-col offset="1" offset-md="0" offset-lg="0">
             <div>
               <span>
                 {{ $d(new Date(decay.start), 'long') }}
@@ -28,38 +34,32 @@
 
         <!-- Decay-->
         <b-row>
-          <b-col cols="5" class="text-right">
+          <b-col cols="12" lg="4" md="4">
             <div>{{ $t('decay.decay') }}</div>
           </b-col>
-          <b-col cols="7">{{ decay.decay | GDD }}</b-col>
+          <b-col offset="1" offset-md="0" offset-lg="0">{{ decay.decay | GDD }}</b-col>
         </b-row>
       </b-col>
     </b-row>
-    <hr class="mt-3 mb-3" />
-    <b-row>
-      <b-col class="text-center pb-3">
-        <b>{{ $t('decay.calculation_total') }}</b>
-      </b-col>
-    </b-row>
     <!-- Type-->
     <b-row>
-      <b-col offset="1" cols="11">
+      <b-col>
         <b-row>
           <!-- eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys-->
-          <b-col cols="5" class="text-right">{{ $t(`decay.types.${typeId.toLowerCase()}`) }}</b-col>
-          <b-col cols="7">{{ amount | GDD }}</b-col>
+          <b-col cols="12" lg="4" md="4">{{ $t(`decay.types.${typeId.toLowerCase()}`) }}</b-col>
+          <b-col offset="1" offset-md="0" offset-lg="0">{{ amount | GDD }}</b-col>
         </b-row>
         <!-- Decay-->
-        <b-row>
-          <b-col cols="5" class="text-right">{{ $t('decay.decay') }}</b-col>
-          <b-col cols="7">{{ decay.decay | GDD }}</b-col>
-        </b-row>
+        <!-- <b-row>
+          <b-col cols="4">{{ $t('decay.decay') }}</b-col>
+          <b-col>{{ decay.decay | GDD }}</b-col>
+        </b-row> -->
         <!-- Total-->
         <b-row>
-          <b-col cols="5" class="text-right">
+          <b-col cols="12" lg="4" md="4">
             <div>{{ $t('decay.total') }}</div>
           </b-col>
-          <b-col cols="7">
+          <b-col offset="1" offset-md="0" offset-lg="0">
             <b>{{ (Number(amount) + Number(decay.decay)) | GDD }}</b>
           </b-col>
         </b-row>
@@ -78,6 +78,7 @@ export default {
   props: {
     amount: { type: String, default: '0' },
     typeId: { type: String, default: '' },
+    memo: { type: String, default: '' },
     decay: {
       type: Object,
     },
diff --git a/frontend/src/components/DecayInformations/DecayInformation.vue b/frontend/src/components/DecayInformations/DecayInformation.vue
index 690f6532b..16624fe17 100644
--- a/frontend/src/components/DecayInformations/DecayInformation.vue
+++ b/frontend/src/components/DecayInformations/DecayInformation.vue
@@ -7,7 +7,7 @@
       :decay="decay"
       :typeId="typeId"
     />
-    <decay-information-long v-else :amount="amount" :decay="decay" :typeId="typeId" />
+    <decay-information-long v-else :amount="amount" :decay="decay" :typeId="typeId" :memo="memo" />
   </div>
 </template>
 <script>
@@ -31,6 +31,10 @@ export default {
       type: Object,
       required: true,
     },
+    memo: {
+      type: String,
+      required: true,
+    },
     typeId: {
       type: String,
       required: true,
diff --git a/frontend/src/components/TransactionCollapse.vue b/frontend/src/components/TransactionCollapse.vue
index c78d7e974..2d4e8bdc7 100644
--- a/frontend/src/components/TransactionCollapse.vue
+++ b/frontend/src/components/TransactionCollapse.vue
@@ -1,16 +1,16 @@
 <template>
-  <div class="gdt-transaction-collapse p-2 pt-4 pb-4 mb-4 gradido-no-border">
-    <b-row class="gdt-list-collapse-header-text text-center pb-3">
+  <div class="gdt-transaction-collapse  py-4 mb-4 gradido-no-border">
+    <b-row class="gdt-list-collapse-header-text mb-3">
       <b-col class="collapse-headline">
         <b>{{ getLinesByType.headline }}</b>
       </b-col>
     </b-row>
     <b-row class="gdt-list-collapse-box--all">
-      <b-col cols="6" class="text-right collapse-col-left">
+      <b-col cols="12" lg="4" md="4">
         <div class="collapse-first">{{ getLinesByType.first }}</div>
         <div class="collapse-second">{{ getLinesByType.second }}</div>
       </b-col>
-      <b-col cols="6" class="collapse-col-right">
+      <b-col offset="1" offset-md="0" offset-lg="0">
         <div class="collapse-firstMath">{{ getLinesByType.firstMath }}</div>
         <div class="collapse-secondMath">
           {{ getLinesByType.secondMath }}
diff --git a/frontend/src/components/TransactionRows/DurationRow.vue b/frontend/src/components/TransactionRows/DurationRow.vue
index d40d9e35b..9cadf8c24 100644
--- a/frontend/src/components/TransactionRows/DurationRow.vue
+++ b/frontend/src/components/TransactionRows/DurationRow.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="duration-row">
     <b-row>
-      <b-col cols="5" class="text-right">
+      <b-col cols="12" lg="4" md="4">
         <div>{{ $t('decay.past_time') }}</div>
       </b-col>
-      <b-col cols="7">
+      <b-col offset="1" offset-md="0" offset-lg="0">
         <span v-if="duration">{{ durationText }}</span>
       </b-col>
     </b-row>
diff --git a/frontend/src/components/Transactions/TransactionCreation.vue b/frontend/src/components/Transactions/TransactionCreation.vue
index 62784193b..72fe4de8b 100644
--- a/frontend/src/components/Transactions/TransactionCreation.vue
+++ b/frontend/src/components/Transactions/TransactionCreation.vue
@@ -18,11 +18,7 @@
       </b-col>
     </b-row>
     <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>
-      <decay-information :typeId="typeId" :decay="decay" :amount="amount" />
+      <decay-information :typeId="typeId" :decay="decay" :amount="amount" :memo="memo" />
     </b-collapse>
   </div>
 </template>
diff --git a/frontend/src/components/Transactions/TransactionReceive.vue b/frontend/src/components/Transactions/TransactionReceive.vue
index 285aede43..6e9b9d9b4 100644
--- a/frontend/src/components/Transactions/TransactionReceive.vue
+++ b/frontend/src/components/Transactions/TransactionReceive.vue
@@ -43,11 +43,7 @@
       </b-col>
     </b-row>
     <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>
-      <decay-information :typeId="typeId" :decay="decay" :amount="amount" />
+      <decay-information :typeId="typeId" :decay="decay" :amount="amount" :memo="memo" />
     </b-collapse>
   </div>
 </template>
diff --git a/frontend/src/components/Transactions/TransactionSend.vue b/frontend/src/components/Transactions/TransactionSend.vue
index 470d87560..e7e3bf4c6 100644
--- a/frontend/src/components/Transactions/TransactionSend.vue
+++ b/frontend/src/components/Transactions/TransactionSend.vue
@@ -42,10 +42,6 @@
       </b-col>
     </b-row>
     <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>
       <decay-information :typeId="typeId" :decay="decay" :amount="amount" :memo="memo" />
     </b-collapse>
   </div>