From 52c28410fd55ad7dc25e7c24a20eabb462bff9e6 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 30 Dec 2022 12:35:08 +0100
Subject: [PATCH] mobile contribution list style

---
 .../Contributions/ContributionListItem.vue     | 18 ++++++++++--------
 .../src/components/GddSend/TransactionForm.vue |  8 ++++----
 .../Template/ContentHeader/CommunityMember.vue |  6 +++---
 .../Template/ContentHeader/GddAmount.vue       |  4 ++--
 .../Template/ContentHeader/GdtAmount.vue       |  8 ++++----
 .../src/layouts/templates/ContentHeader.vue    | 16 ++++++++--------
 6 files changed, 31 insertions(+), 29 deletions(-)

diff --git a/frontend/src/components/Contributions/ContributionListItem.vue b/frontend/src/components/Contributions/ContributionListItem.vue
index 46df31b92..765bd1db8 100644
--- a/frontend/src/components/Contributions/ContributionListItem.vue
+++ b/frontend/src/components/Contributions/ContributionListItem.vue
@@ -5,7 +5,7 @@
       :class="state === 'IN_PROGRESS' ? 'pulse border border-205' : ''"
     >
       <b-row>
-        <b-col cols="2">
+        <b-col cols="3" lg="2" md="2">
           <avatar
             v-if="firstName"
             :username="username.username"
@@ -30,11 +30,11 @@
           </div>
           <div class="small">createdAt {{ createdAt }}</div> -->
         </b-col>
-        <b-col cols="3">
+        <b-col cols="12" lg="3" offset="3" offset-md="0" offset-lg="0">
           <div class="small">{{ $t('creation') }}</div>
           <div class="font-weight-bold">{{ amount | GDD }}</div>
         </b-col>
-        <b-col cols="1" class="align-items-center">
+        <b-col cols="12" md="1" lg="1" class="text-right align-items-center">
           <div v-if="messagesCount > 0" @click="visible = !visible">
             <collapse-icon class="text-right" :visible="visible" />
           </div>
@@ -44,17 +44,18 @@
         v-if="(!['CONFIRMED', 'DELETED'].includes(state) && !allContribution) || messagesCount > 0"
         class="p-2"
       >
-        <b-col cols="auto" class="mr-auto">
+        <b-col cols="3" class="mr-auto text-center">
           <div
             v-if="!['CONFIRMED', 'DELETED'].includes(state) && !allContribution"
             class="test-delete-contribution pointer mr-3"
             @click="deleteContribution({ id })"
           >
             <b-icon icon="trash"></b-icon>
-            {{ $t('delete') }}
+
+            <div>{{ $t('delete') }}</div>
           </div>
         </b-col>
-        <b-col cols="auto">
+        <b-col cols="3" class="text-center">
           <div
             v-if="!['CONFIRMED', 'DELETED'].includes(state) && !allContribution"
             class="test-edit-contribution pointer mr-3"
@@ -72,13 +73,14 @@
           </div>
         </b-col>
 
-        <b-col cols="auto">
+        <b-col cols="6" class="text-center">
           <div v-if="messagesCount > 0" class="pointer" @click="visible = !visible">
             <b-icon icon="chat-dots"></b-icon>
-            {{ $t('moderatorChat') }}
+            <div>{{ $t('moderatorChat') }}</div>
           </div>
         </b-col>
       </b-row>
+      <div v-else class="pb-3"></div>
 
       <!-- <div class="border p-3 w-100 mb-1" :class="`border-${variant}`">
         <div>
diff --git a/frontend/src/components/GddSend/TransactionForm.vue b/frontend/src/components/GddSend/TransactionForm.vue
index bc908e329..7a79c8dc1 100644
--- a/frontend/src/components/GddSend/TransactionForm.vue
+++ b/frontend/src/components/GddSend/TransactionForm.vue
@@ -6,8 +6,8 @@
           <b-form role="form" @submit.prevent="handleSubmit(onSubmit)" @reset="onReset">
             <b-form-radio-group v-model="radioSelected" class="container">
               <b-row class="mb-4">
-                <b-col>
-                  <b-row class="bg-248 gradido-border-radius pt-2 mr-2">
+                <b-col cols="12" lg="6">
+                  <b-row class="bg-248 gradido-border-radius pt-lg-2 mr-lg-2">
                     <b-col cols="10" @click="radioSelected = sendTypes.send" class="pointer">
                       {{ $t('send_gdd') }}
                     </b-col>
@@ -23,7 +23,7 @@
                   </b-row>
                 </b-col>
                 <b-col>
-                  <b-row class="bg-248 gradido-border-radius pt-2 ml-2">
+                  <b-row class="bg-248 gradido-border-radius pt-lg-2 ml-lg-2 mt-2 mt-lg-0">
                     <b-col cols="10" @click="radioSelected = sendTypes.link" class="pointer">
                       {{ $t('send_per_link') }}
                     </b-col>
@@ -59,7 +59,7 @@
                       />
                     </div>
                   </b-col>
-                  <b-col cols="6">
+                  <b-col cols="12" lg="6">
                     <input-amount
                       v-model="form.amount"
                       :name="$t('form.amount')"
diff --git a/frontend/src/components/Template/ContentHeader/CommunityMember.vue b/frontend/src/components/Template/ContentHeader/CommunityMember.vue
index b5acfb1fc..0db15d3f7 100644
--- a/frontend/src/components/Template/ContentHeader/CommunityMember.vue
+++ b/frontend/src/components/Template/ContentHeader/CommunityMember.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="community-member">
+  <div class="community-member mt-3 mt-lg-0">
     <div class="text-center">
       <b-badge class="position-absolute mt--2 ml--5 px-3" variant="success">
         {{ $t('member') }}
@@ -9,11 +9,11 @@
       class="community-member bg-white appBoxShadow gradido-border-radius p-4 border border-success"
     >
       <b-row>
-        <b-col cols="12" md="8" lg="8">
+        <b-col cols="9">
           <div class="h4">{{ $t('community.communityMember') }}</div>
           <div>{{ CONFIG.COMMUNITY_NAME }}</div>
         </b-col>
-        <b-col cols="12" md="4" lg="4" align-self="end" class="border-left border-light">
+        <b-col cols="3" align-self="end" class="border-left border-light">
           <b-icon icon="people"></b-icon>
           {{ totalUsers }}
         </b-col>
diff --git a/frontend/src/components/Template/ContentHeader/GddAmount.vue b/frontend/src/components/Template/ContentHeader/GddAmount.vue
index d13c61036..5cabc71f8 100644
--- a/frontend/src/components/Template/ContentHeader/GddAmount.vue
+++ b/frontend/src/components/Template/ContentHeader/GddAmount.vue
@@ -31,7 +31,7 @@
       </b-row>
 
       <b-row>
-        <b-col cols="12" md="10" lg="10">
+        <b-col cols="9">
           <b-icon
             icon="layers"
             class="mr-3 gradido-global-border-color-accent d-none d-lg-inline"
@@ -43,7 +43,7 @@
             {{ balance | GDD }}
           </span>
         </b-col>
-        <b-col cols="12" md="2" lg="2" class="border-left border-light">
+        <b-col cols="3" class="border-left border-light">
           <b-icon
             :icon="hideAmount ? 'eye-slash' : 'eye'"
             class="mr-3 gradido-global-border-color-accent pointer hover-icon"
diff --git a/frontend/src/components/Template/ContentHeader/GdtAmount.vue b/frontend/src/components/Template/ContentHeader/GdtAmount.vue
index 3c38a24fa..6a37ab594 100644
--- a/frontend/src/components/Template/ContentHeader/GdtAmount.vue
+++ b/frontend/src/components/Template/ContentHeader/GdtAmount.vue
@@ -1,6 +1,6 @@
 <template>
-  <div>
-    <div class="gdt-amount text-center">
+  <div class="gdt-amount mt-3 mt-lg-0">
+    <div class="text-center">
       <b-badge
         v-if="badgeShow"
         class="position-absolute mt--2 ml--4 px-3 zindex1"
@@ -26,7 +26,7 @@
         </b-col> -->
       </b-row>
       <b-row>
-        <b-col cols="12" md="10" lg="10">
+        <b-col cols="9">
           <b-icon
             icon="layers"
             class="mr-3 gradido-global-border-color-accent d-none d-lg-inline"
@@ -38,7 +38,7 @@
             {{ $n(GdtBalance, 'decimal') }} {{ $t('GDT') }}
           </span>
         </b-col>
-        <b-col cols="12" md="2" lg="2" class="border-left border-light">
+        <b-col cols="3" class="border-left border-light">
           <b-icon
             :icon="hideAmount ? 'eye-slash' : 'eye'"
             class="mr-3 gradido-global-border-color-accent pointer hover-icon"
diff --git a/frontend/src/layouts/templates/ContentHeader.vue b/frontend/src/layouts/templates/ContentHeader.vue
index e36cd1f0e..58ba90cae 100644
--- a/frontend/src/layouts/templates/ContentHeader.vue
+++ b/frontend/src/layouts/templates/ContentHeader.vue
@@ -2,12 +2,12 @@
   <div>
     <div v-if="path === '/overview'">
       <b-row>
-        <b-col cols="5">
+        <b-col cols="12" lg="5">
           <div>
             <gdd-amount :balance="balance" :showStatus="false" :path="path" :badgeShow="false" />
           </div>
         </b-col>
-        <b-col cols="7">
+        <b-col cols="12" lg="7">
           <div>
             <community-member :totalUsers="totalUsers" />
           </div>
@@ -18,12 +18,12 @@
     <div v-if="path === '/addresses'"></div> -->
     <div v-if="path === '/send'">
       <b-row>
-        <b-col cols="6">
+        <b-col cols="12" lg="6">
           <div>
             <gdd-amount :balance="balance" :badge="true" :showStatus="true" :badgeShow="false" />
           </div>
         </b-col>
-        <b-col cols="6">
+        <b-col cols="12" lg="6">
           <div>
             <router-link to="gdt">
               <gdt-amount :GdtBalance="GdtBalance" :badgeShow="false" />
@@ -34,14 +34,14 @@
     </div>
     <div v-if="path === '/transactions'">
       <b-row>
-        <b-col cols="6">
+        <b-col cols="12" lg="6">
           <div>
             <router-link to="transactions">
               <gdd-amount :balance="balance" :showStatus="true" />
             </router-link>
           </div>
         </b-col>
-        <b-col cols="6">
+        <b-col cols="12" lg="6">
           <div>
             <router-link to="gdt">
               <gdt-amount :GdtBalance="GdtBalance" />
@@ -52,14 +52,14 @@
     </div>
     <div v-if="path === '/gdt'">
       <b-row>
-        <b-col cols="6">
+        <b-col cols="12" lg="6">
           <div>
             <router-link to="transactions">
               <gdd-amount :balance="balance" :showStatus="false" />
             </router-link>
           </div>
         </b-col>
-        <b-col cols="6">
+        <b-col cols="12" lg="6">
           <div>
             <router-link to="gdt">
               <gdt-amount :badge="true" :showStatus="true" :GdtBalance="GdtBalance" />