History: Tiki project sites navbar improvement

Source of version: 14

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: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } /* works to uncover site icon/title which weren't clickable - browser prefixes: http://stackoverflow.com/questions/24899943 */ #module_78 .nav { background: #f8e286a !important; } /* project site dropdown background - themes.t.o only */ {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. The display:flex rule was added at the doc, dev, and community sites also.

History

Enable pagination rows per page

HTML diff Side-by-side diff Side-by-side diff by characters Inline diff Inline diff by characters Full side-by-side diff Full side-by-side diff by characters Full inline diff Full inline diff by characters Unified diff Side-by-side view HTML diff Side-by-side diff Advanced

Information	Version
Sun 29 of Jan, 2017 09:27 GMT chibaguy Info on configurations updated.	16
Sun 29 of Jan, 2017 07:25 GMT chibaguy Updated info about the navbar configuration.	15
Sat 28 of Jan, 2017 11:16 GMT chibaguy More CSS put in code plugin.	14
Thu 26 of Jan, 2017 07:54 GMT chibaguy	13
Thu 26 of Jan, 2017 07:38 GMT chibaguy Another note added.	12
Wed 18 of Jan, 2017 12:15 GMT chibaguy Some ideas added.	11
Tue 17 of Jan, 2017 14:26 GMT chibaguy Added comments.	10
Tue 17 of Jan, 2017 14:20 GMT chibaguy Question added.	9
Tue 17 of Jan, 2017 14:16 GMT luci	8
Tue 17 of Jan, 2017 13:58 GMT luci	7
Tue 17 of Jan, 2017 13:54 GMT luci	6
Tue 17 of Jan, 2017 13:52 GMT luci some suggesstions	5
Tue 17 of Jan, 2017 13:28 GMT chibaguy Minor text edit.	4
Tue 17 of Jan, 2017 13:26 GMT chibaguy Some descriptions added.	3
Tue 17 of Jan, 2017 12:59 GMT luci	2
Mon 16 of Jan, 2017 15:30 GMT chibaguy	1

Select action to perform with checked... Remove OK