TT#31457 General: Improve layout for mobile devices

Change-Id: I9ad2d87d5ce1e3eada14cc8c67b6bc4a1ddd8d08

src/components/Login.vue

@@ -1,9 +1,9 @@
 <template>
     <q-layout>
-        <div id="csc-login" class="row">
+        <div id="csc-login" :class="loginClasses">
             <div class="column col-lg-4 col-xl-4 col-md-3 gt-sm"></div>
             <div class="column col-12 col-md-6 col-lg-4 col-xl-4">
-                <q-card>
+                <q-card :flat="isFlat">
                     <q-card-title>
                         <q-icon name="" />{{ $t('pages.login.title') }}
                         <span slot="subtitle"></span>
@@ -34,7 +34,7 @@
 <script>
     import { startLoading, stopLoading, showGlobalError } from '../helpers/ui'
     import { QLayout, QCard, QCardTitle, QCardSeparator, QCardMain, QField, QInput,
-        QCardActions, QBtn, QIcon, Loading, Alert } from 'quasar-framework'
+        QCardActions, QBtn, QIcon, Loading, Alert, Platform } from 'quasar-framework'
     export default {
         name: 'login',
         components: {
@@ -55,6 +55,18 @@
                 password: ''
             }
         },
+        computed: {
+            isFlat() {
+                return Platform.is.mobile;
+            },
+            loginClasses() {
+                let classes = ['row'];
+                if(Platform.is.mobile) {
+                    classes.push('mobile');
+                }
+                return classes;
+            }
+        },
         methods: {
             login() {
                 startLoading();
@@ -79,6 +91,10 @@
         padding-top: 12%;
     }
 
+    #csc-login.mobile {
+        padding-top: 0;
+    }
+
     #csc-login .q-card-title {
         font-size: 22px;
         color: $primary;

src/components/layouts/Default.vue

@@ -84,7 +84,7 @@
             </q-collapsible>
         </q-list>
         <router-view />
-        <q-fixed-position id="global-action-btn" corner="top-right" :offset="[48, 17]" class="page-button transition-generic">
+        <q-fixed-position id="global-action-btn" corner="top-right" :offset="fabOffset" class="page-button transition-generic">
             <q-fab color="primary" icon="question answer" active-icon="clear" direction="down" flat>
                 <q-fab-action v-if="hasFaxCapability" color="primary" @click="" icon="fa-fax">
                     <q-tooltip anchor="center right" self="center left" :offset="[15, 0]">{{ $t('sendFax') }}</q-tooltip>
@@ -99,6 +99,7 @@
         </q-fixed-position>
         <csc-call ref="cscCall" slot="right" @close="closeCall()" @fullscreen="toggleFullscreen()"
                   :fullscreen="isFullscreenEnabled" region="DE" />
+        <q-window-resize-observable @resize="onWindowResize" />
     </q-layout>
 </template>
 
@@ -126,10 +127,16 @@
         QSideLink,
         QTransition,
         QCollapsible,
+        Platform
     } from 'quasar-framework'
     export default {
         name: 'default',
         mounted: function() {
+            if(Platform.is.mobile) {
+                this.$store.commit('layout/hideLeft');
+            } else {
+                this.$store.commit('layout/showLeft');
+            }
             this.applyLayout();
             if(!this.hasUser) {
                 startLoading();
@@ -206,9 +213,19 @@
                 } else {
                     return 'lHh LpR lFf';
                 }
+            },
+            fabOffset() {
+                if(Platform.is.mobile) {
+                    return [16, 17];
+                } else {
+                    return [48, 17];
+                }
             }
         },
         methods: {
+            onWindowResize() {
+                this.applyLayout();
+            },
             toggleFullscreen() {
                 this.$store.commit('layout/toggleFullscreen');
             },