manager: add handles to drag/drop pages (#10933)

combo/manager/static/css/combo.manager.css

@@ -141,6 +141,10 @@ li.cell-type input:checked ~ ul {
 
 .icon-eye-open:before             { content: "\f06e "; }
 
+div.objects-list {
+	clear: both;
+}
+
 div.objects-list > div {
 	border: 1px solid #bcbcbc;
 	border-collapse: collapse;
@@ -149,10 +153,19 @@ div.objects-list > div {
 
 div.objects-list > div a {
 	padding: 1em 1ex;
-	display: block;
+	display: inline-block;
 	border-bottom: none;
+	box-sizing: border-box;
+	width: calc(100% - 1em - 2ex);
 }
 
+span.handle {
+	cursor: grab;
+	display: inline-block;
+	padding: 0.5ex;
+	text-align: center;
+	width: 1em;
+}
 div.objects-list > div:hover {
 	background: #ccc;
 }

combo/manager/static/js/combo.manager.js

@@ -54,6 +54,7 @@ function init_pages_list()
     return;
   var list_offset = $('#pages-list').offset().left;
   $('#pages-list').sortable({
+     handle: '.handle',
      stop: function(event, ui) {
        var moved_page_id = ui.item.data('page-id');
        /* 25 is the per-level margin-left applied to pages, it needs to be kept

combo/manager/templates/combo/manager_home.html

@@ -18,10 +18,17 @@
 {% block content %}
 
 {% if object_list %}
+
+<p class="hint">
+{% blocktrans %}
+Use drag and drop with the ⠿ handles to reorder and change hierarchy of pages.
+{% endblocktrans %}
+</p>
+
 <div class="objects-list" id="pages-list" data-page-order-url="{% url 'combo-manager-page-order' %}">
  {% for page in object_list %}
  <div class="level-{{page.level}}" data-page-id="{{page.id}}" data-level="{{page.level}}">
- <a href="{% url 'combo-manager-page-view' pk=page.id %}">{{ page.title }}</a>
+	 <span class="handle">⠿</span> <a href="{% url 'combo-manager-page-view' pk=page.id %}">{{ page.title }}</a>
  </div>
  {% endfor %}
 </div>