[front-end] Assorted UI fixes

ms0ur1s commented 2 weeks ago

What? Why?

UI fixes linked to comments in PR https://github.com/DigitalCommons/mykomap-monolith/pull/40

Backgrounds missing on mobile panels
Content of desktop search panel not stretching to full width
Added Clear search button / functionality
As discussed with @rogup directory panel hyperlinks to buttons

@rogup, directory panel has a simple click function that adds location coordinates to the console. Also I'm not about until Tuesday now so feel free to merge in if all is ok.

Backgrounds missing on mobile panels and MapLibre controls ovelapping nav

Content of desktop search panel not stretching to full width

What should we test?

Run the app and:

Check the panels display correctly in mobile view
Check the search box is full width in desktop view
Check that these changes have not affected current functionality
Type something into the search box
- make sure the clear icon appears
- click on the icon and make sure text is cleared

Checklist

[ ] Updated or added any necessary docs in docs/
[ ] Added UTs
[ ] Checked that all automated tests pass

Notes

There is still some superfluous mark-up in the panel component, but I'm loathed to remove this until I've checked that it won't adversely affect the display of proper data.

ms0ur1s commented 2 weeks ago

Added clear search functionality to the PR as per @lin-d-hop's request.

https://www.awesomescreenshot.com/video/33355343?key=8746f5be8db60f93e27cdb64cd831eee

rogup commented 2 weeks ago

Thanks @ms0ur1s , this all looks good. I've also added a fix for the overlapping MapLibre controls onto the end of this branch. I'll merge it now

DigitalCommons / mykomap-monolith