From 14a71985552a3ef0f8be9c2e05106bb9d99b1cdb Mon Sep 17 00:00:00 2001 From: Jimako Date: Wed, 30 Dec 2020 11:02:37 +0100 Subject: [PATCH] added info titles for menu, added alt6 markup, simplified items. --- .../bootstrap4/navigation_template.php | 289 ++++++++++-------- 1 file changed, 154 insertions(+), 135 deletions(-) diff --git a/e107_core/templates/bootstrap4/navigation_template.php b/e107_core/templates/bootstrap4/navigation_template.php index 10c5cfa47..9202ab948 100644 --- a/e107_core/templates/bootstrap4/navigation_template.php +++ b/e107_core/templates/bootstrap4/navigation_template.php @@ -1,39 +1,40 @@ "; +$NAVIGATION_TEMPLATE['main']['start'] = "'; -// Main Link which has a sub menu. +// Main Link which has a sub menu. $NAVIGATION_TEMPLATE['main']['item_submenu'] = "
  • - + {NAV_LINK_SUB}
    • "; @@ -46,9 +47,9 @@ $NAVIGATION_TEMPLATE['main']['item_submenu_active'] = ' {NAV_LINK_SUB} -'; +'; -// Sub menu BUG: aria-labelledby= - it should be the same as navbarDropdownMenuLink-{NAV_LINK_ID} from submenu parent but LINK_PARENT returns 0 +// Sub menu BUG: aria-labelledby= - it should be the same as navbarDropdownMenuLink-{NAV_LINK_ID} from submenu parent but LINK_PARENT returns 0 $NAVIGATION_TEMPLATE['main']['submenu_start'] = '
    '; $NAVIGATION_TEMPLATE['main']['submenu_item'] = '{NAV_LINK_ICON}{NAV_LINK_NAME}'; $NAVIGATION_TEMPLATE['main']['submenu_item_active'] = '{NAV_LINK_ICON}{NAV_LINK_NAME} '; @@ -60,154 +61,172 @@ $NAVIGATION_TEMPLATE['main']['submenu_loweritem'] = $NAVIGATION_TEMPLATE['main'] $NAVIGATION_TEMPLATE['main']['submenu_loweritem_active'] = $NAVIGATION_TEMPLATE['main']['submenu_item_active']; $NAVIGATION_TEMPLATE['main']['submenu_lowerend'] = ''; - -/* - ALTERNATIVE MARKUP for main navigation: - {NAVIGATION: layout=main-alt&type=any} - div/a version with dropdown, 2 levels - see https://getbootstrap.com/docs/4.5/components/navbar/#nav -*/ +/* +ALTERNATIVE MARKUP for main navigation: +{NAVIGATION: layout=main-alt&type=any} +div/a version with dropdown, 2 levels +see https://getbootstrap.com/docs/4.5/components/navbar/#nav + */ $NAVIGATION_TEMPLATE['main_alt'] = $NAVIGATION_TEMPLATE['main']; -$NAVIGATION_TEMPLATE['main-alt']['start'] = "
    "; +$NAVIGATION_TEMPLATE['main-alt']['start'] = "
    "; $NAVIGATION_TEMPLATE['main-alt']['item'] = "{NAV_LINK_ICON}{NAV_LINK_NAME}"; $NAVIGATION_TEMPLATE['main-alt']['item_active'] = "{NAV_LINK_ICON}{NAV_LINK_NAME}"; $NAVIGATION_TEMPLATE['main-alt']['end'] = '
    '; -/* - DEFAULT LIST-GROUP SIDE TEMPLATE FOR: - {NAVIGATION: layout=side&type=any} - {NAVIGATION=side}; - ul/liv version with list-group, 2 levels - see https://getbootstrap.com/docs/4.1/components/list-group/#basic-example -*/ - -$NAVIGATION_TEMPLATE['side']['start'] = "'; +/* +DEFAULT LIST-GROUP SIDE TEMPLATE FOR: +{NAVIGATION: layout=side&type=any} +{NAVIGATION=side}; +ul/liv version with list-group, 2 levels +see https://getbootstrap.com/docs/4.1/components/list-group/#basic-example + */ + +$NAVIGATION_TEMPLATE['side']['start'] = "'; // 2rd Sub menu -$NAVIGATION_TEMPLATE['side']['item_submenu'] = "
  • {NAV_LINK_ICON}{NAV_LINK_NAME}{NAV_LINK_SUB}
    • "; -$NAVIGATION_TEMPLATE['side']['item_submenu_active'] = "
  • {NAV_LINK_ICON}{NAV_LINK_NAME}{NAV_LINK_SUB}
    • "; -$NAVIGATION_TEMPLATE['side']['submenu_start'] = ""; -$NAVIGATION_TEMPLATE['side']['submenu_item'] = "
  • {NAV_LINK_ICON}{NAV_LINK_NAME}
    • "; -$NAVIGATION_TEMPLATE['side']['submenu_item_active'] = "
  • {NAV_LINK_ICON}{NAV_LINK_NAME}
    • "; +$NAVIGATION_TEMPLATE['side']['item_submenu'] = "
  • {NAV_LINK_ICON}{NAV_LINK_NAME}{NAV_LINK_SUB}
    • "; +$NAVIGATION_TEMPLATE['side']['item_submenu_active'] = "
  • {NAV_LINK_ICON}{NAV_LINK_NAME}{NAV_LINK_SUB}
    • "; +$NAVIGATION_TEMPLATE['side']['submenu_start'] = ""; +$NAVIGATION_TEMPLATE['side']['submenu_item'] = "
  • {NAV_LINK_ICON}{NAV_LINK_NAME}
    • "; +$NAVIGATION_TEMPLATE['side']['submenu_item_active'] = "
  • {NAV_LINK_ICON}{NAV_LINK_NAME}
    • "; // 3rd Sub menu -$NAVIGATION_TEMPLATE['side']['submenu_lowerstart'] = ""; -$NAVIGATION_TEMPLATE['side']['submenu_loweritem'] = $NAVIGATION_TEMPLATE['side']['submenu_item']; +$NAVIGATION_TEMPLATE['side']['submenu_lowerstart'] = ""; +$NAVIGATION_TEMPLATE['side']['submenu_loweritem'] = $NAVIGATION_TEMPLATE['side']['submenu_item']; $NAVIGATION_TEMPLATE['side']['submenu_loweritem_active'] = $NAVIGATION_TEMPLATE['side']['submenu_item_active']; -$NAVIGATION_TEMPLATE['side']['submenu_lowerend'] = ""; +$NAVIGATION_TEMPLATE['side']['submenu_lowerend'] = ""; -/* - ALTERNATIVE LIST-GROUP SIDE TEMPLATE FOR: - {NAVIGATION: layout=side-alt&type=any} - div/a version with list-group, 2 levels - see https://getbootstrap.com/docs/4.1/components/list-group/#links-and-buttons -*/ +/* +ALTERNATIVE LIST-GROUP SIDE TEMPLATE FOR: +{NAVIGATION: layout=side-alt&type=any} +div/a version with list-group, 2 levels +see https://getbootstrap.com/docs/4.1/components/list-group/#links-and-buttons + */ $NAVIGATION_TEMPLATE['side-alt'] = $NAVIGATION_TEMPLATE['side']; -$NAVIGATION_TEMPLATE['side-alt']['start'] = "
    "; -$NAVIGATION_TEMPLATE['side-alt']['item'] = "{NAV_LINK_ICON}{NAV_LINK_NAME}"; +$NAVIGATION_TEMPLATE['side-alt']['start'] = "
    "; +$NAVIGATION_TEMPLATE['side-alt']['item'] = "{NAV_LINK_ICON}{NAV_LINK_NAME}"; -$NAVIGATION_TEMPLATE['side-alt']['item_active'] = "{NAV_LINK_ICON}{NAV_LINK_NAME}"; -$NAVIGATION_TEMPLATE['side-alt']['end'] = '
    '; +$NAVIGATION_TEMPLATE['side-alt']['item_active'] = "{NAV_LINK_ICON}{NAV_LINK_NAME}"; +$NAVIGATION_TEMPLATE['side-alt']['end'] = '
    '; -$NAVIGATION_TEMPLATE['side-alt']['item_submenu'] = " {NAV_LINK_ICON}{NAV_LINK_NAME}{NAV_LINK_SUB}"; -$NAVIGATION_TEMPLATE['side-alt']['submenu_item'] = "{NAV_LINK_ICON}{NAV_LINK_NAME}"; -$NAVIGATION_TEMPLATE['side-alt']['submenu_item_active'] = "{NAV_LINK_ICON}{NAV_LINK_NAME}"; +$NAVIGATION_TEMPLATE['side-alt']['item_submenu'] = " {NAV_LINK_ICON}{NAV_LINK_NAME}{NAV_LINK_SUB}"; +$NAVIGATION_TEMPLATE['side-alt']['submenu_item'] = "{NAV_LINK_ICON}{NAV_LINK_NAME}"; +$NAVIGATION_TEMPLATE['side-alt']['submenu_item_active'] = "{NAV_LINK_ICON}{NAV_LINK_NAME}"; -/* - DEFAULT HORIZONTAL FOOTER TEMPLATE FOR: - {NAVIGATION: layout=footer&type=any} - {NAVIGATION=footer}; - ul/li/a version - only 1-level - see https://getbootstrap.com/docs/4.1/components/navs/#base-nav -*/ +/* +DEFAULT HORIZONTAL FOOTER TEMPLATE FOR: +{NAVIGATION: layout=footer&type=any} +{NAVIGATION=footer}; +ul/li/a version - only 1-level +see https://getbootstrap.com/docs/4.1/components/navs/#base-nav + */ -$NAVIGATION_TEMPLATE['footer']['start'] = "'; -// 2rd Sub menu data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown -$NAVIGATION_TEMPLATE['footer']['item_submenu'] = " +// 2rd Sub menu data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown +$NAVIGATION_TEMPLATE['footer']['item_submenu'] = "
  • - + {NAV_LINK_SUB}
    • "; -$NAVIGATION_TEMPLATE['footer']['item_submenu_active'] = " +$NAVIGATION_TEMPLATE['footer']['item_submenu_active'] = "
  • - + {NAV_LINK_SUB}
    • "; -$NAVIGATION_TEMPLATE['footer']['submenu_start'] = "
    "; -$NAVIGATION_TEMPLATE['footer']['submenu_item'] = "{NAV_LINK_ICON}{NAV_LINK_NAME}"; -$NAVIGATION_TEMPLATE['footer']['submenu_item_active'] = "{NAV_LINK_ICON}{NAV_LINK_NAME}"; -$NAVIGATION_TEMPLATE['footer']['submenu_end'] = "
    "; + +$NAVIGATION_TEMPLATE['footer']['submenu_start'] = "
    "; +$NAVIGATION_TEMPLATE['footer']['submenu_item'] = "{NAV_LINK_ICON}{NAV_LINK_NAME}"; +$NAVIGATION_TEMPLATE['footer']['submenu_item_active'] = "{NAV_LINK_ICON}{NAV_LINK_NAME}"; +$NAVIGATION_TEMPLATE['footer']['submenu_end'] = "
    "; // 3rd Sub menu -$NAVIGATION_TEMPLATE['footer']['submenu_lowerstart'] = ""; -$NAVIGATION_TEMPLATE['footer']['submenu_loweritem'] = $NAVIGATION_TEMPLATE['footer']['submenu_item']; -$NAVIGATION_TEMPLATE['footer']['submenu_loweritem_active'] = $NAVIGATION_TEMPLATE['footer']['submenu_item_active']; -$NAVIGATION_TEMPLATE['footer']['submenu_lowerend'] = ""; +$NAVIGATION_TEMPLATE['footer']['submenu_lowerstart'] = ""; +$NAVIGATION_TEMPLATE['footer']['submenu_loweritem'] = $NAVIGATION_TEMPLATE['footer']['submenu_item']; +$NAVIGATION_TEMPLATE['footer']['submenu_loweritem_active'] = $NAVIGATION_TEMPLATE['footer']['submenu_item_active']; +$NAVIGATION_TEMPLATE['footer']['submenu_lowerend'] = ""; -/* - ALTERNATIVE HORIZONTAL FOOTER TEMPLATE FOR: - {NAVIGATION: layout=footer-alt&type=any} - nav/a - only 1-level - see https://getbootstrap.com/docs/4.1/components/navs/#base-nav -*/ +/* +ALTERNATIVE HORIZONTAL FOOTER TEMPLATE FOR: +{NAVIGATION: layout=footer-alt&type=any} +nav/a - +see https://getbootstrap.com/docs/4.1/components/navs/#base-nav + */ $NAVIGATION_TEMPLATE['footer-alt'] = $NAVIGATION_TEMPLATE['footer']; -$NAVIGATION_TEMPLATE["footer-alt"]["start"] = ""; - - -/* - DEFAULT VERTICAL TEMPLATE FOR: - {NAVIGATION: layout=alt&type=any} - nav/li/a version with nav-link and flex-column - only 1-level - see https://getbootstrap.com/docs/4.1/components/navs/#vertical -*/ +$NAVIGATION_TEMPLATE["footer-alt"]["start"] = ""; -$NAVIGATION_TEMPLATE['alt'] = $NAVIGATION_TEMPLATE['footer']; +/* +DEFAULT VERTICAL TEMPLATE FOR: +{NAVIGATION: layout=alt&type=any} +ul/li/a version with nav-link and flex-column +see https://getbootstrap.com/docs/4.1/components/navs/#vertical + */ -$NAVIGATION_TEMPLATE['alt']['start'] = "'; - - -/* - HORIZONTAL NAV WITH DROPDOWN TEMPLATE FOR: - {NAVIGATION: layout=alt5&type=any} - {NAVIGATION=alt5} - ul/li/a version with nav-link - 2-levels - see https://getbootstrap.com/docs/4.1/components/navs/#pills-with-dropdowns -*/ +$NAVIGATION_TEMPLATE['alt'] = $NAVIGATION_TEMPLATE['footer']; +$NAVIGATION_TEMPLATE['alt']['start'] = "
      "; -$NAVIGATION_TEMPLATE['alt5'] = $NAVIGATION_TEMPLATE['footer']; +/* +ALTERNATIVE VERTICAL TEMPLATE FOR: +{NAVIGATION: layout=alt5&type=any} +nav/a version with nav-link and flex-column +see https://getbootstrap.com/docs/4.1/components/navs/#vertical + */ -$NAVIGATION_TEMPLATE["alt5"]["start"] = ""; +$NAVIGATION_TEMPLATE['alt5'] = $NAVIGATION_TEMPLATE['footer-alt']; +$NAVIGATION_TEMPLATE['alt5']['start'] = "