Merge pull request #419 from gradido/06x-style

06x style

frontend/src/App.vue

@@ -1,20 +1,5 @@
 <template>
   <div id="app" class="font-sans text-gray-800">
-    <header>
-      <b-col class="text-center">
-        <b-dropdown
-          size="sm"
-          split
-          variant="secondary"
-          :text="$t('language') + ' - ' + $i18n.locale"
-          class="m-md-2"
-        >
-          <b-dropdown-divider></b-dropdown-divider>
-          <b-dropdown-item @click.prevent="setLocale('de')">Deutsch</b-dropdown-item>
-          <b-dropdown-item @click.prevent="setLocale('en')">English</b-dropdown-item>
-        </b-dropdown>
-      </b-col>
-    </header>
     <div class="">
       <particles-bg type="custom" :config="config" :bg="true" />
       <component :is="$route.meta.requiresAuth ? 'DashboardLayout' : 'AuthLayoutGDD'" />
@@ -25,7 +10,6 @@
 <script>
 import { ParticlesBg } from 'particles-bg-vue'
 import icon from './icon.js'
-import { localeChanged } from 'vee-validate'
 import DashboardLayout from '@/views/Layout/DashboardLayout_gdd.vue'
 import AuthLayoutGDD from '@/views/Layout/AuthLayout_gdd.vue'
 
@@ -54,13 +38,6 @@ export default {
       },
     }
   },
-  methods: {
-    setLocale(locale) {
-      this.$i18n.locale = locale
-      this.$store.commit('language', this.$i18n.locale)
-      localeChanged(locale)
-    },
-  },
 }
 </script>
 <style>

frontend/src/components/LanguageSwitch.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="language-switch">
+    <b-dropdown size="sm" :text="$t('language') + ' - ' + $i18n.locale">
+      <b-dropdown-item @click.prevent="setLocale('de')">Deutsch</b-dropdown-item>
+      <b-dropdown-item @click.prevent="setLocale('en')">English</b-dropdown-item>
+    </b-dropdown>
+  </div>
+</template>
+<script>
+import { localeChanged } from 'vee-validate'
+
+export default {
+  name: 'language-switch',
+  methods: {
+    setLocale(locale) {
+      this.$i18n.locale = locale
+      this.$store.commit('language', this.$i18n.locale)
+      localeChanged(locale)
+    },
+  },
+}
+</script>

frontend/src/components/SidebarPlugin/SideBar.spec.js

@@ -112,6 +112,12 @@ describe('SideBar', () => {
           expect(wrapper.emitted('logout')).toEqual([[]])
         })
       })
+
+      describe('language-switch', () => {
+        it('has a language-switch button', () => {
+          expect(wrapper.find('div.language-switch').exists()).toBeTruthy()
+        })
+      })
     })
   })
 })

frontend/src/components/SidebarPlugin/SideBar.vue

@@ -32,9 +32,7 @@
         <div class="navbar-collapse-header d-md-none">
           <div class="row">
             <div class="col-6 collapse-brand">
-              <router-link to="/overview">
-                <img :src="logo" />
-              </router-link>
+              <img :src="logo" />
             </div>
             <div class="col-6 collapse-close">
               <navbar-toggle-button @click.native="closeSidebar"></navbar-toggle-button>
@@ -44,26 +42,29 @@
         <ul class="navbar-nav">
           <slot name="links"></slot>
         </ul>
-        <hr class="my-3" />
-        <ul class="navbar-nav mb-md-3">
+        <hr class="my-2" />
+        <ul class="navbar-nav ml-3">
           <li class="nav-item">
             <a
               :href="`https://elopage.com/s/gradido/sign_in?locale=${$i18n.locale}`"
-              class="nav-link text-lg"
+              class="nav-link"
               target="_blank"
             >
               {{ $t('members_area') }}
             </a>
           </li>
         </ul>
-        <hr class="my-3" />
-        <ul class="navbar-nav mb-md-3">
+
+        <ul class="navbar-nav ml-3">
           <li class="nav-item">
-            <a class="nav-link text-lg pointer" @click="logout">
+            <a class="nav-link pointer" @click="logout">
               {{ $t('logout') }}
             </a>
           </li>
         </ul>
+        <div class="mt-5 ml-4">
+          <language-switch />
+        </div>
       </div>
     </div>
   </nav>
@@ -71,12 +72,14 @@
 <script>
 import NavbarToggleButton from '@/components/NavbarToggleButton'
 import VueQrcode from 'vue-qrcode'
+import LanguageSwitch from '@/components/LanguageSwitch.vue'
 
 export default {
   name: 'sidebar',
   components: {
     NavbarToggleButton,
     VueQrcode,
+    LanguageSwitch,
   },
   props: {
     logo: {

frontend/src/locales/en.json

@@ -57,7 +57,6 @@
   },
   "transaction":{
     "show_all":"View all <strong>{count}</strong> transactions.",
-    "show_part": "The last <strong>{count}</strong> transactions.",
     "nullTransactions":"You don't have any transactions on your account yet.",
     "more": "more"
   },

frontend/src/views/Layout/AuthLayout_gdd.vue

@@ -1,16 +1,19 @@
 <template>
   <div class="wrapper">
-    <div class="main-content">
+    <div class="main-content mt-4">
       <router-view></router-view>
+      <language-switch class="text-center mb-5 mt-5" />
       <content-footer v-if="!$route.meta.hideFooter"></content-footer>
     </div>
   </div>
 </template>
 <script>
 import ContentFooter from './ContentFooter.vue'
+import LanguageSwitch from '@/components/LanguageSwitch.vue'
 export default {
   components: {
     ContentFooter,
+    LanguageSwitch,
   },
 }
 </script>

frontend/src/views/Layout/DashboardLayout_gdd.spec.js

@@ -59,10 +59,6 @@ describe('DashboardLayoutGdd', () => {
       expect(wrapper.find('nav#sidenav-main').exists()).toBeTruthy()
     })
 
-    it('has a notifications component', () => {
-      expect(wrapper.find('div.notifications').exists()).toBeTruthy()
-    })
-
     it('has a main content div', () => {
       expect(wrapper.find('div.main-content').exists()).toBeTruthy()
     })
@@ -79,31 +75,35 @@ describe('DashboardLayoutGdd', () => {
       })
 
       it('has five items in the navbar', () => {
-        expect(navbar.findAll('ul > li')).toHaveLength(2)
+        expect(navbar.findAll('ul > a')).toHaveLength(2)
       })
 
       it('has first item "send" in navbar', () => {
-        expect(navbar.findAll('ul > li').at(0).text()).toEqual('send')
+        expect(navbar.findAll('ul > a').at(0).text()).toEqual('send')
       })
 
       it('has first item "send" linked to overview in navbar', () => {
-        navbar.findAll('ul > li').at(0).trigger('click')
+        navbar.findAll('ul > a').at(0).trigger('click')
         expect(wrapper.findComponent(RouterLinkStub).props().to).toBe('/overview')
       })
 
       it('has second item "transactions" in navbar', () => {
-        expect(navbar.findAll('ul > li').at(1).text()).toEqual('transactions')
+        expect(navbar.findAll('ul > a').at(1).text()).toEqual('transactions')
       })
 
       // to do: get this working!
       it.skip('has second item "transactions" linked to transactions in navbar', async () => {
-        navbar.findAll('ul > li > a').at(1).trigger('click')
+        navbar.findAll('ul > a').at(1).trigger('click')
         await flushPromises()
         await jest.runAllTimers()
         await flushPromises()
         expect(wrapper.findComponent(RouterLinkStub).props().to).toBe('/transactions')
       })
 
+      // it('has tree items in the navbar', () => {
+      //  expect(navbar.findAll('ul > li')).toHaveLength(3)
+      // })
+      //
       // it('has third item "My profile" in navbar', () => {
       //  expect(navbar.findAll('ul > li').at(2).text()).toEqual('site.navbar.my-profil')
       // })

frontend/src/views/Layout/DashboardLayout_gdd.vue

@@ -1,14 +1,20 @@
 <template>
   <div class="wrapper">
-    <notifications></notifications>
     <side-bar @logout="logout" :balance="balance" :pending="pending">
       <template slot="links">
-        <b-nav-item href="#!" to="/overview">
-          <b-nav-text class="p-0 text-lg text-muted">{{ $t('send') }}</b-nav-text>
-        </b-nav-item>
-        <b-nav-item href="#!" to="/transactions">
-          <b-nav-text class="p-0 text-lg text-muted">{{ $t('transactions') }}</b-nav-text>
-        </b-nav-item>
+        <sidebar-item
+          :link="{
+            name: $t('send'),
+            path: '/overview',
+          }"
+        ></sidebar-item>
+        <sidebar-item
+          :link="{
+            name: $t('transactions'),
+            path: '/transactions',
+          }"
+        ></sidebar-item>
+
         <!--
              <b-nav-item href="#!" to="/profile">
              <b-nav-text class="p-0 text-lg text-muted">{{ $t('site.navbar.my-profil') }}</b-nav-text>
@@ -24,7 +30,6 @@
     </side-bar>
     <div class="main-content">
       <dashboard-navbar :type="$route.meta.navbarType"></dashboard-navbar>
-
       <div @click="$sidebar.displaySidebar(false)">
         <fade-transition :duration="200" origin="center top" mode="out-in">
           <!-- your content here -->

frontend/src/views/Layout/DashboardNavbar.vue

@@ -10,7 +10,7 @@
       <li class="nav-item d-sm-none"></li>
     </b-navbar-nav>
     <b-navbar-nav class="align-items-center ml-auto ml-md-0">
-      <a class="pr-1 nav-link" slot="title-container pointer">
+      <div class="pr-1" slot="title-container ">
         <b-media no-body class="align-items-center">
           <span class="pb-2 text-lg font-weight-bold">
             {{ $store.state.email }}
@@ -21,7 +21,7 @@
             </span>
           </b-media-body>
         </b-media>
-      </a>
+      </div>
     </b-navbar-nav>
   </base-nav>
 </template>

frontend/src/views/Pages/AccountOverview.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <base-header class="pb-4 pt-2 bg-transparent"></base-header>
-    <b-container fluid class="p-2 mt-5">
+    <base-header class="pb-lg-4 pt-lg-2 bg-transparent"></base-header>
+    <b-container fluid class="p-lg-2 mt-lg-5">
       <gdd-status
         v-if="showContext"
         :pending="pending"

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

@@ -2,24 +2,14 @@
   <div>
     <b-row>
       <b-col>
-        <stats-card
-          type="gradient-red"
-          sub-title="balance_gdd"
-          class="mb-4 h1"
-          style="background-color: #ebebeba3 !important"
-        >
+        <b-card style="background-color: #ebebeba3 !important">
           {{ pending ? '—' : $n(balance) }} GDD
-        </stats-card>
+        </b-card>
       </b-col>
       <b-col>
-        <stats-card
-          type="gradient-orange"
-          sub-title="balance_gdt"
-          class="mb-4 h1"
-          style="background-color: #ebebeba3 !important"
-        >
+        <b-card class="lg-h2 text-right" style="background-color: #ebebeba3 !important">
           {{ pending ? '—' : $n(GdtBalance) }} GDT
-        </stats-card>
+        </b-card>
       </b-col>
     </b-row>
   </div>

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

@@ -88,11 +88,9 @@
           </b-card>
         </b-collapse>
       </b-list-group-item>
-      <b-list-group-item>
-        <b-alert v-if="transactions.length === 0" show variant="secondary">
-          <span class="alert-text">{{ $t('transaction.nullTransactions') }}</span>
-        </b-alert>
-      </b-list-group-item>
+      <div v-if="transactions.length === 0" class="mt-lg-4 text-center">
+        <span>{{ $t('transaction.nullTransactions') }}</span>
+      </div>
     </b-list-group>
   </div>
 </template>

frontend/src/views/Pages/UserProfileTransactionList.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div
-      class="header pb-8 pt-5 pt-lg-8 d-flex align-items-center profile-header"
+      class="header pb-8 pt-lg-4 d-flex align-items-center profile-header"
       style="max-height: 200px"
     ></div>
     <b-container fluid class="mt--6">