Add sticky div to Package details template #1263

Reference: #1263 Signed-off-by: John M. Horan <johnmhoran@gmail.com>
aboutcode-org · Sep 7, 2023 · 6ac6062 · 6ac6062
1 parent 2800d6a
commit 6ac6062
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git a/vulnerabilities/templates/package_details.html b/vulnerabilities/templates/package_details.html
@@ -20,11 +20,11 @@
                 </div>
             </article>
 
-            <div class="pl-3 pr-3 mb-5">
+            <div class="pl-3 pr-3 mb-5 floating-purl">
                 <table class="table vcio-table width-100-pct mt-2">
                     <tbody>
                         <tr>
-                            <td class="two-col-left">
+                            <td class="two-col-left" style="width: 175px;">
                                 <span
                                     class="has-tooltip-multiline has-tooltip-black has-tooltip-arrow has-tooltip-text-left"
                                     data-tooltip="The package url or purl is a URL string used to identify and locate a software package."

diff --git a/vulnerablecode/static/css/custom.css b/vulnerablecode/static/css/custom.css
@@ -367,3 +367,19 @@ a.small_page_button {
 span.tag.custom {
     margin: 0px 0px 6px 10px;
 }
+
+/* Floating container to display the PURL on the Package details page as the user scrolls down. */
+.floating-purl {
+    position: sticky;
+    top: 0;
+    width: 100%;
+    z-index: 100;
+    margin-bottom: 0px;
+}
+
+.floating-purl .table td,
+.floating-purl .table tbody tr:last-child td,
+.floating-purl .table th {
+    border: solid 1px #dbdbdb;
+    background-color: #ffffff;
+}