Loading...
 
Skip to main content

History: Navbar improvement ideas

Preview of version: 3

Bootstrap has a mobile-first philosophy, so things are built to be usable on small devices first and then scaled up/modified to work well on larger displays.

Tiki comes from the other direction, made for pc displays. The legacy site header carries that baggage.

Goal: Have a useful and attractive site header/navbar that adapts well to all screen sizes, and is as flexible as possible in accommodating content of the site.

Approaches:

  • Use Bootstrap code (or equivalent) as closely as possible.
    • It'll scale naturally for all displays (plus).
    • This limits large-display content - how to have banner ads, non-menu/search/login content, etc.(minus).
  • Use legacy Tiki site header modules, etc.
    • This displays fine in medium (maybe) and large screens.
    • This is almost unusable in small displays as the site header take up the whole screen.
  • Coping strategies
    • Use Bootstrap visibility classes to display modules appropriately for each screen size (http://getbootstrap.com/css/#responsive-utilities-classes).
      • Mostly this is to hide non-responsive modules in small views (plus).
      • This means extra work at the admin-modules stage, and it's not documented yet (minus).
    • Take advantage of the pagetop module zone to place a small-device menu that's hidden in larger views (currently in use at themes.to.o).
      • Provides an escape from what could be a mess in the collapsed site header.
      • This means making a duplicate menu and adding it in admin-menus.
    • ??
  • Next steps
    • Make navbar with "super-module fluffy" custom module
      • Should produce the desired collapsible header (plus).
      • Why is a profile/custom module needed to provide a basic feature? (minus)
    • Should alternative menu display ideas be introduced (slidebars -http://plugins.adchsm.me/slidebars/, etc.)?
    • Is there a way to revise the code to get both a proper collapsing menu in small screens and the legacy site header contents/appearance in desktop view?


Possible path:
Is there a way to have, in module admin, a "navbar" module. This would be a type of "fluffy/super-module" with the special quality of having two parts: a navbar-header and a navbar-collapse section. This would implement the standard Bootstrap navbar construction. But in the Tiki way the contents would be configurable. The admin could choose what goes in the navbar-header section (site logo, site title, text, icon, etc.) and what goes in the navbar-collapse section (menu, search form, login form, non-menu link(s), text, notification icons, etc.). The element id would be set automatically. Maybe this would be a two step process in which the navbar module would be created and saved first, then its sections would appear as module zones, to receive their contents.

History

Advanced
Information Version
Wed 08 of Jul, 2015 05:48 GMT-0000 Gary Cunningham-Lee Some ideas added about module zone/module visibility. 4
Mon 06 of Jul, 2015 13:32 GMT-0000 Gary Cunningham-Lee 3
Mon 06 of Jul, 2015 10:18 GMT-0000 Gary Cunningham-Lee Added some links. 2
Mon 06 of Jul, 2015 08:23 GMT-0000 Gary Cunningham-Lee 1