diff options
author | Daniel Calviño Sánchez <danxuliu@gmail.com> | 2017-12-14 04:05:49 +0100 |
---|---|---|
committer | Daniel Calviño Sánchez <danxuliu@gmail.com> | 2017-12-14 04:05:49 +0100 |
commit | 39c549fa27a17290dfb9cc2eaa8b17d0db2e1c7e (patch) | |
tree | a02738cd20fb225641587ff758cfc38bc46321f7 | |
parent | 2943b54f98c53ded616ae9ab3ebe2c6b8e47f762 (diff) | |
download | nextcloud-server-39c549fa27a17290dfb9cc2eaa8b17d0db2e1c7e.tar.gz nextcloud-server-39c549fa27a17290dfb9cc2eaa8b17d0db2e1c7e.zip |
Fix drag shadow not visible when dragging a file on a narrow screen
When a file from the file list is dragged a drag shadow (a copy of the
file row that follows the cursor position) is created. The drag shadow
element is created as a direct child of the body element, so it needs a
higher "z-index" than the one used for the file list to be visible.
In narrow screens the "#app-content" uses a "z-index" of 1000 in order
to be visible over the "#navigation-bar" when they overlap, so the
"z-index" of the drag shadow must be at least 1000 to be visible over
the file list.
Instead of updating the hardcoded "z-index" it was removed and replaced
by CSS rules for ".dragshadow" elements to ease theming.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
-rw-r--r-- | apps/files/css/files.scss | 1 | ||||
-rw-r--r-- | apps/files/css/mobile.scss | 5 | ||||
-rw-r--r-- | apps/files/js/files.js | 1 |
3 files changed, 6 insertions, 1 deletions
diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss index 1be3c9216f0..6135b1ceeca 100644 --- a/apps/files/css/files.scss +++ b/apps/files/css/files.scss @@ -649,6 +649,7 @@ table tr.summary td { table.dragshadow { width:auto; + z-index: 100; } table.dragshadow td.filename { padding-left:60px; diff --git a/apps/files/css/mobile.scss b/apps/files/css/mobile.scss index 12c9e4fa2d3..10fa29e7a38 100644 --- a/apps/files/css/mobile.scss +++ b/apps/files/css/mobile.scss @@ -69,4 +69,9 @@ table td.filename .nametext .innernametext { display: block !important; } +/* ensure that it is visible over #app-content */ +table.dragshadow { + z-index: 1000; +} + } diff --git a/apps/files/js/files.js b/apps/files/js/files.js index 017bf7ecf41..479a2817f44 100644 --- a/apps/files/js/files.js +++ b/apps/files/js/files.js @@ -383,7 +383,6 @@ var dragOptions={ revert: 'invalid', revertDuration: 300, opacity: 0.7, - zIndex: 100, appendTo: 'body', cursorAt: { left: 24, top: 18 }, helper: createDragShadow, |