Bug 23840 - IntranetNav causes overlap of top menu
Summary: IntranetNav causes overlap of top menu
Status: Failed QA
Alias: None
Product: Koha
Classification: Unclassified
Component: Staff interface (show other bugs)
Version: master
Hardware: All All
: P5 - low trivial (vote)
Assignee: Nick Clemens
QA Contact: Testopia
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2019-10-18 12:16 UTC by Tomáš Wünsch
Modified: 2022-08-09 10:48 UTC (History)
5 users (show)

See Also:
Change sponsored?: ---
Patch complexity: ---
Documentation contact:
Documentation submission:
Text to go in the release notes:
Version(s) released in:


Attachments
picture of graphical overlap of top menu (24.82 KB, image/png)
2019-10-18 12:16 UTC, Tomáš Wünsch
Details
Bug 23840: Remove 'top' from user-menu placement (2.86 KB, patch)
2022-08-08 14:26 UTC, Nick Clemens
Details | Diff | Splinter Review
Bug 23840: Remove 'top' from user-menu placement (2.92 KB, patch)
2022-08-08 14:51 UTC, ByWater Sandboxes
Details | Diff | Splinter Review
Screenshot showing unwanted alignment (52.05 KB, image/png)
2022-08-09 10:47 UTC, Owen Leonard
Details

Note You need to log in before you can comment on or make changes to this bug.
Description Tomáš Wünsch 2019-10-18 12:16:44 UTC
Created attachment 94403 [details]
picture of graphical overlap of top menu

For more then one or two SHORT links in IntranetNav variable in Staff Client Preferences (Appearance) and variable window size there is some interval of page width, when an visual overlap between top menu from the right one (user/library related & Help) to the left one(general) happen.

In previous version this do not happen (right menu jump one row down instead).

Examples of both is shown in an attachment:
19.05: https://i.imgur.com/4aVrcRt.png
18.11: https://i.imgur.com/y4iJeMD.png
Comment 1 Owen Leonard 2019-10-20 00:17:41 UTC
Could you please post the HTML in your IntranetNav preference?
Comment 2 Tomáš Wünsch 2019-10-24 06:56:09 UTC
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).
Comment 3 Owen Leonard 2019-10-24 13:31:14 UTC
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>
Comment 4 Nick Clemens 2022-08-08 14:26:50 UTC
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
Comment 5 ByWater Sandboxes 2022-08-08 14:51:36 UTC
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>
Comment 6 Jonathan Druart 2022-08-09 08:51:21 UTC
Looks good to me. Owen, could we have your stamp on this one, side-effects possible?
Comment 7 Owen Leonard 2022-08-09 10:47:59 UTC
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.