Summary: | IntranetNav causes overlap of top menu | ||
---|---|---|---|
Product: | Koha | Reporter: | Tomáš Wünsch <fraktik> |
Component: | Staff interface | Assignee: | Nick Clemens (kidclamp) <nick> |
Status: | Failed QA --- | QA Contact: | Testopia <testopia> |
Severity: | trivial | ||
Priority: | P5 - low | CC: | andrew, gmcharlt, jonathan.druart, nick, oleonard |
Version: | Main | ||
Hardware: | All | ||
OS: | All | ||
Change sponsored?: | --- | Patch complexity: | --- |
Documentation contact: | Documentation submission: | ||
Text to go in the release notes: | Version(s) released in: | ||
Circulation function: | |||
Attachments: |
picture of graphical overlap of top menu
Bug 23840: Remove 'top' from user-menu placement Bug 23840: Remove 'top' from user-menu placement Screenshot showing unwanted alignment |
Description
Tomáš Wünsch
2019-10-18 12:16:44 UTC
Could you please post the HTML in your IntranetNav preference? Just couple simple links: <li><a href="/kcenter2/" target="_blank">Centrum</a></li> <li><a href="https://vufind.knihovna-uo.cz/vufind/Search/" target="_blank">Katalog</a></li> <li><a href="https://www.knihovna-uo.cz/staff/" target="_blank">Rozcestník</a></li> <li><a href="https://vufind.knihovna-uo.cz/piwik/" target="_blank">Statistiky</a></li> But you do not need more links, one long enough as: <li><a href="https://center.koha.cz/demo" target="_blank">Center___empty____space____here_for_very_long_link___</a></li> do exactly the same result. If you are not able to recreate this behaviour, you can check it on our demo (demo/demo for login): https://demo.koha.cz/cgi-bin/koha/mainpage.pl (but changed url will stick there just for today - we have midnight cleanup in place there). A temporary fix would be to put your links into a menu: <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu <b class="caret"></b></a> <ul class="dropdown-menu dropdown-menu-right"> <li><a href="/kcenter2/" target="_blank">Centrum</a></li> <li><a href="https://vufind.knihovna-uo.cz/vufind/Search/" target="_blank">Katalog</a></li> <li><a href="https://www.knihovna-uo.cz/staff/" target="_blank">Rozcestník</a></li> <li><a href="https://vufind.knihovna-uo.cz/piwik/" target="_blank">Statistiky</a></li> <li><a href="https://center.koha.cz/demo" target="_blank">Center___empty____space____here_for_very_long_link___</a></li> </ul> </li> Created attachment 138814 [details] [review] Bug 23840: Remove 'top' from user-menu placement When IntranetNav gets long it can overlap with the user menu. This patch removes the 'top' alignment so that it can move down to allow for longer menus To test: 1 - Add to IntranetNav a list of links that will interfere with display: <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> 2 - Load a page in staff client 3 - note the current 'user-menu' overlaps with links 4 - Apply patch 5 - Build css: yarn build 6 - Reload 7 - Confirm user menu is now below the links Created attachment 138825 [details] [review] Bug 23840: Remove 'top' from user-menu placement When IntranetNav gets long it can overlap with the user menu. This patch removes the 'top' alignment so that it can move down to allow for longer menus To test: 1 - Add to IntranetNav a list of links that will interfere with display: <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> <li><a href="#" target=_blank>Link</a></li> 2 - Load a page in staff client 3 - note the current 'user-menu' overlaps with links 4 - Apply patch 5 - Build css: yarn build 6 - Reload 7 - Confirm user menu is now below the links Signed-off-by: Andrew Fuerste-Henry <andrewfh@dubcolib.org> Looks good to me. Owen, could we have your stamp on this one, side-effects possible? Created attachment 138893 [details] Screenshot showing unwanted alignment The adverse side-effect of this is more obvious if you have custom CSS highlighting the division between the menu bar and the search header area. I don't think this is the correct solution for this problem. I also don't know that we should be trying to solve this problem right now when we're hoping to get bug 30952 through testing. Following the upgrade to Bootstrap 5 I think the navbar has better responsive behavior. Folks who want to be able to load up the menu with lots of things could add to IntranetUserCSS: #header { flex-wrap: wrap } |