diff --git a/css/styles.css b/css/styles.css index a5d23a0e6de2a2a8aaa39a8fa90279f5278b6a73..4ba2b13704ce70adcf3943df4fb5116c9c6df7e9 100644 --- a/css/styles.css +++ b/css/styles.css @@ -4819,6 +4819,12 @@ fieldset, .uw-horizontal-nav--menu .menu--subnav li { -webkit-animation: fadeIn ease 0.2s; animation: fadeIn ease 0.2s; } + .uw-horizontal-nav--menu .menu .submenu-active.has-submenu--small .menu--subnav { + min-height: 10rem; } + .uw-horizontal-nav--menu .menu .submenu-active.has-submenu--medium .menu--subnav { + min-height: 20rem; } + .uw-horizontal-nav--menu .menu .submenu-active.has-submenu--large .menu--subnav { + min-height: 34rem; } .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav { margin-left: auto; margin-right: auto; @@ -4846,7 +4852,6 @@ fieldset, padding-right: 0; } } @media (min-width: 75rem) { .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav { - min-height: 34rem; width: calc(100% - 7rem); } } .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--subnav { align-items: inherit; @@ -4867,14 +4872,14 @@ fieldset, top: inherit; width: inherit; z-index: inherit; } - .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--link-parent { - display: none; } .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item { display: block; flex: 0 1; height: auto; max-width: 50%; padding-left: 16px; } + .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item .menu--link-parent { + display: none; } @media (min-width: 63.1875rem) { .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item { max-width: 33%; diff --git a/source/_patterns/03-layouts/header/header.yml b/source/_patterns/03-layouts/header/header.yml index 2a088aae172f97b618c306add42bc2eafd6d6930..aedbcda0a0d05dce958bfa0d192ab5bcc962b659 100644 --- a/source/_patterns/03-layouts/header/header.yml +++ b/source/_patterns/03-layouts/header/header.yml @@ -55,6 +55,7 @@ nav_items: attributes: class: '' active_trail: false + menu_items_count: '2' submenu: - text: 'Our mission & vision' url: '#' @@ -77,6 +78,7 @@ nav_items: attributes: class: '' active_trail: true + menu_items_count: '10' submenu: - text: 'Research areas' url: '#' @@ -151,6 +153,7 @@ nav_items: attributes: class: '' active_trail: false + menu_items_count: '2' submenu: - text: 'Experiential learning' url: '#' @@ -187,6 +190,7 @@ nav_items: attributes: class: '' active_trail: false + menu_items_count: '8' submenu: - text: 'Programs offered | Fees' url: '#' @@ -244,6 +248,7 @@ nav_items: attributes: class: '' active_trail: false + menu_items_count: '3' submenu: - text: 'Convocation Award Winners 2020' url: '#' @@ -276,12 +281,13 @@ nav_items: secondary_modifier_classes: 'secondary' secondary_items: - text: 'Undergraduate students ' - url: '#' + url: '#Parent' original_link: options: attributes: class: '' active_trail: true + menu_items_count: 39 submenu: - text: 'Degree Options and Specializations' url: '#' @@ -567,6 +573,7 @@ secondary_items: attributes: class: '' active_trail: false + menu_items_count: 10 submenu: - text: 'Meet your lecturers' url: '#' @@ -639,6 +646,7 @@ secondary_items: attributes: class: '' active_trail: false + menu_items_count: 19 submenu: - text: 'Programs' url: '#' @@ -774,6 +782,7 @@ secondary_items: attributes: class: '' active_trail: false + menu_items_count: 0 - text: 'Alumni & Friends' url: '#' original_link: @@ -781,6 +790,7 @@ secondary_items: attributes: class: '' active_trail: false + menu_items_count: 4 submenu: - text: 'Share your story' url: '#' @@ -810,3 +820,4 @@ secondary_items: attributes: class: '' active_trail: false + menu_items_count: 0 \ No newline at end of file diff --git a/source/_patterns/03-layouts/site-container/site-container.yml b/source/_patterns/03-layouts/site-container/site-container.yml index af901e7a9f89db1f49824097c678c418fbb57224..e1c37977dc34918c42c2b6e7f86309789cdc6aed 100644 --- a/source/_patterns/03-layouts/site-container/site-container.yml +++ b/source/_patterns/03-layouts/site-container/site-container.yml @@ -130,12 +130,13 @@ social_media: social_media_placement: "global-site-footer" nav_items: - text: 'About Psychology' - url: 'Parent' + url: '#' original_link: options: attributes: class: '' active_trail: false + menu_items_count: 2 submenu: - text: 'Our mission & vision' url: '#' @@ -151,13 +152,15 @@ nav_items: attributes: class: '' active_trail: false + menu_items_count: 0 - text: 'Research' - url: 'Parent' + url: '#' original_link: options: attributes: class: '' active_trail: true + menu_items_count: 10 submenu: - text: 'Research areas' url: '#' @@ -208,7 +211,7 @@ nav_items: options: attributtes: class: '' - active_trail: true + active-trial: true submenu: - text: 'Academic Program for Graduate Study in Industrial-Organizational Psychology' url: '#' @@ -232,6 +235,7 @@ nav_items: attributes: class: '' active_trail: false + menu_items_count: 2 submenu: - text: 'Experiential learning' url: '#' @@ -247,6 +251,7 @@ nav_items: attributes: class: '' active_trail: false + menu_items_count: 0 - text: 'Events' url: '#' original_link: @@ -254,6 +259,7 @@ nav_items: attributes: class: '' active_trail: false + menu_items_count: 0 - text: 'Centre for Mental Health Research and Treatment' url: '#' original_link: @@ -261,6 +267,7 @@ nav_items: attributes: class: '' active_trail: false + menu_items_count: 0 - text: 'Early Childhood Education Centre' url: '#' original_link: @@ -268,6 +275,7 @@ nav_items: attributes: class: '' active_trail: false + menu_items_count: 8 submenu: - text: 'Programs offered | Fees' url: '#' @@ -325,6 +333,7 @@ nav_items: attributes: class: '' active_trail: false + menu_items_count: 3 submenu: - text: 'Convocation Award Winners 2020' url: '#' @@ -347,6 +356,7 @@ nav_items: attributes: class: '' active_trail: false + menu_items_count: 0 - text: 'Department Profiles Sherman Kwok' url: '#' original_link: @@ -354,15 +364,17 @@ nav_items: attributes: class: '' active_trail: false + menu_items_count: 0 secondary_modifier_classes: 'secondary' secondary_items: - text: 'Undergraduate students ' - url: 'Parent' + url: '#Parent' original_link: options: attributes: class: '' - active_trail: false + active_trail: true + menu_items_count: 39 submenu: - text: 'Degree Options and Specializations' url: '#' @@ -648,6 +660,7 @@ secondary_items: attributes: class: '' active_trail: false + menu_items_count: 10 submenu: - text: 'Meet your lecturers' url: '#' @@ -720,6 +733,7 @@ secondary_items: attributes: class: '' active_trail: false + menu_items_count: 19 submenu: - text: 'Programs' url: '#' @@ -855,6 +869,7 @@ secondary_items: attributes: class: '' active_trail: false + menu_items_count: 0 - text: 'Alumni & Friends' url: '#' original_link: @@ -862,6 +877,7 @@ secondary_items: attributes: class: '' active_trail: false + menu_items_count: 4 submenu: - text: 'Share your story' url: '#' @@ -891,3 +907,4 @@ secondary_items: attributes: class: '' active_trail: false + menu_items_count: 0 diff --git a/source/_patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss b/source/_patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss index a7ae25d0cd9d58ba00df0df8ae878682ea33d42d..98b536c93250fc4b40f5ad9720e119d2a8b5e414 100644 --- a/source/_patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss +++ b/source/_patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss @@ -314,103 +314,106 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat' } } - .submenu-active .menu--subnav{ - @include uw-contained-width; - align-items: flex-start; - background:$menu-horizontal-drop-bg; - box-shadow: 0 10px 20px rgba(0, 0, 0, 0.10), 0 6px 6px rgba(0, 0, 0, 0.13); - display:flex; - flex-flow: wrap; - flex-direction: column; - flex-wrap:wrap; - height:100%; - left:3rem; - min-height:80vh; - padding:0; - padding-top:1rem !important; - position:absolute; - top:100%; - width:100%; - z-index:10; - @include xl { - min-height: 34rem; - width:calc(100% - 7rem); + .submenu-active { + &.has-submenu--small .menu--subnav{ + //background: #ffd700 !important; + min-height:10rem; } - .menu--subnav{ - align-items: inherit; - background:inherit; - box-shadow:none; - column-count:inherit; - display:inherit; - flex-flow: inherit; - flex-direction: inherit; - flex-wrap:inherit; - height:inherit; - left:inherit; - max-height:inherit; - min-height:inherit; - padding-top:inherit !important; - position:inherit; - top:inherit; - width:inherit; - z-index:inherit; + &.has-submenu--medium .menu--subnav{ + //background: #00f !important; + min-height: 20rem; } - .menu--link-parent { - display:none; + &.has-submenu--large .menu--subnav{ + //background: #800080 !important; + min-height: 34rem; } - .menu--item{ - display:block; - flex:0 1; - height:auto; - max-width: 50%; - padding-left: gesso-spacing(sm); - @include large { - max-width: 33%; - padding-left: gesso-spacing(sm); + .menu--subnav{ + @include uw-contained-width; + align-items: flex-start; + background:$menu-horizontal-drop-bg; + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.10), 0 6px 6px rgba(0, 0, 0, 0.13); + display:flex; + flex-flow: wrap; + flex-direction: column; + flex-wrap:wrap; + height:100%; + left:3rem; + min-height:80vh; + padding:0; + padding-top:1rem !important; + position:absolute; + top:100%; + width:100%; + z-index:10; + @include xl { + //min-height: 34rem; + width:calc(100% - 7rem); + } + .menu--subnav{ + align-items: inherit; + background:inherit; + box-shadow:none; + column-count:inherit; + display:inherit; + flex-flow: inherit; + flex-direction: inherit; + flex-wrap:inherit; + height:inherit; + left:inherit; + max-height:inherit; + min-height:inherit; + padding-top:inherit !important; + position:inherit; + top:inherit; + width:inherit; + z-index:inherit; } - &:first-of-type{ - .menu--link-parent { - display:block; - font-size:rem(gesso-font-size(-1)); - margin:0 0 gesso-spacing(xs) 0; - position:relative; - &::after { - content:'\e3b5'; + .menu--item{ + .menu--link-parent {display:none;} + display:block; + flex:0 1; + height:auto; + max-width: 50%; + padding-left: gesso-spacing(sm); + @include large { + max-width: 33%; + padding-left: gesso-spacing(sm); + } + &:first-of-type{ + .menu--link-parent { display:block; - font-family: gesso-font-family(iconfont); - font-size:rem(gesso-font-size(0)); - position:absolute; - right:-1rem; - text-align: center; - top:gesso-spacing(xxs); + font-size:rem(gesso-font-size(-1)); + margin:0 0 gesso-spacing(xs) 0; + position:relative; + &::after { + content:'\e3b5'; + display:block; + font-family: gesso-font-family(iconfont); + font-size:rem(gesso-font-size(0)); + position:absolute; + right:-1rem; + text-align: center; + top:gesso-spacing(xxs); + } } } - } - a{ - font-family:$menu-horizontal-sub-font-bold; - font-weight:400; - padding:gesso-spacing(xxs); - padding-left:0; - } - .menu--item{ - font-family:$menu-horizontal-sub-font; - font-weight:200; - margin-top:inherit; - max-width:inherit; - padding-left: gesso-spacing(sm); a{ - font-family:$menu-horizontal-sub-font; - + font-family:$menu-horizontal-sub-font-bold; + font-weight:400; + padding:gesso-spacing(xxs); + padding-left:0; } .menu--item{ - + font-family:$menu-horizontal-sub-font; + font-weight:200; margin-top:inherit; + max-width:inherit; padding-left: gesso-spacing(sm); a{ font-family:$menu-horizontal-sub-font; - font-weight:200; + } .menu--item{ @@ -420,6 +423,15 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat' font-family:$menu-horizontal-sub-font; font-weight:200; } + .menu--item{ + + margin-top:inherit; + padding-left: gesso-spacing(sm); + a{ + font-family:$menu-horizontal-sub-font; + font-weight:200; + } + } } } } diff --git a/source/_patterns/04-components/menu/menu--horizontal/menu--horizontal.yml b/source/_patterns/04-components/menu/menu--horizontal/menu--horizontal.yml index 1e9d2ed81edcd6694e23aab10bb0f0e399f281ac..df1d9f5a87e4f6d3339c379825e63e7acab5405d 100644 --- a/source/_patterns/04-components/menu/menu--horizontal/menu--horizontal.yml +++ b/source/_patterns/04-components/menu/menu--horizontal/menu--horizontal.yml @@ -10,6 +10,7 @@ items: attributes: class: '' in_active_trail: false + menu_items_count: 0 - text: 'Link #1' url: 'https://uwaterloo.ca/' original_link: @@ -17,6 +18,7 @@ items: attributes: class: '' in_active_trail: false + menu_items_count: 3 submenu: - text: 'Link #1-1' url: '/front' @@ -39,3 +41,4 @@ items: attributes: class: '' in_active_trail: false + menu_items_count: 0 diff --git a/source/_patterns/04-components/menu/menu--main/menu--main.yml b/source/_patterns/04-components/menu/menu--main/menu--main.yml index 0883c070a658248881a6f955d9f06b9a947c7177..2b366ee2d9368d31b52222a2b08713a8cbdbf895 100644 --- a/source/_patterns/04-components/menu/menu--main/menu--main.yml +++ b/source/_patterns/04-components/menu/menu--main/menu--main.yml @@ -9,6 +9,7 @@ items: attributes: class: '' active_trail: false + menu_items_count: 2 submenu: - text: 'Our mission & vision' url: '#' @@ -24,6 +25,7 @@ items: attributes: class: '' active_trail: false + menu_items_count: 0 - text: 'Research' url: '#' original_link: @@ -31,6 +33,7 @@ items: attributes: class: '' active_trail: true + menu_items_count: 10 submenu: - text: 'Research areas' url: '#' @@ -105,6 +108,7 @@ items: attributes: class: '' active_trail: false + menu_items_count: 2 submenu: - text: 'Experiential learning' url: '#' @@ -120,6 +124,7 @@ items: attributes: class: '' active_trail: false + menu_items_count: 0 - text: 'Events' url: '#' original_link: @@ -127,6 +132,7 @@ items: attributes: class: '' active_trail: false + menu_items_count: 0 - text: 'Centre for Mental Health Research and Treatment' url: '#' original_link: @@ -134,6 +140,7 @@ items: attributes: class: '' active_trail: false + menu_items_count: 0 - text: 'Early Childhood Education Centre' url: '#' original_link: @@ -141,6 +148,7 @@ items: attributes: class: '' active_trail: false + menu_items_count: 8 submenu: - text: 'Programs offered | Fees' url: '#' @@ -198,6 +206,7 @@ items: attributes: class: '' active_trail: false + menu_items_count: 3 submenu: - text: 'Convocation Award Winners 2020' url: '#' @@ -220,10 +229,12 @@ items: attributes: class: '' active_trail: false + menu_items_count: 0 - text: 'Department Profiles Sherman Kwok' url: '#' original_link: options: attributes: class: '' - active_trail: false \ No newline at end of file + active_trail: false + menu_items_count: 0 \ No newline at end of file diff --git a/source/_patterns/04-components/menu/menu--secondary/menu--secondary.yml b/source/_patterns/04-components/menu/menu--secondary/menu--secondary.yml index 49e31a1dcdbe25b62e0744d7795af5a2dba50906..031308cbd8cea5385b84117ef7cd075acbee2ab9 100644 --- a/source/_patterns/04-components/menu/menu--secondary/menu--secondary.yml +++ b/source/_patterns/04-components/menu/menu--secondary/menu--secondary.yml @@ -10,6 +10,7 @@ items: attributes: class: '' active_trail: true + menu_items_count: 39 submenu: - text: 'Degree Options and Specializations' url: '#' @@ -295,6 +296,7 @@ items: attributes: class: '' active_trail: false + menu_items_count: 10 submenu: - text: 'Meet your lecturers' url: '#' @@ -367,6 +369,7 @@ items: attributes: class: '' active_trail: false + menu_items_count: 19 submenu: - text: 'Programs' url: '#' @@ -502,6 +505,7 @@ items: attributes: class: '' active_trail: false + menu_items_count: 0 - text: 'Alumni & Friends' url: '#' original_link: @@ -509,6 +513,7 @@ items: attributes: class: '' active_trail: false + menu_items_count: 4 submenu: - text: 'Share your story' url: '#' @@ -538,5 +543,6 @@ items: attributes: class: '' active_trail: false + menu_items_count: 0 diff --git a/source/_patterns/04-components/menu/menu.twig b/source/_patterns/04-components/menu/menu.twig index 9fec32e6c30dd19366ebf2fd869db2e2f9df4f5d..c6ed4b31c7f82a0cbfff07ac74d97baaf147d97e 100644 --- a/source/_patterns/04-components/menu/menu.twig +++ b/source/_patterns/04-components/menu/menu.twig @@ -4,7 +4,6 @@ {% macro menu_links(items, attributes, menu_level, menu_name, menu_class, item_class, link_class, parent) %} {% import _self as menus %} - {% if items %} {% if menu_level == 0 %} @@ -30,122 +29,127 @@ {% set item_classes = ['menu--item'] %} {% set link_classes = ['menu--link'] %} - {#{% if item.below %}#} - {#{% set item_classes = item_classes|merge(['has-subnav']) %}#} - {#{% set link_classes = link_classes|merge(['has-subnav']) %}#} - {#{% endif %}#} {% if item.active_trail %} {% set item_classes = item_classes|merge(['is-active-trail']) %} - {% endif %} {% if item.active %} {% set link_classes = link_classes|merge(['active']) %} {% endif %} - {% if item.is_collapsed %} - {% set item_classes = item_classes|merge(['is-collapsed']) %} - {% set link_classes = link_classes|merge(['is-collapsed']) %} - {% endif %} - {% if item.is_expanded %} - {% set item_classes = item_classes|merge(['is-expanded']) %} - {% set link_classes = link_classes|merge(['is-expanded']) %} - {% endif %} - {% if item['original_link'].options.attributes.class %} - {% set link_classes = link_classes|merge([item['original_link'].options.attributes.class]) %} - {% endif %} {% if item_class %} {% set item_classes = item_classes|merge(item_class) %} {% endif %} {% if link_class %} {% set link_classes = link_classes|merge(link_class) %} {% endif %} - - {% if item.below %} - {% if menu_level == 0 %} - {% set item_classes = item_classes|merge(['has-submenu']) %} - {% elseif menu_level <= 2 %} - {% set item_classes = item_classes|merge(['has-children']) %} - {% endif %} - {% elseif item.submenu %} + {# Check for submenu #} + {% if item.submenu %} + {# Add class for indicating the item has a submenu #} + {% set item_classes = item_classes|merge(['has-submenu']) %} + {# Check if we are in parent menu_level #} {% if menu_level == 0 %} - {% set item_classes = item_classes|merge(['has-submenu']) %} - {% set link_classes = ['menu--link__sub'] %} - {% set additional_item_attributes = { - 'aria-expanded': 'false' - } %} - {% elseif menu_level <= 2 %} - {% set menu_parent_hide = true %} - {% set item_classes = item_classes|merge(['has-children']) %} - {% endif %} - {% endif %} + {# Look to see if the menu_items_count is set so and use for menu dropdown class #} + {% if item.menu_items_count %} + {% if item.menu_items_count >= 30 %} - {% set additional_item_attributes = { - 'class': item_classes - } %} + {# PRINT OUT MENU LEVEL FOR TESTING #} + {{ item.menu_items_count }} - {% set link_attributes = { - 'class': link_classes - } %} + {% set item_classes = item_classes|merge(['has-submenu--large']) %} + {% elseif item.menu_items_count >= 10 %} + {# PRINT OUT MENU LEVEL FOR TESTING #} + {{ item.menu_items_count }} + {% set item_classes = item_classes|merge(['has-submenu--medium']) %} + {% elseif item.menu_items_count > 0 %} + {# PRINT OUT MENU LEVEL FOR TESTING #} + {{ item.menu_items_count }} + {% set item_classes = item_classes|merge(['has-submenu--small']) %} + {% endif %} + {# Add the link class #} + {% set link_classes = ['menu--link__sub'] %} + {% endif %} - {% if menu_level == 1 and parent %} - <li {{ add_attributes(additional_item_attributes) }}> + {# + ERIC IN HERE - <a href="{{ parent.url }}" class="menu--link-parent" {{ add_attributes(link_attributes) }}> - <span class="link-text"> - {% if parent.title %} - {{ parent.title }} - {% elseif parent.text %} - {{ parent.text }} - {% endif %} - </span> - </a> - </li> + Hide the Parent menu item from printing more than once + this is the recursive check we spoke of, my thought was to go 2 deep - {% endif %} + #} - <li {{ add_attributes(additional_item_attributes) }}> - <a - {% if item.submenu and menu_level == 0 %} - tabindex="0" - aria-haspopup="true" - role="button" - {% elseif item.submenu %} - tabindex="0" - aria-haspopup="true" - role="button" - href="{{ item.url }}" - {% else %} - href="{{ item.url }}" - {% endif %} - {{ add_attributes(link_attributes) }} - > - <span class="link-text"> - {% if item.title %} - {{ item.title }} - {% elseif item.text %} - {{ item.text }} - {% endif %} - </span> - </a> - {% if item.below %} - {{ menus.menu_links(item.below, attributes, menu_level + 1) }} - {% elseif item.submenu %} - {% if menu_level == 0 %} - - {{ menus.menu_links(item.submenu, attributes, menu_level + 1, '', '', '', '', item) }} - {% else %} - {{ menus.menu_links(item.submenu, attributes, menu_level + 1) }} - {% endif %} + {% elseif menu_level <= 2 %} + {# Set the flag to not re-print the Parent #} + {% set menu_parent_hide = true %} {% endif %} - </li> - - {% endfor %} - - </ul> + {% endif %} + {# Set the additional_item_attributes #} + {% set additional_item_attributes = { + 'class': item_classes + } %} + {# Set the additional_link_classes #} + {% set link_attributes = { + 'class': link_classes + } %} - {% endif %} +{# + ERIC IN HERE + Check menu level 1 and parent and not have the hide parent flag +#} +{% if menu_level == 1 and parent and not menu_parent_hide %} + + <li {{ add_attributes(additional_item_attributes) }}> + + <a href="{{ parent.url }}" class="menu--link-parent" {{ add_attributes(link_attributes) }}> + <span class="link-text"> + {% if parent.title %} + {{ parent.title }} + {% elseif parent.text %} + {{ parent.text }} + {% endif %} + </span> + </a> + </li> + {% endif %} + +<li {{ add_attributes(additional_item_attributes) }}> + + <a + {% if item.submenu %} + tabindex="0" + aria-haspopup="true" + role="button" + {% else %} + href="{{ item.url }}" + {% endif %} + {{ add_attributes(link_attributes) }} + > + <span class="link-text"> + {% if item.title %} + {{ item.title }} + {% elseif item.text %} + {{ item.text }} + {% endif %} + </span> + </a> + {% if item.below %} + {{ menus.menu_links(item.below, attributes, menu_level + 1) }} + {% elseif item.submenu %} + {% if menu_level == 0 %} + + {{ menus.menu_links(item.submenu, attributes, menu_level + 1, '', '', '', '', item) }} + {% else %} + {{ menus.menu_links(item.submenu, attributes, menu_level + 1) }} + {% endif %} + {% endif %} +</li> + +{% endfor %} + +</ul> + +{% endif %} {% endmacro %}