Browse Source

add position: fixed to prevent scrolling issues with Uppy modal on mobile,

also, make tab icon larger to fit more text, tweak paddings in Provider
view
Artur Paikin 7 years ago
parent
commit
6d20c1eed1
3 changed files with 13 additions and 3 deletions
  1. 6 0
      src/plugins/Dashboard/index.js
  2. 5 2
      src/scss/_dashboard.scss
  3. 2 1
      src/scss/_provider.scss

+ 6 - 0
src/plugins/Dashboard/index.js

@@ -148,6 +148,8 @@ module.exports = class DashboardUI extends Plugin {
     })
 
     document.body.classList.remove('is-UppyDashboard-open')
+
+    window.scrollTo(0, this.savedDocumentScrollPosition)
   }
 
   showModal () {
@@ -159,8 +161,12 @@ module.exports = class DashboardUI extends Plugin {
       })
     })
 
+    // save scroll position
+    this.savedDocumentScrollPosition = window.scrollY
+
     // add class to body that sets position fixed
     document.body.classList.add('is-UppyDashboard-open')
+    document.body.style.top = `-${this.savedDocumentScrollPosition}px`
     // focus on modal inner block
     this.target.querySelector('.UppyDashboard-inner').focus()
 

+ 5 - 2
src/scss/_dashboard.scss

@@ -5,6 +5,7 @@
 
 .UppyDashboard--modal {
   z-index: $zIndex-2;
+  // -webkit-overflow-scrolling: touch;
 }
 
 .UppyDashboard--modal[aria-hidden=true] {
@@ -13,7 +14,9 @@
 
 // Added to body to prevent the page from scrolling when Modal is open
 .is-UppyDashboard-open {
+  width: 100%;
   overflow: hidden;
+  position: fixed;
 }
 
 .UppyDashboard--modal .UppyDashboard-overlay {
@@ -148,14 +151,14 @@
 }
 
 .UppyDashboardTab {
-  width: 62px;
+  width: 70px;
   margin: 0 2px;
   display: inline-block;
   text-align: center;
 
   .UppyDashboard--wide & {
-    margin: 0 5px;
     width: 75px;
+    margin: 0 5px;
   }
 }
 

+ 2 - 1
src/scss/_provider.scss

@@ -371,7 +371,8 @@
 
   .BrowserTable-column {
     // width: 100px;
-    padding: 15px 12px;
+    // padding: 15px 12px;
+    padding: 14px 10px;
   }
 }