Html edits from bootstrap 3 to bootstrap 5

[brownlenox]

Removed the classes hiding the menu and adjusted it for a horizontal layout.
Other Fixes:

Removed extra space above the navbar.
Adjusted the width of the assets table.
Hid the URL column in the sensor table again (clickable rows preserved).

---

• I agree to contribute to the project under Apache 2 License.
• To the best of my knowledge, the proposed patch is not based on code under GPL or other license that is incompatible with FlexMeasures

[Flix6x]

Thanks for contributing. Our test pipeline shows the following error:

jinja2.exceptions.TemplateSyntaxError: Encountered unknown tag 'comment'.

Please move the comments (that summarize the changes) into the PR description.

Are you working with a running FlexMeasures installation (e.g. with data from the toy tutorial), or with html pages only? I tested the new UI locally, but many elements end up misplaced. Some of the regressions (viewed on my laptop, 1920x1080, on pages that are not throwing the above Jinja exception):

• Large white margin at the top of the page.
• Contents of (hidden) modal divs (such as in our footer, and also on the /tasks page) are now always visible on the page.
• Expandable menu item listing (under the Tasks menu item) are always expanded instead of collapsed until clicked on.
• Menu appears vertically stacked instead of horizontally.
• Less responsive (e.g. menu no longer collapses into hamburger icon on small screen size).
• Floating table headers, when scrolling down, become floating on the middle of the page rather than at the top (seems to be related to the large white margin at the top).
• Footer contents are no longer center aligned.
• The replay button on the /sensor/<id> page incorrectly resizes when clicked on.

[brownlenox]

Was working with a running installation, but I was using a smaller pc, let me check on them

…

On Fri, 10 May 2024, 12:12 Felix Claessen, ***@***.***> wrote: Thanks for contributing. Our test pipeline <https://github.com/FlexMeasures/flexmeasures/actions/runs/9017816682/job/24811786661?pr=1058> shows the following error: jinja2.exceptions.TemplateSyntaxError: Encountered unknown tag 'comment'. Please move the comments (that summarize the changes) into the PR description. Are you working with a running FlexMeasures installation (e.g. with data from the toy tutorial), or with html pages only? I tested the new UI locally, but many elements end up misplaced. Some of the regressions (viewed on my laptop, 1920x1080, on pages that are not throwing the above Jinja exception): - Large white margin at the top of the page. - Contents of (hidden) modal divs (such as in our footer, and also on the /tasks page) are now always visible on the page. - Expandable menu item listing (under the *Tasks* menu item) are always expanded instead of collapsed until clicked on. - Menu appears vertically stacked instead of horizontally. - Less responsive (e.g. menu no longer collapses into hamburger icon on small screen size). - Floating table headers, when scrolling down, become floating on the middle of the page rather than at the top (seems to be related to the large white margin at the top). - Footer contents are no longer center aligned. - The replay button on the /sensor/<id> page incorrectly resizes when clicked on. — Reply to this email directly, view it on GitHub <#1058 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AX5E4IRERUWPQYPZEYSCJWTZBSFQDAVCNFSM6AAAAABHOZQHW6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCMBUGI2DQMBTGQ> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[nhoening]

The comments are helpful, but I think they should live in the PR description, to be documented there, and not in the code.

Can you move them?

[brownlenox]

yes

…

On Fri, May 10, 2024 at 12:31 PM Nicolas Höning ***@***.***> wrote: ***@***.**** requested changes on this pull request. The comments are helpful, but I think they should live in the PR description, to be documented there, and not in the code. Can you move them? ------------------------------ In flexmeasures/ui/templates/base.html <#1058 (comment)> : > @@ -22,8 +22,8 @@ <link ***@***.***/dist/leaflet.css" rel="stylesheet" /> <link ***@***.***/dist/MarkerCluster.css" rel="stylesheet" /> <link ***@***.***/dist/MarkerCluster.Default.css" rel="stylesheet" /> - <!-- Bootstrap --> - <link href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> + <!-- Latest Bootstrap link--> + <link href="https://stackpath.bootstrapcdn.com/bootstrap/5.3.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> Can you explain or point us to the need for this new integrity field? — Reply to this email directly, view it on GitHub <#1058 (review)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AX5E4IT35NO6CPCFT5BZ73LZBSHX7AVCNFSM6AAAAABHOZQHW6VHI2DSMVQWIX3LMV43YUDVNRWFEZLROVSXG5CSMV3GSZLXHMZDANBZGY2TIMJTGY> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[nhoening]

Thanks, now we are loading the modern bootstrap!

I'm not sure which comments by @Flix6x from above still apply now. Here some things I see:

• Menu not displaying (element is set to be collapsed with class "collapse navbar-collapse navbar-right" and ID #bs-example-navbar-collapse-1), but even when i display it, it's vertical.
• White space above menu bar
• Assets page: table seems too narrow
• Sensor table on asset page shows URL column, which we were hiding on purpose (we use it to make each row a clickable link)

I attach screenshots for each:

[brownlenox]

Ok, I'll take a look.

…

On Sat, 11 May 2024, 02:27 Nicolas Höning, ***@***.***> wrote: ***@***.**** requested changes on this pull request. Thanks, now we are loading the modern bootstrap! I'm not sure which comments by @Flix6x <https://github.com/Flix6x> from above still apply now. Here some things I see: - Menu not displaying (element is set to be collapsed with class "collapse navbar-collapse navbar-right" and ID #bs-example-navbar-collapse-1), but even when i display it, it's vertical. - White space above menu bar - Assets page: table seems too narrow - Sensor table on asset page shows URL column, which we were hiding on purpose (we use it to make each row a clickable link) I attach screenshots for each: Screenshot.from.2024-05-11.01-15-13.png (view on web) <https://github.com/FlexMeasures/flexmeasures/assets/1042336/0f986d3d-19ad-4192-9053-18d1d5472483> Screenshot.from.2024-05-11.01-15-41.png (view on web) <https://github.com/FlexMeasures/flexmeasures/assets/1042336/b9e24fdb-2092-4049-90e3-6fe1f2ae6798> Screenshot.from.2024-05-11.01-16-46.png (view on web) <https://github.com/FlexMeasures/flexmeasures/assets/1042336/ebd6cda4-77c2-4e38-bdad-9de992e8800a> — Reply to this email directly, view it on GitHub <#1058 (review)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AX5E4IWRQVVDWNEGPA3WEB3ZBVJU5AVCNFSM6AAAAABHOZQHW6VHI2DSMVQWIX3LMV43YUDVNRWFEZLROVSXG5CSMV3GSZLXHMZDANJQHE3TMMRQGA> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[nhoening]

• The menu is now horizontal and shows, but it is not styled. The dropdown for tasks isn't working.
• The breadcrump navigation on the asset page should have some padding on the left, it is only clickable at the bottom edge, and the dropdown at the right side doesn't work.
• The Create new asset" button on the asset overview page is vertically moved to the middle, should be at the top.
• The accounts page still shows the "URL" column which should be hidden.
• The /logged-in-user page layout is broken

Please compare the current layout to the previous one.

[brownlenox]

These are changes made regarding the requested changes.

[nhoening]

Thanks.

• The menu seems to have some padding or margin (top and bottom) which make the highlighting of the currently selected item not look good. Also, action buttons (e.g. create new asset) and the asset breadcrumb are then too close to the menu. Check #topnavbar, I found for instance -bs-navbar-padding-y`.
• The sensor table on the asset page still shows the hidden URL column. Same for users and assets tables on accounts page.
• Breadcrumbs are now wrapping and the dropdown is gone.
• On logged-in-user page, the audit log buttons are too low.

Some of these issues are needed to be checked on all pages, not just foxed on one, apparently.

[nhoening]

I believe we are getting closer.

• The menu is still too wide vertically. I can fix that in my console removing --bs-navbar-padding-y: 0.5rem;, as I said earlier.
• The user page seems broken now.
• The bread crumps on the asset page seem to work better, but they still wrap vertically.

[brownlenox]

Made those changes, but i can't seem to find, this --bs-navbar-padding-y: 0.5rem, to remove it from my end to ensure the menu is not too large vertically

[nhoening]

It's in the bootstrap code actually. I just found it with the dev toolbar.
I'm not sure what the best way is to set menu height better, but maybe overwriting this with !important in our own CSS would work?

[brownlenox]

It's in the bootstrap code actually. I just found it with the dev toolbar. I'm not sure what the best way is to set menu height better, but maybe overwriting this with !important in our own CSS would work?

I have enforced it by padding-top and bottom of 0

[nhoening]

I believe we're very close. I added some last comments in the code and have two things that don't look good:

• The breadcrump dropdown is still overlaid :(
• The tables need some spacing/padding for the interactive elements (checkbox, buttons, ...). See screenshots. All these items are cramped to the eedge and each other.

[nhoening]

This is the buttons under the table right now:

[brownlenox]

thanks

[brownlenox]

removed unnecessary css

[nhoening]

Great, everything seems to work fine. Thanks!

I approve and have just one question left, which you might know an answer to.