Skip to content

Commit d6afc94

Browse files
tdrueztdruez
authored
CSS improvements (#1635)
* Implement various CSS fix and improvements Signed-off-by: tdruez <tdruez@nexb.com> * Refine consistency for footer buttons in modals Signed-off-by: tdruez <tdruez@nexb.com> * Remove the usage of is-light, not rendering well on dark mode Signed-off-by: tdruez <tdruez@nexb.com> * Refine the project details level navigation #1132 Signed-off-by: tdruez <tdruez@nexb.com> --------- Signed-off-by: tdruez <tdruez@nexb.com>
1 parent c1ee92b commit d6afc94

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+238
-176
lines changed

‎scancodeio/static/highlight-10.6.0.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎scancodeio/static/main.css

Lines changed: 31 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -37,9 +37,6 @@
3737
}
3838
.theme-dark,
3939
[data-theme="dark"] {
40-
.is-light {
41-
background-color: var(--bulma-scheme-main-ter) !important;
42-
}
4340
.hljs {
4441
background: transparent !important;
4542
}
@@ -63,23 +60,40 @@
6360
}
6461
.panel {
6562
--bulma-panel-radius: var(--bulma-radius-medium);
63+
--bulma-panel-heading-size: 1em;
64+
--bulma-panel-heading-line-height: 1em;
65+
--bulma-panel-heading-padding: 0.75em 1em;
66+
}
67+
.title {
68+
--bulma-title-weight: var(--bulma-weight-semibold);
69+
--bulma-title-size: 1.5rem;
70+
color: var(--bulma-title-color);
71+
}
72+
.heading {
73+
font-size: var(--bulma-size-medium);
74+
font-weight: var(--bulma-weight-semibold);
75+
}
76+
.heading a {
77+
color: var(--bulma-body-color);
78+
}
79+
.heading a:hover {
80+
color: var(--bulma-body-color);
81+
text-decoration: underline;
82+
}
83+
.level-item {
84+
padding-bottom: .5rem !important;
85+
padding-top: .5rem !important;
86+
}
87+
.level-item:hover {
88+
background: rgba(50, 115, 220, 0.1);
89+
border-radius: 8px;
6690
}
6791
.button[disabled] {
6892
background-color: transparent !important;
6993
}
7094
.modal-card-head {
7195
background-color: var(--bulma-scheme-main-bis);
7296
}
73-
.title {
74-
--bulma-title-weight: var(--bulma-weight-semibold);
75-
}
76-
.heading {
77-
display: block;
78-
font-size: 0.75rem;
79-
letter-spacing: 1px;
80-
margin-bottom: 5px;
81-
text-transform: uppercase;
82-
}
8397
.is-black-link {
8498
color: var(--bulma-text-strong);
8599
}
@@ -162,7 +176,7 @@ pre.is-small {
162176
}
163177
.bb-chart .bb-chart-arcs .bb-chart-arcs-title {
164178
font-size: 15px !important;
165-
fill: #4a4a4a !important;
179+
fill: var(--bulma-text) !important;
166180
text-transform: uppercase;
167181
}
168182
svg {
@@ -171,6 +185,9 @@ svg {
171185
.highlight {
172186
width: 100%;
173187
}
188+
.panel .highlight pre code {
189+
border-radius: 0;
190+
}
174191
.log pre {
175192
background-color: #1c1d21;
176193
}

‎scanpipe/templates/scanpipe/dropdowns/project_download_dropdown.html

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,11 @@
2121
<div class="dropdown-item">
2222
<strong>CycloneDX</strong>
2323
<div class="has-text-weight-semibold">
24-
<a href="{% url 'project_results' project.slug 'cyclonedx' '1.6' %}" class="tag is-link is-light mr-1">1.6</a>
25-
<a href="{% url 'project_results' project.slug 'cyclonedx' '1.5' %}" class="tag is-link is-light mr-1">1.5</a>
26-
<a href="{% url 'project_results' project.slug 'cyclonedx' '1.4' %}" class="tag is-link is-light">1.4</a>
24+
<div class="buttons">
25+
<a href="{% url 'project_results' project.slug 'cyclonedx' '1.6' %}" class="tag is-link">1.6</a>
26+
<a href="{% url 'project_results' project.slug 'cyclonedx' '1.5' %}" class="tag">1.5</a>
27+
<a href="{% url 'project_results' project.slug 'cyclonedx' '1.4' %}" class="tag">1.4</a>
28+
</div>
2729
</div>
2830
</div>
2931
<a href="{% url 'project_results' project.slug 'attribution' %}" class="dropdown-item">

‎scanpipe/templates/scanpipe/forms/project_settings_form.html

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<form method="post" action="{% url 'project_settings' project.slug %}">{% csrf_token %}
22
<div class="panel is-dark">
3-
<p id="general" class="panel-heading py-2 is-size-6">General</p>
3+
<p id="general" class="panel-heading">General</p>
44
<div class="panel-block is-block px-4">
55
<div class="field">
66
<label class="label" for="{{ form.name.id_for_label }}">
@@ -44,7 +44,7 @@
4444
</div>
4545

4646
<div class="panel is-dark">
47-
<p id="webhooks" class="panel-heading py-2 is-size-6">Webhooks</p>
47+
<p id="webhooks" class="panel-heading">Webhooks</p>
4848
<div class="panel-block is-block px-4">
4949
<table class="table mb-1">
5050
<thead>
@@ -97,7 +97,7 @@
9797
</div>
9898

9999
<div class="panel is-dark">
100-
<p id="ignored" class="panel-heading py-2 is-size-6">Ignored</p>
100+
<p id="ignored" class="panel-heading">Ignored</p>
101101
<div class="panel-block is-block px-4">
102102
<div class="field">
103103
<label class="label" for="{{ form.ignored_patterns.id_for_label }}">
@@ -150,7 +150,7 @@
150150
</div>
151151

152152
<div class="panel is-dark">
153-
<p id="policies" class="panel-heading py-2 is-size-6">Policies</p>
153+
<p id="policies" class="panel-heading">Policies</p>
154154
<div class="panel-block is-block px-4">
155155
<div>
156156
{% if project.policies_enabled %}
@@ -174,7 +174,7 @@
174174
</div>
175175

176176
<div class="panel is-dark">
177-
<p id="dejacode" class="panel-heading py-2 is-size-6">DejaCode</p>
177+
<p id="dejacode" class="panel-heading">DejaCode</p>
178178
<div class="panel-block is-block px-4">
179179
<div class="field">
180180
<label class="label" for="{{ form.product_name.id_for_label }}">
@@ -198,7 +198,7 @@
198198
</div>
199199

200200
<div class="panel is-dark">
201-
<p id="attribution" class="panel-heading py-2 is-size-6">Attribution</p>
201+
<p id="attribution" class="panel-heading">Attribution</p>
202202
<div class="panel-block is-block px-4">
203203
<div class="field">
204204
<label class="label" for="{{ form.attribution_template.id_for_label }}">

‎scanpipe/templates/scanpipe/includes/file_filter.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,17 @@
33
<ul>
44
<li{% if file_filter == "all" %} class="is-active"{% endif %}>
55
<a href="?file-filter=all#charts">
6-
All Files <span class="tag is-link is-light is-rounded ml-1">{{ project.file_count|intcomma }}</span>
6+
All Files <span class="tag is-rounded ml-1">{{ project.file_count|intcomma }}</span>
77
</a>
88
</li>
99
<li{% if file_filter == "in-a-package" %} class="is-active"{% endif %}>
1010
<a href="?file-filter=in-a-package#charts">
11-
In a Package <span class="tag is-link is-light is-rounded ml-1">{{ project.file_in_package_count|intcomma }}</span>
11+
In a Package <span class="tag is-rounded ml-1">{{ project.file_in_package_count|intcomma }}</span>
1212
</a>
1313
</li>
1414
<li{% if file_filter == "not-in-a-package" %} class="is-active"{% endif %}>
1515
<a href="?file-filter=not-in-a-package#charts">
16-
NOT in a Package <span class="tag is-link is-light is-rounded ml-1">{{ project.file_not_in_package_count|intcomma }}</span>
16+
NOT in a Package <span class="tag is-rounded ml-1">{{ project.file_not_in_package_count|intcomma }}</span>
1717
</a>
1818
</li>
1919
</ul>

‎scanpipe/templates/scanpipe/includes/project_summary_level.html

Lines changed: 28 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,60 @@
11
{% load humanize %}
2-
<nav class="level is-mobile">
2+
<nav class="level mx-5 mb-3">
3+
{% url 'project_packages' project.slug as project_packages_url %}
34
<div class="level-item has-text-centered">
45
<div>
5-
<p class="heading">Packages</p>
6-
<p class="{{ title_class }} is-flex is-align-items-center is-justify-content-center">
6+
<p class="heading">
7+
<a href="{{ project_packages_url }}">
8+
Packages
9+
</a>
10+
</p>
11+
<p class="title is-flex is-align-items-center is-justify-content-center">
712
{% if project.package_count %}
8-
<a href="{% url 'project_packages' project.slug %}">
13+
<a href="{{ project_packages_url }}">
914
{{ project.package_count|intcomma }}
1015
</a>
1116
{% if project.vulnerable_package_count %}
12-
<a href="{% url 'project_packages' project.slug %}?is_vulnerable=yes" class="has-text-danger is-size-5 ml-2">
13-
{{ project.vulnerable_package_count|intcomma }}
17+
<a href="{{ project_packages_url }}?is_vulnerable=yes" class="has-text-danger is-size-5 ml-3">
1418
<i class="fa-solid fa-bug is-size-6"></i>
19+
{{ project.vulnerable_package_count|intcomma }}
1520
</a>
1621
{% endif %}
1722
{% else %}
18-
<span>0</span>
23+
<span class="has-text-grey">0</span>
1924
{% endif %}
2025
</p>
2126
</div>
2227
</div>
28+
{% url 'project_dependencies' project.slug as project_dependencies_url %}
2329
<div class="level-item has-text-centered">
2430
<div>
25-
<p class="heading">Dependencies</p>
26-
<p class="{{ title_class }} is-flex is-align-items-center is-justify-content-center">
31+
<p class="heading">
32+
<a href="{{ project_dependencies_url }}">
33+
Dependencies
34+
</a>
35+
</p>
36+
<p class="title is-flex is-align-items-center is-justify-content-center">
2737
{% if project.dependency_count %}
28-
<a href="{% url 'project_dependencies' project.slug %}">
38+
<a href="{{ project_dependencies_url }}">
2939
{{ project.dependency_count|intcomma }}
3040
</a>
3141
{% if project.vulnerable_dependency_count %}
32-
<a href="{% url 'project_dependencies' project.slug %}?is_vulnerable=yes" class="has-text-danger is-size-5 ml-2">
33-
{{ project.vulnerable_dependency_count|intcomma }}
42+
<a href="{{ project_dependencies_url }}?is_vulnerable=yes" class="has-text-danger is-size-5 ml-3">
3443
<i class="fa-solid fa-bug is-size-6"></i>
44+
{{ project.vulnerable_dependency_count|intcomma }}
3545
</a>
3646
{% endif %}
3747
{% else %}
38-
<span>0</span>
39-
{% endif %}
40-
</p>
41-
</div>
42-
</div>
43-
<div class="level-item has-text-centered">
44-
<div>
45-
<p class="heading">Resources</p>
46-
<p class="{{ title_class }}">
47-
{% if project.resource_count %}
48-
<a href="{{ project_resources_url }}">
49-
{{ project.resource_count|intcomma }}
50-
</a>
51-
{% else %}
52-
<span>0</span>
48+
<span class="has-text-grey">0</span>
5349
{% endif %}
5450
</p>
5551
</div>
5652
</div>
53+
{% include "scanpipe/includes/project_summary_level_item.html" with label="Resources" count=project.resource_count url=project_resources_url only %}
5754
{% if project.relation_count %}
58-
<div class="level-item has-text-centered">
59-
<div>
60-
<p class="heading">Relations</p>
61-
<p class="{{ title_class }}">
62-
<a href="{% url 'project_relations' project.slug %}">
63-
{{ project.relation_count|intcomma }}
64-
</a>
65-
</p>
66-
</div>
67-
</div>
55+
{% url 'project_relations' project.slug as project_relations_url %}
56+
{% include "scanpipe/includes/project_summary_level_item.html" with label="Relations" count=project.relation_count url=project_relations_url only %}
6857
{% endif %}
69-
<div class="level-item has-text-centered">
70-
<div>
71-
<p class="heading">Messages</p>
72-
<p class="{{ title_class }}">
73-
{% if project.message_count %}
74-
<a href="{% url 'project_messages' project.slug %}">
75-
{{ project.message_count|intcomma }}
76-
</a>
77-
{% else %}
78-
<span>0</span>
79-
{% endif %}
80-
</p>
81-
</div>
82-
</div>
58+
{% url 'project_messages' project.slug as project_messages_url %}
59+
{% include "scanpipe/includes/project_summary_level_item.html" with label="Messages" count=project.message_count url=project_messages_url only %}
8360
</nav>

‎scanpipe/templates/scanpipe/includes/project_summary_level_item.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{% load humanize %}
2+
<div class="level-item has-text-centered">
3+
<div>
4+
<p class="heading">
5+
<a href="{{ url }}">{{ label }}</a>
6+
</p>
7+
<p class="title">
8+
{% if count %}
9+
<a href="{{ url }}">
10+
{{ count|intcomma }}
11+
</a>
12+
{% else %}
13+
<span class="has-text-grey">0</span>
14+
{% endif %}
15+
</p>
16+
</div>
17+
</div>

‎scanpipe/templates/scanpipe/includes/run_status_tag.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
{% elif run.status == run.Status.STOPPED %}
2323
<span class="tag is-danger is-hoverable">Stopped</span>
2424
{% else %}
25-
<span class="tag is-light is-hoverable">Not started</span>
25+
<span class="tag is-hoverable">Not started</span>
2626
{% endif %}
2727

2828
{% if status_changed %}

‎scanpipe/templates/scanpipe/modals/add_inputs_modal.html

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,11 @@
3333
</div>
3434
</div>
3535
</section>
36-
<footer class="modal-card-foot">
37-
<button id="add-inputs-button" name="add-inputs-submit" class="button is-link is-no-close mr-3" type="submit">Add inputs</button>
38-
<button class="button" type="button">Close</button>
36+
<footer class="modal-card-foot is-justify-content-flex-end">
37+
<div class="buttons">
38+
<button class="button" type="button">Cancel</button>
39+
<button id="add-inputs-button" name="add-inputs-submit" class="button is-link is-no-close" type="submit">Add inputs</button>
40+
</div>
3941
</footer>
4042
</div>
4143
</form>

‎scanpipe/templates/scanpipe/modals/add_labels_modal.html

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,9 +36,11 @@
3636
</div>
3737
</div>
3838
</section>
39-
<footer class="modal-card-foot">
40-
<button id="add-labels-button" name="add-labels-submit" class="button is-link is-no-close mr-3" type="submit">Add labels</button>
41-
<button class="button" type="button">Close</button>
39+
<footer class="modal-card-foot is-justify-content-flex-end">
40+
<div class="buttons">
41+
<button class="button" type="button">Cancel</button>
42+
<button id="add-labels-button" name="add-labels-submit" class="button is-link is-no-close" type="submit">Add labels</button>
43+
</div>
4244
</footer>
4345
</div>
4446
</form>

0 commit comments

Comments
 (0)