Some formatting changes

Signed-off-by: Aayush Kumar <[email protected]>

Author: aayushkdev

scanpipe/templates/scanpipe/panels/file_tree_panel.html

@@ -2,38 +2,25 @@
   {% for node in children %}
     <li class="mb-1">
       {% if node.is_dir %}
-        <div
-          class="tree-node is-flex is-align-items-center has-text-weight-semibold is-clickable px-1"
-          data-folder
-          {% if node.has_children %}
-            data-target="{{ node.path|slugify }}"
-            data-url="{% url 'file_tree' slug=project.slug %}?path={{ node.path }}"
-          {% endif %}
-        >
-        <span class="icon is-small chevron mr-1"
-          data-chevron
-          {% if not node.has_children %}
-            style="visibility: hidden;"
-          {% endif %}
-        >
-          <i class="fas fa-chevron-right"></i>
-        </span>
-
-          <span
-            class="is-flex is-align-items-center folder-meta">
-            <span class="icon is-small mr-1"><i class="fas fa-folder"></i></span>
+        <div class="tree-node is-flex is-align-items-center has-text-weight-semibold is-clickable px-1" data-folder{% if node.has_children %} data-target="{{ node.path|slugify }}" data-url="{% url 'file_tree' slug=project.slug %}?path={{ node.path }}"{% endif %}>
+          <span class="icon is-small chevron mr-1" data-chevron{% if not node.has_children %} style="visibility: hidden;"{% endif %}>
+            <i class="fas fa-chevron-right"></i>
+          </span>
+          <span class="is-flex is-align-items-center folder-meta">
+            <span class="icon is-small mr-1">
+              <i class="fas fa-folder"></i>
+            </span>
             <span>{{ node.name }}</span>
           </span>
         </div>
-
         {% if node.has_children %}
           <div id="dir-{{ node.path|slugify }}" class="ml-4 hidden" data-loaded="false"></div>
         {% endif %}
-
       {% else %}
-        <div
-          class="is-flex is-align-items-center ml-5" style="cursor: pointer;">
-          <span class="icon is-small mr-1"><i class="fas fa-file"></i></span>
+        <div class="is-flex is-align-items-center ml-5 is-clickable">
+          <span class="icon is-small mr-1">
+            <i class="fas fa-file"></i>
+          </span>
           <span>{{ node.name }}</span>
         </div>
       {% endif %}

scanpipe/templates/scanpipe/resource_tree.html

@@ -1,67 +1,70 @@
 {% extends "scanpipe/base.html" %}
-{% load static %}
-{% block title %}ScanCode.io: {{ project.name }} - Resource{% endblock %}
+{% load static humanize %}
+{% block title %}ScanCode.io: {{ project.name }} - Resource Tree{% endblock %}
 
 {% block extrahead %}
-<style>
-  .hidden {
-    display: none;
-  }
-
-  .chevron {
-    transition: transform 0.2s ease;
-    display: inline-block;
-  }
-
-  .chevron.rotated {
-    transform: rotate(90deg);
-  }
-</style>
+  <style>
+    .hidden {
+      display: none;
+    }
+    .chevron {
+      transition: transform 0.2s ease;
+      display: inline-block;
+    }
+    .chevron.rotated {
+      transform: rotate(90deg);
+    }
+  </style>
 {% endblock %}
 
 {% block content %}
-<div class="columns is-gapless is-mobile" style="height: 100vh; margin: 0;">
-  <div class="column is-one-third p-4 has-background-white" style="border-right: 1px solid #ccc; overflow-y: auto;">
+  <div id="content-header" class="container is-max-widescreen mb-3">
+    {% include 'scanpipe/includes/navbar_header.html' %}
+    <section class="mx-5">
+      <div class="is-flex is-justify-content-space-between">
+        {% include 'scanpipe/includes/breadcrumb.html' with linked_project=True current="Resource Tree" %}
+      </div>
+    </section>
+  </div>
+
+<div class="columns is-gapless is-mobile" style="height: 80vh; margin: 0;">
+  <div class="column is-one-third p-4" style="border-right: 1px solid #ccc; overflow-y: auto;">
     <div id="file-tree">
       {% include "scanpipe/panels/file_tree_panel.html" with children=children path=path %}
     </div>
   </div>
-
-  <div class="column p-4 has-background-white" style="overflow-y: auto;">
+  <div class="column p-4" style="overflow-y: auto;">
     <div id="right-pane">
     </div>
   </div>
 </div>
 {% endblock %}
 
 {% block scripts %}
-<script>
-document.addEventListener("click", async function (e) {
-  const chevron = e.target.closest("[data-chevron]");
-  if (chevron) {
-    const folderNode = chevron.closest("[data-folder]");
-    const targetId = folderNode.dataset.target;
-    const url = folderNode.dataset.url;
-    const icon = chevron.querySelector("i");
-    const target = document.getElementById("dir-" + targetId);
-
-    if (target.dataset.loaded === "true") {
-      target.classList.toggle("hidden");
-      
-    } else {
-      target.classList.remove("hidden");
-      const response = await fetch(url + "&tree=true");
-      target.innerHTML = await response.text();
-      target.dataset.loaded = "true";
-
-      htmx.process(target);
-    }
+  <script>
+    document.addEventListener("click", async function (e) {
+      const chevron = e.target.closest("[data-chevron]");
+      if (chevron) {
+        const folderNode = chevron.closest("[data-folder]");
+        const targetId = folderNode.dataset.target;
+        const url = folderNode.dataset.url;
+        const icon = chevron.querySelector("i");
+        const target = document.getElementById("dir-" + targetId);
 
-    chevron.classList.toggle("rotated");
+        if (target.dataset.loaded === "true") {
+          target.classList.toggle("hidden");
+        } else {
+          target.classList.remove("hidden");
+          const response = await fetch(url + "&tree=true");
+          target.innerHTML = await response.text();
+          target.dataset.loaded = "true";
+          htmx.process(target);
+        }
 
-    e.stopPropagation();
-    return;
-  }
-});
-</script>
+        chevron.classList.toggle("rotated");
+        e.stopPropagation();
+        return;
+      }
+    });
+  </script>
 {% endblock %}