Merge branch 'master' of github.com:gradido/gradido

2025-12-13 07:45:54 +00:00 · 2021-08-12 13:58:55 +00:00 · 2021-08-12 13:58:55 +00:00 · ab6c9948d0
commit ab6c9948d0
parent 23188e69d7 f9c6ade751
11 changed files with 354 additions and 216 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -4,15 +4,38 @@ All notable changes to this project will be documented in this file. Dates are d

 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).

+#### [1.3.0](https://github.com/gradido/gradido/compare/1.2.1...1.3.0)
+
+- update code for correct transactions listening [`#725`](https://github.com/gradido/gradido/pull/725)
+- bugfix: change to new frontend passwort reset [`#724`](https://github.com/gradido/gradido/pull/724)
+- feat: Add Pagination Buttons to GDT Transaction List [`#716`](https://github.com/gradido/gradido/pull/716)
+- fix bug, change statment from transaction infbox [`#712`](https://github.com/gradido/gradido/pull/712)
+- 650-display of the gdt transactions [`#687`](https://github.com/gradido/gradido/pull/687)
+- Login-Server bug fix, allow names with 2 characters also [`#714`](https://github.com/gradido/gradido/pull/714)
+- Apollo sendCoins via Login-Server [`#699`](https://github.com/gradido/gradido/pull/699)
+- increase coverage to 34% [`#700`](https://github.com/gradido/gradido/pull/700)
+- mobile friendly, add text, change text [`#683`](https://github.com/gradido/gradido/pull/683)
+- Css color input error [`#646`](https://github.com/gradido/gradido/pull/646)
+- Apollo gdt [`#686`](https://github.com/gradido/gradido/pull/686)
+- Backend Setup [`#584`](https://github.com/gradido/gradido/pull/584)
+- text-size in textarea and font-variante if focus [`#677`](https://github.com/gradido/gradido/pull/677)
+- 680 app large maximum width [`#681`](https://github.com/gradido/gradido/pull/681)
+- linting, server is working [`34b30b2`](https://github.com/gradido/gradido/commit/34b30b216b6fafcb5b686d4b023b05f2e9766bdf)
+- server stack seems to work. Graphql does not load properly yet [`43f7cf8`](https://github.com/gradido/gradido/commit/43f7cf87679713d436a64d569d6af1594a12ee33)
+- initial commit, base packages [`fdf0979`](https://github.com/gradido/gradido/commit/fdf0979830fece04208a6b3bb06bb5323a3c149b)
+
 #### [1.2.1](https://github.com/gradido/gradido/compare/1.2.0...1.2.1)

+> 22 July 2021
+
+- release 1.2.1 [`#670`](https://github.com/gradido/gradido/pull/670)
 - exchange positions of decay in transaction in old frontend [`#662`](https://github.com/gradido/gradido/pull/662)
 - fix unneccessary migration run on fresh (docker) setup [`#654`](https://github.com/gradido/gradido/pull/654)
 - move back decay as standalone transaction in old frontend [`#656`](https://github.com/gradido/gradido/pull/656)
 - fix display error with creation [`#652`](https://github.com/gradido/gradido/pull/652)
+- release [`a0b8056`](https://github.com/gradido/gradido/commit/a0b8056c17b22570a1b1dbb6fa6ce71e561b04af)
 - update content for frontend [`d37ce09`](https://github.com/gradido/gradido/commit/d37ce0949ef97d2a6c6ffaf0be31db9f6d92e743)
 - exchange positions [`bc000ef`](https://github.com/gradido/gradido/commit/bc000efd87c9701480c4aeaa7b819ab49bfe8f01)
- update init db dataset [`ca4ef82`](https://github.com/gradido/gradido/commit/ca4ef82b874185f3d93acf8d1fca9ad6d3dadcaf)

 #### [1.2.0](https://github.com/gradido/gradido/compare/1.1.1...1.2.0)

--- a/README.md
+++ b/README.md
@ -2,7 +2,7 @@

 Healthy money for a healthy world

-![logo](https://gradido.net/wp-content/uploads/2020/07/gradido_logo_web.png)
+![logo](https://gradido.net/wp-content/uploads/2021/06/gradido_logo%E2%97%8Fpreview.png)

 The Gradido model can create global prosperity and peace
 The Corona crisis has fundamentally changed our world within a very short time.
@ -39,4 +39,4 @@ git submodule update --recursive --init
 ## Useful Links

 - [Gradido.net](https://gradido.net/)
- [Discord](https://discord.gg/kA3zBAKQDC)
+- [Discord](https://discord.gg/kA3zBAKQDC)
--- a/frontend/package.json
+++ b/frontend/package.json
@ -1,6 +1,6 @@
 {
  "name": "bootstrap-vue-gradido-wallet",
-  "version": "1.2.1",
+  "version": "1.3.0",
  "private": true,
  "scripts": {
    "start": "node run/server.js",
--- a/frontend/src/components/DecayInformation.vue
+++ b/frontend/src/components/DecayInformation.vue
@ -1,25 +1,25 @@
 <template>
  <div>
    <span v-if="decaytyp === 'short'">
-      <small>{{ decay ? ' -' + decay.balance + ' ' + decayStartBlockTextShort : '' }}</small>
+      {{ decay ? ' -' + decay.balance + ' ' + decayStartBlockTextShort : '' }}
    </span>

    <div v-if="decaytyp === 'new'">
      <b-list-group style="border: 0px">
        <b-list-group-item style="border: 0px; background-color: #f1f1f1">
-          <div class="d-flex">
+          <div class="d-flex" v-if="!decay.decay_start_block">
            <div style="width: 100%" class="text-center pb-3">
              <b-icon icon="droplet-half" height="12" class="mb-2" />
-              {{ $t('decay.calculation_decay') }}
+              <b>{{ $t('decay.calculation_decay') }}</b>
            </div>
          </div>

          <div class="d-flex">
            <div style="width: 40%" class="text-right pr-3 mr-2">
-              {{ $t('decay.last_transaction') }}
+              <div v-if="!decay.decay_start_block">{{ $t('decay.last_transaction') }}</div>
            </div>
            <div style="width: 60%">
-              <div v-if="decay.decay_start_block > 0">
+              <div v-if="decay.decay_start_block">
                <div class="display-4">{{ $t('decay.Starting_block_decay') }}</div>
                <div>
                  {{ $t('decay.decay_introduced') }} :
@ -27,7 +27,7 @@
                </div>
              </div>
              <div>
-                <span>
+                <span v-if="!decay.decay_start_block">
                  {{ $d($moment.unix(decay.decay_start), 'long') }}
                  {{ $i18n.locale === 'de' ? 'Uhr' : '' }}
                </span>
@ -37,17 +37,23 @@

          <div class="d-flex">
            <div style="width: 40%" class="text-right pr-3 mr-2">
-              {{ $t('decay.past_time') }}
+              <div v-if="!decay.decay_start_block">{{ $t('decay.past_time') }}</div>
            </div>
            <div style="width: 60%">
-              <div v-if="decay.decay_start_block > 0">{{ $t('decay.since_introduction') }}</div>
+              <div v-if="decay.decay_start_block">{{ $t('decay.since_introduction') }}</div>
              <span v-if="duration">
-                <b v-if="duration.years > 0">{{ duration.years }} {{ $t('decay.year') }},</b>
-                <b v-if="duration.months > 0">{{ duration.months }} {{ $t('decay.months') }},</b>
-                <b v-if="duration.days > 0">{{ duration.days }} {{ $t('decay.days') }},</b>
-                <b v-if="duration.hours > 0">{{ duration.hours }} {{ $t('decay.hours') }},</b>
-                <b v-if="duration.minutes > 0">{{ duration.minutes }} {{ $t('decay.minutes') }},</b>
-                <b v-if="duration.seconds > 0">{{ duration.seconds }} {{ $t('decay.seconds') }}</b>
+                <span v-if="duration.years > 0">{{ duration.years }} {{ $t('decay.year') }},</span>
+                <span v-if="duration.months > 0">
+                  {{ duration.months }} {{ $t('decay.months') }},
+                </span>
+                <span v-if="duration.days > 0">{{ duration.days }} {{ $t('decay.days') }},</span>
+                <span v-if="duration.hours > 0">{{ duration.hours }} {{ $t('decay.hours') }},</span>
+                <span v-if="duration.minutes > 0">
+                  {{ duration.minutes }} {{ $t('decay.minutes') }},
+                </span>
+                <span v-if="duration.seconds > 0">
+                  {{ duration.seconds }} {{ $t('decay.seconds') }}
+                </span>
              </span>
            </div>
          </div>
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@ -23,7 +23,7 @@
    "decay_since_last_transaction":"Vergänglichkeit seit der letzten Transaktion",
    "calculation_decay":"Berechnung der Vergänglichkeit",
    "Starting_block_decay":"Startblock Vergänglichkeit",
-    "decay_introduced":"Die Vergänglichkeit wurde Eingeführt am",
+    "decay_introduced":"Die Vergänglichkeit wurde Eingeführt am ",
    "last_transaction":"Letzte Transaktion",
    "past_time":"Vergangene Zeit",
    "since_introduction":"seit Einführung der Vergänglichkeit",
@ -33,11 +33,11 @@
    "hours":"Stunden",
    "minutes":"Minuten",
    "seconds":"Sekunden",
-    "received":"empfangen",
-    "sent":"gesendet",
-    "created":"geschöpft",
-    "fromCommunity":"Aus der Community",
-    "toCommunity":"An die Community"
+    "received":"Empfangen",
+    "sent":"Gesendet",
+    "created":"Geschöpft",
+    "fromCommunity":"Aus der Gemeinschaft",
+    "toCommunity":"An die Gemeinschaft"
  }, 
  "form": {
    "cancel": "Abbrechen",
@ -175,6 +175,11 @@
     "conversion-gdt-euro":"Umrechnung Euro / Gradido Transform (GDT)",
     "calculation":"Berechnung der Gradido Transform",
     "conversion":"Umrechnung",
-     "formula":"Berechungsformel"
+     "formula":"Berechungsformel",
+     "no-transactions":"Du hast zur Zeit keine Transaktionen",
+     "publisher":"Dein geworbenes Mitglied hat einen Beitrag bezahlt",
+     "gdt-receive":"Aktion",
+     "your-share":"Geworbenes Mitglied",
+     "contribution":"Beitrag"
  }
 }
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@ -33,9 +33,9 @@
    "hours": "Hours",
    "minutes": "Minutes",
    "seconds": "Seconds",
-    "received":"received",
-    "sent":"sent",
-    "created":"reated",
+    "received":"Received",
+    "sent":"Sent",
+    "created":"Created",
    "fromCommunity":"From the community",
    "toCommunity":"To the community"
  },
@ -176,6 +176,11 @@
    "conversion-gdt-euro": "Conversion Euro / Gradido Transform (GDT)",
    "calculation": "Calculation of Gradido Transform",
    "conversion": "Conversion",
-    "formula": "Calculation formula"
+    "formula": "Calculation formula",
+    "no-transactions":"You currently have no transactions",
+    "publisher":"A member you referred has paid a contribution",
+    "gdt-receive":"GDT receive",
+    "your-share":"Your share",
+    "contribution":"Contribution"
 }
 }
--- a/frontend/src/views/Pages/AccountOverview/GddTransactionList.spec.js
+++ b/frontend/src/views/Pages/AccountOverview/GddTransactionList.spec.js
@ -106,28 +106,40 @@ describe('GddTransactionList', () => {
          expect(transaction.find('svg').classes()).toContain('text-danger')
        })

-        it('shows the amount of transaction', () => {
-          expect(transaction.findAll('div').at(2).text()).toContain('19.93')
+        it('has a minus operator', () => {
+          expect(transaction.findAll('.gdd-transaction-list-item-operator').at(0).text()).toContain(
+            '-',
+          )
        })

-        it('has a minus operator', () => {
-          expect(transaction.findAll('div').at(2).text()).toContain('-')
+        it('shows the amount of transaction', () => {
+          expect(transaction.findAll('.gdd-transaction-list-item-amount').at(0).text()).toContain(
+            '19.93',
+          )
        })

        it('shows the name of the receiver', () => {
-          expect(transaction.findAll('div').at(0).text()).toContain('Bob der Baumeister')
+          expect(transaction.findAll('.gdd-transaction-list-item-name').at(0).text()).toContain(
+            'Bob der Baumeister',
+          )
        })

        it('shows the message of the transaction', () => {
-          expect(transaction.findAll('div').at(5).text()).toContain('Alles Gute zum Geburtstag')
+          expect(transaction.findAll('.gdd-transaction-list-message').at(0).text()).toContain(
+            'Alles Gute zum Geburtstag',
+          )
        })

        it('shows the date of the transaction', () => {
-          expect(transaction.findAll('div').at(8).text()).toContain('Tue May 25 2021')
+          expect(transaction.findAll('.gdd-transaction-list-item-date').at(0).text()).toContain(
+            'Tue May 25 2021',
+          )
        })

        it('shows the decay calculation', () => {
-          expect(transaction.findAll('div').at(9).text()).toContain('-0.5')
+          expect(transaction.findAll('div.gdd-transaction-list-item-decay').at(0).text()).toContain(
+            '-0.5',
+          )
        })
      })

@ -145,20 +157,28 @@ describe('GddTransactionList', () => {
          expect(transaction.find('svg').classes()).toContain('gradido-global-color-accent')
        })

-        it('shows the amount of transaction', () => {
-          expect(transaction.findAll('div').at(2).text()).toContain('1000')
+        it('has a plus operator', () => {
+          expect(transaction.findAll('.gdd-transaction-list-item-operator').at(0).text()).toContain(
+            '+',
+          )
        })

-        it('has a plus operator', () => {
-          expect(transaction.findAll('div').at(2).text()).toContain('+')
+        it('shows the amount of transaction', () => {
+          expect(transaction.findAll('.gdd-transaction-list-item-amount').at(0).text()).toContain(
+            '1000',
+          )
        })

        it('shows the name of the receiver', () => {
-          expect(transaction.findAll('div').at(3).text()).toContain('Gradido Akademie')
+          expect(transaction.findAll('.gdd-transaction-list-item-name').at(0).text()).toContain(
+            'Gradido Akademie',
+          )
        })

        it('shows the date of the transaction', () => {
-          expect(transaction.findAll('div').at(3).text()).toContain('Thu Apr 29 2021')
+          expect(transaction.findAll('.gdd-transaction-list-item-date').at(0).text()).toContain(
+            'Thu Apr 29 2021',
+          )
        })
      })

@ -176,24 +196,40 @@ describe('GddTransactionList', () => {
          expect(transaction.find('svg').classes()).toContain('gradido-global-color-accent')
        })

+        it('has a plus operator', () => {
+          expect(transaction.findAll('.gdd-transaction-list-item-operator').at(0).text()).toContain(
+            '+',
+          )
+        })
+
        it('shows the amount of transaction', () => {
-          expect(transaction.findAll('div').at(2).text()).toContain('+ 314.98')
+          expect(transaction.findAll('.gdd-transaction-list-item-amount').at(0).text()).toContain(
+            '314.98',
+          )
        })

        it('shows the name of the recipient', () => {
-          expect(transaction.findAll('div').at(0).text()).toContain('Jan Ulrich')
+          expect(transaction.findAll('.gdd-transaction-list-item-name').at(0).text()).toContain(
+            'Jan Ulrich',
+          )
        })

        it('shows the message of the transaction', () => {
-          expect(transaction.findAll('div').at(5).text()).toContain('Für das Fahrrad!')
+          expect(transaction.findAll('.gdd-transaction-list-message').at(0).text()).toContain(
+            'Für das Fahrrad!',
+          )
        })

        it('shows the date of the transaction', () => {
-          expect(transaction.findAll('div').at(8).text()).toContain('Thu Apr 29 2021')
+          expect(transaction.findAll('.gdd-transaction-list-item-date').at(0).text()).toContain(
+            'Thu Apr 29 2021',
+          )
        })

        it('shows the decay calculation', () => {
-          expect(transaction.findAll('div').at(9).text()).toContain('-1.5')
+          expect(transaction.findAll('.gdd-transaction-list-item-decay').at(0).text()).toContain(
+            '-1.5',
+          )
        })
      })

@ -211,16 +247,22 @@ describe('GddTransactionList', () => {
          expect(transaction.find('svg').classes()).toContain('gradido-global-color-gray')
        })

-        it('shows the amount of transaction', () => {
-          expect(transaction.findAll('div').at(2).text()).toContain('1.07')
+        it('has a minus operator', () => {
+          expect(transaction.findAll('.gdd-transaction-list-item-operator').at(0).text()).toContain(
+            '-',
+          )
        })

-        it('has a minus operator', () => {
-          expect(transaction.findAll('div').at(2).text()).toContain('-')
+        it('shows the amount of transaction', () => {
+          expect(transaction.findAll('.gdd-transaction-list-item-amount').at(0).text()).toContain(
+            '1.07',
+          )
        })

        it('shows the name of the receiver', () => {
-          expect(transaction.findAll('div').at(3).text()).toBe('decay.decay_since_last_transaction')
+          expect(transaction.findAll('.gdd-transaction-list-item-name').at(0).text()).toBe(
+            'decay.decay_since_last_transaction',
+          )
        })
      })
    })
--- a/frontend/src/views/Pages/AccountOverview/GddTransactionList.vue
+++ b/frontend/src/views/Pages/AccountOverview/GddTransactionList.vue
@ -1,79 +1,76 @@
 <template>
  <div class="gdd-transaction-list">
-    <b-list-group>
-      <b-list-group-item
+    <div class="list-group">
+      <div
        v-for="{ decay, transaction_id, type, date, balance, name, memo } in transactions"
        :key="transaction_id"
        :style="type === 'decay' ? 'background-color:#f1e0ae3d' : ''"
      >
-        <!-- ROW Start -->
-        <div class="d-flex gdd-transaction-list-item" v-b-toggle="'a' + date + ''">
-          <!-- ICON -->
-          <div style="width: 8%">
-            <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>
-
-            <span v-else>{{ $n(balance, 'decimal') }}</span>
-            <div v-if="type !== 'decay' && type !== 'creation'">
-              <small>
-                {{ $t('form.memo') }}
-              </small>
-            </div>
-            <div v-if="decay" class="text-sm">
-              <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%">
+        <div class="list-group-item gdd-transaction-list-item" v-b-toggle="'a' + date + ''">
+          <!-- Collaps Button  -->
+          <div v-if="type != 'decay'" class="text-right" style="width: 95%; position: absolute">
            <b-button class="btn-sm">
              <b>i</b>
            </b-button>
          </div>
+
+          <b-row>
+            <!-- ICON  -->
+            <div class="col-1 gdd-transaction-list-item-icon">
+              <b-icon :icon="getProperties(type).icon" :class="getProperties(type).class" />
+            </div>
+
+            <div class="col col-11">
+              <!-- Betrag / Name Email -->
+              <b-row>
+                <div class="col-5 text-right">
+                  <span class="gdd-transaction-list-item-operator">
+                    {{ getProperties(type).operator }}
+                  </span>
+                  <span class="gdd-transaction-list-item-amount">{{ $n(balance, 'decimal') }}</span>
+                </div>
+                <div class="col-7 gdd-transaction-list-item-name">
+                  {{ type !== 'decay' ? name : $t('decay.decay_since_last_transaction') }}
+                </div>
+              </b-row>
+
+              <!-- Nachricht -->
+              <b-row v-if="type !== 'decay'">
+                <div class="col-5 text-right">{{ $t('form.memo') }}</div>
+                <div class="col-7 gdd-transaction-list-message">{{ memo }}</div>
+              </b-row>
+
+              <!-- Datum -->
+              <b-row v-if="type !== 'decay'">
+                <div class="col-5 text-right">{{ $t('form.date') }}</div>
+                <div class="col-7 gdd-transaction-list-item-date">
+                  {{ $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-1" />
+                </div>
+                <div class="col-7 gdd-transaction-list-item-decay">
+                  <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 -->
        </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-list-group>
-          <decay-information v-if="decay" decaytyp="new" :decay="decay" />
-        </b-collapse>
-        <!-- Collaps End -->
-      </b-list-group-item>
+      </div>
      <pagination-buttons
        v-if="showPagination && transactionCount > pageSize"
        :has-next="hasNext"
@ -86,7 +83,7 @@
      <div v-if="transactions.length === 0" class="mt-4 text-center">
        <span>{{ $t('transaction.nullTransactions') }}</span>
      </div>
-    </b-list-group>
+    </div>
  </div>
 </template>

--- a/frontend/src/views/Pages/AccountOverview/GdtTransactionList.vue
+++ b/frontend/src/views/Pages/AccountOverview/GdtTransactionList.vue
@ -1,116 +1,142 @@
 <template>
  <div class="gdt-transaction-list">
-    <b-list-group>
-      <b-list-group-item
-        v-for="{
-          id,
-          amount,
-          date,
-          /*email,*/
-          comment,
-          /*coupon_code,*/
-          gdt_entry_type_id,
-          factor,
-          /*amount2,*/
-          /*factor2,*/
-          gdt,
-        } in this.transactionsGdt"
+    <div class="list-group">
+      <div v-if="transactionGdtCount === 0">
+        {{ $t('gdt.no-transactions') }}
+      </div>
+      <div
+        v-else
+        v-for="{ id, amount, date, comment, gdt_entry_type_id, factor, gdt } in transactionsGdt"
        :key="id"
      >
-        <!-- ROW Start -->
-        <div class="d-flex gdt-transaction-list-item" v-b-toggle="'a' + date + ''">
-          <!-- ICON -->
-          <div style="width: 8%"></div>
-          <!-- Text Links -->
-          <div class="font1_2em pr-2 text-right" style="width: 36%">
-            <div>
-              <div>
-                <span v-if="gdt_entry_type_id != 7">-</span>
-                {{ $n(amount, 'decimal') }}
-              </div>
-              <div v-if="gdt_entry_type_id != 7">+{{ $n(gdt, 'decimal') }}</div>
-            </div>
-
-            <div v-if="comment">
-              <small>
-                {{ $t('form.memo') }}
-              </small>
-            </div>
-            <div v-if="date" class="text-sm">
-              {{ $t('form.date') }}
-            </div>
-            <div v-if="gdt_entry_type_id != 7">
-              <small>{{ $t('gdt.factor') }}</small>
-            </div>
+        <div class="list-group-item gdt-transaction-list-item" v-b-toggle="'a' + date + ''">
+          <!-- Icon  -->
+          <div class="text-right" style="position: absolute">
+            <b-icon
+              v-if="gdt_entry_type_id"
+              :icon="getIcon(gdt_entry_type_id).icon"
+              :class="getIcon(gdt_entry_type_id).class"
+            ></b-icon>
          </div>
-          <!-- Text Rechts -->
-          <div class="font1_2em text-left pl-2" style="width: 55%">
-            <div>
-              <div v-if="gdt_entry_type_id != 7">EURO</div>
-              <div>GDT</div>
-            </div>

-            <div v-if="comment">
-              <small>
-                {{ comment }}
-              </small>
-            </div>
-
-            <div v-if="date" class="text-sm">
-              {{ $d($moment(date), 'long') }} {{ $i18n.locale === 'de' ? 'Uhr' : '' }}
-            </div>
-
-            <div v-if="gdt_entry_type_id != 7">
-              <small>{{ factor }}</small>
-            </div>
-          </div>
-          <!-- Collaps Toggle Button -->
-          <div v-if="gdt_entry_type_id" class="text-right" style="width: 5%">
+          <!-- 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">
+              <div>{{ $t('gdt.gdt-receive') }}</div>
+              <div>Gutschrift</div>
+            </div>
+            <div class="col-6">
+              <div>{{ comment }}</div>
+              <div>{{ $n(gdt, 'decimal') }} GDT</div>
+            </div>
+          </b-row>
+          <!--4 publisher -->
+          <b-row v-else-if="gdt_entry_type_id === 4">
+            <div class="col-6 text-right">
+              <div>{{ $t('gdt.your-share') }}</div>
+              <div>Gutschrift</div>
+            </div>
+            <div class="col-6">
+              <div>5%</div>
+              <div>{{ $n(amount, 'decimal') }} GDT</div>
+            </div>
+          </b-row>
+          <!-- 1, 2, 3, 5, 6 spenden in euro -->
+          <b-row v-else>
+            <div class="col-6 text-right">
+              <div>{{ $t('gdt.contribution') }}</div>
+              <div>Gutschrift</div>
+            </div>
+            <div class="col-6">
+              <div>{{ $n(amount, 'decimal') }} €</div>
+              <div>{{ $n(gdt, 'decimal') }} GDT</div>
+            </div>
+          </b-row>
+
+          <!-- Betrag ENDE-->
+
+          <!-- Nachricht-->
+          <b-row v-if="comment && gdt_entry_type_id !== 7">
+            <div class="col-6 text-right">
+              {{ $t('form.memo') }}
+            </div>
+            <div class="col-6">
+              {{ comment }}
+            </div>
+          </b-row>
+
+          <!-- Datum-->
+          <b-row v-if="date" class="gdt-list-row text-header">
+            <div class="col-6 text-right">
+              {{ $t('form.date') }}
+            </div>
+            <div class="col-6">
+              {{ $d($moment(date), 'long') }} {{ $i18n.locale === 'de' ? 'Uhr' : '' }}
+            </div>
+          </b-row>
        </div>
-        <!-- ROW End -->
-        <!-- Collaps Start -->
+
+        <!--     Collaps START    -->
+
        <b-collapse v-if="gdt_entry_type_id" :id="'a' + date + ''" class="pb-4">
-          <b-list-group style="border: 0px; background-color: #f1f1f1">
-            <div v-if="gdt_entry_type_id != '7'" class="text-center pt-3">
-              {{ $t('gdt.conversion-gdt-euro') }}
-            </div>
-            <div v-else class="text-center pt-3">
-              {{ $t('gdt.calculation') }}
-            </div>
+          <div style="border: 0px; background-color: #f1f1f1" class="p-2 pb-4 mb-4">
+            <!-- Überschrift -->
+            <b-row class="gdt-list-clooaps-header-text text-center pb-3">
+              <div class="col h4" v-if="gdt_entry_type_id === 7">
+                {{ $t('gdt.conversion-gdt-euro') }}
+              </div>
+              <div class="col h4" v-else-if="gdt_entry_type_id === 4">
+                {{ $t('gdt.publisher') }}
+              </div>
+              <div class="col h4" v-else>{{ $t('gdt.calculation') }}</div>
+            </b-row>

-            <!--EURO / GDT -->
-            <b-list-group-item
-              v-if="gdt_entry_type_id != '7'"
-              style="border: 0px; background-color: #f1f1f1"
-            >
-              <div class="d-flex">
-                <div style="width: 40%" class="text-right pr-3 mr-2">
-                  <div>{{ $t('gdt.factor') }}</div>
-                  <div>{{ $t('gdt.conversion') }}</div>
-                </div>
-                <div style="width: 60%">
-                  <div>{{ factor }}</div>
-                  <div>{{ amount }} € ⊢ {{ gdt }} GDT</div>
+            <!-- 7 nur GDT erhalten -->
+            <b-row class="gdt-list-clooaps-box-7" v-if="gdt_entry_type_id == 7">
+              <div class="col-6 text-right clooaps-col-left">
+                <div>{{ $t('gdt.factor') }}</div>
+                <div>{{ $t('gdt.conversion') }}</div>
+              </div>
+              <div class="col-6 clooaps-col-right">
+                <div>{{ factor }}</div>
+                <div>
+                  {{ $n(amount, 'decimal') }} € * {{ factor }} = {{ $n(gdt, 'decimal') }} GDT
                </div>
              </div>
-            </b-list-group-item>
+            </b-row>
+            <!-- 4 publisher -->
+            <b-row class="gdt-list-clooaps-box-4" v-else-if="gdt_entry_type_id === 4">
+              <div class="col-6 text-right clooaps-col-left"></div>
+              <div class="col-6 clooaps-col-right"></div>
+            </b-row>

-            <!-- Only GDT -->
-            <b-list-group-item v-else style="border: 0px; background-color: #f1f1f1">
-              <div class="d-flex">
-                <div style="width: 40%" class="text-right pr-3 mr-2">{{ $t('gdt.formula') }}:</div>
-                <div style="width: 60%">{{ amount }} GDT * {{ factor }} = {{ gdt }}</div>
+            <!-- 1, 2, 3, 5, 6 spenden in euro -->
+            <b-row class="gdt-list-clooaps-box--all" v-else>
+              <div class="col-6 text-right clooaps-col-left">
+                <div>{{ $t('gdt.factor') }}</div>
+                <div>{{ $t('gdt.formula') }}:</div>
              </div>
-            </b-list-group-item>
-          </b-list-group>
+              <div class="col-6 clooaps-col-right">
+                <div>{{ factor }}</div>
+                <div>
+                  {{ $n(amount, 'decimal') }} € * {{ factor }} = {{ $n(gdt, 'decimal') }} GDT
+                </div>
+              </div>
+            </b-row>
+          </div>
        </b-collapse>
-        <!-- Collaps End -->
-      </b-list-group-item>
-    </b-list-group>
+        <!--     Collaps ENDE    -->
+      </div>
+    </div>
    <pagination-buttons
      v-if="transactionGdtCount > pageSize"
      :has-next="hasNext"
@ -127,6 +153,12 @@
 import communityAPI from '../../../apis/communityAPI'
 import PaginationButtons from '../../../components/PaginationButtons'

+const iconsByType = {
+  1: { icon: 'heart', classes: 'gradido-global-color-accent' },
+  4: { icon: 'person-check', classes: 'gradido-global-color-accent' },
+  7: { icon: 'gift', classes: 'gradido-global-color-accent' },
+}
+
 export default {
  name: 'gdt-transaction-list',
  components: {
@ -165,6 +197,18 @@ export default {
        this.$toasted.error(result.result.message)
      }
    },
+    getIcon(givenType) {
+      const type = iconsByType[givenType]
+      if (type)
+        return {
+          icon: type.icon,
+          class: type.classes + ' m-mb-1 font2em',
+        }
+      this.throwError('no icon to given type: ' + givenType)
+    },
+    throwError(msg) {
+      throw new Error(msg)
+    },
    showNext() {
      this.currentPage++
      this.updateGdt()
@ -186,4 +230,9 @@ export default {
  padding-left: 0px;
  padding-right: 0px;
 }
+
+.nav-tabs .nav-link.active,
+.nav-tabs .nav-item.show .nav-link {
+  background-color: #f8f9fe38;
+}
 </style>
--- a/frontend/src/views/Pages/UserProfileTransactionList.vue
+++ b/frontend/src/views/Pages/UserProfileTransactionList.vue
@ -51,4 +51,15 @@ export default {
  },
 }
 </script>
-<style></style>
+<style>
+.nav-tabs > li > a {
+  /* adjust padding for height*/
+  padding-top: 14px;
+  padding-bottom: 14px;
+}
+
+.nav-tabs > li.active {
+  background-color: aquamarine;
+  font-size: larger;
+}
+</style>
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "gradido",
-  "version": "1.2.1",
+  "version": "1.3.0",
  "description": "Gradido",
  "main": "index.js",
  "repository": "git@github.com:gradido/gradido.git",