Skip to content

Commit 03842ca

Browse files
aayushkdevaayushkdev
committed
Some formatting changes
Signed-off-by: Aayush Kumar <aayush214.kumar@gmail.com>
1 parent 6172941 commit 03842ca

File tree

2 files changed

+62
-72
lines changed

2 files changed

+62
-72
lines changed

‎scanpipe/templates/scanpipe/panels/file_tree_panel.html

Lines changed: 12 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -2,38 +2,25 @@
22
{% for node in children %}
33
<li class="mb-1">
44
{% if node.is_dir %}
5-
<div
6-
class="tree-node is-flex is-align-items-center has-text-weight-semibold is-clickable px-1"
7-
data-folder
8-
{% if node.has_children %}
9-
data-target="{{ node.path|slugify }}"
10-
data-url="{% url 'file_tree' slug=project.slug %}?path={{ node.path }}"
11-
{% endif %}
12-
>
13-
<span class="icon is-small chevron mr-1"
14-
data-chevron
15-
{% if not node.has_children %}
16-
style="visibility: hidden;"
17-
{% endif %}
18-
>
19-
<i class="fas fa-chevron-right"></i>
20-
</span>
21-
22-
<span
23-
class="is-flex is-align-items-center folder-meta">
24-
<span class="icon is-small mr-1"><i class="fas fa-folder"></i></span>
5+
<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 %}>
6+
<span class="icon is-small chevron mr-1" data-chevron{% if not node.has_children %} style="visibility: hidden;"{% endif %}>
7+
<i class="fas fa-chevron-right"></i>
8+
</span>
9+
<span class="is-flex is-align-items-center folder-meta">
10+
<span class="icon is-small mr-1">
11+
<i class="fas fa-folder"></i>
12+
</span>
2513
<span>{{ node.name }}</span>
2614
</span>
2715
</div>
28-
2916
{% if node.has_children %}
3017
<div id="dir-{{ node.path|slugify }}" class="ml-4 hidden" data-loaded="false"></div>
3118
{% endif %}
32-
3319
{% else %}
34-
<div
35-
class="is-flex is-align-items-center ml-5" style="cursor: pointer;">
36-
<span class="icon is-small mr-1"><i class="fas fa-file"></i></span>
20+
<div class="is-flex is-align-items-center ml-5 is-clickable">
21+
<span class="icon is-small mr-1">
22+
<i class="fas fa-file"></i>
23+
</span>
3724
<span>{{ node.name }}</span>
3825
</div>
3926
{% endif %}

‎scanpipe/templates/scanpipe/resource_tree.html

Lines changed: 50 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,70 @@
11
{% extends "scanpipe/base.html" %}
2-
{% load static %}
3-
{% block title %}ScanCode.io: {{ project.name }} - Resource{% endblock %}
2+
{% load static humanize %}
3+
{% block title %}ScanCode.io: {{ project.name }} - Resource Tree{% endblock %}
44

55
{% block extrahead %}
6-
<style>
7-
.hidden {
8-
display: none;
9-
}
10-
11-
.chevron {
12-
transition: transform 0.2s ease;
13-
display: inline-block;
14-
}
15-
16-
.chevron.rotated {
17-
transform: rotate(90deg);
18-
}
19-
</style>
6+
<style>
7+
.hidden {
8+
display: none;
9+
}
10+
.chevron {
11+
transition: transform 0.2s ease;
12+
display: inline-block;
13+
}
14+
.chevron.rotated {
15+
transform: rotate(90deg);
16+
}
17+
</style>
2018
{% endblock %}
2119

2220
{% block content %}
23-
<div class="columns is-gapless is-mobile" style="height: 100vh; margin: 0;">
24-
<div class="column is-one-third p-4 has-background-white" style="border-right: 1px solid #ccc; overflow-y: auto;">
21+
<div id="content-header" class="container is-max-widescreen mb-3">
22+
{% include 'scanpipe/includes/navbar_header.html' %}
23+
<section class="mx-5">
24+
<div class="is-flex is-justify-content-space-between">
25+
{% include 'scanpipe/includes/breadcrumb.html' with linked_project=True current="Resource Tree" %}
26+
</div>
27+
</section>
28+
</div>
29+
30+
<div class="columns is-gapless is-mobile" style="height: 80vh; margin: 0;">
31+
<div class="column is-one-third p-4" style="border-right: 1px solid #ccc; overflow-y: auto;">
2532
<div id="file-tree">
2633
{% include "scanpipe/panels/file_tree_panel.html" with children=children path=path %}
2734
</div>
2835
</div>
29-
30-
<div class="column p-4 has-background-white" style="overflow-y: auto;">
36+
<div class="column p-4" style="overflow-y: auto;">
3137
<div id="right-pane">
3238
</div>
3339
</div>
3440
</div>
3541
{% endblock %}
3642

3743
{% block scripts %}
38-
<script>
39-
document.addEventListener("click", async function (e) {
40-
const chevron = e.target.closest("[data-chevron]");
41-
if (chevron) {
42-
const folderNode = chevron.closest("[data-folder]");
43-
const targetId = folderNode.dataset.target;
44-
const url = folderNode.dataset.url;
45-
const icon = chevron.querySelector("i");
46-
const target = document.getElementById("dir-" + targetId);
47-
48-
if (target.dataset.loaded === "true") {
49-
target.classList.toggle("hidden");
50-
51-
} else {
52-
target.classList.remove("hidden");
53-
const response = await fetch(url + "&tree=true");
54-
target.innerHTML = await response.text();
55-
target.dataset.loaded = "true";
56-
57-
htmx.process(target);
58-
}
44+
<script>
45+
document.addEventListener("click", async function (e) {
46+
const chevron = e.target.closest("[data-chevron]");
47+
if (chevron) {
48+
const folderNode = chevron.closest("[data-folder]");
49+
const targetId = folderNode.dataset.target;
50+
const url = folderNode.dataset.url;
51+
const icon = chevron.querySelector("i");
52+
const target = document.getElementById("dir-" + targetId);
5953

60-
chevron.classList.toggle("rotated");
54+
if (target.dataset.loaded === "true") {
55+
target.classList.toggle("hidden");
56+
} else {
57+
target.classList.remove("hidden");
58+
const response = await fetch(url + "&tree=true");
59+
target.innerHTML = await response.text();
60+
target.dataset.loaded = "true";
61+
htmx.process(target);
62+
}
6163

62-
e.stopPropagation();
63-
return;
64-
}
65-
});
66-
</script>
64+
chevron.classList.toggle("rotated");
65+
e.stopPropagation();
66+
return;
67+
}
68+
});
69+
</script>
6770
{% endblock %}

0 commit comments

Comments
 (0)