v4.0 UI cleanup

[jeremystretch]

Proposed Changes

This issue serves to track miscellaneous cleanup work following the UI refresh in #12128 for NetBox v4.0. It will be kept open for a while as we continue to uncover and address minor UI issues. (Note that this issue is not a suitable place for proposing any new functionality or otherwise substantial UI changes.)

Please add any new items in a comment below (including a screenshot where helpful), and it will be added here.

• Restyle login form
• Fix styling of nav pills
• Markdown form fields should use monospaced font
• Fix header wrapping w/large number of buttons (e.g. aggregate prefixes view)
• Fix styling of paginator for CustomFieldChoicesSet choices
• Fix preview tab styling for comments fields
• Fix empty text for related changes under ObjectChange view
• Add padding between dark mode toggle and login button in top menu
• Audit for unused templates
• Reduce vertical space between a checkbox field and its help text
• Remove ghost shadow from hidden "clear" button on quick search
• Active nav pill has no background color in dark mode
• Fix placement of hide/show dropdown button under device interfaces view
• Allow object list tables to expand horizontally beyond the default page width where beneficial See Limit screen width for object detail views but use full screen for list views #15339
• Fix spacing of "highlight in rack" button under device view
• Fix styling of custom field group names under object view
• Make add/import buttons on nav menu items a bit wider for easier clicking
• Relocate "add" buttons for embedded object tables
• Fix margin around the "map it" button for site addresses
• Remove netbox-data block from the base template & and the obsolete getNetboxData() function
• Remove bottom margin from last <p> element in rendered Markdown inside a table cell
• Apply a corner radius to small (.btn-sm) buttons
• Eliminate "flash" on load when dark mode has been set via toggle button (vs. user preference) See Fix flicker on page load when color mode is set to dark #15340
• Fix field selection widgets in table configuration dialog
• Tweak color of nav menu group headings to better differentiate from menu items
• Fix border color of circuit commit rate dropdown button
• Change span.color-label display to inline-block
• The border of the "copy-to-clipboard" button is too dark
• The labels/images dropdown at top right of rack view renders oddly
• Row headings for attribute tables have too little contrast in dark mode
• Fix toast text color in dark mode
• Fix object selector functionality

Justification

We're tracking this work under a shared issue as they're mostly small, iterative changes that alone aren't very significant (e.g. tweaking HTML templates or applying a missing CSS class).

[ITJamie]

When deleting a bookmark the dialog is written as if its about to delete the actual object not a bookmark to the object #13842

[jeremystretch]

@ITJamie the scope of this issue is limited to UI changes resulting from work done under #12128. Anything else needs to be tracked under a separate issue.

[jeremystretch]

It appears that dcim/inventoryitem_bulk_delete.html is no longer in use; there may be other obsolete templates as well. We should do a quick audit.

[jeremystretch]

Reduce vertical space between a checkbox field and its help text.

[jeremystretch]

Remove ghost shadow from hidden "clear" button on quick search (barely visible to right of search field)

[jeremystretch]

Hide/show dropdown button on new line under device interfaces view

[cybarox]

Tables in tableviews using not the full width

Sites:

Prefixes:

Circuits:

The margin of the little red cross for unset the sorting setting is also overlapped by the column title.

[cybarox]

On Device View:
The button "highlight device" has no margin to the right.
Custom Field Topics are not styled.

[jeremystretch]

Tables in tableviews using not the full width

We're currently using a maximum width for all page content (this was done to bolster readability for object detail views) but I suppose we could use a full-width view for object lists. We should however give some thought to limiting the width of tables with few columns: Viewing e.g. the platforms list on a very wide viewport is a bit taxing for the user.

[cybarox]

Tables in tableviews using not the full width

We're currently using a maximum width for all page content (this was done to bolster readability for object detail views) but I suppose we could use a full-width view for object lists. We should however give some thought to limiting the width of tables with few columns: Viewing e.g. the platforms list on a very wide viewport is a bit taxing for the user.

Avoiding superfluous space in tables is certainly good, my concern would be that if different tables have different widths as a result (e.g. if the user adds custom-field columns) , the overall impression of the UI could quickly become restless or appear inconsistent.

Perhaps the max-width variant can be used for tables whose columns are narrow enough to display them in this way. All content that requires a larger width could then be displayed as a full-width table.

Another possibility would be to let the user decide for himself and add a toggle option to the configure table menu.

[jeremystretch]

On many pages, we include an "add" button beneath embedded object tables. For instance:

We can save a considerable amount of space by relocating this button to the card header, opposite its title, and reducing its size.