When we turned the staff client header's search link into a menu, it added an extra click for those who want the advanced search by default. I propose that we turn it into a split-button type menu. Since the Bootstrap navbar doesn't include a built-in split button, my solution uses a link plus a dropdown menu, with some added JavaScript to tie the links' hover style together: http://zivotdesign.com/p/#1/15187161792537
Created attachment 71674 [details] [review] Bug 20217: Make header's catalog search menu into a split button This patch modifies the markup for the staff client header's catalog search menu so that it mimics the behavior of a Bootstrap split button (As seen on the cataloging home page's 'New from Z39.50' button). To test, apply the patch, run 'yarn build' to regenerate the staff client's CSS, and clear your browser cache. - View any page in the staff client. - Hover your mouse over the "Search" link in the header. It should trigger a hover affect on the adjacent menu link. - Clicking the "Search" link should take you directly to the advanced search page. - Clicking the adjacent menu link should display a menu containing links to advanced search and item search.
Created attachment 72688 [details] [review] Bug 20217: Make header's catalog search menu into a split button This patch modifies the markup for the staff client header's catalog search menu so that it mimics the behavior of a Bootstrap split button (As seen on the cataloging home page's 'New from Z39.50' button). To test, apply the patch, run 'yarn build' to regenerate the staff client's CSS, and clear your browser cache. - View any page in the staff client. - Hover your mouse over the "Search" link in the header. It should trigger a hover affect on the adjacent menu link. - Clicking the "Search" link should take you directly to the advanced search page. - Clicking the adjacent menu link should display a menu containing links to advanced search and item search. Signed-off-by: Claire Gravely <claire.gravely@bsz-bw.de>
I am not totally persuaded by the usability of this. The way it is now the distance between 'Search' and the arrow is bigger than the distance between the arrow and the next menu item which makes it a little confusing. I'd like to get others people's opinions on this. Btw: the more direct way to access the item search has been a big hit among our libraries!
Created attachment 73335 [details] [review] Bug 20217: Make header's catalog search menu into a split button This patch modifies the markup for the staff client header's catalog search menu so that it mimics the behavior of a Bootstrap split button (As seen on the cataloging home page's 'New from Z39.50' button). To test, apply the patch, run 'yarn build' to regenerate the staff client's CSS, and clear your browser cache. - View any page in the staff client. - Hover your mouse over the "Search" link in the header. It should trigger a hover affect on the adjacent menu link. - Clicking the "Search" link should take you directly to the advanced search page. - Clicking the adjacent menu link should display a menu containing links to advanced search and item search.
Created attachment 73336 [details] [review] Bug 20217 (follow up) Compiled CSS This patch contains the compiled CSS.
Can't apply the dependency : Apply? [(y)es, (n)o, (i)nteractive] y Applying: Bug 19474: Convert staff client CSS to SCSS Applying: Bug 19474: (QA follow-up) Fix sass lint yaml configuration Applying: Bug 19474: (follow-up) Bring scss up to date with latest CSS changes Applying: Bug 19474: (follow-up) Compiled CSS Using index info to reconstruct a base tree... M koha-tmpl/intranet-tmpl/prog/css/staff-global.css Falling back to patching base and 3-way merge... Auto-merging koha-tmpl/intranet-tmpl/prog/css/staff-global.css CONFLICT (content): Merge conflict in koha-tmpl/intranet-tmpl/prog/css/staff-global.css Failed to merge in the changes. Patch failed at 0001 Bug 19474: (follow-up) Compiled CSS The copy of the patch that failed is found in: /var/repositories/koha/.git/rebase-apply/patch
Created attachment 74807 [details] [review] Bug 20217: Make header's catalog search menu into a split button This patch modifies the markup for the staff client header's catalog search menu so that it mimics the behavior of a Bootstrap split button (As seen on the cataloging home page's 'New from Z39.50' button). To test, apply the patch, run 'yarn build' to regenerate the staff client's CSS, and clear your browser cache. - View any page in the staff client. - Hover your mouse over the "Search" link in the header. It should trigger a hover affect on the adjacent menu link. - Clicking the "Search" link should take you directly to the advanced search page. - Clicking the adjacent menu link should display a menu containing links to advanced search and item search.
Created attachment 74808 [details] [review] Bug 20217: (follow up) Compiled CSS This patch contains the compiled CSS.
I cannot get the attached compiled CSS to work - I think something went squiff there? Tested by applying first patch and running yarn build myself. All looks good. :)
I think we'll probably need to eliminate the requirement that a compiled CSS patch be included, since they'll fail to apply 99.9% of the time. In my opinion the compiled CSS patch doesn't need a signoff.
Created attachment 75299 [details] [review] Bug 20217: Make header's catalog search menu into a split button This patch modifies the markup for the staff client header's catalog search menu so that it mimics the behavior of a Bootstrap split button (As seen on the cataloging home page's 'New from Z39.50' button). To test, apply the patch, run 'yarn build' to regenerate the staff client's CSS, and clear your browser cache. - View any page in the staff client. - Hover your mouse over the "Search" link in the header. It should trigger a hover affect on the adjacent menu link. - Clicking the "Search" link should take you directly to the advanced search page. - Clicking the adjacent menu link should display a menu containing links to advanced search and item search. Signed-off-by: Claire Gravely <claire.gravely@bsz-bw.de>
Blocked by bug 19474.
Created attachment 77668 [details] [review] Bug 20217: Make header's catalog search menu into a split button This patch modifies the markup for the staff client header's catalog search menu so that it mimics the behavior of a Bootstrap split button (As seen on the cataloging home page's 'New from Z39.50' button). To test, apply the patch, run 'yarn build' to regenerate the staff client's CSS, and clear your browser cache. - View any page in the staff client. - Hover your mouse over the "Search" link in the header. It should trigger a hover affect on the adjacent menu link. - Clicking the "Search" link should take you directly to the advanced search page. - Clicking the adjacent menu link should display a menu containing links to advanced search and item search. Signed-off-by: Claire Gravely <claire.gravely@bsz-bw.de>
Created attachment 77679 [details] [review] Bug 20217: Make header's catalog search menu into a split button This patch modifies the markup for the staff client header's catalog search menu so that it mimics the behavior of a Bootstrap split button (As seen on the cataloging home page's 'New from Z39.50' button). To test, apply the patch, run 'yarn build' to regenerate the staff client's CSS, and clear your browser cache. - View any page in the staff client. - Hover your mouse over the "Search" link in the header. It should trigger a hover affect on the adjacent menu link. - Clicking the "Search" link should take you directly to the advanced search page. - Clicking the adjacent menu link should display a menu containing links to advanced search and item search. Signed-off-by: Claire Gravely <claire.gravely@bsz-bw.de> Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
I really like this bug, but when I tested the hover didn't affect both and they were farther apart than expected
(In reply to Nick Clemens from comment #15) > I really like this bug, but when I tested the hover didn't affect both and > they were farther apart than expected This is what it looks like to me: https://zivotdesign.com/p/view.php?p=15357194449806 Do you see something different?
Awesome work all! Pushed to master for 18.11
Enhancement, will not be backported to 18.05.x series.