#6372: Implement table-flush styling, improve changelog layout
This commit is contained in:
checktheroads
parent
6b88ed0321
commit
bfb1b6ac0a
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -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> '.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
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -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);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
|
|
|||
Loading…
Reference in New Issue