Skip to content
Snippets Groups Projects
Commit 524c7ecb authored by Eric Bremner's avatar Eric Bremner
Browse files

ISTWCMS-3590: fixing header

parent f59b552e
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 449 additions and 107 deletions
source/_patterns/03-layouts/header/_header.scss
+ 6
− 1
View file @ 524c7ecb
...@@ -25,5 +25,10 @@ ...@@ -25,5 +25,10 @@
grid-row: 1 / 2; grid-row: 1 / 2;
padding-top: 1.2rem; padding-top: 1.2rem;
} }
.menu--main {
grid-column: 1 / 3;
grid-row: 2 / 3;
}
} }
} }
\ No newline at end of file
source/_patterns/03-layouts/header/header.twig
+ 5
− 7
View file @ 524c7ecb
...@@ -5,13 +5,11 @@ ...@@ -5,13 +5,11 @@
<header {{ add_attributes(additional_attributes) }} role="banner"> <header {{ add_attributes(additional_attributes) }} role="banner">
<div class="uw-header__wrapper"> <div class="uw-header__wrapper">
{% include "@components/site-logo/site-logo.twig"%} {% include "@components/site-logo/site-logo.twig"%}
<nav class="uw-header-menu" aria-label="University"> {% block content %}
{% block content %} {% include "@components/menu/menu--header/menu--header.twig" with {
{% include "@components/menu/menu--header/menu--header.twig" with { 'items': items
'items': items } %}
} %} {% endblock %}
{% endblock %}
</nav>
</div> </div>
{% include "@global/01-colors-bars/_color-bar.twig" %} {% include "@global/01-colors-bars/_color-bar.twig" %}
</header> </header>
source/_patterns/03-layouts/header/header.yml
+ 88
− 1
View file @ 524c7ecb
...@@ -38,4 +38,91 @@ items: ...@@ -38,4 +38,91 @@ items:
in_active_trail: false in_active_trail: false
classes: classes:
- 'uw-header' - 'uw-header'
- 'default' - 'default'
\ No newline at end of file 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
source/_patterns/03-layouts/site-container/site-container.twig
+ 0
− 3
View file @ 524c7ecb
...@@ -4,9 +4,6 @@ ...@@ -4,9 +4,6 @@
'menu_name': header_menu_name, 'menu_name': header_menu_name,
'items': header_items 'items': header_items
} %} } %}
{% include "@layouts/navigation/navigation.twig" with {
'items': main_menu
}%}
{% endblock %} {% endblock %}
{% block highlighted %} {% block highlighted %}
......
source/_patterns/03-layouts/site-container/site-container.yml
+ 0
− 87
View file @ 524c7ecb
...@@ -116,90 +116,3 @@ social_media: ...@@ -116,90 +116,3 @@ social_media:
- text: "LinkedIn" - text: "LinkedIn"
url: "https://www.linkedin.com/edu/school?id=10875" url: "https://www.linkedin.com/edu/school?id=10875"
social_media_placement: "global-site-footer" 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
source/_patterns/04-components/menu/menu--header/menu--header.twig
+ 6
− 4
View file @ 524c7ecb
{% include '@components/menu/menu.twig' with { <nav class="uw-header-menu" aria-label="University">
'menu_name': menu_name, {% include '@components/menu/menu.twig' with {
'items': items 'menu_name': menu_name,
} %} 'items': items
\ No newline at end of file } %}
</nav>
source/_patterns/04-components/menu/menu--main/_menu--main.scss
+ 307
− 0
View file @ 524c7ecb
@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;
}
}
}
source/_patterns/04-components/menu/menu--main/menu--main.twig
+ 37
− 4
View file @ 524c7ecb
{% include '@components/menu/menu.twig' with { <nav class="uw-main-nav">
'menu_name': menu_name, <div class="uw-main-nav__wrapper">
'items': items <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>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment