TT#71299 Conferencing: Improve the layout for mobile devices

Change-Id: I328dbc3375ad67bac94242697b90663e3f5fc42e

src/components/CscMedia.vue

@@ -221,4 +221,9 @@
             margin-left -12px
         video.csc-media-video
             position: absolute;
+            @media (max-width: $breakpoint-sm)
+                top 0px !important
+                width 100%
+                height 100%
+                object-fit cover
 </style>

src/components/layouts/Conference.vue

@@ -370,6 +370,11 @@
         width 130px
         height 45px
         padding 10px
+        @media (max-width: $breakpoint-sm)
+            font-size 16px
+            width 100px
+            height 36px
+            padding 8px
     #csc-conf-main-media
         position absolute
         top 0
@@ -379,6 +384,7 @@
         z-index 1
         background-color black
         font-size 0
+
     #csc-conf-header
         z-index 2
         top 0

src/components/pages/Conference/CscConferenceJoin.vue

@@ -89,7 +89,7 @@
         },
         computed: {
             contentClasses() {
-                let classes = ['col', 'col-4', 'text-center'];
+                let classes = ['col', 'col-md-4', 'text-center'];
                 if(this.isCameraEnabled) {
                     classes.push('csc-camera-background');
                 }

src/components/pages/Conference/CscConferenceParticipants.vue

@@ -94,7 +94,10 @@
         display inline-block
         height calc(100vh - 150px)
         overflow hidden
-
+        @media (max-width: $breakpoint-sm)
+            font-size 73px
+            left: -18px;
+            top: -2px;
     #csc-conf-remote-participants-cont
         overflow auto
         height 100%

src/components/pages/Conference/CscConferenceRemoteParticipant.vue

@@ -1,6 +1,7 @@
 <template>
     <q-card
         class="csc-conf-participant-cont"
+        v-touch-hold="showMenu"
     >
         <div class="csc-conf-audio-icons-cont">
             <q-icon
@@ -60,12 +61,16 @@
     import _ from 'lodash';
     import { QIcon, QCard, QCardMedia, QCardTitle, QPopover, QList, QItem, QItemMain } from 'quasar-framework'
     import CscMedia from "../../CscMedia";
+    import { TouchHold } from 'quasar';
     import {
         mapGetters,
         mapState
     } from 'vuex'
     export default {
         name: 'csc-conference-remote-participant',
+        directives: {
+            TouchHold
+        },
         components: {
             QIcon,
             QCard,
@@ -119,15 +124,20 @@
                 }
             },
             toggleAudio(){
-                this.$refs.popover.close();
+                this.$refs.popover.close(()=>{
-                this.isAudioMuted
+                    this.isAudioMuted
-                    ? this.$store.commit('conference/removeMutedState', this.remoteParticipant.id)
+                        ? this.$store.commit('conference/removeMutedState', this.remoteParticipant.id)
-                    : this.$store.commit('conference/addMutedState', this.remoteParticipant.id)
+                        : this.$store.commit('conference/addMutedState', this.remoteParticipant.id)
+                });
+
             },
             audioLabel() {
                 return this.isAudioMuted
                         ? this.$t('conferencing.unmuteMicrophone')
                         : this.$t('conferencing.muteMicrophone');
+            },
+            showMenu(){
+                this.$refs.popover.open();
             }
         },
         watch: {
@@ -151,13 +161,27 @@
         position absolute
         padding-top 5px
         z-index 10
+        @media (max-width: $breakpoint-sm)
+            font-size 0px
     .csc-conf-toggle-audio-icon
         @extend .csc-conf-toggle-audio-menu-icon
         right 5px
         cursor default
+        @media (max-width: $breakpoint-sm)
+            font-size 10px
+            right 2px
+            top -3px
     .csc-conf-toggle-audio-popover
         width 115px
+        @media (max-width: $breakpoint-sm)
+            width 90px
     .csc-conf-toggle-audio-menu-item
+        @media (max-width: $breakpoint-sm)
+            height: 32px !important;
+            padding-top: 0px !important;
         .q-item
             font-size 14px
+            @media (max-width: $breakpoint-sm)
+                font-size 12px
+                padding-top 0px
 </style>

src/themes/app.common.styl

@@ -260,6 +260,10 @@ input.q-input-target
     left -22px
     right 0
     margin auto
+    @media (max-width: $breakpoint-sm)
+        font-size 60px
+        left -16px
+        top -30px
 .csc-conf-selected-avatar
     width: 220px;
     height: 220px;
@@ -279,6 +283,10 @@ input.q-input-target
     height 115px
     background $conf-participant-box-color
     cursor pointer
+    @media (max-width: $breakpoint-sm)
+        width 50px
+        height 50px
+        margin-bottom 10px
     .csc-conf-participants-item-title
       position relative
       background white
@@ -286,6 +294,8 @@ input.q-input-target
       text-align center
       padding 0
       background $conf-participant-box-color
+      @media (max-width: $breakpoint-sm)
+          display none
       .q-card-title
         color $primary
         font-size 12px
@@ -294,4 +304,7 @@ input.q-input-target
       height 100% !important
       width 100% !important
       video
-        height: 100%;
+        height 100%
+        position relative
+        left 50% !important
+        transform translateX(-50%)