v3.0-beta1 UI tweaks #5090

@bellwood commented on GitHub (Jul 23, 2021):

I can reproduce what @michaelklose is seeing but ONLY when I am able to get the sidebar footer to overflow into the menu:

Page loads after this occurs omit the nav in the sidebar until the page is hard reloaded.

@bellwood commented on GitHub (Jul 23, 2021): I can reproduce what @michaelklose is seeing but ONLY when I am able to get the sidebar footer to overflow into the menu: ![image](https://user-images.githubusercontent.com/2453632/126792265-758d0092-4e38-4ad0-9899-7b7d778ba6f9.png) Page loads after this occurs omit the nav in the sidebar until the page is hard reloaded.

adam commented

@bellwood commented on GitHub (Jul 23, 2021):

Mobile/iPAD - Chrome/Brave - Main nav "login" and all buttons on the sidebar footer nav are rendered incorrectly

@bellwood commented on GitHub (Jul 23, 2021): Mobile/iPAD - Chrome/Brave - Main nav "login" and all buttons on the sidebar footer nav are rendered incorrectly ![IMG_0073](https://user-images.githubusercontent.com/2453632/126793190-e28583aa-3b8a-4804-9e4c-65da2a49b9c1.jpeg) ![IMG_0072](https://user-images.githubusercontent.com/2453632/126793195-6dcd855b-2d7a-40b0-9567-c5ccfe901d2d.jpeg)

adam commented

@bellwood commented on GitHub (Jul 23, 2021):

Mobile/iPhone 8 Plus - Chrome/Brave

-Hamburger menu
--Missing padding/margin above search bar
--Buttons on bottom nav incorrectly rendered
--Login button buried at the bottom (usability, maybe put closer ot top?), styled incorrectly
--Hard to reproduce, but, sometimes you cannot scroll inside the hamburger menu either

-General
--Some buttons ("add", "import") text isnt aligned properly

@bellwood commented on GitHub (Jul 23, 2021): Mobile/iPhone 8 Plus - Chrome/Brave -Hamburger menu --Missing padding/margin above search bar --Buttons on bottom nav incorrectly rendered --Login button buried at the bottom (usability, maybe put closer ot top?), styled incorrectly --Hard to reproduce, but, sometimes you cannot scroll inside the hamburger menu either -General --Some buttons ("add", "import") text isnt aligned properly ![IMG_5421](https://user-images.githubusercontent.com/2453632/126793502-b06d1d12-e838-4da3-aa1a-6d622be5d39f.jpeg) ![IMG_5422](https://user-images.githubusercontent.com/2453632/126794273-635b169f-d51d-4260-ab25-9145e659efcc.jpeg)

adam commented

@michaelklose commented on GitHub (Jul 23, 2021):

Nav item for Config Contexts missing. URL is working: https://beta-demo.netbox.dev/extras/config-contexts/

@michaelklose commented on GitHub (Jul 23, 2021): Nav item for Config Contexts missing. URL is working: https://beta-demo.netbox.dev/extras/config-contexts/

adam commented

@jeremystretch commented on GitHub (Jul 23, 2021):

@bellwood Let's limit the scope to here to non-mobile issues for now.

@michaelklose Config contexts are listed under the "other" menu heading.

@jeremystretch commented on GitHub (Jul 23, 2021): @bellwood Let's limit the scope to here to non-mobile issues for now. @michaelklose Config contexts are listed under the "other" menu heading.

adam commented

@bellwood commented on GitHub (Jul 23, 2021):

@michaelklose I see it under Other -> Other -> Config Contexts, under "Tags" BUT the scrolling is really difficult there on smaller viewports where the footer nav in the sidebar obscures it.

@bellwood commented on GitHub (Jul 23, 2021): @michaelklose I see it under Other -> Other -> Config Contexts, under "Tags" BUT the scrolling is really difficult there on smaller viewports where the footer nav in the sidebar obscures it.

adam commented

@michaelklose commented on GitHub (Jul 23, 2021):

Ah if I zoom out I can see it. But there is no way to scroll down.

If I zoom out and in again the scroll bar appears.

@michaelklose commented on GitHub (Jul 23, 2021): Ah if I zoom out I can see it. But there is no way to scroll down. ![image](https://user-images.githubusercontent.com/36384077/126796248-6b0bc0f9-0122-4f7c-9a9a-fa495f5a730d.png) If I zoom out and in again the scroll bar appears.

adam commented

@hoalex commented on GitHub (Jul 23, 2021):

When using the global search and multiple result categories are returned, there is currently no padding between the "Refine Search" button and the next section header:

@hoalex commented on GitHub (Jul 23, 2021): When using the global search and multiple result categories are returned, there is currently no padding between the "Refine Search" button and the next section header: ![2021-07-23 16_29_57-Search _ NetBox — Mozilla Firefox](https://user-images.githubusercontent.com/6103894/126797274-a7edb18c-78b7-4466-9c3f-b8a8da887867.png)

adam commented

@ndom91 commented on GitHub (Jul 23, 2021):

Currently large sections in the sidebar, like IPAM, create new scroll contexts inside themselves.

I think its more standard to fully open the dropdown and just scroll it with the master list of categories, i.e. extending the original scroll context.

To fix this:

.sidebar .accordion-body {
-  max-height: calc(100vh - 24rem); */
-  overflow-y: auto;
+  overflow-y: visible;
}

EDIT: Made a small PR for it - https://github.com/netbox-community/netbox/pull/6799

@ndom91 commented on GitHub (Jul 23, 2021): Currently large sections in the sidebar, like IPAM, create new scroll contexts inside themselves. ![image](https://user-images.githubusercontent.com/7415984/126805914-10ad9da5-a0c1-4edc-aa8a-25cc4dae7b03.png) I think its more standard to fully open the dropdown and just scroll it with the master list of categories, i.e. extending the original scroll context. To fix this: ```diff .sidebar .accordion-body { - max-height: calc(100vh - 24rem); */ - overflow-y: auto; + overflow-y: visible; } ``` **EDIT**: Made a small PR for it - https://github.com/netbox-community/netbox/pull/6799

adam commented

@n0emis commented on GitHub (Jul 23, 2021):

The link-color in toasts is not very readable in dark mode (at least not for people with a red-green-weakness)

@n0emis commented on GitHub (Jul 23, 2021): The link-color in toasts is not very readable in dark mode (at least not for people with a red-green-weakness) ![Screenshot from 2021-07-23 17-32-32](https://user-images.githubusercontent.com/22817873/126806433-17b52f73-e44d-420b-b017-a12b6e445111.png)

adam commented

@n0emis commented on GitHub (Jul 23, 2021):

Also scrolling sideways is not possible on iPadOS-Devices (I tried in Safari and Firefox), which makes it impossible to e.g. access the buttons at the end of the interface list.

@n0emis commented on GitHub (Jul 23, 2021): Also scrolling sideways is not possible on iPadOS-Devices (I tried in Safari and Firefox), which makes it impossible to e.g. access the buttons at the end of the interface list.

adam commented

https://github.com/twbs/bootstrap/issues/33229

@bellwood commented on GitHub (Jul 23, 2021):

In reference to #issuecomment-885661042

Disabling -webkit-appearance: button; in bootstraps _reboot.scss fixes the issue.

Perhaps an override for this style is needed however, on BS's own docs page:

https://getbootstrap.com/docs/5.0/components/button-group/

...button groups that have button on an anchor DO render correctly on mobile and MacOS Safari. So, unclear if something else is afoot.

@bellwood commented on GitHub (Jul 23, 2021): In reference to #issuecomment-885661042 https://github.com/twbs/bootstrap/issues/33229 Disabling `-webkit-appearance: button;` in bootstraps _reboot.scss fixes the issue. Perhaps an override for this style is needed however, on BS's own docs page: https://getbootstrap.com/docs/5.0/components/button-group/ ...button groups that have `button` on an anchor DO render correctly on mobile and MacOS Safari. So, unclear if something else is afoot.

adam commented

@bellwood commented on GitHub (Jul 23, 2021):

Actually, per the BS docs and that issue cited above type="button" should not be used on anchor tags. Removing that clears the issue up without the need to touch the underlying CSS.

@bellwood commented on GitHub (Jul 23, 2021): Actually, per the BS docs and that issue cited above `type="button"` should not be used on anchor tags. Removing that clears the issue up without the need to touch the underlying CSS.

adam commented

@thatmattlove commented on GitHub (Jul 24, 2021):

Regarding the flashing issue: this is expected, and actually completely normal for websites with multiple colors modes. The issue comes from the server shipping down a default — light, in this case — and the client checking for localStorage values to override and then change the DOM to match. Workarounds always involve changing how the server rendering occurs, and NetBox is no different.

Ultimately, the workaround is to set your color mode preference in your user profile settings. When you do, that preference is saved on the server side and no DOM change is necessary once the localStorage preference is detected client-side.

@thatmattlove commented on GitHub (Jul 24, 2021): Regarding the flashing issue: this is expected, and actually completely normal for websites with multiple colors modes. The issue comes from the server shipping down a default — light, in this case — and the client checking for localStorage values to override and then change the DOM to match. Workarounds always involve changing how the server rendering occurs, and NetBox is no different. Ultimately, the workaround is to set your color mode preference in your user profile settings. When you do, that preference is saved on the server side and no DOM change is necessary once the localStorage preference is detected client-side.

adam commented

@bellwood commented on GitHub (Jul 24, 2021):

Regarding the flashing issue: this is expected, and actually completely normal for websites with multiple colors modes. The issue comes from the server shipping down a default — light, in this case — and the client checking for localStorage values to override and then change the DOM to match. Workarounds always involve changing how the server rendering occurs, and NetBox is no different.

Ultimately, the workaround is to set your color mode preference in your user profile settings. When you do, that preference is saved on the server side and no DOM change is necessary once the localStorage preference is detected client-side.

The thing is, there shouldn't need to be a "work around". I cannot think of a single other website that exhibits the same flashing behaviour.

The default state of the application should detect the users' preference from prefers-color-scheme and style as needed without placing demand on the user to perform an action they're aren't aware is required (go here, click this, save that) all the while the app is flashing (if they prefer dark mode). It will drive questions/issues/"support"

From an accessibility perspective, while we all had a good laugh in the Slack about 'rapidly flashing colors' that's a very real and valid UI/UX concern.

If it's too complicated to resolve, default to light mode and only render dark mode when it is set via the profile. At least then the state of the application is known and doesn't present the user with inconsistent/unexpected behaviours.

Just my .02, meant to be constructive.

@bellwood commented on GitHub (Jul 24, 2021): > Regarding the flashing issue: this is expected, and actually completely normal for websites with multiple colors modes. The issue comes from the server shipping down a default — light, in this case — and the client checking for localStorage values to override and then change the DOM to match. Workarounds always involve changing how the server rendering occurs, and NetBox is no different. > > Ultimately, the workaround is to set your color mode preference in your user profile settings. When you do, that preference is saved on the server side and no DOM change is necessary once the localStorage preference is detected client-side. The thing is, there shouldn't need to be a "work around". I cannot think of a single other website that exhibits the same flashing behaviour. The default state of the application should detect the users' preference from `prefers-color-scheme` and style as needed without placing demand on the user to perform an action they're aren't aware is required (go here, click this, save that) all the while the app is flashing (if they prefer dark mode). It will drive questions/issues/"support" From an accessibility perspective, while we all had a good laugh in the Slack about 'rapidly flashing colors' that's a very real and valid UI/UX concern. If it's too complicated to resolve, default to light mode and only render dark mode when it is set via the profile. At least then the state of the application is known and doesn't present the user with inconsistent/unexpected behaviours. Just my .02, meant to be constructive.

adam commented

@ndom91 commented on GitHub (Jul 24, 2021):

The problem, as previously mentioned in this thread, is djangos server side vs client side rendering.

Django renders the templates into ready to go html to send to the client server side where it obviously doesn't have access to:

The users localStorage preferences
The users prefers-color-scheme settings

Therefore it sends the lightmode by default to the client. Only after the client has received the initial html, css, etc. does the js kick in, potentially read the users preferences and adjust the mode. Hence the flash.

A solution could be to store the light/dark preference on the server and render with the correct one initially. Or I believe django can also be set to client side rendering, but that would probably be a larger change..

EDIT: I see Matt's already implemented it, nevermind all that then 😅👍

@ndom91 commented on GitHub (Jul 24, 2021): The problem, as previously mentioned in this thread, is djangos server side vs client side rendering. Django renders the templates into ready to go html to send to the client server side where it obviously doesn't have access to: 1. The users localStorage preferences 2. The users `prefers-color-scheme` settings Therefore it sends the lightmode by default to the client. Only after the client has received the initial html, css, etc. does the js kick in, potentially read the users preferences and adjust the mode. Hence the flash. A solution could be to store the light/dark preference on the server and render with the correct one initially. Or I believe django can also be set to client side rendering, but that would probably be a larger change.. **EDIT**: I see Matt's already implemented it, nevermind all that then 😅👍

adam commented

@thatmattlove commented on GitHub (Jul 24, 2021):

EDIT: I see Matt's already implemented it, nevermind all that then 😅👍

:)

I didn't see this as that big a deal, but it seems there are some strong feelings on the topic. From my testing after
189e733, the issue is solved.

@thatmattlove commented on GitHub (Jul 24, 2021): > EDIT: I see Matt's already implemented it, nevermind all that then 😅👍 :) I didn't see this as that big a deal, but it seems there are some strong feelings on the topic. From my testing after 189e733, the issue is solved.

adam commented

@nahun commented on GitHub (Jul 26, 2021):

Prefixes with low utilization are hard to read the percentage. Happens in dark mode too.

@nahun commented on GitHub (Jul 26, 2021): Prefixes with low utilization are hard to read the percentage. Happens in dark mode too. ![image](https://user-images.githubusercontent.com/690651/127025843-28749435-5af7-462c-8538-06fd779f2c07.png)

adam commented

@Jackbennett commented on GitHub (Jul 28, 2021):

Cable path trace is missing TYPE and LENGTH

Cable trace SVG is missing length - I set the pink one to 50 meters
Cable trace SVG is missing Type - I set cat6

connected build sublet in the UI is nice as a normal expected state IF you make users aware of non-normal states to be more noticeable i.e. decommissioning or planned.

@Jackbennett commented on GitHub (Jul 28, 2021): Cable path trace is missing TYPE and LENGTH ![image](https://user-images.githubusercontent.com/791134/127327701-6dc8a8e6-95eb-44b9-b201-508285c141a3.png) * Cable trace SVG is missing length - I set the pink one to 50 meters * Cable trace SVG is missing Type - I set cat6 ![image](https://user-images.githubusercontent.com/791134/127327773-6eb27be0-490f-48aa-8d3c-3fbe3fbb518f.png) connected build sublet in the UI is nice as a normal expected state IF you make users aware of non-normal states to be more noticeable i.e. decommissioning or planned.

adam commented

@ballestr commented on GitHub (Jul 28, 2021):

I'm liking most of the new UI but I am finding very cumbersome the advanced search. The top panel takes a lot of space, and the fact that it closes back every time means more clicking around, which rapidly gets annoying when trying to refine a search. The previous arrangement with the advanced search on the side was a much better UX for power users with lots of devices.
Not sure if you want a separate ticket for this?

@ballestr commented on GitHub (Jul 28, 2021): I'm liking most of the new UI but I am finding very cumbersome the advanced search. The top panel takes a lot of space, and the fact that it closes back every time means more clicking around, which rapidly gets annoying when trying to refine a search. The previous arrangement with the advanced search on the side was a much better UX for power users with lots of devices. Not sure if you want a separate ticket for this? ![image](https://user-images.githubusercontent.com/814741/127341932-ae4f9089-21a8-409c-b272-33b1fbb11cdb.png)

adam commented

@Razerlikes commented on GitHub (Jul 28, 2021):

Moved to https://github.com/netbox-community/netbox/issues/6828#issuecomment-888554539

@Razerlikes commented on GitHub (Jul 28, 2021): Moved to https://github.com/netbox-community/netbox/issues/6828#issuecomment-888554539

adam commented

@ryanmerolle commented on GitHub (Jul 28, 2021):

There is no favicon for graphQL doc page. Not a huge item, just pointing it out vs the REST API doc pages that has a favicon.

Would be nice to use either the netbox icon or something specific to graphql so we could know what the browser tab is for by looking at the icon.

Not really important, but worth noting here.

@ryanmerolle commented on GitHub (Jul 28, 2021): There is no favicon for graphQL doc page. Not a huge item, just pointing it out vs the REST API doc pages that has a favicon. Would be nice to use either the netbox icon or something specific to graphql so we could know what the browser tab is for by looking at the icon. Not really important, but worth noting here.

adam commented

@jeremystretch commented on GitHub (Jul 28, 2021):

@Razerlikes can you copy your comment above to #6828 please? I'd like to start tracking mobile issues separately.

@jeremystretch commented on GitHub (Jul 28, 2021): @Razerlikes can you copy your comment above to #6828 please? I'd like to start tracking mobile issues separately.

adam commented

@JeffTadashi commented on GitHub (Jul 29, 2021):

When using large front/back images for Device Types, the preview is not automatically scaled down to fit (this scale is working correctly in Netbox 2.11.6)

@JeffTadashi commented on GitHub (Jul 29, 2021): When using large front/back images for Device Types, the preview is not automatically scaled down to fit (this scale is working correctly in Netbox 2.11.6) ![Screen Shot 2021-07-29 at 10 53 56 AM](https://user-images.githubusercontent.com/45373805/127524795-cfa82657-0dc7-433f-9fe2-0db58cad0bd7.png)

adam commented

@Jackbennett commented on GitHub (Jul 29, 2021):

General theme emerging in the UI, not enough context if information is provided or remove excess options;

No way to tell what data vlan is in the site: DM-Nashua which this device is set to.

error:

edit* and making a vlan I can find, doesn't apear to work anyway. Should I make a separate issue for that?

@Jackbennett commented on GitHub (Jul 29, 2021): General theme emerging in the UI, not enough context if information is provided or remove excess options; No way to tell what data vlan is in the `site: DM-Nashua` which this device is set to. ![image](https://user-images.githubusercontent.com/791134/127557956-ed33d56d-3332-462e-ac17-25d1d3a32ce6.png) error: ![image](https://user-images.githubusercontent.com/791134/127558018-035ad065-47d1-40c3-b7e5-2058a54fecc3.png) edit* and making a vlan I can find, doesn't apear to work anyway. Should I make a separate issue for that? ![image](https://user-images.githubusercontent.com/791134/127559463-b2889866-8a44-4fc1-8690-3b575b53394c.png)

adam commented

@thatmattlove commented on GitHub (Jul 30, 2021):

General theme emerging in the UI, not enough context if information is provided or remove excess options;

No way to tell what data vlan is in the site: DM-Nashua which this device is set to.

error:

edit* and making a vlan I can find, doesn't apear to work anyway. Should I make a separate issue for that?

This one should be fixed in 5413263.

@thatmattlove commented on GitHub (Jul 30, 2021): > General theme emerging in the UI, not enough context if information is provided or remove excess options; > > No way to tell what data vlan is in the `site: DM-Nashua` which this device is set to. > > ![image](https://user-images.githubusercontent.com/791134/127557956-ed33d56d-3332-462e-ac17-25d1d3a32ce6.png) > > error: > ![image](https://user-images.githubusercontent.com/791134/127558018-035ad065-47d1-40c3-b7e5-2058a54fecc3.png) > > edit* and making a vlan I can find, doesn't apear to work anyway. Should I make a separate issue for that? > ![image](https://user-images.githubusercontent.com/791134/127559463-b2889866-8a44-4fc1-8690-3b575b53394c.png) This one should be fixed in 5413263.

adam commented

https://user-images.githubusercontent.com/6794999/127692395-235d9eac-03c7-403c-9fad-a82ee29109e3.mp4

@Razerlikes commented on GitHub (Jul 30, 2021):

New sidebar: issue:
When the sidebar is pinned and you refresh the page or change pages, the whole page jumps to set the sidebar as pinned

@Razerlikes commented on GitHub (Jul 30, 2021): New sidebar: issue: When the sidebar is pinned and you refresh the page or change pages, the whole page jumps to set the sidebar as pinned https://user-images.githubusercontent.com/6794999/127692395-235d9eac-03c7-403c-9fad-a82ee29109e3.mp4

adam commented

https://user-images.githubusercontent.com/1462367/127702965-f424041a-e67c-42c8-b3fa-19f6488186ed.mp4

@tobiasge commented on GitHub (Jul 30, 2021):

Login screen is "jumping" when typing in the user or password fields. This is the feature branch on commit 9fa2acfe85, but only in Edge / Chrome. Firefox is fine.

@tobiasge commented on GitHub (Jul 30, 2021): Login screen is "jumping" when typing in the user or password fields. This is the feature branch on commit 9fa2acfe85850a8fd08efcd8005e0eadd6c5f8e9, but only in Edge / Chrome. Firefox is fine. https://user-images.githubusercontent.com/1462367/127702965-f424041a-e67c-42c8-b3fa-19f6488186ed.mp4

adam commented

@ndom91 commented on GitHub (Aug 1, 2021):

Just wanted to mention you can probably remove my bullet point about the nav internal scroll context as you mentioned in my PR that @thatmattlove was reworking the sidebar anyway.

If you want or need any help with that Matt, just let me know!

@ndom91 commented on GitHub (Aug 1, 2021): Just wanted to mention you can probably remove my bullet point about the nav internal scroll context as you mentioned in my PR that @thatmattlove was reworking the sidebar anyway. If you want or need any help with that Matt, just let me know!

adam commented

@thatmattlove commented on GitHub (Aug 1, 2021):

Adding a couple of tasks:

Look at ways to improve advanced search/filter layout in Object List view.
Improve/fix Django messages handling (see screenshot above of toast message).
Profile button seems to randomly appear and disappear on smaller screens when the sidebar is not open.
Improve table highlight styling in dark mode, for instance:

@thatmattlove commented on GitHub (Aug 1, 2021): Adding a couple of tasks: - [x] Look at ways to improve advanced search/filter layout in Object List view. - [x] Improve/fix Django messages handling (see screenshot above of toast message). - [ ] Profile button seems to randomly appear and disappear on smaller screens when the sidebar is not open. - [x] Improve table highlight styling in dark mode, for instance: <img width="1231" alt="Screen Shot 2021-08-01 at 10 56 17" src="https://user-images.githubusercontent.com/42724207/127780789-f67b8469-c8dd-4a46-866b-9e446a154d16.png">

adam commented

@bluikko commented on GitHub (Aug 2, 2021):

Am I the only one who finds very distracting the fade effect on text when selecting an item on a dropdown box?
When a dropdown box item is selected, the text on previously selected item fades from white to black, and text on currently selected item fades from black to white.

Edit: I mean hovering over an item in a dropdown box. Not necessarily "selecting" as in clicking on the item.

Edit2: and hovering over the currently active choice of a dropdown box renders the text invisible. The mouse pointer already changes to "forbidden", so does the text need to completely disappear? If the pointer change is not enough, how about changing the text color to grey instead of same as dropdown box background color?

Edit3: the contrast on input validation error notifications headings (dark grey vs red) is very low. (I did prefer the old notifications that were inline to the form). It would be great if at least the input field that has input validation error would be highlighted instead of just a floating box at the bottom corner. I am talking about these:

The contrast on this notification box is also very low on the IP address part (dark blue vs dark green). I am sure this depends on monitor & brightness as well but to me it looks difficult to read.

@bluikko commented on GitHub (Aug 2, 2021): Am I the only one who finds very distracting the fade effect on text when selecting an item on a dropdown box? When a dropdown box item is selected, the text on previously selected item fades from white to black, and text on currently selected item fades from black to white. Edit: I mean hovering over an item in a dropdown box. Not necessarily "selecting" as in clicking on the item. Edit2: and hovering over the currently active choice of a dropdown box renders the text invisible. The mouse pointer already changes to "forbidden", so does the text need to completely disappear? If the pointer change is not enough, how about changing the text color to grey instead of same as dropdown box background color? Edit3: the contrast on input validation error notifications headings (dark grey vs red) is very low. (I did prefer the old notifications that were inline to the form). It would be great if at least the input field that has input validation error would be highlighted instead of just a floating box at the bottom corner. I am talking about these: ![image](https://user-images.githubusercontent.com/14869000/127849752-3660fc56-d027-414f-b380-fdca959d10c1.png) The contrast on this notification box is also very low on the IP address part (dark blue vs dark green). I am sure this depends on monitor & brightness as well but to me it looks difficult to read. ![image](https://user-images.githubusercontent.com/14869000/127850468-e90db061-f3ec-46cd-9af7-8e1d7fe3f073.png)

adam commented

@rodvand commented on GitHub (Aug 2, 2021):

Is it a conscious choice to add the custom links to the existing buttons in a view? I can see this leading to confusion for users not knowing if the button is provided by NetBox itself, or if it's a custom link created by an admin within the org.

2.11

3.0-beta

@rodvand commented on GitHub (Aug 2, 2021): Is it a conscious choice to add the custom links to the existing buttons in a view? I can see this leading to confusion for users not knowing if the button is provided by NetBox itself, or if it's a custom link created by an admin within the org. 2.11 <img width="1419" alt="Screenshot 2021-08-02 at 13 56 12" src="https://user-images.githubusercontent.com/56864/127858374-e7152270-7043-47f2-830d-c2fac2899a7b.png"> 3.0-beta <img width="1173" alt="Screenshot 2021-08-02 at 13 55 16" src="https://user-images.githubusercontent.com/56864/127858385-4df294f6-7417-4879-90af-41370bbbd749.png">

adam commented

@jeremystretch commented on GitHub (Aug 2, 2021):

Can we ensure that expanding one section within the navigation menu automatically closes any section that was already open? Otherwise the user needs to scroll around.

@jeremystretch commented on GitHub (Aug 2, 2021): Can we ensure that expanding one section within the navigation menu automatically closes any section that was already open? Otherwise the user needs to scroll around.

adam commented

@ndom91 commented on GitHub (Aug 2, 2021):

@jeremystretch you mean in the sidebar nav? Some sections themselves are big enough that, even with only that one open on a 1920x1080 screen it will lead to extra scrolling. The user is going to be scrolling anyway :/

EDIT: Just checked out the latest feature updates - really dig the way the sidebar has evolved @thatmattlove! Full scrolling, font changes, icons to the primary footer, pinning open/closed. Nice!

EDIT 2: Is it just me? Or do we have the flashing light/dark mode issue now whenever one is in "light" mode? I.e. the opposite of how it was before?

@ndom91 commented on GitHub (Aug 2, 2021): @jeremystretch you mean in the sidebar nav? Some sections themselves are big enough that, even with only that one open on a 1920x1080 screen it will lead to extra scrolling. The user is going to be scrolling anyway :/ **EDIT**: Just checked out the latest `feature` updates - really dig the way the sidebar has evolved @thatmattlove! Full scrolling, font changes, icons to the primary footer, pinning open/closed. Nice! **EDIT 2**: Is it just me? Or do we have the flashing light/dark mode issue now whenever one is in "light" mode? I.e. the opposite of how it was before?

adam commented

@jeremystretch commented on GitHub (Aug 2, 2021):

Yeah, I get that. Not much we can do for smaller screens. But we can at least mitigate it.

@jeremystretch commented on GitHub (Aug 2, 2021): Yeah, I get that. Not much we can do for smaller screens. But we can at least mitigate it.

adam commented

@bluikko commented on GitHub (Aug 2, 2021):

Yeah, I get that. Not much we can do for smaller screens. But we can at least mitigate it.

Reducing vertical whitespace for large screens could be an option.

@bluikko commented on GitHub (Aug 2, 2021): > Yeah, I get that. Not much we can do for smaller screens. But we can at least mitigate it. Reducing vertical whitespace for large screens could be an option.

adam commented

@ndom91 commented on GitHub (Aug 2, 2021):

Yeah, I get that. Not much we can do for smaller screens. But we can at least mitigate it.

Reducing vertical whitespace for large screens could be an option.

You mean reducing vertical whitespace for short screens? I.e. lets say < 1080px?

Theres not really a whole lot of whitespace there to take away, we could push the menu items a bit further together but idk if that would look any good.

I think a bit of scrolling is acceptable, and if we implement a bit of JS that would only allow one group to be opened at a time I think that goes a long way already.

@ndom91 commented on GitHub (Aug 2, 2021): > > Yeah, I get that. Not much we can do for smaller screens. But we can at least mitigate it. > > Reducing vertical whitespace for large screens could be an option. You mean reducing vertical whitespace for short screens? I.e. lets say < 1080px? Theres not really a whole lot of whitespace there to take away, we could push the menu items a bit further together but idk if that would look any good. ![image](https://user-images.githubusercontent.com/7415984/127887317-9306e62c-d1a7-40ca-a72c-0eec0b7686cd.png) I think a bit of scrolling is acceptable, and if we implement a bit of JS that would only allow one group to be opened at a time I think that goes a long way already.

adam commented

@thatmattlove commented on GitHub (Aug 2, 2021):

Is it a conscious choice to add the custom links to the existing buttons in a view? I can see this leading to confusion for users not knowing if the button is provided by NetBox itself, or if it's a custom link created by an admin within the org.

2.11

3.0-beta

@rodvand Actually yes, it was a conscious choice. Users should have a single place to go for actions, rather than having to visually hunt around for special buttons. Ultimately, it's up to the admin to visually differentiate custom links from NetBox links (if they want) by using a different color class.

Edit: I'll add that one thing we could do us use the .btn-outline-* class for user-defined links, which may solve both problems. @jeremystretch, what do you think?

@thatmattlove commented on GitHub (Aug 2, 2021): > Is it a conscious choice to add the custom links to the existing buttons in a view? I can see this leading to confusion for users not knowing if the button is provided by NetBox itself, or if it's a custom link created by an admin within the org. > > 2.11 > <img alt="Screenshot 2021-08-02 at 13 56 12" width="1419" src="https://user-images.githubusercontent.com/56864/127858374-e7152270-7043-47f2-830d-c2fac2899a7b.png"> > > 3.0-beta > <img alt="Screenshot 2021-08-02 at 13 55 16" width="1173" src="https://user-images.githubusercontent.com/56864/127858385-4df294f6-7417-4879-90af-41370bbbd749.png"> @rodvand Actually yes, it was a conscious choice. Users should have a single place to go for actions, rather than having to visually hunt around for special buttons. Ultimately, it's up to the admin to visually differentiate custom links from NetBox links (if they want) by using a different color class. Edit: I'll add that one thing we *could* do us use the `.btn-outline-*` class for user-defined links, which may solve both problems. @jeremystretch, what do you think?

adam commented

@jeremystretch commented on GitHub (Aug 2, 2021):

Personally I'd rather keep custom links on a separate line below the core actions, as they are on v2.11, if only to more efficiently use the available space.

@jeremystretch commented on GitHub (Aug 2, 2021): Personally I'd rather keep custom links on a separate line below the core actions, as they are on v2.11, if only to more efficiently use the available space.

adam commented

@bluikko commented on GitHub (Aug 3, 2021):

Theres not really a whole lot of whitespace there to take away, we could push the menu items a bit further together but idk if that would look any good.

To me it looks like there is plenty of space between the items. And the NetBox logo is huge, also has plenty of margin/padding below it. I don't know.

if we implement a bit of JS that would only allow one group to be opened at a time I think that goes a long way already.

The problem is some menus are so long that they won't fit one page (on 1080p 100% scaling). That forces the user to collapse the long menus before they can move to items below it.

To be honest I was first horrified to see 3.0 had dedicated 15% of the precious horizontal screen real estate to a damn menu (which cannot even be "minimized" to just icons instead of long text). But then I looked at the various data tables and I believe the new UI is indeed better in that sense also - the data tables seem more "tight" horizontally so the loss of 15% for the menu is not bad.

I must say that I think the new look is great.

i guess there is a reason why the menu items open inline in the left sidebar, instead of opening to right. With that design there is no choices I guess - either one scrolls or the menu would need to be tighter vertically.

Yeah, I get that. Not much we can do for smaller screens. But we can at least mitigate it.

Reducing vertical whitespace for large screens could be an option.

You mean reducing vertical whitespace for short screens? I.e. lets say < 1080px?

I have a 1080p main screen and did testing on this one.

I tried to differentiate between computers and mobile devices with "large screens".

@bluikko commented on GitHub (Aug 3, 2021): > Theres not really a whole lot of whitespace there to take away, we could push the menu items a bit further together but idk if that would look any good. To me it looks like there is plenty of space between the items. And the NetBox logo is huge, also has plenty of margin/padding below it. I don't know. > if we implement a bit of JS that would only allow one group to be opened at a time I think that goes a long way already. The problem is some menus are so long that they won't fit one page (on 1080p 100% scaling). That forces the user to collapse the long menus before they can move to items below it. To be honest I was first horrified to see 3.0 had dedicated 15% of the precious horizontal screen real estate to a damn menu (which cannot even be "minimized" to just icons instead of long text). But then I looked at the various data tables and I believe the new UI is indeed better in that sense also - the data tables seem more "tight" horizontally so the loss of 15% for the menu is not bad. I must say that I think the new look is great. i guess there is a reason why the menu items open inline in the left sidebar, instead of opening to right. With that design there is no choices I guess - either one scrolls or the menu would need to be tighter vertically. > > > Yeah, I get that. Not much we can do for smaller screens. But we can at least mitigate it. > > > > > > Reducing vertical whitespace for large screens could be an option. > > You mean reducing vertical whitespace for short screens? I.e. lets say < 1080px? I have a 1080p main screen and did testing on this one. I tried to differentiate between computers and mobile devices with "large screens".

adam commented

@jeremystretch commented on GitHub (Aug 3, 2021):

The purpose of this thread is to call out specific, reproducible bugs, not to debate the overall design. (Feel free to start a separate thread for that.) Let's please try to stay on topic so that we can focus on knocking out these bugs. Thanks!

@jeremystretch commented on GitHub (Aug 3, 2021): The purpose of this thread is to call out specific, reproducible bugs, not to debate the overall design. (Feel free to start a separate thread for that.) Let's please try to stay on topic so that we can focus on knocking out these bugs. Thanks!

adam commented

@bluikko commented on GitHub (Aug 3, 2021):

specific, reproducible bugs,

Then perhaps the OP should be updated from "small changes".

@bluikko commented on GitHub (Aug 3, 2021): > specific, reproducible bugs, Then perhaps the OP should be updated from "small changes".

adam commented

@bellwood commented on GitHub (Aug 3, 2021):

The "All Objects" input-group-text is has CSS border properties that other input-group do not, leading to inconsistent styling. This is most visible in light mode.

@bellwood commented on GitHub (Aug 3, 2021): The "All Objects" `input-group-text` is has CSS border properties that other input-group do not, leading to inconsistent styling. This is most visible in light mode.

adam commented

@bellwood commented on GitHub (Aug 3, 2021):

Similar issue with the filter input on say /circuits/circuits/ and "Advanced Search" input group. Where "Advanced Search" is a present button, it is using the outline bootstrap style, however the input field itself is not, leading to inconsistent styling.

@bellwood commented on GitHub (Aug 3, 2021): Similar issue with the filter input on say `/circuits/circuits/` and "Advanced Search" input group. Where "Advanced Search" is a present button, it is using the `outline` bootstrap style, however the input field itself is not, leading to inconsistent styling.

adam commented

@rodvand commented on GitHub (Aug 4, 2021):

That's a lot of comments... (in edit view of a Virtual Machine).

Maybe remove the one in the left column?

@rodvand commented on GitHub (Aug 4, 2021): That's a lot of comments... (in edit view of a Virtual Machine). Maybe remove the one in the left column? <img width="1005" alt="Screenshot 2021-08-04 at 11 54 29" src="https://user-images.githubusercontent.com/56864/128161518-5ec34e5a-c788-4a0a-be50-44e02fa2ffc9.png">

adam commented

@bellwood commented on GitHub (Aug 4, 2021):

Data Tables are not full width when there is no Field Filters panel, see:

/dcim/rack-roles/
/dcim/device-roles/
/dcim/manufacturers/
/circuits/circuit-types/
/ipam/roles/
/virtualization/cluster-types/
/virtualization/cluster-groups/

The Field Filters panel is broken/empty on the following pages:

/dcim/regions/
/dcim/site-groups/

@bellwood commented on GitHub (Aug 4, 2021): Data Tables are not full width when there is no Field Filters panel, see: - /dcim/rack-roles/ - /dcim/device-roles/ - /dcim/manufacturers/ - /circuits/circuit-types/ - /ipam/roles/ - /virtualization/cluster-types/ - /virtualization/cluster-groups/ The Field Filters panel is broken/empty on the following pages: - /dcim/regions/ - /dcim/site-groups/

adam commented

@thatmattlove commented on GitHub (Aug 5, 2021):

Folks, now that all tasks on this issue are completed, I'm closing this out. Please open separate issues for any new issues you discover.

@thatmattlove commented on GitHub (Aug 5, 2021): Folks, now that all tasks on this issue are completed, I'm closing this out. Please open separate issues for any new issues you discover.

adam commented

@jeremystretch commented on GitHub (Aug 5, 2021):

Thanks everyone who participated above for the detailed feedback!

@jeremystretch commented on GitHub (Aug 5, 2021): Thanks everyone who participated above for the detailed feedback!

adam commented