fix: Long links within tables (#3724)

Co-authored-by: Jan Klopper <[email protected]> Co-authored-by: stephanie0x00 <[email protected]> Co-authored-by: Rieven <[email protected]>
minvws · Nov 7, 2024 · 50ee773 · 50ee773
1 parent 4c6e8c5
commit 50ee773
Show file tree

Hide file tree

Showing 29 changed files with 280 additions and 242 deletions.
diff --git a/rocky/assets/css/components/sticky-column.scss b/rocky/assets/css/components/sticky-column.scss
@@ -0,0 +1,14 @@
+.sticky-column {
+  max-width: 100%;
+  position: relative;
+
+  .sticky-cell {
+    position: sticky;
+    right: 0;
+    background-color: #ffffff;
+  }
+
+  tr.expanded-row .sticky-cell {
+    background-color: var(--expando-rows-row-background-color);
+  }
+}
diff --git a/rocky/assets/css/components/table-state-icons.scss b/rocky/assets/css/components/table-state-icons.scss
@@ -17,6 +17,10 @@ table td .icon {
     padding: 0;
     margin: 0;
     width: unset;
+
+    &::before {
+      margin-left: 0;
+    }
   }
 
   &.warning {

diff --git a/rocky/assets/css/components/table.scss b/rocky/assets/css/components/table.scss
@@ -2,6 +2,7 @@ td,
 tr {
   .icon {
     margin-right: 0.5rem;
+    float: unset;
   }
 
   &.confirmation {
@@ -65,19 +66,31 @@ tr {
   }
 }
 
-table.nowrap {
-  th,
-  td {
-    a {
-      white-space: inherit;
-    }
-  }
-}
-
 /* table alignment within table expando row */
 table tr.expando-row td {
   table td {
     background-color: var(--application-base-background-color);
     padding: var(--table-cell-padding);
   }
 }
+
+table:not(.nowrap) tbody td:not(.nowrap) {
+  a {
+    line-break: break-all;
+    display: inline-block; /* Needed to be able to use max-width */
+    max-width: 20rem;
+  }
+
+  vertical-align: top;
+
+  /* Added spacing to align with text */
+  .level-indicator {
+    padding-top: 0.25rem;
+  }
+}
+
+div.horizontal-scroll.nowrap tbody td,
+table.nowrap tbody td,
+table tbody td.nowrap {
+  vertical-align: middle;
+}
diff --git a/rocky/assets/css/main.scss b/rocky/assets/css/main.scss
@@ -66,6 +66,7 @@
 @import "components/state-tag";
 @import "components/stepper";
 @import "components/sticky";
+@import "components/sticky-column";
 @import "components/state-tags";
 @import "components/table";
 @import "components/toggle";

diff --git a/rocky/assets/css/themes/soft/manon/icon.scss b/rocky/assets/css/themes/soft/manon/icon.scss
@@ -4,3 +4,8 @@
   --icon-font-family: "tabler-icons";
   --icon-font-size: 1.3rem;
 }
+
+.icon,
+.icon-only {
+  font-weight: normal;
+}
diff --git a/rocky/assets/css/themes/soft/manon/table.scss b/rocky/assets/css/themes/soft/manon/table.scss
@@ -79,15 +79,19 @@ table {
   }
 }
 
-/* Setting the width of table cells with an action button to the possible minimum width */
 table.action-buttons .actions {
-  width: 1px;
-
   a,
   a.button,
   button {
     &.icon::before {
       font-weight: normal;
     }
+
+    margin: 0 auto;
   }
 }
+
+table .actions {
+  padding: 0;
+  text-align: center;
+}
diff --git a/rocky/assets/css/vendor_overrides/manon/table.scss b/rocky/assets/css/vendor_overrides/manon/table.scss
@@ -2,10 +2,8 @@
 
 table i.icon,
 table span.icon {
-  float: left;
-
   &::before {
-    display: block;
+    display: inline-block;
     line-height: 1.25;
   }
 }
diff --git a/rocky/katalogus/templates/partials/plugins.html b/rocky/katalogus/templates/partials/plugins.html
@@ -2,7 +2,7 @@
 {% load static %}
 
 {% if view_type == "table" %}
-    <div class="horizontal-scroll">
+    <div class="horizontal-scroll sticky-column">
         <table class="plugins">
             <caption>{% translate "Plugins overview:" %}</caption>
             <thead>
@@ -12,16 +12,15 @@
                         <th>{% translate "Plugin type" %}</th>
                     {% endif %}
                     <th>{% translate "Plugin description" %}</th>
-                    <th colspan="2">{% translate "Actions" %}</th>
+                    <th>{% translate "Actions" %}</th>
+                    <th class="visually-hidden">{% translate "Detail page" %}</th>
                 </tr>
             </thead>
             <tbody>
                 {% for plugin in object_list %}
                     <tr id="plugin_{{ plugin.id|slugify }}">
                         <td scope="row">
-                            <span class="plugin-title">
-                                <strong>{{ plugin.name }}</strong>
-                            </span>
+                            <a href="{% url "boefje_detail" organization_code=organization.code plugin_id=plugin.id %}">{{ plugin.name }}</a>
                         </td>
                         {% if active == "all" %}
                             <td scope="row">
@@ -37,13 +36,19 @@
                             {% include "partials/enable_disable_plugin.html" with plugin=plugin %}
 
                         </td>
-                        <td>
+                        <td class="sticky-cell">
                             {% if plugin.scan_level != None %}
                                 <a href="{% url "boefje_detail" organization_code=organization.code plugin_id=plugin.id %}"
-                                   class="nowrap">{% translate "See details" %}</a>
+                                   class="nowrap icon-only">
+                                    {% translate "Detail page" %}
+                                    <span class="icon ti-chevron-right" aria-hidden="true"></span>
+                                </a>
                             {% else %}
                                 <a href="{% url "normalizer_detail" organization_code=organization.code plugin_id=plugin.id %}"
-                                   class="nowrap">{% translate "See details" %}</a>
+                                   class="nowrap icon-only">
+                                    {% translate "Detail page" %}
+                                    <span class="icon ti-chevron-right" aria-hidden="true"></span>
+                                </a>
                             {% endif %}
                         </td>
                     </tr>

diff --git a/rocky/reports/report_types/dns_report/report.html b/rocky/reports/report_types/dns_report/report.html
@@ -125,14 +125,14 @@ <h3>{% translate "Security measures" %}</h3>
 </div>
 {% if data.finding_types %}
     <h3>{% translate "Other findings found" %}</h3>
-    <div class="horizontal-scroll">
-        <table>
+    <div class="horizontal-scroll sticky-column">
+        <table class="nowrap">
             <caption class="visually-hidden">{% translate "Other findings found" %}</caption>
             <thead>
                 <tr>
                     <th scope="col">{% translate "Severity" %}</th>
                     <th scope="col">{% translate "Finding" %}</th>
-                    <th scope="col">{% translate "Details" %}</th>
+                    <th scope="col" class="actions">{% translate "Details" %}</th>
                 </tr>
             </thead>
             <tbody>
@@ -142,7 +142,7 @@ <h3>{% translate "Other findings found" %}</h3>
                             <span class="{{ info.finding_type.risk_severity }}">{{ info.finding_type.risk_severity|capfirst }}</span>
                         </td>
                         <td>{{ info.finding_type.id }}</td>
-                        <td class="actions">
+                        <td class="actions sticky-cell">
                             <button class="expando-button"
                                     data-icon-open-class="icon ti-chevron-down"
                                     data-icon-close-class="icon ti-chevron-up"

diff --git a/rocky/reports/report_types/findings_report/report.html b/rocky/reports/report_types/findings_report/report.html
@@ -17,15 +17,15 @@
         {% include "partials/report_severity_totals_table.html" with data=data.summary %}
 
         <h3>{% translate "Findings" %}</h3>
-        <div class="horizontal-scroll">
-            <table>
+        <div class="horizontal-scroll sticky-column">
+            <table class="nowrap">
                 <caption class="visually-hidden">{% translate "Other findings found" %}</caption>
                 <thead>
                     <tr>
                         <th scope="col">{% translate "Finding" %}</th>
                         <th scope="col">{% translate "Risk level" %}</th>
                         <th scope="col">{% translate "Occurrences" %}</th>
-                        <th scope="col">{% translate "Details" %}</th>
+                        <th scope="col" class="visually-hidden actions">{% translate "Details" %}</th>
                     </tr>
                 </thead>
                 <tbody>
@@ -36,7 +36,7 @@ <h3>{% translate "Findings" %}</h3>
                                 <span class="{{ info.finding_type.risk_severity }}">{{ info.finding_type.risk_severity|capfirst }}</span>
                             </td>
                             <td>{{ info.occurrences|length }}</td>
-                            <td class="actions">
+                            <td class="actions sticky-cell">
                                 <button class="expando-button"
                                         data-icon-open-class="icon ti-chevron-down"
                                         data-icon-close-class="icon ti-chevron-up"

diff --git a/rocky/reports/report_types/vulnerability_report/report.html b/rocky/reports/report_types/vulnerability_report/report.html
@@ -20,15 +20,15 @@ <h3>{% translate "Host:" %} {{ ip|human_readable }} {{ vulnerability_data.hostna
             <p>
                 <strong>{{ vulnerability_data.summary.total_findings }}</strong> {% translate "vulnerabilities on this system" %}
             </p>
-            <div class="horizontal-scroll">
-                <table>
+            <div class="horizontal-scroll sticky-column">
+                <table class="nowrap">
                     <caption class="visually-hidden">{% translate "Vulnerabilities" %}</caption>
                     <thead>
                         <tr>
                             <th scope="col">{% translate "Vulnerabilities" %}</th>
                             <th scope="col">{% translate "Risk level" %}</th>
                             <th scope="col">{% translate "Occurrences" %}</th>
-                            <th scope="col">{% translate "Details" %}</th>
+                            <th scope="col" class="visually-hidden actions">{% translate "Details" %}</th>
                         </tr>
                     </thead>
                     <tbody>
@@ -39,7 +39,7 @@ <h3>{% translate "Host:" %} {{ ip|human_readable }} {{ vulnerability_data.hostna
                                     <span class="{{ vulnerability.cvss.class }}">{{ vulnerability.cvss.risk_level }}</span>
                                 </td>
                                 <td>{{ vulnerability.occurrences }}</td>
-                                <td class="actions">
+                                <td class="actions sticky-cell">
                                     <button class="expando-button"
                                             data-icon-open-class="icon ti-chevron-down"
                                             data-icon-close-class="icon ti-chevron-up"

diff --git a/rocky/reports/templates/partials/plugin_overview_table.html b/rocky/reports/templates/partials/plugin_overview_table.html
@@ -18,22 +18,20 @@ <h3>{% translate "Overview" %}</h3>
                     <td>{{ report_type }}</td>
                     <td>
                         {% if data.number_of_enabled_required != data.number_of_available_required %}
-                            <span class="icon warning"></span>{% translate "Action required" %}
+                            <span class="icon warning" aria-hidden="true"></span>{% translate "Action required" %}
                         {% else %}
-                            <span class="icon positive"></span>{% translate "Ready" %}
+                            <span class="icon confirmation"></span>{% translate "Ready" %}
                         {% endif %}
                     </td>
                     <td>
                         {% if data.number_of_available_required > 0 and data.number_of_enabled_required != data.number_of_available_required %}
                             <span class="icon warning"></span>
                         {% else %}
-                            <span class="icon positive"></span>
+                            <span class="icon confirmation"></span>
                         {% endif %}
                         {{ data.number_of_enabled_required }}/{{ data.number_of_available_required }}
                     </td>
-                    <td>
-                        <span class="icon positive"></span>{{ data.number_of_enabled_optional }}/{{ data.number_of_available_optional }}
-                    </td>
+                    <td>{{ data.number_of_enabled_optional }}/{{ data.number_of_available_optional }}</td>
                 </tr>
             {% endfor %}
             <tfoot>
@@ -43,20 +41,18 @@ <h3>{% translate "Overview" %}</h3>
                         {% if plugin_data.total_enabled_plugins.required != plugin_data.total_available_plugins.required %}
                             <span class="icon warning"></span>{% translate "Action required" %}
                         {% else %}
-                            <span class="icon positive"></span>{% translate "Ready" %}
+                            <span class="icon confirmation"></span>{% translate "Ready" %}
                         {% endif %}
                     </td>
                     <td>
                         {% if plugin_data.total_available_plugins.required > 0 and plugin_data.total_enabled_plugins.required != plugin_data.total_available_plugins.required %}
                             <span class="icon warning"></span>
                         {% else %}
-                            <span class="icon positive"></span>
+                            <span class="icon confirmation"></span>
                         {% endif %}
                         {{ plugin_data.total_enabled_plugins.required }}/{{ plugin_data.total_available_plugins.required }}
                     </td>
-                    <td>
-                        <span class="icon positive"></span>{{ plugin_data.total_enabled_plugins.optional }}/{{ plugin_data.total_available_plugins.optional }}
-                    </td>
+                    <td>{{ plugin_data.total_enabled_plugins.optional }}/{{ plugin_data.total_available_plugins.optional }}</td>
                 </tr>
             </tfoot>
         </tbody>

diff --git a/rocky/reports/templates/partials/report_ooi_list.html b/rocky/reports/templates/partials/report_ooi_list.html
@@ -60,40 +60,42 @@ <h2>
                     {% include "forms/report_form_fields.html" with disable_ooi_selection_fields=True %}
 
                 {% endif %}
-                <table>
-                    <caption class="visually-hidden">{% translate "Objects" %}</caption>
-                    <thead>
-                        <th>
-                            <input class="select_all_objects_element"
-                                   type="checkbox"
-                                   {% if all_oois_selected %}checked{% endif %}>
-                        </th>
-                        <th>{% translate "Object" %}</th>
-                        <th>{% translate "Type" %}</th>
-                        <th>{% translate "Clearance level" %}</th>
-                        <th>{% translate "Clearance type" %}</th>
-                    </thead>
-                    <tbody>
-                        {% for object in ooi_list %}
-                            <tr>
-                                <td>
-                                    <input type="checkbox"
-                                           name="ooi"
-                                           value="{{ object.primary_key }}"
-                                           {% if object.primary_key in selected_oois or all_oois_selected %}checked{% endif %}
-                                           {% if all_oois_selected %}disabled{% endif %}>
-                                </td>
-                                <td>{{ object.human_readable }}</td>
-                                <td>{{ object.ooi_type }}</td>
-                                <td>
-                                    {% include "partials/scan_level_indicator.html" with value=object.scan_profile.level.value %}
+                <div class="horizontal-scroll">
+                    <table>
+                        <caption class="visually-hidden">{% translate "Objects" %}</caption>
+                        <thead>
+                            <th>
+                                <input class="select_all_objects_element"
+                                       type="checkbox"
+                                       {% if all_oois_selected %}checked{% endif %}>
+                            </th>
+                            <th>{% translate "Object" %}</th>
+                            <th>{% translate "Type" %}</th>
+                            <th>{% translate "Clearance level" %}</th>
+                            <th>{% translate "Clearance type" %}</th>
+                        </thead>
+                        <tbody>
+                            {% for object in ooi_list %}
+                                <tr>
+                                    <td>
+                                        <input type="checkbox"
+                                               name="ooi"
+                                               value="{{ object.primary_key }}"
+                                               {% if object.primary_key in selected_oois or all_oois_selected %}checked{% endif %}
+                                               {% if all_oois_selected %}disabled{% endif %}>
+                                    </td>
+                                    <td>{{ object.human_readable }}</td>
+                                    <td>{{ object.ooi_type }}</td>
+                                    <td>
+                                        {% include "partials/scan_level_indicator.html" with value=object.scan_profile.level.value %}
 
-                                </td>
-                                <td>{{ object.scan_profile.scan_profile_type|title }}</td>
-                            </tr>
-                        {% endfor %}
-                    </tbody>
-                </table>
+                                    </td>
+                                    <td>{{ object.scan_profile.scan_profile_type|title }}</td>
+                                </tr>
+                            {% endfor %}
+                        </tbody>
+                    </table>
+                </div>
                 <button type="submit" class="button">
                     {% translate "Continue with selection" %}<span class="icon ti-chevron-right"></span>
                 </button>