History: Tiki project sites navbar improvement
Source of version: 9
Copy to clipboard
Notes and suggestions can go here.
{QUOTE(replyto=luci)}It doesn't look quite well to me:{QUOTE}
{HTML()}<style>.masonry > * {border: solid 1px #ccc; border-radius: .5rem; margin: 0 0 1rem}</style>{HTML}
{DIV(class="masonry")}{img fileId="227" thumb="box"} {img fileId="228" thumb="box"}{DIV}
{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.
!! Suggestions by luci
#Make the site title and icon link to home page again - Don't they now? {sign user="chibaguy" datetime="2017-01-17T14:20:57+00:00"}
#On small screen hide the site titles and show only the icon
#On small screen expand the menu items to full width nicely with height a bit larger for easy touch with solid background on hover
#On small screen align the collapse arrows to right
#On small screen make the menu expand (cover) the whole viewport (100vw, 100vh and position: fixed or absolute with very high z-index) so it looks more like an app menu
#On small screen use off-canvas for the main menu?
#On small screen show the search icon only and on touch expand and reveal the search input full width
!! Steps taken by Gary
These are steps taken to try to improve the appearance and usability, The logo module was removed. 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}