From 2dd1b399947ba853b15877e571219d40e9c580e0 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Wed, 28 Dec 2022 09:43:49 +0100
Subject: [PATCH] style first step mobile view

---
 frontend/src/App.vue                                |  6 ++++++
 frontend/src/components/Menu/Navbar.vue             | 13 ++++++++++++-
 frontend/src/components/Transaction.vue             |  8 +++++---
 .../components/Transactions/TransactionCreation.vue |  8 +++++---
 .../components/Transactions/TransactionDecay.vue    |  4 +++-
 .../Transactions/TransactionLinkSummary.vue         |  8 +++++---
 .../components/Transactions/TransactionReceive.vue  |  8 +++++---
 .../src/components/Transactions/TransactionSend.vue |  8 +++++---
 8 files changed, 46 insertions(+), 17 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index d35a31116..1933e380b 100755
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -44,6 +44,12 @@ export default {
     font-size: 0.85rem;
   }
 }
+@media screen and (max-width: 1024px) {
+  #app {
+    padding-left: 15px;
+    padding-right: 15px;
+  }
+}
 
 .goldrand {
   background: linear-gradient(
diff --git a/frontend/src/components/Menu/Navbar.vue b/frontend/src/components/Menu/Navbar.vue
index c23f2bf5c..8434d38c9 100644
--- a/frontend/src/components/Menu/Navbar.vue
+++ b/frontend/src/components/Menu/Navbar.vue
@@ -13,7 +13,18 @@
         </b-button>
       </b-navbar-brand>
       <b-img class="sheet-img position-absolute zindex-1" :src="sheet"></b-img>
-
+      <router-link to="/settings" class="d-block d-lg-none zindex10">
+        <div class="d-flex align-items-center">
+          <div class="mr-3">
+            <avatar
+              :username="username.username"
+              :initials="username.initials"
+              :color="'#fff'"
+              :size="61"
+            ></avatar>
+          </div>
+        </div>
+      </router-link>
       <b-collapse id="nav-collapse" is-nav class="ml-5">
         <b-navbar-nav class="ml-auto" right>
           <div class="mb-2">
diff --git a/frontend/src/components/Transaction.vue b/frontend/src/components/Transaction.vue
index 491c1dfbc..f51cca825 100644
--- a/frontend/src/components/Transaction.vue
+++ b/frontend/src/components/Transaction.vue
@@ -2,7 +2,7 @@
   <div class="gdt-transaction-list">
     <div class="list-group bg-white appBoxShadow gradido-border-radius p-3 mb-3">
       <b-row @click="visible = !visible" class="align-items-center">
-        <b-col cols="2">
+        <b-col cols="3" lg="2" md="2">
           <b-avatar
             :icon="getLinesByType.icon"
             variant="light"
@@ -25,11 +25,13 @@
             {{ getLinesByType.descriptiontext }}
           </div>
         </b-col>
-        <b-col cols="3">
+        <b-col cols="8" lg="3" md="3" sm="8" offset="3" offset-md="0" offset-lg="0">
           <div class="small mt-2">{{ $t('gdt.credit') }}</div>
           <div class="font-weight-bold">{{ getLinesByType.credittext }}</div>
         </b-col>
-        <b-col cols="1"><collapse-icon class="text-right" :visible="visible" /></b-col>
+        <b-col cols="12" md="1" lg="1" class="text-right">
+          <collapse-icon class="text-right" :visible="visible" />
+        </b-col>
       </b-row>
 
       <b-collapse :id="collapseId" class="mt-2" v-model="visible">
diff --git a/frontend/src/components/Transactions/TransactionCreation.vue b/frontend/src/components/Transactions/TransactionCreation.vue
index f35400d10..79b19b2bd 100644
--- a/frontend/src/components/Transactions/TransactionCreation.vue
+++ b/frontend/src/components/Transactions/TransactionCreation.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="transaction-slot-creation">
     <b-row @click="visible = !visible" class="align-items-center">
-      <b-col cols="2">
+      <b-col cols="3" lg="2" md="2">
         <b-avatar icon="gift" variant="success" size="42"></b-avatar>
       </b-col>
       <b-col>
@@ -9,11 +9,13 @@
         <span class="small">{{ this.$d(new Date(balanceDate), 'short') }}</span>
         <span class="ml-4 small">{{ this.$d(new Date(balanceDate), 'time') }}</span>
       </b-col>
-      <b-col cols="3">
+      <b-col cols="8" lg="3" md="3" sm="8" offset="3" offset-md="0" offset-lg="0">
         <div class="small">{{ $t('decay.types.receive') }}</div>
         <div class="font-weight-bold">{{ amount | GDD }}</div>
       </b-col>
-      <b-col cols="1"><collapse-icon class="text-right" :visible="visible" /></b-col>
+      <b-col cols="12" md="1" lg="1" class="text-right">
+        <collapse-icon class="text-right" :visible="visible" />
+      </b-col>
     </b-row>
     <b-collapse class="pb-4 pt-5" v-model="visible">
       <div class="word-break mb-4 text-center">
diff --git a/frontend/src/components/Transactions/TransactionDecay.vue b/frontend/src/components/Transactions/TransactionDecay.vue
index b7b836088..bdbde0cac 100644
--- a/frontend/src/components/Transactions/TransactionDecay.vue
+++ b/frontend/src/components/Transactions/TransactionDecay.vue
@@ -5,7 +5,9 @@
       <b-col>
         {{ $t('decay.decay_since_last_transaction') }}
       </b-col>
-      <b-col cols="1"><collapse-icon class="text-right" :visible="visible" /></b-col>
+      <b-col cols="12" md="1" lg="1" class="text-right">
+        <collapse-icon class="text-right" :visible="visible" />
+      </b-col>
     </b-row>
 
     <b-collapse class="pb-4 pt-5" v-model="visible">
diff --git a/frontend/src/components/Transactions/TransactionLinkSummary.vue b/frontend/src/components/Transactions/TransactionLinkSummary.vue
index 612f980ae..036931af4 100644
--- a/frontend/src/components/Transactions/TransactionLinkSummary.vue
+++ b/frontend/src/components/Transactions/TransactionLinkSummary.vue
@@ -1,18 +1,20 @@
 <template>
   <div class="transaction-slot-link">
     <b-row @click="showTransactionLinks()" class="align-items-center">
-      <b-col cols="2">
+      <b-col cols="3" lg="2" md="2">
         <b-avatar icon="link" variant="light" size="42"></b-avatar>
       </b-col>
       <b-col>
         <div>{{ $t('gdd_per_link.links_sum') }}</div>
         <div class="small">{{ transactionLinkCount }} {{ $t('gdd_per_link.links_sum') }}</div>
       </b-col>
-      <b-col cols="3">
+      <b-col cols="8" lg="3" md="3" sm="8" offset="3" offset-md="0" offset-lg="0">
         <div class="small">{{ $t('send_per_link') }}</div>
         <div class="font-weight-bold">{{ amount | GDD }}</div>
       </b-col>
-      <b-col cols="1"><collapse-icon class="text-right" :visible="visible" /></b-col>
+      <b-col cols="12" md="1" lg="1" class="text-right">
+        <collapse-icon class="text-right" :visible="visible" />
+      </b-col>
     </b-row>
     <b-collapse v-model="visible">
       <collapse-links-list
diff --git a/frontend/src/components/Transactions/TransactionReceive.vue b/frontend/src/components/Transactions/TransactionReceive.vue
index fcd5c5da9..0f05214b2 100644
--- a/frontend/src/components/Transactions/TransactionReceive.vue
+++ b/frontend/src/components/Transactions/TransactionReceive.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="transaction-slot-receive">
     <b-row @click="visible = !visible" class="align-items-center">
-      <b-col cols="2">
+      <b-col cols="3" lg="2" md="2">
         <!-- <b-avatar :text="avatarText" variant="success" size="3em"></b-avatar> -->
         <avatar
           :username="username.username"
@@ -23,7 +23,7 @@
         <span class="small">{{ this.$d(new Date(balanceDate), 'short') }}</span>
         <span class="ml-4 small">{{ this.$d(new Date(balanceDate), 'time') }}</span>
       </b-col>
-      <b-col cols="3">
+      <b-col cols="8" lg="3" md="3" sm="8" offset="3" offset-md="0" offset-lg="0">
         <div class="small">
           {{ $t('decay.types.receive') }}
         </div>
@@ -38,7 +38,9 @@
           />
         </div>
       </b-col>
-      <b-col cols="1"><collapse-icon class="text-right" :visible="visible" /></b-col>
+      <b-col cols="12" md="1" lg="1" class="text-right">
+        <collapse-icon class="text-right" :visible="visible" />
+      </b-col>
     </b-row>
     <b-collapse class="pb-4 pt-5" v-model="visible">
       <div class="word-break mb-4 text-center">
diff --git a/frontend/src/components/Transactions/TransactionSend.vue b/frontend/src/components/Transactions/TransactionSend.vue
index 62061080a..7870eed8b 100644
--- a/frontend/src/components/Transactions/TransactionSend.vue
+++ b/frontend/src/components/Transactions/TransactionSend.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="transaction-slot-send">
     <b-row @click="visible = !visible" class="align-items-center">
-      <b-col cols="2">
+      <b-col cols="3" lg="2" md="2">
         <avatar
           :username="username.username"
           :initials="username.initials"
@@ -22,7 +22,7 @@
         <span class="small">{{ this.$d(new Date(balanceDate), 'short') }}</span>
         <span class="ml-4 small">{{ this.$d(new Date(balanceDate), 'time') }}</span>
       </b-col>
-      <b-col cols="3">
+      <b-col cols="8" lg="3" md="3" sm="8" offset="3" offset-md="0" offset-lg="0">
         <div class="small">
           {{ $t('decay.types.send') }}
         </div>
@@ -37,7 +37,9 @@
           />
         </div>
       </b-col>
-      <b-col cols="1"><collapse-icon class="text-right" :visible="visible" /></b-col>
+      <b-col cols="12" md="1" lg="1" class="text-right">
+        <collapse-icon class="text-right" :visible="visible" />
+      </b-col>
     </b-row>
     <b-collapse class="pb-4 pt-5" v-model="visible">
       <div class="word-break mb-4 text-center">