gdd transaction list change to row col system

frontend/src/views/Pages/AccountOverview/GddTransactionList.vue

@@ -1,82 +1,72 @@
 <template>
   <div class="gdd-transaction-list">
-    <b-list-group>
+    <div class="list-group">
-      <b-list-group-item
+      <div
         v-for="{ decay, transaction_id, type, date, balance, name, memo } in transactions"
         :key="transaction_id"
+        class="list-group-item gdd-transaction-list-item"
+        v-b-toggle="'a' + date + ''"
         :style="type === 'decay' ? 'background-color:#f1e0ae3d' : ''"
       >
-        <!-- ROW Start -->
+        <!-- Collaps Button  -->
-        <div class="d-flex gdd-transaction-list-item" v-b-toggle="'a' + date + ''">
+        <div v-if="type != 'decay'" class="text-right" style="width: 95%; position: absolute">
-          <!-- ICON -->
+          <b-button class="btn-sm">
-          <div style="width: 8%">
+            <b>i</b>
+          </b-button>
+        </div>
+
+        <b-row>
+          <!-- ICON  -->
+          <div class="col-1">
             <b-icon :icon="getProperties(type).icon" :class="getProperties(type).class" />
           </div>
-          <!-- Text Links -->
-          <div class="font1_2em pr-2 text-right" style="width: 32%">
-            <span>{{ getProperties(type).operator }}</span>
 
-            <small v-if="type === 'decay'">{{ $n(balance, 'decimal') }}</small>
+          <!-- Erklärung Links -->
-
+          <div class="col col-11">
-            <span v-else>{{ $n(balance, 'decimal') }}</span>
+            <!-- Betrag / Name Email -->
-            <div v-if="type !== 'decay' && type !== 'creation'">
+            <b-row>
-              <small>
+              <div class="col-5 text-right">{{ $n(balance, 'decimal') }}</div>
-                {{ $t('form.memo') }}
+              <div class="col-7">
-              </small>
+                {{ type !== 'decay' ? name : $t('decay.decay_since_last_transaction') }}
-            </div>
-            <div class="text-sm">
-              {{ $t('form.date') }}
-            </div>
-            <div v-if="decay" class="text-sm pt-2">
-              <b-icon v-if="type != 'decay'" icon="droplet-half" height="15" class="mb-3" />
-            </div>
-          </div>
-          <!-- Text Rechts -->
-          <div class="font1_2em text-left pl-2" style="width: 55%">
-            <div>{{ name ? name : '' }}</div>
-            <div>
-              <small>
-                {{ memo }}
-              </small>
-            </div>
-            <span v-if="type === 'decay'">
-              <small>{{ $t('decay.decay_since_last_transaction') }}</small>
-            </span>
-            <div v-if="date" class="text-sm">
-              {{ $d($moment(date), 'long') }} {{ $i18n.locale === 'de' ? 'Uhr' : '' }}
-            </div>
-            <decay-information v-if="decay" decaytyp="short" :decay="decay" />
-          </div>
-          <!-- Collaps Toggle Button -->
-          <div v-if="type != 'decay'" class="text-right" style="width: 5%">
-            <b-button class="btn-sm">
-              <b>i</b>
-            </b-button>
-          </div>
-        </div>
-        <!-- ROW End -->
-        <!-- Collaps Start -->
-        <b-collapse v-if="type != 'decay'" :id="'a' + date + ''">
-          <b-list-group>
-            <b-list-group-item style="border: 0px; background-color: #f1f1f1">
-              <div class="d-flex">
-                <div style="width: 40%" class="text-right pr-3 mr-2">
-                  <div v-if="type === 'send'">{{ $t('decay.sent') }}</div>
-                  <div v-if="type === 'creation'">{{ $t('decay.created') }}</div>
-                  <div v-if="type === 'receive'">{{ $t('decay.received') }}</div>
-                </div>
-                <div style="width: 60%">
-                  <div v-if="type === 'send'">{{ $t('decay.toCommunity') }}</div>
-                  <div v-if="type === 'creation'">{{ $t('decay.fromCommunity') }}</div>
-                  <div v-if="type === 'receive'">{{ $t('decay.fromCommunity') }}</div>
-                </div>
               </div>
-            </b-list-group-item>
+            </b-row>
-          </b-list-group>
+
-          <decay-information v-if="decay" decaytyp="new" :decay="decay" />
+            <!-- Nachricht -->
+            <b-row v-if="type !== 'decay' && type !== 'creation'">
+              <div class="col-5 text-right">{{ $t('form.memo') }}</div>
+              <div class="col-7">{{ memo }}</div>
+            </b-row>
+
+            <!-- Datum -->
+            <b-row v-if="type !== 'decay' && type !== 'creation'">
+              <div class="col-5 text-right">{{ $t('form.date') }}</div>
+              <div class="col-7">
+                {{ $d($moment(date), 'long') }} {{ $i18n.locale === 'de' ? 'Uhr' : '' }}
+              </div>
+            </b-row>
+
+            <!-- Decay -->
+            <b-row v-if="decay">
+              <div class="col-5 text-right">
+                <b-icon v-if="type != 'decay'" icon="droplet-half" height="15" class="mb-3" />
+              </div>
+              <div class="col-7">
+                <decay-information v-if="decay" decaytyp="short" :decay="decay" />
+              </div>
+            </b-row>
+          </div>
+        </b-row>
+
+        <!-- Collaps Start -->
+
+        <b-collapse v-if="type != 'decay'" class="pb-4" :id="'a' + date + ''">
+          <div style="border: 0px; background-color: #f1f1f1" class="p-2 pb-4 mb-4">
+            <decay-information v-if="decay" decaytyp="new" :decay="decay" />
+          </div>
         </b-collapse>
+
         <!-- Collaps End -->
-      </b-list-group-item>
+      </div>
       <pagination-buttons
         v-if="showPagination && transactionCount > pageSize"
         :has-next="hasNext"
@@ -89,7 +79,7 @@
       <div v-if="transactions.length === 0" class="mt-4 text-center">
         <span>{{ $t('transaction.nullTransactions') }}</span>
       </div>
-    </b-list-group>
+    </div>
   </div>
 </template>
 

frontend/src/views/Pages/AccountOverview/GdtTransactionList.vue

@@ -20,13 +20,16 @@
         } in this.transactionsGdt"
         :key="id"
       >
-        <!-- Betrag -->
         <div class="list-group-item gdt-transaction-list-item" v-b-toggle="'a' + date + ''">
-          <div v-if="type != 'decay'" class="text-right" style="width: 96%; position: absolute">
+          <!-- Collaps Button  -->
+          <div class="text-right" style="width: 96%; position: absolute">
             <b-button class="btn-sm">
               <b>i</b>
             </b-button>
           </div>
+
+          <!-- Betrag -->
+
           <!-- 7 nur GDT erhalten -->
           <b-row v-if="gdt_entry_type_id === 7">
             <div class="col-6 text-right">