starred/netbox
1
0
Fork 0
mirror of https://github.com/netbox-community/netbox.git synced 2026-01-11 21:10:29 +01:00
Code Issues 273 Packages Projects Releases 10 Wiki Activity

v2.12 UI layout tweaks #4888

New Issue
Closed
opened 2025-12-29 19:21:41 +01:00 by adam · 7 comments
adam commented 2025-12-29 19:21:41 +01:00
Owner
Copy Link

Originally created by @jeremystretch on GitHub (May 7, 2021).

Originally assigned to: @thatmattlove on GitHub.

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.

Originally created by @jeremystretch on GitHub (May 7, 2021). Originally assigned to: @thatmattlove on GitHub. ### Proposed Changes I'm opening this issue to track miscellaneous proposed adjustments to the v2.12 user interface. These are listed below. ## General Styling - [x] Tweak BS5 standard color scheme (TBD) - [x] Default text color seems too dark (?) - [x] Remove underline style from hyperlinks - [x] Remove focus ring effect from navigation menu headers - [x] `<code>` text should not be pink - [x] Fix toast colors in dark mode - [x] Fix multi-select colors in dark mode ## Layout ### General - [x] Fix footer placement (needs to be fixed at the bottom) ### Navigation Sidebar - [x] NetBox logo should be centered - [ ] Set `max-width` for large screens - [x] Move hostname & current time to end of page body - [x] Reduce padding of top-level menu items - [ ] Remove horizontal margin on link items (should be full width) - [x] Add "add" and "import" buttons to each item as appropriate ### Search Bar - [x] Border should be consistent for all elements of the search bar - [x] Errant righthand margin on "Login" button (if not authenticated) ### List Views - [x] Move search panel into collapsible element above object table - [x] Eliminate extraneous margin/padding around objects list - [x] Object list text is too small - ~Filter form widget text is too big~ - [x] Updating “per page” count does not refresh list - [x] Objects list is very cramped at 1280px - [x] Filter fields should not auto-populate (too many API requests) - ~Don’t put objects table inside a panel (too many visual borders)~ - [x] Utilization graph columns should have a minimum width - [x] Object checkboxes are too small ### Object Views - [x] Errant bottom border on title container - [x] Clone/edit/delete buttons are not top-aligned - [x] Tab horizon should extend across entire page body ### Object Edit Views - [x] Set max-width on form - [x] Form should be centered on page - [x] Change “Update” button to “Save” - [x] Show standard form validation errors ### Object Delete Views - [x] Confirmation dialog box should not be filled red - [x] Confirm button should be filled red ### Object Import Views - [x] Page should be full-width at 1280px - [x] Device import: Racked/child device tabs are not tabs - [x] Device type import: JSON data field not big enough ### Bulk Delete Views - [x] Objects table should be full-width ### Justification The goal here is simply to help polish the UI in preparation for public testing.
adam added the type: housekeepingtopic: UI/UX labels 2025-12-29 19:21:41 +01:00
adam closed this issue 2025-12-29 19:21:41 +01:00
adam commented 2025-12-29 19:21:42 +01:00
Author
Owner
Copy Link

@thatmattlove commented on GitHub (May 25, 2021):

@jeremystretch Those questions I promised:

Tweak BS5 standard color scheme (TBD)

Any ideas of what you might want to adjust? I've actually already overridden the color scheme and mirrored it more closely to the Tailwind CSS default theme, but we can easily adjust this.

NetBox logo should be centered

I tried this out and I think it looks better left-aligned, personally. Here's how it looks centered:

Screen Shot 2021-05-25 at 8 45 29 AM

Seems off to me, but let me know what you think.

Remove horizontal margin on link items (should be full width)

I'm not sure I follow this one. Can you elaborate/provide a screenshot or example? The nav links look good to me, but I'm probably misunderstanding.

Filter form widget text is too big

Not sure I follow this one either. I think you're referring to this (which may look different now compared to how it looked when this issue was opened):

Screen Shot 2021-05-25 at 8 53 28 AM

If so, it's already set to the smallest (.input-group-sm) BS has. Any smaller and we'll need to add custom classes or overrides. I think it's a good size as-is, but again, I may be misunderstanding.

Don’t put objects table inside a panel (too many visual borders)

I think the underlying concern here is mostly solved with the change to the advanced search collapse element since it removes that right-side card, but I'd like to see what you think.

Errant bottom border on title container

I think either you or I fixed this, perhaps unintentionally. I don't see a border anymore. Can you confirm, and provide a screenshot if it's still an issue?

Tab horizon should extend across entire page body

Same as above, it seems to me that this is already happening.

Set max-width on form

This may not be an issue after recent commits where forms are now center-aligned, but I'm not sure I followed what you meant, so I may be thinking of the wrong thing. Can you confirm, and provide a screenshot or example if it's still an issue?

@thatmattlove commented on GitHub (May 25, 2021): @jeremystretch Those questions I promised: ## Tweak BS5 standard color scheme (TBD) Any ideas of what you might want to adjust? I've actually already overridden the color scheme and mirrored it more closely to the [Tailwind CSS](https://tailwindcss.com/) default theme, but we can easily adjust this. ## NetBox logo should be centered I tried this out and I think it looks better left-aligned, personally. Here's how it looks centered: <img width="590" alt="Screen Shot 2021-05-25 at 8 45 29 AM" src="https://user-images.githubusercontent.com/42724207/119528302-eeaa8100-bd35-11eb-82f5-cded26b68238.png"> Seems off to me, but let me know what you think. ## Remove horizontal margin on link items (should be full width) I'm not sure I follow this one. Can you elaborate/provide a screenshot or example? The nav links look good to me, but I'm probably misunderstanding. ## Filter form widget text is too big Not sure I follow this one either. I _think_ you're referring to this (which may look different now compared to how it looked when this issue was opened): <img width="565" alt="Screen Shot 2021-05-25 at 8 53 28 AM" src="https://user-images.githubusercontent.com/42724207/119529160-b2c3eb80-bd36-11eb-8495-e7493236e625.png"> If so, it's already set to the smallest (`.input-group-sm`) BS has. Any smaller and we'll need to add custom classes or overrides. I think it's a good size as-is, but again, I may be misunderstanding. ## Don’t put objects table inside a panel (too many visual borders) I think the underlying concern here is mostly solved with the change to the advanced search collapse element since it removes that right-side card, but I'd like to see what you think. ## Errant bottom border on title container I think either you or I fixed this, perhaps unintentionally. I don't see a border anymore. Can you confirm, and provide a screenshot if it's still an issue? ## Tab horizon should extend across entire page body Same as above, it seems to me that this is already happening. ## Set max-width on form This may not be an issue after recent commits where forms are now center-aligned, but I'm not sure I followed what you meant, so I may be thinking of the wrong thing. Can you confirm, and provide a screenshot or example if it's still an issue?
adam commented 2025-12-29 19:21:42 +01:00
Author
Owner
Copy Link

@jeremystretch commented on GitHub (May 25, 2021):

Tweak BS5 standard color scheme (TBD)

Nothing specifically; this was more of a reminder for myself to play around with it. We can knock this off for now and adjust when/if things come up.

NetBox logo should be centered

IMO it looks better centered but not worth focusing on. (Maybe someone else can chime in with a third opinion?)

Remove horizontal margin on link items

My idea here was to have the entire navigation item "filled" with highlight color, the same as the top-level navigation headers. Currently there's padding between the highlighted portion and the edge of the navigation menu.

Filter form widget text is too big

This was for the lefthand filter panel (before you changed it to the slick new overhead thing). We can ignore this.

Don’t put objects table inside a panel

I think the underlying concern here is mostly solved with the change to the advanced search collapse element

Agreed

Set max-width on form

I still get really wide forms when viewing full-screen. (Ignore the "short" navigation menu in the screenshot; it's an artifact of the screenshot tool.)

Screenshot_2021-05-25 Add a new device NetBox

The other two items have indeed been addressed and I neglected to mark them off. Sorry!

@jeremystretch commented on GitHub (May 25, 2021): ### Tweak BS5 standard color scheme (TBD) Nothing specifically; this was more of a reminder for myself to play around with it. We can knock this off for now and adjust when/if things come up. ### NetBox logo should be centered IMO it looks better centered but not worth focusing on. (Maybe someone else can chime in with a third opinion?) ### Remove horizontal margin on link items My idea here was to have the entire navigation item "filled" with highlight color, the same as the top-level navigation headers. Currently there's padding between the highlighted portion and the edge of the navigation menu. ### Filter form widget text is too big This was for the lefthand filter panel (before you changed it to the slick new overhead thing). We can ignore this. ### Don’t put objects table inside a panel > I think the underlying concern here is mostly solved with the change to the advanced search collapse element Agreed ### Set max-width on form I still get really wide forms when viewing full-screen. (Ignore the "short" navigation menu in the screenshot; it's an artifact of the screenshot tool.) ![Screenshot_2021-05-25 Add a new device NetBox](https://user-images.githubusercontent.com/13487278/119544475-bcae1480-bd5f-11eb-83d2-16f2e3940805.png) The other two items have indeed been addressed and I neglected to mark them off. Sorry!
adam commented 2025-12-29 19:21:43 +01:00
Author
Owner
Copy Link

@thatmattlove commented on GitHub (May 26, 2021):

NetBox logo should be centered

I'll make my case briefly, and leave it to you and/or anyone else to decide. When I look at it, I see all these things that are left-aligned (and their corresponding right aligned counterparts:

Screen Shot 2021-05-25 at 1 57 26 PM

So the center-aligned logo looks out of place and sticks out, to me. But, that's just my opinion. Let me know the final direction and I'll get it done.

Remove horizontal margin on link items

Ah, I think I understand what you mean here, and I think that's a great idea. I'll play with a few options and see what works best.

Set max-width on form

Gotcha. Should be easily fixable. I have an idea that might help us not waste all that screen real estate. I'll play around with this as well.

@thatmattlove commented on GitHub (May 26, 2021): ## NetBox logo should be centered I'll make my case briefly, and leave it to you and/or anyone else to decide. When I look at it, I see all these things that are left-aligned (and their corresponding right aligned counterparts: <img width="847" alt="Screen Shot 2021-05-25 at 1 57 26 PM" src="https://user-images.githubusercontent.com/42724207/119582437-61891b80-bd79-11eb-92bf-af6f83904562.png"> So the center-aligned logo looks out of place and sticks out, to me. But, that's just my opinion. Let me know the final direction and I'll get it done. ## Remove horizontal margin on link items Ah, I think I understand what you mean here, and I think that's a great idea. I'll play with a few options and see what works best. ## Set max-width on form Gotcha. Should be easily fixable. I have an idea that might help us not waste all that screen real estate. I'll play around with this as well.
adam commented 2025-12-29 19:21:43 +01:00
Author
Owner
Copy Link

@hSaria commented on GitHub (May 26, 2021):

Personally, I think it should be centered. However, the bottom margin of the logo looks to be missing or at least not matching the top one. Here's a (very crude) picture edit illustrating it:

119582437-61891b80-bd79-11eb-92bf-af6f83904562

It is especially noticeable when the background color of Organization is differently than the rest.

Here's a comparison with a different (again, very poorly edited) picture, although it isn't as significant:

119528302-eeaa8100-bd35-11eb-82f5-cded26b68238
@hSaria commented on GitHub (May 26, 2021): Personally, I think it should be centered. However, the bottom margin of the logo looks to be missing or at least not matching the top one. Here's a (very crude) picture edit illustrating it: <img width="637" alt="119582437-61891b80-bd79-11eb-92bf-af6f83904562" src="https://user-images.githubusercontent.com/34197532/119628721-419f3980-be05-11eb-9a1d-f81a45215c24.png"> It is especially noticeable when the background color of `Organization` is differently than the rest. Here's a comparison with a different (again, very poorly edited) picture, although it isn't as significant: <img width="590" alt="119528302-eeaa8100-bd35-11eb-82f5-cded26b68238" src="https://user-images.githubusercontent.com/34197532/119629800-431d3180-be06-11eb-891d-2ded81b32793.png">
adam commented 2025-12-29 19:21:43 +01:00
Author
Owner
Copy Link

@thatmattlove commented on GitHub (May 27, 2021):

@jeremystretch - After re-reading your detail on the Remove horizontal margin on link items item, I actually did not understand what you meant at first, but I do now :) Not before I implemented what I thought you meant in e1eefd1, haha. But more importantly, I think the addition of the add/import buttons on menu items may either a) make this moot, or b) require some rethinking. After some quick tinkering in developer tools, I think it looks a little odd to extend the :hover background-color to encompass the buttons:

Screen Shot 2021-05-26 at 4 43 44 PM

To make it less odd, we could increase the height of each menu item:

Screen Shot 2021-05-26 at 4 46 26 PM

But then the background-color of the outline import button is changed as well, not to mention the size of the menu increases quite a bit, particularly on the Devices menu. I toyed with other color schemes for that button and they all look kind of weird next to the green, hence the outline variant.

With the addition of the buttons, each menu item's :hover background edges up to the button group but doesn't over take it:

Screen Shot 2021-05-26 at 4 46 40 PM

Anyway, I'm open to suggestions/feedback on this item. I think it looks good as-is after adding those buttons, but I can also see the appeal of the full-width style, as long as we can find a good way to make it work with the buttons.

@thatmattlove commented on GitHub (May 27, 2021): @jeremystretch - After re-reading your detail on the *Remove horizontal margin on link items* item, I actually did _not_ understand what you meant at first, but I do now :) Not before I implemented what I thought you meant in e1eefd1, haha. But more importantly, I think the addition of the add/import buttons on menu items may either a) make this moot, or b) require some rethinking. After some quick tinkering in developer tools, I think it looks a little odd to extend the `:hover` background-color to encompass the buttons: <img width="325" alt="Screen Shot 2021-05-26 at 4 43 44 PM" src="https://user-images.githubusercontent.com/42724207/119744847-b728fb00-be41-11eb-8b71-c33aa2840902.png"> To make it less odd, we could increase the height of each menu item: <img width="327" alt="Screen Shot 2021-05-26 at 4 46 26 PM" src="https://user-images.githubusercontent.com/42724207/119744985-10912a00-be42-11eb-871f-4bd0aed54568.png"> But then the background-color of the `outline` import button is changed as well, not to mention the size of the menu increases quite a bit, particularly on the Devices menu. I toyed with other color schemes for that button and they all look kind of weird next to the green, hence the outline variant. With the addition of the buttons, each menu item's `:hover` background edges up to the button group but doesn't over take it: <img width="330" alt="Screen Shot 2021-05-26 at 4 46 40 PM" src="https://user-images.githubusercontent.com/42724207/119745145-649c0e80-be42-11eb-8ef2-70c43404e6b0.png"> Anyway, I'm open to suggestions/feedback on this item. I think it looks good as-is after adding those buttons, but I can also see the appeal of the full-width style, as long as we can find a good way to make it work with the buttons.
adam commented 2025-12-29 19:21:43 +01:00
Author
Owner
Copy Link

@sdktr commented on GitHub (Jun 2, 2021):

My 2 cents are on a full width hover, including the buttons. Specifically I like the feedback of hightlighting the entity thats at stake when one of the buttons is hovered.

Would only showing the buttons when the menu item is hovered be an option as well? Instead of having them on screen all the time? Not sure how that works on mobile, but I'd like the minimalistic view

@sdktr commented on GitHub (Jun 2, 2021): My 2 cents are on a full width hover, including the buttons. Specifically I like the feedback of hightlighting the entity thats at stake when one of the buttons is hovered. Would only showing the buttons when the menu item is hovered be an option as well? Instead of having them on screen all the time? Not sure how that works on mobile, but I'd like the minimalistic view
adam commented 2025-12-29 19:21:43 +01:00
Author
Owner
Copy Link

@github-actions[bot] commented on GitHub (Aug 2, 2021):

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.

@github-actions[bot] commented on GitHub (Aug 2, 2021): 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](https://github.com/netbox-community/netbox/blob/develop/CONTRIBUTING.md).
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
beta
breaking change
complexity: high
complexity: low
complexity: medium
needs milestone
netbox
pending closure
plugin candidate
pull-request
Mirrored from GitHub Pull Request
 severity: high
severity: low
severity: medium
status: accepted
status: backlog
status: blocked
status: duplicate
status: needs owner
status: needs triage
status: revisions needed
status: under review
topic: GraphQL
topic: Internationalization
topic: OpenAPI
topic: UI/UX
topic: cabling
topic: event rules
topic: htmx navigation
topic: industrialization
topic: migrations
topic: plugins
topic: scripts
topic: templating
topic: testing
type: bug
type: deprecation
type: documentation
type: feature
type: housekeeping
type: translation
No Label topic: UI/UX type: housekeeping
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
adam
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/netbox#4888
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?