Calendar, Events

src/components/Header/Header.ts

@@ -9,7 +9,7 @@ import { GlobalStore, UserStore } from '@modules'
 import { Watch } from 'vue-property-decorator'
 import { tools } from '../../store/Modules/tools'
 
-import Quasar from 'quasar'
+import Quasar, { Screen } from 'quasar'
 
 @Component({
   name: 'Header',
@@ -43,6 +43,14 @@ export default class Header extends Vue {
     // { label: 'German', icon: 'fa-flag-de', value: 'de', image: '../statics/images/de.png', short: 'DE' },
   ]
 
+  get getappname(){
+    if (Screen.width < 400) {
+      return this.$t('msg.myAppNameShort')
+    } else {
+      return this.$t('msg.myAppName')
+    }
+  }
+
   get conn_changed() {
     return GlobalStore.state.stateConnection
   }

src/components/Header/Header.vue

@@ -39,7 +39,7 @@
                     <q-avatar>
                         <img :src="imglogo" height="27">
                     </q-avatar>
-                    {{$t('msg.myAppName')}}
+                    {{getappname}}
                     <div slot="subtitle">{{$t('msg.myDescriz')}} {{ getAppVersion() }}</div>
                 </q-toolbar-title>