Skip to content

Commit 0089933

Browse files
johnmhoranjohnmhoran
committed
Create new branch for ongoing UI work
Reference: #798 Signed-off-by: John M. Horan <johnmhoran@gmail.com>
1 parent 773064e commit 0089933

8 files changed

Lines changed: 149 additions & 424 deletions

File tree

‎vulnerabilities/templates/index.html‎

Lines changed: 57 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -8,32 +8,39 @@
88

99
{% include 'navbar.html' %}
1010

11-
<section class="section01">
12-
11+
<section class="section pt-0">
1312
<div class="columns">
14-
<div class="column">
15-
<span class="tag01">Welcome to VulnerableCode<span class="nexb-orange">.</span>io.</span>
13+
<div class="column is-size-4 has-text-weight-bold">
14+
Welcome to VulnerableCode<span class="nexb-orange">.</span>io.
1615
</div>
1716
</div>
18-
1917
<article class='panel is-info'>
2018
<div class='panel-heading py-2 is-size-6'>
2119
Search for vulnerable packages
22-
<div class="dropdown is-hoverable" style="font-weight: normal;">
23-
<div class="dropdown-trigger" style="text-align: right;">
24-
<i class="fa fa-question-circle" style="font-size:20px; margin-left: 10px;"></i>
20+
<!-- <div class="dropdown is-hoverable" style="font-weight: normal;"> -->
21+
<div class="dropdown is-hoverable has-text-weight-normal">
22+
<!-- <div class="dropdown-trigger" style="text-align: right;"> -->
23+
<div class="dropdown-trigger">
24+
<!-- <i class="fa fa-question-circle" style="font-size:20px; margin-left: 10px;"></i> -->
25+
<i class="fa fa-question-circle ml-2"></i>
2526
</div>
26-
<div class="dropdown-menu" id="dropdown-menu4" role="menu" style="width: 600px;">
27-
<div class="dropdown-content" style="box-shadow: 0px 8px 16px 0px #808080;">
28-
<div class="dropdown-item" style="font-size: 14px;">
29-
<div style="margin: 0px 0px 0px 0px;">
30-
<div style="margin-top: 0px;">Search for currently known Vulnerabilities for a <a href="https://github.com/package-url/purl-spec" target="_blank">Package-URL</a> (aka <span class="inline-code01">purl</span>) or a Package <span class="inline-code01">name</span>.</div>
27+
<!-- <div class="dropdown-menu" id="dropdown-menu4" role="menu" style="width: 600px;"> -->
28+
<div class="dropdown-menu dropdown-instructions-width" id="dropdown-menu4" role="menu">
29+
<!-- <div class="dropdown-content" style="box-shadow: 0px 8px 16px 0px #808080;"> -->
30+
<div class="dropdown-content dropdown-instructions-box-shadow">
31+
<!-- <div class="dropdown-item" style="font-size: 14px;"> -->
32+
<div class="dropdown-item">
33+
<!-- <div style="margin: 0px 0px 0px 0px;"> -->
34+
<div>
35+
<!-- <div style="margin-top: 0px;">Search for currently known Vulnerabilities for a <a href="https://github.com/package-url/purl-spec" target="_blank">Package-URL</a> (aka <span class="inline-code01">purl</span>) or a Package <span class="inline-code01">name</span>.</div> -->
36+
<div>Search for currently known Vulnerabilities for a <a href="https://github.com/package-url/purl-spec" target="_blank">Package-URL</a> (aka <span class="inline-code">purl</span>) or a Package <span class="inline-code">name</span>.</div>
3137
<ul>
3238
<li>
33-
Search by Package <span class="inline-code01">name</span> -- type the <span class="inline-code01">name</span> in the search box and, if relevant to your search, select the Package <span class="inline-code01">type</span> from the dropdown.
39+
Search by Package <span class="inline-code">name</span> -- type the <span class="inline-code">name</span> in the search box and, if relevant to your search, select the Package <span class="inline-code">type</span> from the dropdown.
3440
</li>
3541
<li>
36-
Search by <span class="inline-code01">purl</span> -- type the <span class="inline-code01">purl</span> in the search box. <span style="font-style: italic;">(The <span class="inline-code01">type</span> dropdown does not apply to a <span class="inline-code01">purl</span> search.)</span>
42+
<!-- Search by <span class="inline-code">purl</span> -- type the <span class="inline-code">purl</span> in the search box. <span style="font-style: italic;">(The <span class="inline-code">type</span> dropdown does not apply to a <span class="inline-code">purl</span> search.)</span> -->
43+
Search by <span class="inline-code">purl</span> -- type the <span class="inline-code">purl</span> in the search box. <span class="is-italic">(The <span class="inline-code">type</span> dropdown does not apply to a <span class="inline-code">purl</span> search.)</span>
3744
</li>
3845
</ul>
3946
</div>
@@ -43,16 +50,19 @@
4350
</div>
4451
</div>
4552
<div class="panel-block">
46-
<div style="padding-bottom: 10px; width: 100%;">
53+
<!-- <div style="padding-bottom: 10px; width: 100%;"> -->
54+
<div class="pb-3 width-100-pct">
4755
<form action="{% url 'package_search' %}" method="get">
4856
{% load widget_tweaks %}
49-
<div class="field has-addons" style="margin: 10px 0px 0px 0px;">
57+
<!-- <div class="field has-addons" style="margin: 10px 0px 0px 0px;"> -->
58+
<div class="field has-addons mt-3">
5059
<div class="control">
5160
<div class="select">
5261
{{package_form.type}}
5362
</div>
5463
</div>
55-
<div class="control" style="width: 100%;">
64+
<!-- <div class="control" style="width: 100%;"> -->
65+
<div class="control width-100-pct">
5666
{{package_form.name|add_class:"input"}}
5767
</div>
5868
<div class="control">
@@ -64,7 +74,8 @@
6474
</form>
6575
<div>
6676
{% if package_search %}
67-
<div class="notification" style="border: solid 1px #ff9999; padding: 20px; margin-top: 20px; background-color: #ffffff; color: #ff0000; z-index: 10;">
77+
<!-- <div class="notification" style="border: solid 1px #ff9999; padding: 20px; margin-top: 20px; background-color: #ffffff; color: #ff0000; z-index: 10;"> -->
78+
<div class="notification search-alert">
6879
<button class=" delete"></button>
6980
{{ package_search }}
7081
</div>
@@ -74,28 +85,36 @@
7485
</div>
7586
</article>
7687

77-
<div style="height: 20px;"></div>
88+
<!-- <div style="height: 20px;"></div> -->
89+
<div class="pt-5"></div>
7890

7991
<article class='panel is-info'>
8092
<div class='panel-heading py-2 is-size-6'>
8193
Search for vulnerabilities
82-
<div class="dropdown is-hoverable" style="font-weight: normal;">
83-
<div class="dropdown-trigger" style="text-align: right;">
84-
<i class="fa fa-question-circle" style="font-size:20px; margin-left: 10px;"></i>
94+
<!-- <div class="dropdown is-hoverable" style="font-weight: normal;"> -->
95+
<div class="dropdown is-hoverable has-text-weight-normal">
96+
<!-- <div class="dropdown-trigger" style="text-align: right;"> -->
97+
<div class="dropdown-trigger">
98+
<!-- <i class="fa fa-question-circle" style="font-size:20px; margin-left: 10px;"></i> -->
99+
<i class="fa fa-question-circle ml-2"></i>
85100
</div>
86-
<div class="dropdown-menu" id="dropdown-menu4" role="menu" style="width: 600px;">
87-
<div class="dropdown-content" style="box-shadow: 0px 8px 16px 0px #808080;">
88-
<div class="dropdown-item" style="font-size: 14px;">
89-
<div style="margin: 0px 0px 0px 0px;">Search for comprehensive information for a <span class="inline-code01">VULCOID</span> (VulnerableCode Database ID). <span style="font-style: italic;">(Only the first of these methods requires that the input be all uppercase.)</span>
101+
<!-- <div class="dropdown-menu" id="dropdown-menu4" role="menu" style="width: 600px;"> -->
102+
<div class="dropdown-menu dropdown-instructions-width" id="dropdown-menu4" role="menu">
103+
<!-- <div class="dropdown-content" style="box-shadow: 0px 8px 16px 0px #808080;"> -->
104+
<div class="dropdown-content dropdown-instructions-box-shadow">
105+
<!-- <div class="dropdown-item" style="font-size: 14px;"> -->
106+
<div class="dropdown-item">
107+
<!-- <div style="margin: 0px 0px 0px 0px;">Search for comprehensive information for a <span class="inline-code">VULCOID</span> (VulnerableCode Database ID). <span style="font-style: italic;">(Only the first of these methods requires that the input be all uppercase.)</span> -->
108+
<div>Search for comprehensive information for a <span class="inline-code">VULCOID</span> (VulnerableCode Database ID). <span class="is-italic">(Only the first of these methods requires that the input be all uppercase.)</span>
90109
<ul>
91110
<li>
92-
Search for a specific <span class="inline-code01">VULCOID</span> (e.g., "VULCOID-1").
111+
Search for a specific <span class="inline-code">VULCOID</span> (e.g., "VULCOID-1").
93112
</li>
94113
<li>
95-
Search for all <span class="inline-code01">VULCOID</span>s that are associated with a specific <span class="inline-code01">CVE</span> (e.g., "CVE-2009-3898") or <span class="inline-code01">GHSA</span> (e.g., "GHSA-2qrg-x229-3v8q").
114+
Search for all <span class="inline-code">VULCOID</span>s that are associated with a specific <span class="inline-code">CVE</span> (e.g., "CVE-2009-3898") or <span class="inline-code">GHSA</span> (e.g., "GHSA-2qrg-x229-3v8q").
96115
</li>
97116
<li>
98-
Search for "CVE" or "GHSA" -- this will return all <span class="inline-code01">VULCOID</span>s that are associated with one or more <span class="inline-code01">CVE</span>s or <span class="inline-code01">GHSA</span>s, respectively.
117+
Search for "CVE" or "GHSA" -- this will return all <span class="inline-code">VULCOID</span>s that are associated with one or more <span class="inline-code">CVE</span>s or <span class="inline-code">GHSA</span>s, respectively.
99118
</li>
100119
</ul>
101120
</div>
@@ -105,11 +124,14 @@
105124
</div>
106125
</div>
107126
<div class="panel-block">
108-
<div style="padding-bottom: 10px; width: 100%;">
127+
<!-- <div style="padding-bottom: 10px; width: 100%;"> -->
128+
<div class="pb-3 width-100-pct">
109129
<form action="{% url 'vulnerability_search' %}" method="get">
110130
{% load widget_tweaks %}
111-
<div class="field has-addons" style="margin: 10px 0px 0px 0px;">
112-
<div class="control" style="width: 100%;">
131+
<!-- <div class="field has-addons" style="margin: 10px 0px 0px 0px;"> -->
132+
<div class="field has-addons mt-3">
133+
<!-- <div class="control" style="width: 100%;"> -->
134+
<div class="control width-100-pct">
113135
{% render_field vuln_form.vuln_id class="input"%}
114136
</div>
115137
<div class="control">
@@ -121,7 +143,8 @@
121143
</form>
122144
<div>
123145
{% if vuln_search %}
124-
<div class="notification" style="border: solid 1px #ff9999; padding: 20px; margin-top: 20px; background-color: #ffffff; color: #ff0000; z-index: 10;">
146+
<!-- <div class="notification" style="border: solid 1px #ff9999; padding: 20px; margin-top: 20px; background-color: #ffffff; color: #ff0000; z-index: 10;"> -->
147+
<div class="notification search-alert">
125148
<button class=" delete"></button>
126149
{{ vuln_search }}
127150
</div>

‎vulnerabilities/templates/navbar.html‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,6 @@
1919
</div>
2020
<div class="navbar-end mr-3">
2121
<div class="navbar-item navbar-item is-cursor-help">
22-
{% if debug_ui %}
23-
<span class="tag is-warning is-normal" style="margin-right: 20px;">{{template_name}}</span>
24-
{% endif %}
2522
<div class="dropdown is-right is-hoverable">
2623
<div class="dropdown-trigger has-text-grey-light">
2724
v{{ VULNERABLECODE_VERSION }}

0 commit comments

Comments
 (0)