From 5e1e1a9afa173afc90836f4fe642583370e30655 Mon Sep 17 00:00:00 2001 From: Jeremy Stretch Date: Fri, 12 Jan 2024 14:48:03 -0500 Subject: [PATCH] Misc cleanup of old styling --- netbox/project-static/dist/netbox.css | Bin 544733 -> 545307 bytes .../project-static/styles/custom/_misc.scss | 30 +++ netbox/project-static/styles/netbox.scss | 1 + netbox/project-static/styles/old/netbox.scss | 249 +----------------- .../styles/transitional/_progress.scss | 3 + .../styles/transitional/_tables.scss | 11 + netbox/templates/dcim/device.html | 6 +- .../templates/dcim/virtualchassis_edit.html | 4 +- .../extras/inc/configcontext_data.html | 2 +- 9 files changed, 53 insertions(+), 253 deletions(-) create mode 100644 netbox/project-static/styles/transitional/_progress.scss diff --git a/netbox/project-static/dist/netbox.css b/netbox/project-static/dist/netbox.css index 1848ac4926fc62e1985465e730c62afadeee857c..c67d4ae29eac4f7b8fe640c49d150e77a01491a6 100644 GIT binary patch delta 600 zcmb7?&r8EF6vx^8RlEoyp0f>)9qsfW8F~^y*e+hxL)xTkG)+qSV3jiFA^*b;9=xc3 zfgtz?_+NPQ4>9X1IN3mR{PI4Zm-mv7hsOP5~Zvu4)K#*6dZo1DMZcD4ed ziF7M2#)7Pc1lEgZ{yrl0cRaGk!xmqUB{Mqdt*?VNrbo0u56 E0JDA&GXMYp diff --git a/netbox/project-static/styles/custom/_misc.scss b/netbox/project-static/styles/custom/_misc.scss index c219564cd..e80bccd61 100644 --- a/netbox/project-static/styles/custom/_misc.scss +++ b/netbox/project-static/styles/custom/_misc.scss @@ -7,3 +7,33 @@ span.color-label { border: 1px solid #303030; border-radius: $border-radius; } + +// Rendered Markdown +.rendered-markdown { + + table { + width: 100%; + + // Apply a border + th { + border-bottom: 2px solid #dddddd; + padding: 8px; + } + td { + border-top: 1px solid #dddddd; + padding: 8px; + } + + // Map "align" attr of column headings + th[align="left"] { + text-align: left; + } + th[align="center"] { + text-align: center; + } + th[align="right"] { + text-align: right; + } + } + +} diff --git a/netbox/project-static/styles/netbox.scss b/netbox/project-static/styles/netbox.scss index c2fa14bf9..bc458bd66 100644 --- a/netbox/project-static/styles/netbox.scss +++ b/netbox/project-static/styles/netbox.scss @@ -12,6 +12,7 @@ @import 'transitional/cards'; @import 'transitional/layout'; @import 'transitional/navigation'; +@import 'transitional/progress'; @import 'transitional/tables'; @import 'transitional/tabs'; diff --git a/netbox/project-static/styles/old/netbox.scss b/netbox/project-static/styles/old/netbox.scss index b1505e5d3..c11a3678b 100644 --- a/netbox/project-static/styles/old/netbox.scss +++ b/netbox/project-static/styles/old/netbox.scss @@ -5,229 +5,7 @@ //@import './sidenav'; @import './overrides'; @import './utilities'; -@import './variables'; - -@each $color, $value in $theme-colors { - // Override CSS values on each theme color. - - // Use Bootstrap's method of coloring alert links to appropriately color close buttons within - // another colored element. - // See: https://github.com/twbs/bootstrap/blob/2bdbb42dcf6bfb99b5e9e5444d9e64589eb8c08f/scss/_alert.scss#L50-L52 - // See: https://github.com/twbs/bootstrap/blob/2bdbb42dcf6bfb99b5e9e5444d9e64589eb8c08f/scss/_close.scss#L12 - $shifted-bg: shift-color($value, $alert-bg-scale); - $shifted-color: shift-color($value, $alert-color-scale); - - @if (contrast-ratio($shifted-bg, $shifted-color) < $min-contrast-ratio) { - $shifted-color: mix($value, color-contrast($shifted-bg), abs($alert-color-scale)); - } - - $btn-close-bg: url("data:image/svg+xml,"); - .bg-#{$color} button.btn-close { - background: transparent escape-svg($btn-close-bg) center / $btn-close-width auto no-repeat; - } - - .btn.btn-ghost-#{$color} { - color: $value; - &:hover { - background-color: rgba($value, 0.12); - } - } - - // Use Bootstrap's method of coloring the .alert-link class automatically. - // See: https://github.com/twbs/bootstrap/blob/2bdbb42dcf6bfb99b5e9e5444d9e64589eb8c08f/scss/_alert.scss#L50-L52 - - .alert.alert-#{$color}, - .table-#{$color} { - // Exclude buttons. - a:not(.btn) { - font-weight: $font-weight-bold; - color: $shifted-color; - } - // Apply a border to buttons contained within colored elements, if they're not already a - // bordered button class. - .btn:not([class*='btn-outline']) { - border-color: $gray-700; - } - } - - // Toasts required a slightly different approach because the background color isn't "shifted", - // it's the direct theme color. - .toast.bg-#{$color} { - $shifted-color: shift-color($value, $alert-color-scale); - - @if (contrast-ratio($value, $shifted-color) < $min-contrast-ratio) { - $shifted-color: mix($value, color-contrast($value), abs($alert-color-scale)); - } - a:not(.btn) { - font-weight: $font-weight-bold; - color: $shifted-color; - } - } - - // Use proper contrasting color foreground color for special components. - .badge, - .toast, - .toast-header, - .progress-bar { - &.bg-#{$color} { - color: color-contrast($value); - } - } -} - -// Ensure progress bars (utilization graph) in tables aren't too narrow to display the percentage. -table td > .progress { - min-width: 6rem; -} - -// Override Bootstrap form-control font-size when contained by .small element. -.small .form-control { - font-size: $font-size-sm; -} - -// Automatically space out adjacent columns, but not within card bodies. -:not(.card-body) > .col:not(:last-child):not(:only-child) { - margin-bottom: $spacer; -} - -.nav-mobile { - display: none; - flex-direction: column; - align-items: center; - justify-content: space-between; - width: 100%; - - @include media-breakpoint-down(lg) { - display: flex; - } - - .nav-mobile-top { - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; - } -} - -.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'] { - padding-top: map.get($spacers, 3); - padding-bottom: map.get($spacers, 3); - text-transform: uppercase; - vertical-align: middle; - background-color: $table-flush-header-bg; - border-top: 1px solid $card-border-color; - border-bottom-color: $card-border-color; - } - - th, - td { - padding-right: map.get($spacers, 4) !important; - padding-left: map.get($spacers, 4) !important; - border-right: 0; - border-left: 0; - } - 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; - } - } -} - -.alert { - code { - color: $gray-600; - } -} - -table { - td { - a { - text-decoration: none; - &:hover { - text-decoration: underline; - } - } - .dropdown { - // Presence of 'overflow: scroll' on a table causes dropdowns to be improperly hidden when - // opened. See: https://github.com/twbs/bootstrap/issues/24251 - position: static; - } - } - th { - a, - a:hover { - color: $body-color; - text-decoration: none; - } - } - - td, - th { - font-size: $font-size-sm; - line-height: $line-height-sm; - vertical-align: middle; - &.min-width { - width: 1%; - } - .form-check-input { - // Ensure checkboxes aren't too small inside object tables. - margin-top: 0.125em; - font-size: $font-size-base; - } - - .btn-sm { - line-height: $line-height-xs; - } - - p { - // Remove spacing from paragraph elements within tables. - margin-bottom: 0.5em; - } - - p:last-child { - margin-bottom: 0; - } - } - - th.asc > a::after { - content: '\f0140'; - font-family: 'Material Design Icons'; - } - - th.desc > a::after { - content: '\f0143'; - font-family: 'Material Design Icons'; - } - - &.table > :not(caption) > * > * { - padding-right: $table-cell-padding-x-sm !important; - padding-left: $table-cell-padding-x-sm !important; - } - - &.object-list { - th { - font-size: $font-size-xs; - line-height: $line-height-xs; - vertical-align: bottom; - } - } - - &.attr-table { - th { - font-weight: normal; - width: 25%; - } - } -} +//@import './variables'; // Object list control buttons (Add/Clone/Import/Export) .controls { @@ -827,31 +605,6 @@ div.card-overlay { max-width: unset; } -/* Rendered Markdown */ -.rendered-markdown table { - width: 100%; -} -.rendered-markdown th { - border-bottom: 2px solid #dddddd; - padding: 8px; -} -.rendered-markdown td { - border-top: 1px solid #dddddd; - padding: 8px; -} - -th[align="left"] { - text-align: left; -} - -th[align="center"] { - text-align: center; -} - -th[align="right"] { - text-align: right; -} - /* Markdown widget */ .markdown-widget { .nav-link { diff --git a/netbox/project-static/styles/transitional/_progress.scss b/netbox/project-static/styles/transitional/_progress.scss new file mode 100644 index 000000000..b128a81db --- /dev/null +++ b/netbox/project-static/styles/transitional/_progress.scss @@ -0,0 +1,3 @@ +.progress, .progress-bar { + height: 20px; +} diff --git a/netbox/project-static/styles/transitional/_tables.scss b/netbox/project-static/styles/transitional/_tables.scss index 1ddc81cf0..af1ea81bd 100644 --- a/netbox/project-static/styles/transitional/_tables.scss +++ b/netbox/project-static/styles/transitional/_tables.scss @@ -6,6 +6,16 @@ table.object-list { border-bottom-width: 0; } + // Append up/down arrow to header of column used for sorting + th.asc > a::after { + content: '\f0140'; + font-family: 'Material Design Icons'; + } + th.desc > a::after { + content: '\f0143'; + font-family: 'Material Design Icons'; + } + } // Object attribute tables @@ -15,6 +25,7 @@ table.attr-table { th { color: $gray-700; font-weight: normal; + width: min-content; } // Restyle row border diff --git a/netbox/templates/dcim/device.html b/netbox/templates/dcim/device.html index b725b69ec..1e5acedb2 100644 --- a/netbox/templates/dcim/device.html +++ b/netbox/templates/dcim/device.html @@ -244,13 +244,15 @@
{% trans "Power Utilization" %}
- + + - + + {% for powerport in object.powerports.all %} {% with utilization=powerport.get_power_draw powerfeed=powerport.connected_endpoints.0 %} diff --git a/netbox/templates/dcim/virtualchassis_edit.html b/netbox/templates/dcim/virtualchassis_edit.html index 3de269d7a..fcdb47874 100644 --- a/netbox/templates/dcim/virtualchassis_edit.html +++ b/netbox/templates/dcim/virtualchassis_edit.html @@ -77,13 +77,13 @@
{% trans "Input" %} {% trans "Outlets" %} {% trans "Allocated" %} {% trans "Available" %} {% trans "Utilization" %}
{{ form.vc_position }} {% if form.vc_position.errors %} -
{{ form.vc_position.errors.0 }} + {{ form.vc_position.errors.0 }} {% endif %} 		{{ form.vc_priority }} {% if form.vc_priority.errors %} -
{{ form.vc_priority.errors.0 }} + {{ form.vc_priority.errors.0 }} {% endif %} 		diff --git a/netbox/templates/extras/inc/configcontext_data.html b/netbox/templates/extras/inc/configcontext_data.html index a19ec1c96..27a966cd5 100644 --- a/netbox/templates/extras/inc/configcontext_data.html +++ b/netbox/templates/extras/inc/configcontext_data.html @@ -1,5 +1,5 @@ {% load helpers %} -
+
{% if format == 'json' %}{{ data|json }}{% elif format == 'yaml' %}{{ data|yaml }}{% else %}{{ data }}{% endif %}