Merge branch 'remove-base-input-example-login-vue' of github.com:gradido/gradido into remove-base-input-example-login-vue

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

@@ -41,20 +41,6 @@ describe('SideBar', () => {
       expect(wrapper.find('#sidenav-main').exists()).toBeTruthy()
     })
 
-    describe('balance', () => {
-      it('shows em-dash as balance while loading', () => {
-        expect(wrapper.find('.gddBalance').text()).toBe('— GDD')
-      })
-
-      it('shows the when loaded', async () => {
-        wrapper.setProps({
-          pending: false,
-        })
-        await wrapper.vm.$nextTick()
-        expect(wrapper.find('.gddBalance').text()).toBe('1234.56 GDD')
-      })
-    })
-
     describe('navbar button', () => {
       it('has a navbar button', () => {
         expect(wrapper.find('button.navbar-toggler').exists()).toBeTruthy()
@@ -68,6 +54,20 @@ describe('SideBar', () => {
       })
     })
 
+    describe('balance', () => {
+      it('shows em-dash as balance while loading', () => {
+        expect(wrapper.find('div.row.text-center').text()).toBe('— GDD')
+      })
+
+      it('shows the when loaded', async () => {
+        wrapper.setProps({
+          pending: false,
+        })
+        await wrapper.vm.$nextTick()
+        expect(wrapper.find('div.row.text-center').text()).toBe('1234.56 GDD')
+      })
+    })
+
     describe('close siedbar', () => {
       it('calls closeSidebar when clicked', async () => {
         const spy = jest.spyOn(wrapper.vm.$sidebar, 'displaySidebar')

frontend/src/components/SidebarPlugin/SideBar.vue

@@ -4,26 +4,21 @@
     id="sidenav-main"
   >
     <div class="container-fluid">
-      <div class="text-center">
-        <div class="mb-2">
-          <img :src="logo" class="navbar-brand-img" alt="Gradido Logo" />
-        </div>
+      <!--Toggler-->
+      <navbar-toggle-button @click.native="showSidebar"></navbar-toggle-button>
+      <div class="navbar-brand">
+        <img :src="logo" class="navbar-brand-img" alt="..." />
       </div>
-      <div class="gddBalance text-center">{{ pending ? '—' : $n(balance, 'decimal') }} GDD</div>
-
-      <div class="text-center">
-        <div class="avatar">
-          <vue-qrcode :value="$store.state.email" type="image/png"></vue-qrcode>
-        </div>
-      </div>
-
+      <b-row class="text-center">
+        <b-col>{{ pending ? '—' : $n(balance, 'decimal') }} GDD</b-col>
+      </b-row>
       <slot name="mobile-right">
         <ul class="nav align-items-center d-md-none">
-          <a slot="title-container" class="nav-link" role="button">
-            <div class="media align-items-center">
-              <navbar-toggle-button @click.native="showSidebar"></navbar-toggle-button>
-            </div>
-          </a>
+          <div class="media align-items-center">
+            <span class="avatar avatar-sm">
+              <vue-qrcode :value="$store.state.email" type="image/png"></vue-qrcode>
+            </span>
+          </div>
         </ul>
       </slot>
       <slot></slot>
@@ -74,15 +69,15 @@
 </template>
 <script>
 import NavbarToggleButton from '@/components/NavbarToggleButton'
-import VueQrcode from 'vue-qrcode'
 import LanguageSwitch from '@/components/LanguageSwitch.vue'
+import VueQrcode from 'vue-qrcode'
 
 export default {
   name: 'sidebar',
   components: {
     NavbarToggleButton,
-    VueQrcode,
     LanguageSwitch,
+    VueQrcode,
   },
   props: {
     logo: {

frontend/src/views/Layout/DashboardLayout_gdd.vue

@@ -24,6 +24,25 @@
       </template>
     </side-bar>
     <div class="main-content">
+      <div class="d-none d-md-block">
+        <b-navbar>
+          <b-navbar-nav class="ml-auto">
+            <b-nav-item>
+              <b-media no-body class="align-items-center">
+                <span class="pb-2 text-lg font-weight-bold">
+                  {{ $store.state.email }}
+                </span>
+                <b-media-body class="ml-2">
+                  <span class="avatar">
+                    <vue-qrcode :value="$store.state.email" type="image/png"></vue-qrcode>
+                  </span>
+                </b-media-body>
+              </b-media>
+            </b-nav-item>
+          </b-navbar-nav>
+        </b-navbar>
+      </div>
+
       <div @click="$sidebar.displaySidebar(false)">
         <fade-transition :duration="200" origin="center top" mode="out-in">
           <!-- your content here -->
@@ -51,6 +70,7 @@ import ContentFooter from './ContentFooter.vue'
 // import DashboardContent from './Content.vue';
 import { FadeTransition } from 'vue2-transitions'
 import communityAPI from '../../apis/communityAPI'
+import VueQrcode from 'vue-qrcode'
 
 function hasElement(className) {
   return document.getElementsByClassName(className).length > 0
@@ -71,7 +91,7 @@ function initScrollbar(className) {
 export default {
   components: {
     ContentFooter,
-    // DashboardContent,
+    VueQrcode,
     FadeTransition,
   },
   data() {
@@ -129,4 +149,9 @@ export default {
   },
 }
 </script>
-<style lang="scss"></style>
+<style lang="scss">
+.xxx {
+  position: relative;
+  right: 0px;
+}
+</style>