Dashboard responsive design

src/plugins/Dashboard/Dashboard.js

@@ -57,12 +57,13 @@ export default function Dashboard (props) {
           role="dialog"
           onpaste=${handlePaste}>
 
+    <button class="UppyDashboard-close"
+            aria-label="${props.i18n('closeModal')}"
+            title="${props.i18n('closeModal')}"
+            onclick=${props.hideModal}>${closeIcon()}</button>
+
     <div class="UppyDashboard-overlay"
          onclick=${props.hideModal}>
-      <button class="UppyDashboard-close"
-              aria-label="${props.i18n('closeModal')}"
-              title="${props.i18n('closeModal')}"
-              onclick=${props.hideModal}>${closeIcon()}</button>
     </div>
 
     <div class="UppyDashboard-inner" tabindex="0">

src/scss/_dashboard.scss

@@ -31,14 +31,17 @@
   background-color: darken($color-white, 2%);
   max-width: 100%;
   max-height: 100%;
-  width: 750px;
-  height: 550px;
-  // min-height: 400px;
+  width: 100%;
+  height: 100%;
   overflow: hidden;
   z-index: $zIndex-3;
   outline: none;
-  // border: 2px solid rgba($color-gray, 0.25);
-  border-radius: 5px;
+
+  @media #{$screen-medium} {
+    width: 750px;
+    height: 550px;
+    border-radius: 5px;
+  }
 }
 
 .UppyDashboard-innerWrap {
@@ -60,34 +63,47 @@
 
 .UppyDashboard--modal .UppyDashboard-inner {
   position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  box-shadow: 0px 0px 10px 4px rgba($color-black, 0.1);
+  top: 0;
+  left: 0;
   border: none;
+
+  @media #{$screen-medium} {
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    box-shadow: 0px 0px 10px 4px rgba($color-black, 0.1);
+  }
 }
 
 .UppyDashboard-close {
   @include reset-button;
   position: absolute;
-  top: 16px;
-  right: 16px;
+  top: 12px;
+  right: 12px;
   cursor: pointer;
-  // color: lighten($color-asphalt-gray, 20%);
-  color: $color-white;
-  z-index: $zIndex-3;
+  color: lighten($color-asphalt-gray, 20%);
+  z-index: $zIndex-4;
   transition: all 0.2s;
 
+  @media #{$screen-medium} {
+    color: $color-white;
+    top: 16px;
+    right: 16px;
+  }
+
   &:hover {
     color: $color-black;
-    // color: rgba($color-white, 0.8);
   }
-}
 
-  .UppyDashboard-close .UppyIcon {
-    width: 18px;
-    height: 18px;
+  .UppyIcon {
+    width: 14px;
+    height: 14px;
+    @media #{$screen-medium} {
+      width: 18px;
+      height: 18px;
+    }
   }
+}
 
 .UppyDashboardTabs {
   // height: 22%;
@@ -773,6 +789,7 @@
   box-shadow: 0px 3px 20px rgba($color-black, 0.15);
   max-width: 90%;
   max-height: 90%;
+  object-fit: cover;
 }
 
 .UppyDashboardFileCard-info {
@@ -829,13 +846,11 @@
 
 .UppyDashboard-statusBar {
   position: absolute;
-  left: 50%;
-  bottom: 20px;
-  margin-left: -200px;
-  width: 400px;
+  bottom: 0;
+  left: 0;
+  right: 0;
   height: 35px;
   line-height: 35px;
-  border-radius: 4px;
   font-size: 13px;
   font-weight: 500;
   color: $color-white;
@@ -843,6 +858,14 @@
   box-shadow: 1px 1px 4px 0 rgba($color-asphalt-gray, 0.3);
   overflow: hidden;
   cursor: pointer;
+
+  @media #{$screen-medium} {
+    left: 50%;
+    bottom: 20px;
+    margin-left: -200px;
+    width: 400px;
+    border-radius: 4px;
+  }
 }
 
 .UppyDashboard-statusBarProgress {
@@ -855,7 +878,6 @@
 
 .UppyDashboard-statusBarText {
   font-weight: 600;
-  // max-width: 300px;
   position: relative;
   z-index: $zIndex-3;
   padding-left: 40px;

src/scss/_variables.scss

@@ -21,3 +21,7 @@ $zIndex-2: 1001;
 $zIndex-3: 1002;
 $zIndex-3: 1003;
 $zIndex-4: 1004;
+$zIndex-5: 1005;
+
+// Media Queries
+$screen-medium: 'only screen and (min-width: 768px)';