Merge pull request #718 from TechnologyEnhancedLearning/Develop/Fixes/TD-4944-UI_Issues_Mobile

TD-4944: Fixes for UI issues on Mobile view

Author: Swapnamol

AdminUI/LearningHub.Nhs.AdminUI/Scripts/vuesrc/content/pageSectionToolbar.vue

@@ -2,7 +2,7 @@
     <div>
         <div class="toolBarBox">
             <div class="toolBar">
-                <div :style="getStatusStyle()" class="mr-4 p-3">
+                <div :style="getStatusStyle()" class="mr-4 p-2">
                     <i :class="contentLib.getPageSectionStatusIcon(this.pageSection.pageSectionDetail)"></i>
                     {{ contentLib.getPageSectionStatusText(this.pageSection.pageSectionDetail) }}
                 </div>
@@ -168,7 +168,7 @@
             getStatusStyle(): string {
                 return this.pageSection.pageSectionDetail.pageSectionStatus === PageSectionStatus.Live
                     ? 'background: #007F3B; height: 45px; margin: -8px;border: 1px solid #FFFFFF;'
-                    : ((this.pageSection.pageSectionDetail.deletePending == null || !this.pageSection.pageSectionDetail.deletePending) ? 'background: #FFB81C; height: 45px; margin: -8px;border: 1px solid #FFFFFF;color: #425563;' : 'background: #DA291C; height: 45px; margin: -8px; border: 1px solid #FFFFFF;');
+                    : ((this.pageSection.pageSectionDetail.deletePending == null || !this.pageSection.pageSectionDetail.deletePending) ? 'background: #FFB81C; height: 50px; margin: -12px;border: 1px solid #FFFFFF;color: #425563;' : 'background: #DA291C; height: 45px; margin: -8px; border: 1px solid #FFFFFF;');
             },
             getStatusIconStyle(): string {
                 return 'margin-top:20px;'
@@ -214,9 +214,10 @@
     @use "../../../Styles/Abstracts/all" as *;
 
     .toolBarBox {
-        position: absolute;
-        right: 20px;
-        top: 20px;
+        position: relative;
+        right: 12px;
+        left:3px;
+        top: 2px;
         z-index: 1;
     }
 
@@ -237,7 +238,7 @@
     .toolBar {
         display: flex;
         padding: 16px;
-        height: 64px;
+        height: 60px;
         float: right;
         background: $nhsuk-grey;
         border: 2px solid $nhsuk-white;

AdminUI/LearningHub.Nhs.AdminUI/wwwroot/css/mkplayer-ui.css

@@ -17,7 +17,7 @@
 }
 
     .bmpui-ui-buffering-overlay, .bmpui-ui-cast-status-overlay, .bmpui-ui-container, .bmpui-ui-controlbar, .bmpui-ui-errormessage-overlay, .bmpui-ui-listbox, .bmpui-ui-playbacktoggle-overlay, .bmpui-ui-recommendation-overlay, .bmpui-ui-seekbar-label, .bmpui-ui-settings-panel, .bmpui-ui-subtitle-overlay.bmpui-fontsize-100 .bmpui-ui-subtitle-label, .bmpui-ui-titlebar, .bmpui-ui-uicontainer, .bmpui-ui-uicontainer .bmpui-ui-subtitle-overlay, .bmpui-ui-volumecontrolbutton {
-        font-size: 1em
+        font-size: 0.7em
     }
 
 .bmpui-ui-uicontainer {
@@ -89,7 +89,7 @@
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
-        margin: 1em 0
+        margin: .5em 0
     }
 
     .bmpui-ui-controlbar .bmpui-controlbar-top .bmpui-ui-label {
@@ -563,7 +563,7 @@
 
 .bmpui-ui-seekbar, .bmpui-ui-volumeslider {
     cursor: pointer;
-    font-size: 0.2em;
+    font-size: 1em;
     height: 1em;
     position: relative;
     width: 100%

LearningHub.Nhs.WebUI/wwwroot/css/mkplayer-ui.css

@@ -17,7 +17,7 @@
 }
 
     .bmpui-ui-buffering-overlay, .bmpui-ui-cast-status-overlay, .bmpui-ui-container, .bmpui-ui-controlbar, .bmpui-ui-errormessage-overlay, .bmpui-ui-listbox, .bmpui-ui-playbacktoggle-overlay, .bmpui-ui-recommendation-overlay, .bmpui-ui-seekbar-label, .bmpui-ui-settings-panel, .bmpui-ui-subtitle-overlay.bmpui-fontsize-100 .bmpui-ui-subtitle-label, .bmpui-ui-titlebar, .bmpui-ui-uicontainer, .bmpui-ui-uicontainer .bmpui-ui-subtitle-overlay, .bmpui-ui-volumecontrolbutton {
-        font-size: 1em
+        font-size: 0.7em
     }
 
 .bmpui-ui-uicontainer {
@@ -89,7 +89,7 @@
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
-        margin: 1em 0
+        margin: .5em 0
     }
 
     .bmpui-ui-controlbar .bmpui-controlbar-top .bmpui-ui-label {
@@ -563,7 +563,7 @@
 
 .bmpui-ui-seekbar, .bmpui-ui-volumeslider {
     cursor: pointer;
-    font-size: 0.2em;
+    font-size: 1em;
     height: 1em;
     position: relative;
     width: 100%