starred/netbox
1
0
Fork 0
mirror of https://github.com/netbox-community/netbox.git synced 2026-04-01 07:03:22 +02:00
Code Issues 273 Packages Projects Releases 10 Wiki Activity

refactor(ui): Improve object change diff styling and layout

Browse Source 
Update change data diff styling with CSS custom properties, better color
contrast, and consistent borders. Replace btn-group with card-actions
for navigation buttons and improve spacing.
This commit is contained in:
Martin Hauser
2026-03-30 19:06:02 +02:00
committed by Jeremy Stretch
parent 0923a3dec8
commit c99d8481b2
3 changed files with 21 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
netbox/project-static/dist/netbox.css vendored
View File

File diff suppressed because one or more lines are too long

30
netbox/project-static/styles/custom/_code.scss
View File

@@ -1,46 +1,50 @@
@use 'sass:map';
// Serialized data from change records
pre.change-data {
border-radius: 0;
padding: 0;
// Remove card-body padding
margin-inline: -0.75rem;
// Display each line individually for highlighting
> span {
display: block;
padding-right: $spacer;
padding-left: $spacer;
width: 100%;
padding-inline: map.get($spacers, 2);
max-width: 100%;
min-width: fit-content;
border-left: map.get($spacers, 1) solid transparent;
&.added {
color: var(--tblr-dark);
background-color: $green-300;
background-color: var(--tblr-green-200);
border-left-color: var(--tblr-green-darken);
}
&.removed {
color: var(--tblr-dark);
background-color: $red-300;
background-color: var(--tblr-red-200);
border-left-color: var(--tblr-red-darken);
}
}
}
// Change data diff w/added & removed data
pre.change-diff {
border-color: transparent;
border: var(--tblr-border-width) solid transparent;
&.change-added {
color: var(--tblr-dark);
background-color: $green-300;
background-color: var(--tblr-green-lt);
border-color: var(--tblr-green);
}
&.change-removed {
color: var(--tblr-dark);
background-color: $red-300;
background-color: var(--tblr-red-lt);
border-color: var(--tblr-red);
}
}
// <pre> elements displayed with a border
pre.block {
padding: $spacer;
border: 1px solid $border-color;
border: var(--tblr-border-width) solid $border-color;
border-radius: $border-radius;
}

6
netbox/templates/core/panels/objectchange_difference.html
View File

@@ -3,11 +3,11 @@
<div class="card">
<h2 class="card-header d-flex justify-content-between">
{% trans "Difference" %}
<div class="btn-group btn-group-sm d-print-none">
<a {% if prev_change %}href="{% url 'core:objectchange' pk=prev_change.pk %}"{% else %}disabled{% endif %} class="btn btn-outline-secondary">
<div class="card-actions">
<a {% if prev_change %}href="{% url 'core:objectchange' pk=prev_change.pk %}"{% else %}disabled{% endif %} class="btn btn-ghost-primary btn-sm">
<i class="mdi mdi-chevron-left" aria-hidden="true"></i> {% trans "Previous" %}
</a>
<a {% if next_change %}href="{% url 'core:objectchange' pk=next_change.pk %}"{% else %}disabled{% endif %} class="btn btn-outline-secondary">
<a {% if next_change %}href="{% url 'core:objectchange' pk=next_change.pk %}"{% else %}disabled{% endif %} class="btn btn-ghost-primary btn-sm">
{% trans "Next" %} <i class="mdi mdi-chevron-right" aria-hidden="true"></i>
</a>
</div>