From 524c7ecb8752b199d97c1cb40a8a8822e2ef9780 Mon Sep 17 00:00:00 2001
From: ebremner <ebremner@uwaterloo.ca>
Date: Mon, 24 Feb 2020 15:10:17 -0500
Subject: [PATCH] ISTWCMS-3590: fixing header
---
.../_patterns/03-layouts/header/_header.scss | 7 +-
.../_patterns/03-layouts/header/header.twig | 12 +-
source/_patterns/03-layouts/header/header.yml | 89 ++++-
.../site-container/site-container.twig | 3 -
.../site-container/site-container.yml | 87 -----
.../menu/menu--header/menu--header.twig | 10 +-
.../menu/menu--main/_menu--main.scss | 307 ++++++++++++++++++
.../menu/menu--main/menu--main.twig | 41 ++-
8 files changed, 449 insertions(+), 107 deletions(-)
diff --git a/source/_patterns/03-layouts/header/_header.scss b/source/_patterns/03-layouts/header/_header.scss
index c874e76d..73351870 100644
--- a/source/_patterns/03-layouts/header/_header.scss
+++ b/source/_patterns/03-layouts/header/_header.scss
@@ -25,5 +25,10 @@
grid-row: 1 / 2;
padding-top: 1.2rem;
}
+
+ .menu--main {
+ grid-column: 1 / 3;
+ grid-row: 2 / 3;
+ }
}
-}
\ No newline at end of file
+}
diff --git a/source/_patterns/03-layouts/header/header.twig b/source/_patterns/03-layouts/header/header.twig
index 83fb4d6e..2d862a1d 100644
--- a/source/_patterns/03-layouts/header/header.twig
+++ b/source/_patterns/03-layouts/header/header.twig
@@ -5,13 +5,11 @@
<header {{ add_attributes(additional_attributes) }} role="banner">
<div class="uw-header__wrapper">
{% include "@components/site-logo/site-logo.twig"%}
- <nav class="uw-header-menu" aria-label="University">
- {% block content %}
- {% include "@components/menu/menu--header/menu--header.twig" with {
- 'items': items
- } %}
- {% endblock %}
- </nav>
+ {% block content %}
+ {% include "@components/menu/menu--header/menu--header.twig" with {
+ 'items': items
+ } %}
+ {% endblock %}
</div>
{% include "@global/01-colors-bars/_color-bar.twig" %}
</header>
diff --git a/source/_patterns/03-layouts/header/header.yml b/source/_patterns/03-layouts/header/header.yml
index ba64de89..c57dc16e 100644
--- a/source/_patterns/03-layouts/header/header.yml
+++ b/source/_patterns/03-layouts/header/header.yml
@@ -38,4 +38,91 @@ items:
in_active_trail: false
classes:
- 'uw-header'
- - 'default'
\ No newline at end of file
+ - 'default'
+main_menu:
+ - text: 'Home'
+ url: '/front'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - text: 'Link #1'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ submenu:
+ - text: 'Link #1-1'
+ url: '/front'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - text: 'Link #1-2'
+ url: '/front'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - text: 'Link #2'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - text: 'Link #3'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - text: 'Link #4'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ submenu:
+ - text: 'Link #4-1'
+ url: '/front'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - text: 'Link #4-2'
+ url: '/front'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - text: 'Link #5'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - text: 'Link #6'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - text: 'Link #7'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
diff --git a/source/_patterns/03-layouts/site-container/site-container.twig b/source/_patterns/03-layouts/site-container/site-container.twig
index befde019..34f0d3c0 100644
--- a/source/_patterns/03-layouts/site-container/site-container.twig
+++ b/source/_patterns/03-layouts/site-container/site-container.twig
@@ -4,9 +4,6 @@
'menu_name': header_menu_name,
'items': header_items
} %}
- {% include "@layouts/navigation/navigation.twig" with {
- 'items': main_menu
- }%}
{% endblock %}
{% block highlighted %}
diff --git a/source/_patterns/03-layouts/site-container/site-container.yml b/source/_patterns/03-layouts/site-container/site-container.yml
index ecaf4534..00745166 100644
--- a/source/_patterns/03-layouts/site-container/site-container.yml
+++ b/source/_patterns/03-layouts/site-container/site-container.yml
@@ -116,90 +116,3 @@ social_media:
- text: "LinkedIn"
url: "https://www.linkedin.com/edu/school?id=10875"
social_media_placement: "global-site-footer"
-main_menu:
- - text: 'Home'
- url: '/front'
- original_link:
- options:
- attributes:
- class: ''
- in_active_trail: false
- - text: 'Link #1'
- url: 'https://uwaterloo.ca/'
- original_link:
- options:
- attributes:
- class: ''
- in_active_trail: false
- submenu:
- - text: 'Link #1-1'
- url: '/front'
- original_link:
- options:
- attributes:
- class: ''
- in_active_trail: false
- - text: 'Link #1-2'
- url: '/front'
- original_link:
- options:
- attributes:
- class: ''
- in_active_trail: false
- - text: 'Link #2'
- url: 'https://uwaterloo.ca/'
- original_link:
- options:
- attributes:
- class: ''
- in_active_trail: false
- - text: 'Link #3'
- url: 'https://uwaterloo.ca/'
- original_link:
- options:
- attributes:
- class: ''
- in_active_trail: false
- - text: 'Link #4'
- url: 'https://uwaterloo.ca/'
- original_link:
- options:
- attributes:
- class: ''
- in_active_trail: false
- submenu:
- - text: 'Link #4-1'
- url: '/front'
- original_link:
- options:
- attributes:
- class: ''
- in_active_trail: false
- - text: 'Link #4-2'
- url: '/front'
- original_link:
- options:
- attributes:
- class: ''
- in_active_trail: false
- - text: 'Link #5'
- url: 'https://uwaterloo.ca/'
- original_link:
- options:
- attributes:
- class: ''
- in_active_trail: false
- - text: 'Link #6'
- url: 'https://uwaterloo.ca/'
- original_link:
- options:
- attributes:
- class: ''
- in_active_trail: false
- - text: 'Link #7'
- url: 'https://uwaterloo.ca/'
- original_link:
- options:
- attributes:
- class: ''
- in_active_trail: false
\ No newline at end of file
diff --git a/source/_patterns/04-components/menu/menu--header/menu--header.twig b/source/_patterns/04-components/menu/menu--header/menu--header.twig
index c4886efe..56940e89 100644
--- a/source/_patterns/04-components/menu/menu--header/menu--header.twig
+++ b/source/_patterns/04-components/menu/menu--header/menu--header.twig
@@ -1,4 +1,6 @@
-{% include '@components/menu/menu.twig' with {
- 'menu_name': menu_name,
- 'items': items
-} %}
\ No newline at end of file
+<nav class="uw-header-menu" aria-label="University">
+ {% include '@components/menu/menu.twig' with {
+ 'menu_name': menu_name,
+ 'items': items
+ } %}
+</nav>
diff --git a/source/_patterns/04-components/menu/menu--main/_menu--main.scss b/source/_patterns/04-components/menu/menu--main/_menu--main.scss
index e69de29b..f095b4e0 100644
--- a/source/_patterns/04-components/menu/menu--main/_menu--main.scss
+++ b/source/_patterns/04-components/menu/menu--main/_menu--main.scss
@@ -0,0 +1,307 @@
+@each $gkey, $group in $colors {
+ @if $gkey == fac {
+ @each $sgkey, $sub_group in $group {
+ .#{$sgkey} {
+ @each $key, $value in $sub_group {
+ @if $key == lvl1 {
+ .uw-main-nav {
+ &__home {
+ &:hover {
+ svg {
+ fill: #{$value};
+ }
+ }
+ }
+ &__more {
+ &:hover {
+ svg {
+ fill: #{$value};
+ }
+ }
+ }
+ }
+
+ .menu--main {
+ > .is-active-trail {
+ border-top: 4px solid #{$value};
+
+ &.has-submenu {
+ &::after {
+ border-top: 4px solid #{$value};
+ }
+ }
+ }
+
+ .has-submenu {
+ &:hover {
+ &::after {
+ border-top: 4px solid #{$value};
+ }
+ }
+ }
+
+ .has-children {
+ &:hover {
+ &::after {
+ border-left: 4px solid #{$value};
+ }
+ }
+ }
+
+ li {
+ &:hover > a {
+ color: #{$value};
+ }
+
+ ul {
+ border-top: 4px solid #{$value};
+ }
+
+ ul {
+ .is-active-trail {
+ color: #{$value};
+ }
+
+ li {
+ ul {
+ border-left: 4px solid #{$value};
+
+ &::before {
+ border-right: 5px solid #{$value};
+ }
+ }
+ }
+ }
+
+ .is-active-trail {
+ color: #{$value};
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+}
+
+.uw-main-nav {
+ background-color: $uw-black;
+ display: block;
+ width: 100%;
+
+ &__wrapper {
+ display: grid;
+ grid-template-columns: 25px auto 40px;
+ margin-left: auto;
+ margin-right: auto;
+ max-width: 63rem;
+ }
+
+ &__home {
+ background-color: $uw-black;
+ grid-column: 1 / 2;
+
+ &:hover {
+ background-color: $uw-black;
+
+ svg {
+ fill: $uw-gold;
+ }
+ }
+
+ a {
+ display: flex;
+ height: 100%;
+
+ svg {
+ fill: $uw-white;
+ margin: auto;
+ }
+ }
+ }
+
+ &__navigation {
+ grid-column: 2 / 3;
+ }
+
+ &__more {
+ grid-column: 3 / 4;
+
+ &:hover {
+ ul {
+ display: block;
+ }
+
+ svg {
+ fill: $uw-gold;
+ }
+ }
+
+ &--icon {
+ height: 100%;
+ position: relative;
+
+ svg {
+ fill: $uw-white;
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
+ position: absolute;
+ top: 25%;
+ }
+ }
+
+ ul {
+ display: none;
+ }
+ }
+}
+
+.menu--main {
+ background: $uw-black;
+ -moz-border-radius: 2px;
+ -webkit-border-radius: 2px;
+ border-radius: 2px;
+ display: flex;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+
+ > .is-active-trail {
+ border: 0;
+ border-top: 4px solid $uw-gold;
+ position: relative;
+
+ &.has-submenu {
+ &::after {
+ border-top: 4px solid $uw-gold;
+ }
+ }
+ }
+
+ .has-submenu {
+ &::after {
+ border: 0;
+ border-left: 4px solid transparent;
+ border-right: 4px solid transparent;
+ border-top: 4px solid $uw-white;
+ content: '';
+ display: initial;
+ height: 0;
+ position: absolute;
+ right: 2px;
+ top: 45%;
+ width: 0;
+ }
+
+ &:hover {
+ &::after {
+ border-top: 4px solid $uw-gold;
+ }
+ }
+ }
+
+ .has-children {
+ &::after {
+ border-bottom: 4px solid transparent;
+ border-left: 4px solid $uw-white;
+ border-top: 4px solid transparent;
+ content: '';
+ display: initial;
+ height: 0;
+ position: absolute;
+ right: 2px;
+ top: 40%;
+ width: 0;
+ }
+
+ &:hover {
+ &::after {
+ border-left: 4px solid $uw-gold;
+ }
+ }
+ }
+
+ li {
+ flex: 1 auto;
+ float: left;
+ max-width: 200px;
+ position: relative;
+
+ &:hover > a {
+ color: $uw-gold;
+ }
+
+ &:hover > ul,
+ li ul li:hover > ul {
+ display: block;
+ opacity: 1;
+ visibility: visible;
+ }
+
+ ul,
+ ul li ul {
+ background: $uw-black;
+ border-top: 4px solid $uw-gold;
+ height: auto;
+ margin: 0;
+ min-width: 200px;
+ opacity: 0;
+ padding: 0;
+ position: absolute;
+ visibility: hidden;
+ z-index: 1000;
+ }
+
+ ul li ul {
+ border: 0;
+ border-top: 0;
+ }
+
+ ul {
+
+ li {
+ float: none;
+
+ &:hover > ul {
+ left: 200px;
+ top: 0;
+ }
+
+ a {
+ border: 0;
+ padding: 10px;
+ }
+
+ ul {
+ border: 0;
+ border-left: 4px solid $uw-gold;
+ left: 230px;
+ top: 0;
+ }
+ }
+
+ .is-active-trail {
+ color: $uw-gold;
+ }
+ }
+
+ a {
+ color: $uw-white;
+ display: flex;
+ height: 100%;
+ padding: 0.5rem 1rem;
+ text-align: center;
+ text-decoration: none;
+ text-transform: uppercase;
+
+ .link-text {
+ margin: auto;
+ }
+ }
+
+ .is-active-trail {
+ color: $uw-gold;
+ }
+ }
+}
diff --git a/source/_patterns/04-components/menu/menu--main/menu--main.twig b/source/_patterns/04-components/menu/menu--main/menu--main.twig
index 26730908..d9dffcfc 100644
--- a/source/_patterns/04-components/menu/menu--main/menu--main.twig
+++ b/source/_patterns/04-components/menu/menu--main/menu--main.twig
@@ -1,4 +1,37 @@
-{% include '@components/menu/menu.twig' with {
- 'menu_name': menu_name,
- 'items': items
-} %}
+<nav class="uw-main-nav">
+ <div class="uw-main-nav__wrapper">
+ <div class="uw-main-nav__home">
+ <a href="/home" class="uw-site-home__link">
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M21 13v10h-6v-6h-6v6h-6v-10h-3l12-12 12 12h-3zm-1-5.907v-5.093h-3v2.093l3 3z"/></svg>
+ <span class="off-screen">Home</span>
+ </a>
+ </div>
+ <div class="uw-main-nav__links">
+ {% if items|length > 5 %}
+ {% set main_links = items|slice(1, 5) %}
+ {% else %}
+ {% set main_links = items %}
+ {% endif %}
+ {% include '@components/menu/menu.twig' with {
+ 'menu_name': 'main',
+ 'items': main_links
+ } %}
+ </div>
+ {% if items|length > 5 %}
+ <div class="uw-main-nav__more">
+ <div class="uw-main-nav__more--icon">
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 992 992">
+ <circle cx="144.3" cy="496" r="144.3"/>
+ <circle cx="496" cy="496" r="144.3"/>
+ <circle cx="847.7" cy="496" r="144.3"/>
+ </svg>
+ </div>
+ {% set more_links = items|slice(6, item.length) %}
+ {% include '@components/menu/menu.twig' with {
+ 'menu_name': 'main-more',
+ 'items': more_links
+ } %}
+ </div>
+ {% endif %}
+ </div>
+</nav>
--
GitLab