Merge pull request #2552 from gradido/mobil-menu-transparent-bg-color

fix(frontend): mobile design

frontend/src/assets/scss/gradido-template.scss

@@ -11,7 +11,7 @@ body {
 
 .bg-gradient {
   background: rgb(4 112 6);
-  background: linear-gradient(90deg, rgb(4 112 6 / 100%) 73%, rgb(197 141 56 / 100%) 100%);
+  background: linear-gradient(90deg, rgb(4 112 6 / 100%) 22%, rgb(197 141 56 / 100%) 98%);
   color: white;
 }
 

frontend/src/components/Contributions/ContributionForm.spec.js

@@ -12,6 +12,7 @@ describe('ContributionForm', () => {
       date: '',
       memo: '',
       amount: '',
+      hours: 0,
     },
     isThisMonth: true,
     minimalDate: new Date(),
@@ -375,6 +376,7 @@ describe('ContributionForm', () => {
                       date: now,
                       memo: 'Mein Beitrag zur Gemeinschaft für diesen Monat ...',
                       amount: '200',
+                      hours: 0,
                     },
                   ]),
                 ]),

frontend/src/components/Contributions/ContributionForm.vue

@@ -3,13 +3,12 @@
     <b-form
       ref="form"
       @submit.prevent="submit"
-      class="border p-3 bg-white appBoxShadow gradido-border-radius"
+      class="p-3 bg-white appBoxShadow gradido-border-radius"
     >
       <label>{{ $t('contribution.selectDate') }}</label>
       <b-form-datepicker
         id="contribution-date"
         v-model="form.date"
-        size="lg"
         :locale="$i18n.locale"
         :max="maximalDate"
         :min="minimalDate"
@@ -22,7 +21,7 @@
         <template #nav-prev-year><span></span></template>
         <template #nav-next-year><span></span></template>
       </b-form-datepicker>
-      <div v-if="validMaxGDD > 0">
+
       <input-textarea
         id="contribution-memo"
         v-model="form.memo"
@@ -54,8 +53,7 @@
         :rules="{ required: true, gddSendAmount: [20, validMaxGDD] }"
         typ="ContributionForm"
       ></input-amount>
-      </div>
+
-      <div v-else class="mb-5">{{ $t('contribution.exhausted') }}</div>
       <b-row class="mt-5">
         <b-col>
           <b-button type="reset" variant="secondary" @click="reset" data-test="button-cancel">
@@ -111,7 +109,7 @@ export default {
       this.form.id = null
       this.form.date = ''
       this.form.memo = ''
-      this.form.hours = 0.0
+      this.form.hours = 0
       this.form.amount = ''
     },
   },

frontend/src/components/Contributions/ContributionListItem.spec.js

@@ -48,7 +48,7 @@ describe('ContributionListItem', () => {
 
       it('is x-circle when deletedAt is present', async () => {
         await wrapper.setProps({ deletedAt: new Date().toISOString() })
-        expect(wrapper.vm.icon).toBe('x-circle')
+        expect(wrapper.vm.icon).toBe('trash')
       })
 
       it('is check when confirmedAt is present', async () => {

frontend/src/components/Contributions/ContributionListItem.vue

@@ -30,7 +30,10 @@
           <div class="small">
             {{ $t('creation') }} {{ $t('(') }}{{ amount / 20 }} {{ $t('h') }}{{ $t(')') }}
           </div>
-          <div class="font-weight-bold">{{ amount | GDD }}</div>
+          <div v-if="state === 'DELETED'" class="small">
+            {{ $t('contribution.deleted') }}
+          </div>
+          <div v-else class="font-weight-bold">{{ amount | GDD }}</div>
         </b-col>
         <b-col cols="12" md="1" lg="1" class="text-right align-items-center">
           <div v-if="messagesCount > 0" @click="visible = !visible">
@@ -168,7 +171,7 @@ export default {
   },
   computed: {
     icon() {
-      if (this.deletedAt) return 'x-circle'
+      if (this.deletedAt) return 'trash'
       if (this.confirmedAt) return 'check'
       if (this.state === 'IN_PROGRESS') return 'question-circle'
       return 'bell-fill'

frontend/src/components/GddSend/TransactionConfirmationLink.vue

@@ -35,12 +35,15 @@
         <b-col offset="2">{{ $t('form.new_balance') }}</b-col>
         <b-col>{{ (balance - amount) | GDD }}</b-col>
       </b-row>
-      <b-row class="mt-5 p-5">
+      <b-row class="mt-5">
-        <b-col>
+        <b-col cols="12" md="6" lg="6">
-          <b-button @click="$emit('on-back')">{{ $t('back') }}</b-button>
+          <b-button block @click="$emit('on-back')" class="mb-3 mb-md-0 mb-lg-0">
+            {{ $t('back') }}
+          </b-button>
         </b-col>
-        <b-col class="text-right">
+        <b-col cols="12" md="6" lg="6" class="text-lg-right">
           <b-button
+            block
             class="send-button"
             variant="gradido"
             :disabled="disabled"

frontend/src/components/GddSend/TransactionConfirmationSend.vue

@@ -17,7 +17,7 @@
         </b-col>
       </b-row>
 
-      <b-row class="mt-5 pr-3 text-color-gdd-yellow h3">
+      <b-row class="mt-5 text-color-gdd-yellow h3">
         <b-col cols="2" class="text-right">
           <b-icon class="text-color-gdd-yellow" icon="droplet-half"></b-icon>
         </b-col>
@@ -39,12 +39,15 @@
         <b-col offset="2">{{ $t('form.new_balance') }}</b-col>
         <b-col>{{ (balance - amount) | GDD }}</b-col>
       </b-row>
-      <b-row class="mt-5 p-5">
+      <b-row class="mt-5">
-        <b-col>
+        <b-col cols="12" md="6" lg="6">
-          <b-button @click="$emit('on-back')">{{ $t('back') }}</b-button>
+          <b-button block @click="$emit('on-back')" class="mb-3 mb-md-0 mb-lg-0">
+            {{ $t('back') }}
+          </b-button>
         </b-col>
-        <b-col class="text-right">
+        <b-col cols="12" md="6" lg="6" class="text-lg-right">
           <b-button
+            block
             variant="gradido"
             :disabled="disabled"
             @click="$emit('send-transaction'), (disabled = true)"

frontend/src/components/GddSend/TransactionForm.vue

@@ -92,14 +92,20 @@
               <div v-if="!!isBalanceDisabled" class="text-danger mt-5">
                 {{ $t('form.no_gdd_available') }}
               </div>
-              <b-row v-else class="test-buttons mt-5">
+              <b-row v-else class="test-buttons mt-3">
-                <b-col>
+                <b-col cols="12" md="6" lg="6">
-                  <b-button type="reset" variant="secondary" @click="onReset">
+                  <b-button
+                    block
+                    type="reset"
+                    variant="secondary"
+                    @click="onReset"
+                    class="mb-3 mb-md-0 mb-lg-0"
+                  >
                     {{ $t('form.reset') }}
                   </b-button>
                 </b-col>
-                <b-col class="text-right">
+                <b-col cols="12" md="6" lg="6" class="text-lg-right">
-                  <b-button type="submit" variant="gradido">
+                  <b-button block type="submit" variant="gradido">
                     {{ $t('form.check_now') }}
                   </b-button>
                 </b-col>

frontend/src/components/GddTransactionList.vue

@@ -26,12 +26,12 @@
           </template>
         </transaction-list-item>
       </div>
-      <div v-if="transactionCount > 0" class="h4 m-3">{{ $t('lastMonth') }}</div>
+      <div class="mt-3">
         <div v-for="({ id, typeId }, index) in transactions" :key="`l2-` + id">
           <transaction-list-item
             v-if="typeId !== 'DECAY'"
             :typeId="typeId"
-          class="pointer mb-4 bg-white appBoxShadow gradido-border-radius p-3 test-list-group-item"
+            class="pointer mb-3 bg-white appBoxShadow gradido-border-radius p-3 test-list-group-item"
           >
             <template #SEND>
               <transaction-send
@@ -67,6 +67,7 @@
           </transaction-list-item>
         </div>
       </div>
+    </div>
     <b-pagination
       v-if="isPaginationVisible"
       class="mt-3"

frontend/src/components/Inputs/InputHour.spec.js

@@ -74,7 +74,7 @@ describe('InputHour', () => {
       it('emits input with new value', async () => {
         await wrapper.find('input').setValue('12')
         expect(wrapper.emitted('input')).toBeTruthy()
-        expect(wrapper.emitted('input')).toEqual([['12']])
+        expect(wrapper.emitted('input')).toEqual([[12]])
       })
     })
 

frontend/src/components/Inputs/InputHour.vue

@@ -32,11 +32,11 @@ export default {
       type: Object,
       default: () => {},
     },
-    name: { type: String, required: true, default: 'Time' },
+    name: { type: String, required: true },
-    label: { type: String, required: true, default: 'Time' },
+    label: { type: String, required: true },
-    placeholder: { type: String, required: true, default: 'Time' },
+    placeholder: { type: String, required: true },
     value: { type: Number, required: true, default: 0 },
-    validMaxTime: { type: Number, required: true, default: 0 },
+    validMaxTime: { type: Number, required: true },
   },
   data() {
     return {
@@ -50,7 +50,7 @@ export default {
   },
   watch: {
     currentValue() {
-      this.$emit('input', this.currentValue)
+      this.$emit('input', Number(this.currentValue))
     },
     value() {
       if (this.value !== this.currentValue) this.currentValue = this.value

frontend/src/components/Menu/Navbar.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="navbar-component position-sticky">
+  <div class="navbar-component">
+    <div class="navbar-element">
       <b-navbar toggleable="lg" class="pr-4">
         <b-navbar-brand>
           <b-img
@@ -8,12 +9,15 @@
             width=""
             alt="..."
           />
-        <b-button v-b-toggle.sidebar-mobile class="d-block d-lg-none">
+          <div v-b-toggle.sidebar-mobile variant="link" class="d-block d-lg-none">
-          <span class="navbar-toggler-icon"></span>
+            <span class="navbar-toggler-icon h2"></span>
-        </b-button>
+          </div>
         </b-navbar-brand>
 
-      <router-link to="/settings" class="d-block d-lg-none">
+        <b-img class="sheet-img position-absolute zindex-1" :src="sheet"></b-img>
+
+        <b-navbar-nav class="ml-auto" right>
+          <router-link to="/settings">
             <div class="d-flex align-items-center">
               <div class="mr-3">
                 <avatar
@@ -23,23 +27,6 @@
                   :size="61"
                 ></avatar>
               </div>
-        </div>
-      </router-link>
-      <b-img class="sheet-img position-absolute zindex-1" :src="sheet"></b-img>
-      <b-collapse id="nav-collapse" is-nav class="ml-5">
-        <b-navbar-nav class="ml-auto" right>
-          <div class="mb-2">
-            <router-link to="/settings">
-              <div>
-                <div class="d-flex align-items-center">
-                  <div class="mr-3">
-                    <avatar
-                      :username="username.username"
-                      :initials="username.initials"
-                      :color="'#fff'"
-                      :size="81"
-                    ></avatar>
-                  </div>
               <div>
                 <div data-test="navbar-item-username">{{ username.username }}</div>
 
@@ -48,11 +35,8 @@
                 </div>
               </div>
             </div>
-              </div>
           </router-link>
-          </div>
         </b-navbar-nav>
-      </b-collapse>
       </b-navbar>
       <!-- <div class="alertBox">
       <b-alert show dismissible variant="light" class="nav-alert text-dark">
@@ -60,6 +44,7 @@
       </b-alert>
     </div> -->
     </div>
+  </div>
 </template>
 
 <script>
@@ -91,6 +76,10 @@ export default {
 </script>
 
 <style lang="scss">
+.navbar-element {
+  position: sticky;
+}
+
 .auth-header {
   font-family: 'Open Sans', sans-serif !important;
   height: 150px;
@@ -126,7 +115,7 @@ button.navbar-toggler > span.navbar-toggler-icon {
 }
 @media screen and (max-width: 1170px) {
   .sheet-img {
-    left: 40%;
+    left: 20%;
   }
   .alertBox {
     position: static;
@@ -136,10 +125,15 @@ button.navbar-toggler > span.navbar-toggler-icon {
   }
 }
 @media screen and (max-width: 450px) {
-  .sheet-img {
+  .navbar-element {
-    left: 37%;
-    max-width: 61%;
     z-index: 1000;
+    position: fixed;
+    width: 100%;
+    background-color: #f5f5f5e6;
+  }
+  .sheet-img {
+    left: 5%;
+    max-width: 61%;
   }
 }
 </style>

frontend/src/components/Menu/Sidebar.vue

@@ -1,6 +1,11 @@
 <template>
   <div id="component-sidebar">
-    <div id="side-menu" ref="sideMenu" class="gradido-border-radius appBoxShadow pt-2">
+    <div
+      id="side-menu"
+      ref="sideMenu"
+      class="gradido-border-radius pt-2 bg-white"
+      :class="shadow ? 'appBoxShadow' : ''"
+    >
       <div class="mb-3 mt-3">
         <b-nav vertical class="w-200">
           <b-nav-item to="/overview" class="mb-3" active-class="activeRoute">
@@ -55,6 +60,9 @@
 <script>
 export default {
   name: 'Sidebar',
+  props: {
+    shadow: { type: Boolean, required: false, default: true },
+  },
 }
 </script>
 <style>

frontend/src/components/MobileSidebar/MobileSidebar.vue

@@ -1,23 +1,9 @@
 <template>
   <div>
-    <b-sidebar id="sidebar-mobile" bg-variant="f5" :backdrop="true">
+    <b-sidebar id="sidebar-mobile" :backdrop="true" bg-variant="transparent">
       <div class="px-3 py-2">
-        <sidebar @admin="$emit('admin')" @logout="$emit('logout')" />
+        <sidebar @admin="$emit('admin')" @logout="$emit('logout')" :shadow="false" />
       </div>
-      <template #header>
-        <div>
-          <div class="mr-auto">{{ avatarLongName }}</div>
-          <div class="small">
-            <small>{{ $store.state.email }}</small>
-          </div>
-        </div>
-      </template>
-      <template #footer>
-        <div class="d-flex bg-light">
-          <strong class="mr-auto p-2">{{ $t('send_gdd') }}</strong>
-          <b-button to="/send"><b-icon icon="arrow-right"></b-icon></b-button>
-        </div>
-      </template>
     </b-sidebar>
   </div>
 </template>
@@ -29,10 +15,5 @@ export default {
   components: {
     Sidebar,
   },
-  computed: {
-    avatarLongName() {
-      return `${this.$store.state.firstName} ${this.$store.state.lastName}`
-    },
-  },
 }
 </script>

frontend/src/components/Overview/CommunityNews.vue

@@ -7,23 +7,25 @@
       >
         <b-card-body>
           <b-card-title class="h2">{{ item.text }}</b-card-title>
-        </b-card-body>
+
-        <b-card-footer class="bg-transparent">
-          <b-row class="my-5">
-            <b-col cols="12" md="6" lg="6">
           <div class="h3">{{ item.date }}</div>
+
+          <b-row class="my-5">
+            <b-col>
+              {{ item.extra }}
             </b-col>
-            <b-col cols="12" md="6" lg="6">
+          </b-row>
-              <div class="text-right">
+
+          <b-row class="my-5">
+            <b-col cols="12">
+              <div class="text-lg-right">
                 <b-button variant="gradido" :href="item.url" target="_blank">
                   {{ $t('auth.left.learnMore') }}
                 </b-button>
               </div>
             </b-col>
           </b-row>
-
+        </b-card-body>
-          {{ item.extra }}
-        </b-card-footer>
       </b-card>
     </div>
   </div>

frontend/src/components/Template/RightSide/ContributionInfo.vue

@@ -22,6 +22,10 @@
           <b-icon icon="x-circle" variant="danger"></b-icon>
           {{ $t('contribution.alert.rejected') }}
         </li>
+        <li>
+          <b-icon icon="trash" variant="danger"></b-icon>
+          {{ $t('contribution.alert.deleted') }}
+        </li>
       </ul>
     </div>
     <div v-if="hash === '#all'" show fade variant="secondary" class="text-dark">

frontend/src/components/UserSettings/UserCard.vue

@@ -1,41 +1,46 @@
 <template>
   <div class="userdata-card">
-    <b-row>
+    <div class="centerPerMargin">
-      <b-col class="centerPerMargin">
       <avatar
         :username="username.username"
         :initials="username.initials"
         :color="'#fff'"
         :size="90"
       ></avatar>
-      </b-col>
+    </div>
-    </b-row>
+
-    <b-card class="border-0">
+    <div class="justify-content-center mt-5 mb-5">
-      <b-container class="justify-content-center mt-md-5">
+      <b-row align-v="stretch">
-        <b-row>
+        <b-col cols="4">
-          <b-col>
           <div class="text-center font-weight-bold">
             {{ $n(balance, 'decimal') }}
           </div>
-            <div class="text-center">{{ $t('GDD') }}</div>
         </b-col>
-          <b-col>
+        <b-col cols="4">
           <div class="text-center font-weight-bold">
             {{ transactionCount }}
           </div>
+        </b-col>
+        <b-col cols="4">
+          <div class="text-center font-weight-bold">{{ CONFIG.COMMUNITY_NAME }}</div>
+        </b-col>
+      </b-row>
+      <b-row>
+        <b-col cols="4">
+          <div class="text-center">{{ $t('GDD') }}</div>
+        </b-col>
+        <b-col cols="4">
           <div class="text-center">
             {{ $t('navigation.transactions') }}
           </div>
         </b-col>
-          <b-col>
+        <b-col cols="4">
-            <div class="text-center font-weight-bold">{{ CONFIG.COMMUNITY_NAME }}</div>
           <div class="text-center">
             {{ $t('community.community') }}
           </div>
         </b-col>
       </b-row>
-      </b-container>
+    </div>
-    </b-card>
   </div>
 </template>
 <script>
@@ -70,4 +75,14 @@ export default {
 .centerPerMargin {
   padding-left: 44%;
 }
+@media screen and (max-width: 850px) {
+  .centerPerMargin {
+    padding-left: 38%;
+  }
+}
+@media screen and (max-width: 450px) {
+  .centerPerMargin {
+    padding-left: 34%;
+  }
+}
 </style>

frontend/src/layouts/DashboardLayout.vue

@@ -3,7 +3,7 @@
     <div v-if="skeleton">
       <skeleton-overview />
     </div>
-    <div v-else>
+    <div v-else class="mx--3 mx-lg-0">
       <!-- navbar -->
       <b-row>
         <b-col>
@@ -13,7 +13,7 @@
       <mobile-sidebar @admin="admin" @logout="logout" />
 
       <!-- Breadcrumb -->
-      <b-row>
+      <b-row class="breadcrumb">
         <b-col cols="10" offset-lg="2">
           <breadcrumb />
         </b-col>
@@ -143,7 +143,7 @@
             </b-col>
             <b-col cols="12">
               <!-- router-view -->
-              <div class="main-content mt-3">
+              <div class="main-content mt-lg-3 mt-0">
                 <fade-transition :duration="200" origin="center top" mode="out-in">
                   <router-view
                     ref="router-view"
@@ -336,7 +336,9 @@ export default {
 }
 </script>
 <style>
-/* frontend/public/img/svg/Gradido_Blaetter_Mainpage.svg */
+.breadcrumb {
+  background-color: transparent;
+}
 .main-page {
   background-attachment: fixed;
   background-position: center;
@@ -369,4 +371,10 @@ export default {
 .navbar-toggler-icon {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(4, 112, 6, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
 }
+
+@media screen and (max-width: 450px) {
+  .breadcrumb {
+    padding-top: 60px;
+  }
+}
 </style>

frontend/src/locales/de.json

@@ -40,6 +40,7 @@
       "answerQuestion": "Bitte beantworte die Rückfrage!",
       "communityNoteList": "Hier findest du alle eingereichten und bestätigten Beiträge von allen Mitgliedern aus dieser Gemeinschaft.",
       "confirm": "bestätigt",
+      "deleted": "gelöscht",
       "in_progress": "Es gibt eine Rückfrage der Moderatoren.",
       "myContributionNoteList": "Eingereichte Beiträge, die noch nicht bestätigt wurden, kannst du jederzeit bearbeiten oder löschen.",
       "pending": "Eingereicht und wartet auf Bestätigung",
@@ -47,7 +48,6 @@
     },
     "delete": "Beitrag löschen! Bist du sicher?",
     "deleted": "Der Beitrag wurde gelöscht! Wird aber sichtbar bleiben.",
-    "exhausted": "Für diesen Monat kannst du nichts mehr schöpfen.",
     "formText": {
       "bringYourTalentsTo": "Bring dich mit deinen Talenten in die Gemeinschaft ein! Dein freiwilliges Engagement honorieren wir mit 20 GDD pro Stunde bis maximal 1.000 GDD im Monat.",
       "describeYourCommunity": "Beschreibe deine Gemeinwohl-Tätigkeit mit Angabe der Stunden und trage einen Betrag von 20 GDD pro Stunde ein! Nach Bestätigung durch einen Moderator wird der Betrag deinem Konto gutgeschrieben.",
@@ -215,7 +215,6 @@
   },
   "h": "h",
   "language": "Sprache",
-  "lastMonth": "letzter Monat",
   "link-load": "den letzten Link nachladen | die letzten {n} Links nachladen |  weitere {n} Links nachladen",
   "login": "Anmelden",
   "math": {

frontend/src/locales/en.json

@@ -40,6 +40,7 @@
       "answerQuestion": "Please answer the question",
       "communityNoteList": "Here you will find all submitted and confirmed contributions from all members of this community.",
       "confirm": "confirmed",
+      "deleted": "deleted",
       "in_progress": "There is a question from the moderators.",
       "myContributionNoteList": "You can edit or delete entries that have not yet been confirmed at any time.",
       "pending": "Submitted and waiting for confirmation",
@@ -47,7 +48,6 @@
     },
     "delete": "Delete Contribution! Are you sure?",
     "deleted": "The contribution has been deleted! But it will remain visible.",
-    "exhausted": "You cannot create anything more for this month.",
     "formText": {
       "bringYourTalentsTo": "Bring your talents to the community! Your voluntary commitment will be rewarded with 20 GDD per hour up to a maximum of 1,000 GDD per month.",
       "describeYourCommunity": "Describe your community service activity with hours and enter an amount of 20 GDD per hour! After confirmation by a moderator, the amount will be credited to your account.",
@@ -215,7 +215,6 @@
   },
   "h": "h",
   "language": "Language",
-  "lastMonth": "Last month",
   "link-load": "Load the last link | Load the last {n} links |  Load more {n} links",
   "login": "Sign in",
   "math": {

frontend/src/pages/Community.spec.js

@@ -284,13 +284,6 @@ describe('Community', () => {
         it('verifies the login (to get the new creations available)', () => {
           expect(apolloRefetchMock).toBeCalled()
         })
-
-        it('set all data to the default values)', () => {
-          expect(wrapper.vm.form.id).toBe(null)
-          expect(wrapper.vm.form.date).toBe('')
-          expect(wrapper.vm.form.memo).toBe('')
-          expect(wrapper.vm.form.amount).toBe('')
-        })
       })
 
       describe('with error', () => {

frontend/src/pages/Community.vue

@@ -118,7 +118,7 @@ export default {
       if (num !== 0) {
         this.form = {
           id: null,
-          date: '',
+          date: new Date(),
           memo: '',
           hours: 0,
           amount: '',

frontend/src/pages/Send.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <gdd-send :currentTransactionStep="currentTransactionStep" class="pt-3 mt--3">
+    <gdd-send :currentTransactionStep="currentTransactionStep">
       <template #transactionForm>
         <transaction-form
           v-bind="transactionData"

frontend/src/pages/Settings.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container bg-white appBoxShadow gradido-border-radius p-3 mt--3">
+  <div class="container bg-white appBoxShadow p-3 mt--3">
     <user-card :balance="balance" :transactionCount="transactionCount"></user-card>
     <user-data />
     <hr />

frontend/src/validation-rules.js

@@ -56,7 +56,6 @@ export const loadAllRules = (i18nCallback) => {
 
   extend('gddCreationTime', {
     validate(value, { min, max }) {
-      if (value) value = value.replace(',', '.')
       return value >= min && value <= max
     },
     params: ['min', 'max'],