Improved sortable lists on mobile

diff --git a/wcfsetup/install/files/js/WCF.js b/wcfsetup/install/files/js/WCF.js
index 6c201d41a63f3b04c0b276bcaf3ffc48b310b56f..a43170be3af4dad912198df9c8127455c22f8359 100755 (executable)
--- a/wcfsetup/install/files/js/WCF.js
+++ b/wcfsetup/install/files/js/WCF.js
@@ -6300,6 +6300,7 @@ WCF.Sortable.List = Class.extend({
                        doNotClear: true,
                        errorClass: 'sortableInvalidTarget',
                        forcePlaceholderSize: true,
+                       handle: '',
                        helper: 'clone',
                        items: 'li:not(.sortableNoSorting)',
                        opacity: .6,

diff --git a/wcfsetup/install/files/style/ui/listSortable.scss b/wcfsetup/install/files/style/ui/listSortable.scss
index b2404c1d573c802c2b99be061b7c66f521fa5d3a..874618339cf5018811c5e0bcd9c17027d9adb5f2 100644 (file)
--- a/wcfsetup/install/files/style/ui/listSortable.scss
+++ b/wcfsetup/install/files/style/ui/listSortable.scss
@@ -20,6 +20,7 @@
 .sortableNodeLabel {
        align-items: center;
        cursor: move;
+       overflow: hidden;
        padding: 10px;
        
        /* `display:flex` acts weird inside lists with a visible list-style */
@@ -32,14 +33,24 @@
        
        > .icon,
        > a {
-               flex: 0 0 auto;
                margin-right: 5px;
        }
        
+       > .icon {
+               flex: 0 0 auto;
+       }
+       
+       > a {
+               flex: 0 1 auto;
+               overflow: hidden;
+               text-overflow: ellipsis;
+               white-space: nowrap;
+       }
+       
        > .statusDisplay {
                align-items: center;
                display: flex;
-               flex: 1 1 auto;
+               flex: 1 0 auto;
                justify-content: flex-end;
                
                > a,
@@ -63,3 +74,14 @@
                color: $wcfStatusErrorText;
        }
 }
+
+@include screen-xs {
+       .sortableNodeHandle {
+               display: none;
+       }
+}
+@include screen-lg {
+       .sortableNodeHandle {
+               display: none;
+       }
+}