History: Tiki project sites navbar improvement
Source of version: 12
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 - ''I added CSS to clip the text overflow, with ellipsis, figuring getting most of the title is better than none.'' {sign user="chibaguy" datetime="2017-01-17T14:26:27+00:00"}
#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
- These are good ideas. The changes I made were just module configuration adjustments and a little custom CSS that probably should be added to the stylesheets. If more elaborate changes/improvements are needed to get a good, responsive navbar, then probably Tiki's code should be improved so the fixing doesn't have to be done as customization after the install. For example, maybe there could be an option for off-canvas slide-in menu, in admin-menus or admin-modules. - {sign user="chibaguy" datetime="2017-01-18T12:15:35+00:00"}
!! 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}
!! Another modification
I added these custom rules at themes.t.o on January 16, 2017:
{CODE()}
.layout_fixed_top_modules .top_modules { display: flex; } /* works to uncover site icon/title which weren't clickable */
#module_78 .nav { background: #f8e286a !important; } /* project site dropdown background */
{CODE}
The main problem was that the site icon and title were "covered" by the modules div. Assigning "display: inline-block" would stop the overlap, but then the modules get compacted horizontally. Assigning "display: flex" prevents the overlap and also keeps the modules content fairly nicely arranged.