#6372: Implement table-flush styling, improve changelog layout

netbox/project-static/src/links.ts

@@ -0,0 +1,15 @@
+import { isTruthy, getElements } from './util';
+
+/**
+ * Allow any element to be made "clickable" with the use of the `data-href` attribute.
+ */
+export function initLinks() {
+  for (const link of getElements('*[data-href]')) {
+    const href = link.getAttribute('data-href');
+    if (isTruthy(href)) {
+      link.addEventListener('click', () => {
+        window.location.assign(href);
+      });
+    }
+  }
+}

netbox/project-static/src/netbox.ts

@@ -11,6 +11,7 @@ import { initTableConfig } from './tableConfig';
 import { initInterfaceTable } from './tables';
 import { initSideNav } from './sidenav';
 import { initRackElevation } from './racks';
+import { initLinks } from './links';
 
 function init() {
   for (const init of [
@@ -27,6 +28,7 @@ function init() {
     initInterfaceTable,
     initSideNav,
     initRackElevation,
+    initLinks,
   ]) {
     init();
   }

netbox/project-static/styles/netbox.scss

@@ -98,6 +98,10 @@
   margin-bottom: $spacer;
 }
 
+*[data-href] {
+  cursor: pointer;
+}
+
 // Use proper contrasting color for badge & progress-bar foreground color.
 @each $color, $value in $theme-colors {
   .badge,
@@ -114,6 +118,37 @@ table td > .progress {
   min-width: 6rem;
 }
 
+.card > .table.table-flush {
+  margin-bottom: 0;
+  overflow: hidden;
+  border-bottom-right-radius: $card-border-radius;
+  border-bottom-left-radius: $card-border-radius;
+  thead th[scope='col'] {
+    background-color: $table-flush-header-bg;
+    vertical-align: middle;
+    text-transform: uppercase;
+    padding-top: map.get($spacers, 3);
+    padding-bottom: map.get($spacers, 3);
+    border-bottom-color: $card-border-color;
+    border-top: 1px solid $card-border-color;
+  }
+  th,
+  td {
+    border-left: 0;
+    border-right: 0;
+    padding-left: map.get($spacers, 4) !important;
+    padding-right: map.get($spacers, 4) !important;
+  }
+  tr[class] {
+    border-color: $card-border-color !important;
+    &:last-of-type {
+      border-bottom-color: transparent !important;
+      border-bottom-right-radius: $card-border-radius;
+      border-bottom-left-radius: $card-border-radius;
+    }
+  }
+}
+
 span.profile-button .dropdown-menu {
   transition: opacity 0.2s ease-in-out;
   display: block !important;

netbox/project-static/styles/theme-dark.scss

@@ -63,6 +63,7 @@ $table-active-color: $table-color;
 $table-active-bg: rgba($white, $table-active-bg-factor);
 $table-hover-color: $table-color;
 $table-hover-bg: rgba($white, $table-hover-bg-factor);
+$table-flush-header-bg: $gray-700;
 
 // Buttons
 $btn-box-shadow: inset 0 1px 0 rgba($black, 0.15), 0 1px 1px rgba($white, 0.075);

netbox/project-static/styles/theme-light.scss

@@ -28,3 +28,5 @@ $code-color: $gray-900;
 
 $list-group-color: $gray-700;
 $list-group-disabled-color: $gray-500;
+
+$table-flush-header-bg: $gray-100;

netbox/templates/home.html

@@ -35,47 +35,42 @@
   {# Changelog #}
   <div class="row my-4 flex-grow-1 changelog-container">
     <div class="col">
-      <h5 class="text-center">Changelog</h5>
-      {% if changelog and perms.extras.view_objectchange %}
-        {# TODO: Replace this with a django-tables2 Table #}
-        <table class="table align-middle table-hover">
-          <thead>
-            <tr>
-              <th scope="col">User</th>
-              <th scope="col">Action</th>
-              <th scope="col">Type</th>
-              <th scope="col">Object</th>
-              <th scope="col">Time</th>
-              <th scope="col" align="right"></th>
-            </tr>
-          </thead>
-          <tbody>
-            {% for change in changelog %}
-              <tr class="{% get_status change.get_action_display %}">
-                <th scope="row">{{ change.user|default:change.user_name }}</th>
-                <td>{{ change.get_action_display|bettertitle }}</td>
-                <td>{{ change.changed_object_type.name|bettertitle }}</td>
-                <td>
-                  {% if change.changed_object.get_absolute_url %}
-                  <a class="text-body" href="{{ change.changed_object.get_absolute_url }}">{{ change.changed_object }}</a>
-                  {% else %} {{ change.changed_object|default:change.object_repr }} {% endif %}
-                </td>
-
-                <td>{{ change.time|date:'SHORT_DATETIME_FORMAT' }}</td>
-                <td>
-                  <a role="button" class="text-body" href="{{ change.get_absolute_url }}">
-                    <i class="mdi mdi-dots-horizontal" data-bs-toggle="tooltip" data-bs-placement="left" title="View Change Details"></i>
-                  </a>
-                </td>
-              </tr>
-            {% endfor %}
-          </tbody>
-        </table>
-      {% elif perms.extras.view_objectchange %}
-        <div class="alert alert-secondary mt-4" role="alert">
-          No change history found.
+      <div class="card">
+        <h6 class="card-header text-primary text-center">Changelog</h6>
+          {% if changelog and perms.extras.view_objectchange %}
+            {# TODO: Replace this with a django-tables2 Table #}
+            <table class="table table-flush align-middle table-hover">
+              <thead>
+                <tr>
+                  <th scope="col">User</th>
+                  <th scope="col">Action</th>
+                  <th scope="col">Type</th>
+                  <th scope="col">Object</th>
+                  <th scope="col">Time</th>
+                </tr>
+              </thead>
+              <tbody>
+                {% for change in changelog %}
+                  <tr class="{% get_status change.get_action_display %}" data-href="{{ change.get_absolute_url }}">
+                    <th scope="row">{{ change.user|default:change.user_name }}</th>
+                    <td>{{ change.get_action_display|bettertitle }}</td>
+                    <td>{{ change.changed_object_type.name|bettertitle }}</td>
+                    <td>
+                      {% if change.changed_object.get_absolute_url %}
+                      <a class="text-body" href="{{ change.changed_object.get_absolute_url }}">{{ change.changed_object }}</a>
+                      {% else %} {{ change.changed_object|default:change.object_repr }} {% endif %}
+                    </td>
+                    <td>{{ change.time|date:'SHORT_DATETIME_FORMAT' }}</td>
+                  </tr>
+                {% endfor %}
+              </tbody>
+            </table>
+          {% elif perms.extras.view_objectchange %}
+            <div class="alert alert-secondary mt-4" role="alert">
+              No change history found.
+            </div>
+          {% endif %}
         </div>
-      {% endif %}
     </div>
   </div>
 {% endblock content %}