Sortable handles

app/assets/stylesheets/layout.scss

@@ -306,4 +306,8 @@ details.tree {
 
 .sc-level-aaa {
   background-color: $purple;
+}
+
+.handle {
+  cursor: move;
 }

app/javascript/controllers/sortable_controller.js

@@ -6,16 +6,22 @@ import { put } from "@rails/request.js";
 export default class extends Controller {
   linkedElement = null
   connect() {
-    this.element.style.cursor = "grab"
+    // this.element.style.cursor = "grab"
 
     if (this.element.dataset["linkedElementId"]) {
       this.linkedElement = document.getElementById(this.element.dataset["linkedElementId"])
     }
 
-    new Sortable(this.element, {
-      group: this.groupValue,
+    let draggableSelector = ".item"
+    if (this.element.dataset["draggableSelector"]) {
+      draggableSelector = this.element.dataset["draggableSelector"]
+    }
+    console.log(draggableSelector, new Sortable(this.element, {
+      // group: this.groupValue,
       onEnd: this.onEndFactory(this.linkedElement),
-    })
+      handle: ".handle",
+      // draggable: draggableSelector,
+    }))
   }
 
   onEndFactory(linkedElement) {

app/views/elements/_element.html.erb

@@ -27,7 +27,7 @@
     </p>
   <% end %>
 
-  <div id="<%= dom_id(element, :success_criteria_list) %>" class="mb-3" data-controller="sortable" data-form-name="success_criterion" data-position-attribute= "position">
+  <div id="<%= dom_id(element, :success_criteria_list) %>" class="mb-3" data-controller="sortable" data-form-name="success_criterion" data-position-attribute= "position" data-draggable-selector=".draggable">
     <% element.success_criteria.each do |sc| %>
       <%= render sc %>
     <% end %>

app/views/elements/_page_nav_row.html.slim

@@ -4,8 +4,10 @@ li id=dom_id(element, :page_nav_row) data={ "sortable-url": element_path(element
       i.bi.bi-boxes.me-2
       span id=dom_id(element, :page_nav_title)
         = "#{element.number} #{element.title}"
+      i.bi.bi-grip-vertical.float-end.handle
   - else 
     =< link_to(report_path(element.report, page_id: element.page.id, anchor: dom_id(element)), data: { "turbo": false }) do
       i.bi.bi-boxes.me-2
       span id=dom_id(element, :page_nav_title)
-        =< "#{element.number} #{element.title}"
+        =< "#{element.number} #{element.title}"
+      i.bi.bi-grip-vertical.float-end.handle

app/views/reports/_page_nav.html.slim

@@ -14,14 +14,15 @@
             - is_current = current_page == page
             li  data={ "sortable-url": page_path(page), "form-name": "page", "position-attribute": "position" }
               details.tree open=current_page_displayed(page) class=""
-                summary class=(is_current ? "active" : nil)
-                  .content
+                summary.d-flex class=(is_current ? "active" : nil)
+                  .content.flex-fill
                     i.bi.me-1 class="bi-file-earmark-check#{is_current ? "" : "" }"
                     - if is_current
                         span id=dom_id(page, :title) =< "#{page.position} #{page.path}" 
                     - else
                       =< link_to(report_path(report, page_id: page.id), data: { "turbo-frame": :_top }) do
                         span id=dom_id(page, :title) =< "#{page.position} #{page.path}" 
+                  i.bi.bi-grip-vertical.align-self-end.handle
                 ul id=dom_id(page, :page_nav_elements) data={ controller: "sortable", "linked-element-id": "element_list" }
                   - page.elements.each do |element| 
                     = render partial: "elements/page_nav_row", locals: { element: element, current_page: current_page == element.page }

app/views/success_criteria/_header.html.slim

@@ -1,9 +1,9 @@
 - edit_mode = action_name == "edit"
 summary.d-flex.align-items-start id=dom_id(success_criterion, :header)
-  .content.d-flex.align-items-center
+  .content.d-flex.align-items-center.w-100
     .result-icon.flex-shrink-0 class=[success_criterion_result_color_classes(success_criterion)]
       span.h1.bi class=[success_criterion_result_icon_classes(success_criterion)]
-    .fs-
+    .flex-fill
       span id=dom_id(success_criterion, :position)
         = success_criterion.page.position
         | .
@@ -19,5 +19,4 @@ summary.d-flex.align-items-start id=dom_id(success_criterion, :header)
       = success_criterion_badge(success_criterion.check.external_number, extra_classes: "text-bg-info me-1")
       
       = success_criterion_badge(success_criterion.level, extra_classes: "sc-level-#{success_criterion.level.to_s.downcase} me-1")
-  
-  
+    i.bi.bi-grip-vertical.handle