Fix: mobile audio controls overlap with navigation (#590)

box · Jan 18, 2018 · a7ed4fc · a7ed4fc
1 parent 3805904
commit a7ed4fc
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 2 deletions.
diff --git a/src/lib/PreviewUI.js b/src/lib/PreviewUI.js
@@ -7,6 +7,7 @@ import {
     CLASS_INVISIBLE,
     CLASS_BOX_PREVIEW_BASE_HEADER,
     CLASS_BOX_PREVIEW_HAS_HEADER,
+    CLASS_BOX_PREVIEW_HAS_NAVIGATION,
     CLASS_BOX_PREVIEW_HEADER,
     CLASS_BOX_PREVIEW_THEME_DARK,
     CLASS_PREVIEW_LOADED,
@@ -157,6 +158,7 @@ class PreviewUI {
         // Hide the arrows by default
         leftNavEl.classList.add(CLASS_HIDDEN);
         rightNavEl.classList.add(CLASS_HIDDEN);
+        this.contentContainer.classList.remove(CLASS_BOX_PREVIEW_HAS_NAVIGATION);
 
         leftNavEl.removeEventListener('click', this.leftHandler);
         rightNavEl.removeEventListener('click', this.rightHandler);
@@ -167,6 +169,8 @@ class PreviewUI {
             return;
         }
 
+        this.contentContainer.classList.add(CLASS_BOX_PREVIEW_HAS_NAVIGATION);
+
         this.contentContainer.addEventListener('mousemove', this.mousemoveHandler);
 
         // Selectively show or hide the navigation arrows

diff --git a/src/lib/__tests__/PreviewUI-test.js b/src/lib/__tests__/PreviewUI-test.js
@@ -130,6 +130,19 @@ describe('lib/PreviewUI', () => {
 
                 ui.showNavigation('1', ['1', '2']);
             });
+
+            it('should add a class if navigation is present', () => {
+                const { contentContainer } = ui;
+                ui.showNavigation('1', ['1']);
+                let isShowingNavigation = contentContainer.classList.contains(constants.CLASS_BOX_PREVIEW_HAS_NAVIGATION);
+                expect(isShowingNavigation).to.be.false;
+                ui.showNavigation('1', ['1', '2']);
+                isShowingNavigation = contentContainer.classList.contains(constants.CLASS_BOX_PREVIEW_HAS_NAVIGATION);
+                expect(isShowingNavigation).to.be.true;
+                ui.showNavigation('1', ['1']);
+                isShowingNavigation = contentContainer.classList.contains(constants.CLASS_BOX_PREVIEW_HAS_NAVIGATION);
+                expect(isShowingNavigation).to.be.false;
+            });
         });
 
         describe('showPrintButton()', () => {

diff --git a/src/lib/_navigation.scss b/src/lib/_navigation.scss
@@ -1,3 +1,5 @@
+$navigationBtnWidth: 50px;
+
 .bp-is-fullscreen .bp-navigate {
     display: none;
 }
@@ -19,7 +21,7 @@
     // Override default animations to only animate opacity since width animation to auto doesn't work
     transition-property: opacity;
     white-space: nowrap;
-    width: 50px;
+    width: $navigationBtnWidth;
 
     &:hover {
         opacity: 1;

diff --git a/src/lib/constants.js b/src/lib/constants.js
@@ -7,6 +7,7 @@ export const CLASS_BOX_PREVIEW_BUTTON = 'bp-btn';
 export const CLASS_BOX_PREVIEW_CONTAINER = 'bp-container';
 export const CLASS_BOX_PREVIEW_FIND_BAR = 'bp-find-bar';
 export const CLASS_BOX_PREVIEW_HAS_HEADER = 'bp-has-header';
+export const CLASS_BOX_PREVIEW_HAS_NAVIGATION = 'bp-has-navigation';
 export const CLASS_BOX_PREVIEW_HEADER = 'bp-header';
 export const CLASS_BOX_PREVIEW_BASE_HEADER = 'bp-base-header';
 export const CLASS_BOX_PREVIEW_HEADER_BTNS = 'bp-header-btns';

diff --git a/src/lib/viewers/media/MP3.scss b/src/lib/viewers/media/MP3.scss
@@ -1,11 +1,21 @@
 @import 'mediaBase';
+@import '../../_navigation';
+
+.bp-has-navigation {
+    .bp-media-mp3 {
+        .bp-media-container {
+            width: calc(100% - #{2 * $navigationBtnWidth}); // to prevent overlap in mobile devices
+        }
+    }
+}
 
 .bp-media-mp3 {
     .bp-media-container {
         height: 60px; // same as controls
+        max-width: 360px;
         outline: 0 none;
         overflow: visible; // to show settings popup
-        width: 360px;
+        width: 100%;
     }
 
     .bp-media-fullscreen-icon {