Page heading/layout consistency improvements

[CDx4f3kCAf3Y]

The main sections of site do not have a uniform header/layout.

Here are some recommendations to make everything seem more uniform/appealing:

• There is a tiny empty bar that appears at the very top on Live View, Streams, Users, and System.
  • I'm not sure what the purpose for it is. I think it could be removed (or added to Recordings and Settings if you think it improves the overall look).
• All sections except Users have a nice heading in a rounded box.
  • This box contains a minimum of the section name on the left. followed by optional sub-section buttons, and ending with operations buttons on the right.
  • I think the Users section should be updated to match.
• All the sub-sections access controls are different.
  • On the Live View page, they are larger individual buttons that semi function like radio buttons.
  • On the Recordings page, they are smaller radio buttons.
  • On the System page, they are tabs.
  • I think this should be made uniform.
    • Whether they are buttons in the header box or tabs below it, will depend on how much vertical space should be consumed for site navigation functions.
    • The one note about the tabs below the header box, is that not all sections will have sub-sections. This will make the start of the actual page content vary across pages.

[CDx4f3kCAf3Y]

I think that for the v1.0.0 release, the web interface should properly support mobile devices. This would be a great time to think about how the site should look and function on a mobile device and how any of that has a bearing on the above/what the site looks and functions like on a desktop device.

[DevlTz]

Speaking of UI tweaks, I noticed another small detail in the top navigation bar. I'm not entirely sure if this static layout is the intended behavior, but I believe it would be a great quality-of-life improvement.

Currently, right next to the "Logout" button, the text just says "User" statically for everyone.

Since we now have different roles and multi-tenant access, it would be really helpful if this field dynamically displayed the actual username of the currently logged-in account (for example, showing "admin" or "receptionist_01"). This way, if multiple people use the same machine, you instantly know whose account is currently active.

[CDx4f3kCAf3Y]

Building upon this, the username should be clickable. Clicking the username should open up the edit user modal for the currently logged in user. The currently logged in user should be able to adjust their name and/or email address, at a minimum, even if they do not have permissions for the full User management section.

[matteius]

Commit pushed to add constitency, and the user requests.

[DevlTz]

Adding to the consistency topic — I noticed another small layout inconsistency on the Recordings page specifically.

The navbar and the "Recordings" heading box don't stretch to the same width as the Filters bar below them. It looks like they have a different max-width or padding applied to their container, causing the sections to misalign horizontally.

Small detail, but it breaks the visual uniformity across the page!

[CDx4f3kCAf3Y]

Hi @DevlTz!

Would you please add some markings to your screenshot to show how you think things should be lining up? I want to make sure I understand your vision correctly.

Please also keep in mind that it should look great across all three sub pages - Table, Grid, and Timeline.

The Timeline page needs some work to get it looking like the other two. Ideally, it should have the same nice page header as the other two and show the text Recordings followed by the three buttons, for consistency.

[CDx4f3kCAf3Y]

This is with commit 3bf4298.

Here is a short list of what I found so far:

• The username link next to the Logout button.

  • This should be a button / styled the same way as all the other buttons in the header, including with the pointer cursor.

• The Edit Profile modal that appears when clicking that username link.

  • It should allow resetting the password.

• Set the vertical scrollbar to always be visible.

  • This will prevent the entire header from shifting left and right as you switch pages, depending if the page is long enough to have a vertical scrollbar.
  • This can be done like this:

--- a/web/css/base.css
+++ b/web/css/base.css
@@ -128,6 +128,7 @@
 @layer base {
   body {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    overflow-y: scroll;
   }
 }

• The CSS files are being applied inconsistently between the pages.

  • You can see this most easily by focusing on the padding around the Recordings button as an example.
    • Live View (WebRTC) - Recordings button - Padding 8 16, Margin 0 2
    • Recordings (Table) - Recordings button - Padding 8 12, Margin 0 0
    • Streams - Recordings button - Padding 8 16, Margin 0 2
    • Settings - Recordings button - Padding 8 12, Margin 0 0
    • Users - Recordings button - Padding 8 16, Margin 0 2
    • System - - Recordings button - Padding 8 16, Margin 0 2
  • This causes the Header buttons to jump around a bit as you switch between pages.
    • Ideally, they should all be in the same position on all pages.

• The Users page is built slightly different than the rest of the pages.

  • There is an extra header that is initially appearing and then disappearing on page load, causing a vertical bouncing effect when the page loads.
    • It appears because it is included in the file web/users.html, in the <main> tag.
    • It disappears because the entire contents the <main> tag is replaced by Javascript.

[matteius]

Change pushed.

[CDx4f3kCAf3Y]

@matteius

This is all based on the latest official main branch, at commit 9f90854.

I have applied a number of improvements to the top header bar, in order to get it completely stable across all the pages. There now is no movement of any header element in any direction.

I've also improved the the language selection mechanism. In the header, I now display the a flag that goes with the selected language and its short code. When that is clicked, a popup appears beneath it showing all the available languages. For each language, the flag, short code, and native name are displayed. Selecting any of that changes the language. I've also added this mechanism to the bottom of the login page.

Please carefully review my branch of proposed changes. https://github.com/CDx4f3kCAf3Y/lightNVR/tree/heading-layout-improvements. Ending commit is CDx4f3kCAf3Y/lightNVR@68f2bbf. The branch is passing all integration tests as defined in .github/workflows/integration-test.yml. You are free to change, tweak, polish, add tests and/or documentation, etc., if you like them.

Some screenshots with that branch running:

The only remaining items from everything above are:

• All the sub-sections access controls are different.
  • On the Live View page, they are larger individual buttons that semi function like radio buttons.
  • On the Recordings page, they are smaller radio buttons.
  • On the System page, they are tabs.
  • I think this should be made uniform.
    • Whether they are buttons in the header box or tabs below it, will depend on how much vertical space should be consumed for site navigation functions.
    • The one note about the tabs below the header box, is that not all sections will have sub-sections. This will make the start of the actual page content vary across pages.
• The lining up of controls on the Recordings page, as pointed out by @DevlTz.

[CDx4f3kCAf3Y]

This applies to all the breakpoints in the responsive design, for varying sized mobile devices. Please check that out too.

[matteius]

Are you ableto open a PR @CDx4f3kCAf3Y ?

[CDx4f3kCAf3Y]

I did not fork the official repo using the GitHub website tools, so that option is not available to me.

You can still pull/review/change/merge yourself.

Here's how I would do that, starting with a clean folder:

git clone https://github.com/opensensor/lightNVR
cd lightNVR
git remote add CDx4f3kCAf3Y https://github.com/CDx4f3kCAf3Y/lightNVR
git fetch --all
git checkout heading-layout-improvements 
# review, change, squash, etc.  whatever you want.
git checkout main 
git merge --no-ff heading-layout-improvements 
git push

[matteius]

Thanks, changes applied -- looks nice with the country flags on there now.

[CDx4f3kCAf3Y]

This is in commit c8c5c9a.

A couple things from the post-merge changes:

== 1 ==

I am curious about the re-introduction of this line:

lightNVR/web/js/components/preact/common/LanguageSelector.jsx

Line 27 in c8c5c9a

const currentLocale = availableLocales.find((item) => item.code === locale) || availableLocales[0];

From what I can tell, this is already implemented, but with more grace, in web/js/i18n.js. There will always be a value in locale and it will already be confirmed to exist in availableLocales. When the user changes their locale, the new locale value is confirmed to exist in availableLocales before saving to local storage. I'm not sure what new value this adds.

Specifically:

• availableLocales is exported by the call to getAvailableLocales(), which reads in the manifest file, defaulting to the built-in fall manifest.
• locale is exported from the variable currentLocale.
  • That variable is generated in this manner:
    • Every page, immediately on startup, makes the call to initI18n()
      • Example:

        • lightNVR/web/js/pages/index-page.jsx

          Lines 79 to 80 in c8c5c9a

          	document.addEventListener('DOMContentLoaded', async () => {
          	await initI18n();

    • initI18n() then, simplified, does the following:
      • Gets the user's preferred locale from local storage. If a value is retrieved, it validates that it exists in the manifest file or defaults back to 'English'
      • If there is no user preferred locale, it uses the browser's preferred locale. It validates that this locale also exists in the manifest file or defaults back to 'English'
      • The final value is then, simplified, stored in the currentLocale variable.

== 2 ==

On the mobile menu - the language selector, the edit profile, and the logout button have switched to display on different lines. These three should all be on the same line.

Otherwise, everything looks good.

Other remaining items (re-listed here to keep everything in one place):

• All the sub-sections access controls are different.
  • On the Live View page, they are larger individual buttons that semi function like radio buttons.
  • On the Recordings page, they are smaller radio buttons.
  • On the System page, they are tabs.
  • I think this should be made uniform.
    • Whether they are buttons in the header box or tabs below it, will depend on how much vertical space should be consumed for site navigation functions.
    • The one note about the tabs below the header box, is that not all sections will have sub-sections. This will make the start of the actual page content vary across pages.
• The lining up of controls on the Recordings page, as pointed out above.

[CDx4f3kCAf3Y]

Disregard the first item above, about the re-introduction of that line. I did not make the connection between the need for that line and the overall change to the LanguageSelector component (changing from keying off the locale code to keying off the locale structure, which includes the code and native name).

[CDx4f3kCAf3Y]

For the second item above, I have two fixes for you. They are in branch mobile-menu-fixes ending in commit CDx4f3kCAf3Y/lightNVR@502a397. The branch is based off upstream commit c8c5c9a.

[DevlTz]

Hi, @CDx4f3kCAf3Y! Sorry for the late response.

Just to clarify my original report — the issue is specific to the
Table view only.

In Grid and Timeline views, the filter bar looks clean and consistent.
However, in Table view, the action buttons (Delete Selected,
Delete All Filtered, Download Selected, Manage Tags,
View in Timeline) cause the filter bar to stretch and become
unbalanced — the left side gets compressed while the buttons
expand all the way to the right edge without proper spacing.

Grid/Timeline filter bar (expected behavior):
FILTERS| ▽ | ✓ Select

Table view filter bar (current broken state):
FILTERS| ▽ | No recording selected | [Delete Selected] [Delete All Filtered] [Download Selected] [Manage Tags] [View in Timeline] ──────────────────── ⚙

The fix would be keeping the action buttons consistently sized/spaced
regardless of which view is active.

To reproduce: Dark mode, default color theme.

[CDx4f3kCAf3Y]

Here is the current version (Table only):

Is this what you are envisioning (Table only)?

[matteius]

Changes pushed!

[CDx4f3kCAf3Y]

Testing with commit 767ed94.

---

Regarding the change for wrapping the action buttons on the Recordings Table page in commit a4fffd1. This is a good start!

Considering this change in conjunction with the matching existing functionality on the Recordings Grid page, I identified the following changes to be made:

Vertical alignment of the gear icon when action buttons are wrapped (fix Grid)

• Table
  • 
• Grid
  • 
• I think having the gear icon in the middle looks better than at the bottom

The table should always overflow in the horizontal direction without affecting the action button row, regardless of breakpoints and action button wrapping (fix Table)

• max (2000px) breakpoint, filters sidebar shown
  
• max-1 (1450px) breakpoint, filters sidebar shown
  

Not all breakpoints are supported for action button wrapping (fix Table)

• max-2 (1200px) breakpoint, filters sidebar shown
  
• max-3 (950px) breakpoint, filters sidebar shown
  
• max-3 (950px) breakpoint, filters sidebar hidden
  

---

For the improvement recommended by @DevlTz, waiting on confirmation that equal spacing around action buttons (when not wrapping) is the goal. See proof of concept examples above.

---

All the sub-page access controls are different.

• On the Live View page, they are larger individual buttons that semi function like radio buttons.
• On the Recordings page, they are smaller radio buttons.
• On the System page, they are tabs.
• I think this should be consistent across all pages (buttons in the header box or tabs below it).
  • This will depend on how much vertical space should be consumed for site navigation functions.
  • The one note about the tabs below the header box, is that not all sections will have sub-sections.
    • This will make the vertical start of the actual page content vary across pages.
    • This will be noticeable when quickly flipping between pages.

Can you think through this and let me know what your preference is?

[CDx4f3kCAf3Y]

Tested in b624c98.

---

For the action button wrapping on the Recordings Table page.

• Action buttons are not wrapping on any breakpoints. (Used to work on the smallest break point.)
• No improvement on the table overflowing horizontally past the end of the page. (Should switch to horizontally scrolling / overflow-x, preserving the overall page layout on the right side of the site.)

---

Waiting on confirmation that equal spacing around action buttons.

---

For the sub-page access controls.

• Live View page

  • The inactive tabs do not consistently change mouse cursor to pointer mode, to indicate they can be clicked.

• Recordings page

  • Tabs look nice, but disorienting when moving from Table/Grid to Timeline.
    • Two completely different layouts and in completely different positions.
    • It would help if the Timeline Playback page has the same page specific header as all the other pages.
      • It's the only page on the site that doesn't have the nice white background for page content and the page header in the horizontal box with rounded corners at the top. That gives it an unpolished feeling.

The site should have a uniform way of navigation between sub-pages, regardless of what page is shown. That will improve the overall look and feel of the site / make it feel more polished.