History: Tiki project sites navbar improvement
Source of version: 3
Copy to clipboard
Notes and suggestions can go here.
It doesn't look quite well to me:
{img fileId="227" thumb="box"} {img fileId="228" thumb="box"}
{sign user="luci" datetime="2017-01-17T12:59:17+00:00"}
Yeah, the site titles are kind of long, so cause problems, for one thing.
!! Steps taken
Anyway, about what I did to try to improve the appearance and usability, I removed the logo module. This module works fine in large screen sizes, but not in the small view, if you want the logo to be seen and be clickable to the home page.
When one of the fixed navbar layout templates is used, there's no need to assign the logo module now if there's a menu in the top module zone - the site icon is displayed if it is specified in the menu's module assignment. This way the small-device view gets the site icon/logo, which didn't happen before when assigning the logo module. Earlier, just the "Fixed top navbar 2" layout template had the link to the site icon/title hard-coded, but in a recent commit it was added to the "Fixed top navbar 1" layout template as well.
When other layout templates (Basic Bootstrap, Classic Tiki, etc.), the logo module can be used in larger screen sizes, but should be hidden in small sizes; the site icon takes its place (assuming the top module zone contains a menu that has the site icon assigned as a parameter).
Unassigning the logo module also fixed the positioning of other items in the module zones that were pushed out of place due to things being too crowded.
Top module zone assignments at this site:
|| __Name__ | __Order__ | __Parameters__
menu | 1 | id=48%%%navbar_toggle=y%%%nobox=y%%%topclass=hidden-lg hidden-md
Tiki_sites_dropdown | 2| nobox=y%%%topclass=col-sm-2 hidden-xs hidden-sm*
login_box | 3 | mode=popup%%%remember=y%%%nobox=y%%%style=margin-right:-15px;margin-left:-15px%%%topclass=col-md-2 hidden-xs hidden-sm
quickadmin | 4 | nobox=y%%%topclass=col-sm-2 pull-right ||
*The login form is hidden in small views, and a second login module is assigned to the pagetop module zone and made visible in small views only.
A custom CSS rule is added to fix quickadmin dropdown not being visible in small screens. Bootstrap normally uses overflow-y: auto, but this doesn't seem to be sufficient here for some reason:
{CODE()}
.navbar-collapse.in {
overflow-y: visible;
}{CODE}