Merge pull request #1398 from lakesare/fix/even-out-files-in-dashboard

Dashboard Plugin: made list items even out
transloadit · Apr 2, 2019 · c8abe6f · c8abe6f
2 parents 0c173e7 + 16f337b
commit c8abe6f
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 4 deletions.
diff --git a/packages/@uppy/dashboard/src/components/Dashboard.js b/packages/@uppy/dashboard/src/components/Dashboard.js
@@ -35,6 +35,7 @@ module.exports = function Dashboard (props) {
     { 'uppy-Dashboard--modal': !props.inline },
     { 'uppy-size--md': props.containerWidth > 576 },
     { 'uppy-size--lg': props.containerWidth > 700 },
+    { 'uppy-size--xl': props.containerWidth > 900 },
     { 'uppy-Dashboard--isAddFilesPanelVisible': props.showAddFilesPanel },
     { 'uppy-Dashboard--isInnerWrapVisible': props.areInsidesReadyToBeVisible }
   )

diff --git a/packages/@uppy/dashboard/src/style.scss b/packages/@uppy/dashboard/src/style.scss
@@ -620,18 +620,30 @@ a.uppy-Dashboard-poweredBy {
   padding-bottom: 10px;
   padding-left: 10px;
 
+  $rl-margin: 15px;
   .uppy-size--md & {
-    flex-direction: column;
     float: left;
-    width: 140px;
+    margin: 5px $rl-margin;
+    width: calc(33.333% - #{$rl-margin} - #{$rl-margin});
     height: 170px;
-    margin: 5px 15px;
-    border: 0;
+
+    flex-direction: column;
     background-color: initial;
+    border: 0;
     border-bottom: none;
     padding-bottom: 0;
     padding-left: 0;
   }
+
+  .uppy-size--lg & {
+    width: calc(25% - #{$rl-margin} - #{$rl-margin});
+    height: 190px;
+  }
+
+  .uppy-size--xl & {
+    width: calc(20% - #{$rl-margin} - #{$rl-margin});
+    height: 210px;
+  }
 }
 
 .uppy-DashboardItem-preview {
@@ -648,6 +660,14 @@ a.uppy-Dashboard-poweredBy {
     height: 100px;
     border: 0;
   }
+
+  .uppy-size--lg & {
+    height: 120px;
+  }
+
+  .uppy-size--xl & {
+    height: 140px;
+  }
 }
 
 .uppy-DashboardItem-previewLink {