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

netbox/project-static/dist/netbox.js

@@ -1206,9 +1206,11 @@ var e,t=arguments[3];!function(t,n){"object"==typeof exports&&"undefined"!=typeo
 "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./rackImages");Object.keys(e).forEach(function(r){"default"!==r&&"__esModule"!==r&&(r in exports&&exports[r]===e[r]||Object.defineProperty(exports,r,{enumerable:!0,get:function(){return e[r]}}))});
 },{"./rackImages":"stores/rackImages.ts"}],"racks.ts":[function(require,module,exports) {
 "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.initRackElevation=u;var e=require("./stores"),t=require("./util");function n(e,t){var n;if("undefined"==typeof Symbol||null==e[Symbol.iterator]){if(Array.isArray(e)||(n=r(e))||t&&e&&"number"==typeof e.length){n&&(e=n);var a=0,o=function(){};return{s:o,n:function(){return a>=e.length?{done:!0}:{done:!1,value:e[a++]}},e:function(e){throw e},f:o}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var i,l=!0,c=!1;return{s:function(){n=e[Symbol.iterator]()},n:function(){var e=n.next();return l=e.done,e},e:function(e){c=!0,i=e},f:function(){try{l||null==n.return||n.return()}finally{if(c)throw i}}}}function r(e,t){if(e){if("string"==typeof e)return a(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?a(e,t):void 0}}function a(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function o(e,t){var n=e?"Show Images":"Hide Images",r=e?"":"selected";t.setAttribute("selected",r),t.innerHTML='<i class="mdi mdi-file-image-outline"></i>&nbsp;'.concat(n)}function i(){var e,r=n((0,t.getElements)(".rack_elevation"));try{for(r.s();!(e=r.n()).done;){var a,o,i,l=n(null!==(a=null===(o=e.value.contentDocument)||void 0===o?void 0:o.querySelectorAll("image.device-image"))&&void 0!==a?a:[]);try{for(l.s();!(i=l.n()).done;){i.value.classList.remove("hidden")}}catch(c){l.e(c)}finally{l.f()}}}catch(c){r.e(c)}finally{r.f()}}function l(){var e,r=n((0,t.getElements)(".rack_elevation"));try{for(r.s();!(e=r.n()).done;){var a,o,i,l=n(null!==(a=null===(o=e.value.contentDocument)||void 0===o?void 0:o.querySelectorAll("image.device-image"))&&void 0!==a?a:[]);try{for(l.s();!(i=l.n()).done;){i.value.classList.add("hidden")}}catch(c){l.e(c)}finally{l.f()}}}catch(c){r.e(c)}finally{r.f()}}function c(e,t){var n=t.get("hidden");t.set("hidden",!n);var r=t.get("hidden");r?l():i(),o(r,e)}function u(){var r,a=e.rackImagesState.get("hidden"),u=n((0,t.getElements)("button.toggle-images"));try{for(u.s();!(r=u.n()).done;){var f=r.value;o(a,f),f.addEventListener("click",function(t){c(t.currentTarget,e.rackImagesState)},!1)}}catch(v){u.e(v)}finally{u.f()}var d,s=n((0,t.getElements)(".rack_elevation"));try{for(s.s();!(d=s.n()).done;){d.value.addEventListener("load",function(){a?l():a||i()})}}catch(v){s.e(v)}finally{s.f()}}
-},{"./stores":"stores/index.ts","./util":"util.ts"}],"netbox.ts":[function(require,module,exports) {
-"use strict";var e=require("./forms"),i=require("./bs"),r=require("./search"),t=require("./select"),n=require("./buttons"),a=require("./colorMode"),o=require("./messages"),s=require("./clipboard"),u=require("./dateSelector"),c=require("./tableConfig"),d=require("./tables"),l=require("./sidenav"),q=require("./racks");function b(){for(var b=0,f=[i.initBootstrap,a.initColorMode,o.initMessages,e.initForms,r.initSearch,t.initSelect,u.initDateSelector,n.initButtons,s.initClipboard,c.initTableConfig,d.initInterfaceTable,l.initSideNav,q.initRackElevation];b<f.length;b++){(0,f[b])()}}"loading"!==document.readyState?b():document.addEventListener("DOMContentLoaded",b);
-},{"./forms":"forms.ts","./bs":"bs.ts","./search":"search.ts","./select":"select/index.ts","./buttons":"buttons.ts","./colorMode":"colorMode.ts","./messages":"messages.ts","./clipboard":"clipboard.ts","./dateSelector":"dateSelector.ts","./tableConfig":"tableConfig.ts","./tables":"tables/index.ts","./sidenav":"sidenav.ts","./racks":"racks.ts"}],"index.ts":[function(require,module,exports) {
+},{"./stores":"stores/index.ts","./util":"util.ts"}],"links.ts":[function(require,module,exports) {
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.initLinks=o;var t=require("./util");function r(t,r){var e;if("undefined"==typeof Symbol||null==t[Symbol.iterator]){if(Array.isArray(t)||(e=n(t))||r&&t&&"number"==typeof t.length){e&&(t=e);var o=0,i=function(){};return{s:i,n:function(){return o>=t.length?{done:!0}:{done:!1,value:t[o++]}},e:function(t){throw t},f:i}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var a,u=!0,f=!1;return{s:function(){e=t[Symbol.iterator]()},n:function(){var t=e.next();return u=t.done,t},e:function(t){f=!0,a=t},f:function(){try{u||null==e.return||e.return()}finally{if(f)throw a}}}}function n(t,r){if(t){if("string"==typeof t)return e(t,r);var n=Object.prototype.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?e(t,r):void 0}}function e(t,r){(null==r||r>t.length)&&(r=t.length);for(var n=0,e=new Array(r);n<r;n++)e[n]=t[n];return e}function o(){var n,e=r((0,t.getElements)("*[data-href]"));try{var o=function(){var r=n.value,e=r.getAttribute("data-href");(0,t.isTruthy)(e)&&r.addEventListener("click",function(){window.location.assign(e)})};for(e.s();!(n=e.n()).done;)o()}catch(i){e.e(i)}finally{e.f()}}
+},{"./util":"util.ts"}],"netbox.ts":[function(require,module,exports) {
+"use strict";var e=require("./forms"),i=require("./bs"),r=require("./search"),t=require("./select"),n=require("./buttons"),a=require("./colorMode"),o=require("./messages"),s=require("./clipboard"),u=require("./dateSelector"),l=require("./tableConfig"),c=require("./tables"),d=require("./sidenav"),q=require("./racks"),b=require("./links");function f(){for(var f=0,g=[i.initBootstrap,a.initColorMode,o.initMessages,e.initForms,r.initSearch,t.initSelect,u.initDateSelector,n.initButtons,s.initClipboard,l.initTableConfig,c.initInterfaceTable,d.initSideNav,q.initRackElevation,b.initLinks];f<g.length;f++){(0,g[f])()}}"loading"!==document.readyState?f():document.addEventListener("DOMContentLoaded",f);
+},{"./forms":"forms.ts","./bs":"bs.ts","./search":"search.ts","./select":"select/index.ts","./buttons":"buttons.ts","./colorMode":"colorMode.ts","./messages":"messages.ts","./clipboard":"clipboard.ts","./dateSelector":"dateSelector.ts","./tableConfig":"tableConfig.ts","./tables":"tables/index.ts","./sidenav":"sidenav.ts","./racks":"racks.ts","./links":"links.ts"}],"index.ts":[function(require,module,exports) {
 "use strict";require("babel-polyfill"),require("@popperjs/core"),require("bootstrap"),require("simplebar"),require("./netbox");
 },{"babel-polyfill":"../node_modules/babel-polyfill/lib/index.js","@popperjs/core":"../node_modules/@popperjs/core/lib/index.js","bootstrap":"../node_modules/bootstrap/dist/js/bootstrap.esm.js","simplebar":"../node_modules/simplebar/dist/simplebar.esm.js","./netbox":"netbox.ts"}]},{},["index.ts"], null)
 //# sourceMappingURL=/static/netbox.js.map

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,10 +35,11 @@
   {# Changelog #}
   <div class="row my-4 flex-grow-1 changelog-container">
     <div class="col">
-      <h5 class="text-center">Changelog</h5>
+      <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 align-middle table-hover">
+            <table class="table table-flush align-middle table-hover">
               <thead>
                 <tr>
                   <th scope="col">User</th>
@@ -46,12 +47,11 @@
                   <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 %}">
+                  <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>
@@ -60,13 +60,7 @@
                       <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>
@@ -78,4 +72,5 @@
           {% endif %}
         </div>
     </div>
+  </div>
 {% endblock content %}