From 4d194b41f993fa9bc00e994a4fbdbe9171e3c71d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Calvi=C3=B1o=20S=C3=A1nchez?= Date: Thu, 14 Dec 2017 04:05:49 +0100 Subject: [PATCH] Fix drag shadow not visible when dragging a file on a narrow screen MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- apps/files/css/files.scss | 1 + apps/files/css/mobile.scss | 5 +++++ apps/files/js/files.js | 1 - 3 files changed, 6 insertions(+), 1 deletion(-) diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss index 48520cbd710d3..2b61b20778cec 100644 --- a/apps/files/css/files.scss +++ b/apps/files/css/files.scss @@ -681,6 +681,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 9e1c8a01d89c6..6d7d3460abb28 100644 --- a/apps/files/css/mobile.scss +++ b/apps/files/css/mobile.scss @@ -85,4 +85,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 cdc2e27a6128c..9607400f1ddf8 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,