Refactor the path breadcrumb as a nav in its own template

Signed-off-by: tdruez <[email protected]>

Author: tdruez

scancodeio/static/main.css

@@ -69,6 +69,9 @@
   --bulma-title-size: 1.5rem;
   color: var(--bulma-title-color);
 }
+.breadcrumb {
+  --bulma-breadcrumb-item-separator-color: var(--bulma-text);
+}
 .heading {
   font-size: var(--bulma-size-medium);
   font-weight: var(--bulma-weight-semibold);

scanpipe/templates/scanpipe/tree/resource_left_pane_tree.html

@@ -38,4 +38,4 @@
       {% endif %}
     </li>
   {% endfor %}
-</ul>
+</ul>

scanpipe/templates/scanpipe/tree/resource_path_breadcrumb.html

@@ -0,0 +1,30 @@
+<nav class="breadcrumb is-flex is-align-items-center" aria-label="breadcrumbs">
+  <ul>
+    {% for subpath, segment in path_segments %}
+      {% if not forloop.last %}
+        <li>
+          <a
+            href="{% url 'project_resource_tree' project.slug %}?path={{ subpath }}"
+            class="expand-in-tree"
+            data-path="{{ subpath }}"
+            hx-get="{% url 'project_resource_tree_table' project.slug %}?path={{ subpath }}"
+            hx-target="#right-pane"
+            hx-push-url="{% url 'project_resource_tree' project.slug %}?path={{ subpath }}">
+            {{ segment }}
+          </a>
+        </li>
+      {% else %}
+        <li class="is-active">
+          <a href="#" class="has-text-dark"  aria-current="page">
+            {{ segment }}
+          </a>
+        </li>
+      {% endif %}
+    {% endfor %}
+  </ul>
+  {% if path_segments %}
+    <button class="button is-white copy-to-clipboard ml-1 p-2" aria-label="Copy path" data-copy="{{ path }}" data-copy-feedback="Path copied!">
+      <i class="fa-regular fa-clone"></i>
+    </button>
+  {% endif %}
+</nav>

scanpipe/templates/scanpipe/tree/resource_right_pane_table.html

@@ -1,34 +1,6 @@
 {% load humanize %}
-<div id="right-pane-header" class="mb-4">
-  <div class="has-text-weight-semibold is-flex is-align-items-center">
-    {% if path_segments %}
-      <span id="resource-path" class="has-text-weight-medium">
-        {% spaceless %}
-        {% for subpath, segment in path_segments %}
-          {% if not forloop.first %}
-            <span class="mx-1">/</span>
-          {% endif %}
-          {% if not forloop.last %}
-            <a
-              href="{% url 'project_resource_tree' project.slug %}?path={{ subpath }}"
-              class="expand-in-tree"
-              data-path="{{ subpath }}"
-              hx-get="{% url 'project_resource_tree_table' project.slug %}?path={{ subpath }}"
-              hx-target="#right-pane"
-              hx-push-url="{% url 'project_resource_tree' project.slug %}?path={{ subpath }}"
-            {# WARNING: spaceless is not working properly so keep the label without spaces #}
-            >{{ segment }}</a>
-          {% else %}
-            <span class="has-text-weight-bold">{{ segment }}</span>
-          {% endif %}
-        {% endfor %}
-        {% endspaceless %}
-      </span>
-      <button class="copy-to-clipboard ml-2 is-size-6 is-shadowless is-white" aria-label="Copy path" data-copy="{{ path }}" data-copy-feedback="Path copied!">
-        <i class="fa-regular fa-copy"></i>
-      </button>
-    {% endif %}
-  </div>
+<div id="right-pane-header" class="mb-2">
+  {% include 'scanpipe/tree/resource_path_breadcrumb.html' %}
 </div>
 
 <div id="right-pane-content" class="table-scroll-area">