Fix: Hide thumbnails in mobile portrait (#967)

box · Mar 28, 2019 · 8d5cbb8 · 8d5cbb8
1 parent 0a1d0ef
commit 8d5cbb8
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 14 deletions.
diff --git a/.stylelintrc b/.stylelintrc
@@ -7,7 +7,7 @@
     "rules": {
         "indentation": 4,
         "at-rule-no-vendor-prefix": true,
-        "at-rule-no-unknown": [true, { "ignoreAtRules": ["include", "mixin"] }],
+        "at-rule-no-unknown": [true, { "ignoreAtRules": ["include", "mixin", "content"] }],
         "media-feature-name-no-vendor-prefix": true,
         "property-no-vendor-prefix": true,
         "selector-no-vendor-prefix": true,

diff --git a/src/lib/viewers/doc/_docBase.scss b/src/lib/viewers/doc/_docBase.scss
@@ -4,30 +4,26 @@ $thumbnail-border-radius: 3px;
 // Accounts for the 1px border on the right so the remaining width is actually 225
 $thumbnail-sidebar-width: 226px;
 
+@mixin breakpoint-medium {
+    @media (min-width: 600px) { @content; }
+}
+
 .bp {
+    .bp-toggle-thumbnails-icon {
+        display: none;
+    }
+
     .bp-thumbnails-container {
         border-right: solid 1px $seesee;
         bottom: 0;
-        display: flex;
+        display: none;
         flex: 0 0 auto;
         left: 0;
         position: absolute;
         top: 0;
-        transform: translateX(-$thumbnail-sidebar-width);
-        transition: transform 300ms cubic-bezier(.4, 0, .2, 1);
         width: $thumbnail-sidebar-width;
     }
 
-    &.bp-thumbnails-open {
-        .bp-thumbnails-container {
-            transform: translateX(0);
-        }
-
-        .bp-content {
-            left: $thumbnail-sidebar-width;
-        }
-    }
-
     .bp-thumbnail {
         display: flex;
         flex: 1 0 auto;
@@ -93,6 +89,28 @@ $thumbnail-sidebar-width: 226px;
             border-color: $black;
         }
     }
+
+    @include breakpoint-medium {
+        .bp-thumbnails-container {
+            display: flex;
+            transform: translateX(-$thumbnail-sidebar-width);
+            transition: transform 300ms cubic-bezier(.4, 0, .2, 1);
+        }
+
+        &.bp-thumbnails-open {
+            .bp-content {
+                left: $thumbnail-sidebar-width;
+            }
+
+            .bp-thumbnails-container {
+                transform: translateX(0);
+            }
+        }
+
+        .bp-controls-btn.bp-toggle-thumbnails-icon {
+            display: block;
+        }
+    }
 }
 
 .bp-theme-dark {

diff --git a/test/integration/document/Thumbnails.e2e.test.js b/test/integration/document/Thumbnails.e2e.test.js
@@ -210,4 +210,31 @@ describe('Preview Document Thumbnails', () => {
 
         getThumbnailWithRenderedImage(1).should('have.class', THUMBNAIL_SELECTED_CLASS);
     });
+
+    it('Should not show the toggle thumbnails button on a small viewport', () => {
+        cy.viewport('iphone-6');
+
+        showDocumentPreview({ enableThumbnailsSidebar: true });
+
+        cy.showDocumentControls();
+        cy.getByTitle('Toggle thumbnails').should('not.be.visible');
+    });
+
+    it('Should hide the thumbnails when changing to small viewport', () => {
+        showDocumentPreview({ enableThumbnailsSidebar: true });
+
+        cy.showDocumentControls();
+        cy.getByTitle('Toggle thumbnails').should('be.visible');
+
+        toggleThumbnails();
+        verifyThumbnailsVisible();
+
+        // Change to small viewport while thumbnails sidebar is open
+        cy.viewport('iphone-6');
+
+        cy.showDocumentControls();
+        cy.getByTitle('Toggle thumbnails').should('not.be.visible');
+        // Not using `verifyThumbnailsNotVisible because that checks for the presence of the CSS class
+        cy.getByTestId('thumbnails-sidebar').should('not.be.visible');
+    });
 });