[incubator-superset] branch master updated: fix: extended droppable area on the top of dashboards (#11525)

[maximebeauchemin]

This is an automated email from the ASF dual-hosted git repository.

maximebeauchemin pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git


The following commit(s) were added to refs/heads/master by this push:
     new ea0abbf  fix: extended droppable area on the top of dashboards (#11525)
ea0abbf is described below

commit ea0abbffb4e958e1c467f4daf05d259a84d6c60a
Author: Kasia Kucharczyk <2536609+kkuch...@users.noreply.github.com>
AuthorDate: Mon Nov 9 02:35:39 2020 +0100

    fix: extended droppable area on the top of dashboards (#11525)
    
    * Extended droppable area on the top
    
    * Empty dashboard detects almost whole area to place first element
---
 .../src/dashboard/components/DashboardGrid.jsx              |  2 +-
 superset-frontend/src/dashboard/stylesheets/dnd.less        | 13 ++++++++++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/superset-frontend/src/dashboard/components/DashboardGrid.jsx 
b/superset-frontend/src/dashboard/components/DashboardGrid.jsx
index f991413..6889c91 100644
--- a/superset-frontend/src/dashboard/components/DashboardGrid.jsx
+++ b/superset-frontend/src/dashboard/components/DashboardGrid.jsx
@@ -171,7 +171,7 @@ class DashboardGrid extends React.PureComponent {
           ))}
 
           {/* make the area below components droppable */}
-          {editMode && (
+          {editMode && gridComponent.children.length > 0 && (
             <DragDroppable
               component={gridComponent}
               depth={depth}
diff --git a/superset-frontend/src/dashboard/stylesheets/dnd.less 
b/superset-frontend/src/dashboard/stylesheets/dnd.less
index d449bd9..cb29c09 100644
--- a/superset-frontend/src/dashboard/stylesheets/dnd.less
+++ b/superset-frontend/src/dashboard/stylesheets/dnd.less
@@ -52,6 +52,12 @@
   min-width: 16px;
 }
 
+.empty-droptarget:first-child {
+  .drop-indicator--bottom {
+    top: 24px;
+  }
+}
+
 .drop-indicator--right {
   top: 0;
   left: 100%;
@@ -123,7 +129,12 @@
   }
 
   & > .empty-droptarget:first-child {
-    height: 24px;
+    height: 48px;
     margin-top: -24px;
+    margin-bottom: -24px;
+  }
+
+  & > .empty-droptarget:only-child {
+    height: 80vh;
   }
 }