v2.12 UI layout tweaks

[jeremystretch]

Proposed Changes

I'm opening this issue to track miscellaneous proposed adjustments to the v2.12 user interface. These are listed below.

General Styling

• Tweak BS5 standard color scheme (TBD)
• Default text color seems too dark (?)
• Remove underline style from hyperlinks
• Remove focus ring effect from navigation menu headers
• <code> text should not be pink
• Fix toast colors in dark mode
• Fix multi-select colors in dark mode

Layout

General

• Fix footer placement (needs to be fixed at the bottom)

Navigation Sidebar

• NetBox logo should be centered
• Set max-width for large screens
• Move hostname & current time to end of page body
• Reduce padding of top-level menu items
• Remove horizontal margin on link items (should be full width)
• Add "add" and "import" buttons to each item as appropriate

Search Bar

• Border should be consistent for all elements of the search bar
• Errant righthand margin on "Login" button (if not authenticated)

List Views

• Move search panel into collapsible element above object table
• Eliminate extraneous margin/padding around objects list
• Object list text is too small
• Filter form widget text is too big
• Updating “per page” count does not refresh list
• Objects list is very cramped at 1280px
• Filter fields should not auto-populate (too many API requests)
• Don’t put objects table inside a panel (too many visual borders)
• Utilization graph columns should have a minimum width
• Object checkboxes are too small

Object Views

• Errant bottom border on title container
• Clone/edit/delete buttons are not top-aligned
• Tab horizon should extend across entire page body

Object Edit Views

• Set max-width on form
• Form should be centered on page
• Change “Update” button to “Save”
• Show standard form validation errors

Object Delete Views

• Confirmation dialog box should not be filled red
• Confirm button should be filled red

Object Import Views

• Page should be full-width at 1280px
• Device import: Racked/child device tabs are not tabs
• Device type import: JSON data field not big enough

Bulk Delete Views

• Objects table should be full-width

Justification

The goal here is simply to help polish the UI in preparation for public testing.

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. NetBox is governed by a small group of core maintainers which means not all opened issues may receive direct feedback. Please see our contributing guide.