diff --git a/css/styles.css b/css/styles.css
index 5450ec2bb7f2c7e9e402109c80ca11142349a945..1a03f96f7df32891c0b67319ce8240280598cc6d 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1948,36 +1948,49 @@ svg:not(:root) {
padding: 0 16px;
display: grid;
font-family: "BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif;
- grid-template-columns: 100%;
+ grid-template-columns: auto 6rem;
padding: 16px;
position: relative; }
@media (min-width: 75rem) {
.uw-header__wrapper {
padding-left: 0;
padding-right: 0; } }
- @media (min-width: 48.06rem) {
- .uw-header__wrapper {
- grid-template-columns: auto 8rem; } }
.uw-header__wrapper .uw-site-logo {
- grid-column: 1 / 3;
+ grid-column: 1 / 2;
grid-row: 1 / 2; }
- @media (min-width: 48.06rem) {
- .uw-header__wrapper .uw-site-logo {
- grid-column: 1 / 2;
- grid-row: 1 / 2; } }
.uw-header__wrapper .uw-header-menu {
- grid-column: 1 / 3;
- grid-row: 2 / 3; }
- @media (min-width: 48.06rem) {
- .uw-header__wrapper .uw-header-menu {
- grid-column: 2 / 3;
- grid-row: 1 / 2; } }
- .uw-header .uw-site-name {
+ grid-column: 2 / 3;
+ grid-row: 1 / 2; }
+ .uw-header .uw-header__nav {
+ max-width: 100%;
+ padding: 0;
+ width: 100%;
background-color: #eee; }
+ .uw-header .uw-header__center {
+ margin-left: auto;
+ margin-right: auto;
+ max-width: 75rem;
+ padding: 0 16px;
+ display: grid;
+ grid-template-columns: auto 4rem;
+ padding: 0; }
+ @media (min-width: 75rem) {
+ .uw-header .uw-header__center {
+ padding-left: 0;
+ padding-right: 0; } }
+ .uw-header .uw-header__site-name {
+ grid-column: 1 / 2;
+ grid-row: 1 / 2; }
+ .uw-header .uw-navigation-button {
+ grid-column: 2 / 3;
+ grid-row: 1 / 2; }
+ .uw-header .uw-header__navigation {
+ grid-column: 1 / 3;
+ grid-row: 2 / 3; }
.uw-header .messages-list {
background-color: #fff;
- grid-column: 1 / 5;
- grid-row: 4 / 5;
+ grid-column: 1 / 3;
+ grid-row: 2 / 3;
margin-bottom: 0;
margin-top: 0;
padding: 0 1rem; }
@@ -4195,6 +4208,7 @@ fieldset,
.uw-horizontal-nav.uw-horizontal-nav--header .uw-horizontal-nav--menu .menu {
border: 1px solid #fff;
height: auto;
+ position: relative;
width: 6rem; }
.uw-horizontal-nav.uw-horizontal-nav--header .uw-horizontal-nav--menu .menu a {
color: #fff;
@@ -4222,10 +4236,7 @@ fieldset,
right: 0.5rem;
text-align: center;
top: 0.5rem;
- transform: scale(0.75, 0.75); }
- @media (min-width: 48.06rem) {
- .uw-horizontal-nav.uw-horizontal-nav--header .uw-horizontal-nav--menu .menu--horizontal > .menu--item.has-submenu > a::after {
- transform: scale(0.75, 0.75) rotate(90deg); } }
+ transform: scale(0.75, 0.75) rotate(90deg); }
.uw-horizontal-nav.uw-horizontal-nav--header .uw-horizontal-nav--menu .menu--subnav {
display: none; }
.uw-horizontal-nav.uw-horizontal-nav--header .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav {
@@ -4234,8 +4245,8 @@ fieldset,
left: inherit;
min-height: auto;
min-width: 13rem;
- padding: 1rem;
- right: 2rem;
+ padding: 1rem 0;
+ right: 0;
width: auto; }
.uw-horizontal-nav.uw-horizontal-nav--header .uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--item {
max-width: inherit; }
@@ -4734,7 +4745,7 @@ fieldset,
max-width: 75rem;
padding: 0 16px;
display: grid;
- padding: 8px;
+ padding: 0 8px;
position: relative; }
@media (min-width: 75rem) {
.uw-horizontal-nav--wrapper {
@@ -4824,7 +4835,10 @@ fieldset,
.uw-horizontal-nav--menu .menu .submenu-active.has-submenu--medium .menu--subnav {
min-height: 25rem; }
.uw-horizontal-nav--menu .menu .submenu-active.has-submenu--large .menu--subnav {
- min-height: 35rem; }
+ min-height: 50rem; }
+ @media (min-width: 63.1875rem) {
+ .uw-horizontal-nav--menu .menu .submenu-active.has-submenu--large .menu--subnav {
+ min-height: 35rem; } }
.uw-horizontal-nav--menu .menu .submenu-active .menu--subnav {
margin-left: auto;
margin-right: auto;
@@ -4839,9 +4853,8 @@ fieldset,
flex-wrap: wrap;
height: 100%;
left: 3rem;
- min-height: 80vh;
padding-bottom: 1rem;
- padding-top: 2.5rem !important;
+ padding-top: 2.5rem;
position: absolute;
top: 100%;
width: 100%;
@@ -4850,9 +4863,9 @@ fieldset,
.uw-horizontal-nav--menu .menu .submenu-active .menu--subnav {
padding-left: 0;
padding-right: 0; } }
- @media (min-width: 75rem) {
+ @media (min-width: 40.06rem) {
.uw-horizontal-nav--menu .menu .submenu-active .menu--subnav {
- width: calc(100% - 7rem); } }
+ width: calc(100% - 6rem); } }
.uw-horizontal-nav--menu .menu .submenu-active .menu--subnav .menu--subnav {
align-items: inherit;
background: inherit;
@@ -5150,141 +5163,112 @@ fieldset,
.messages--warning::before {
background-image: url("../source/images/icons/messages-warning.svg"); }
-.mobile-menu-button {
+.uw-navigation-button {
outline: 2px solid transparent;
outline-offset: 2px;
background-color: transparent;
- border: 0;
- border-radius: 0;
- box-shadow: none;
- display: inline-block;
- font-family: Typ1451-Regular,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
- font-size: 1.125rem;
- font-weight: 600;
- height: 55px;
- line-height: 55px;
- margin: 0;
- padding: 0 16px;
- text-decoration: none; }
- .mobile-menu-button:focus {
+ border-radius: inherit;
+ color: #4e4e4e;
+ cursor: pointer;
+ display: block;
+ font-family: "BureauGrot Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif;
+ font-size: 9.984px;
+ font-weight: 400;
+ letter-spacing: 0;
+ margin: inherit;
+ margin-bottom: 0;
+ max-width: inherit;
+ padding: 0;
+ padding-top: 16px;
+ position: relative;
+ text-align: center;
+ text-decoration: none;
+ text-transform: uppercase;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ vertical-align: inherit;
+ white-space: nowrap;
+ width: 100%; }
+ .uw-navigation-button:focus {
outline-color: #4773aa; }
-
-.mobile-menu-button__icon {
- height: 22px;
- overflow: hidden;
- width: 22px;
- background-position: 50% 50%;
- background-repeat: no-repeat;
- background-size: 22px 22px;
- display: inline-block;
- margin-top: 16px; }
- .mobile-menu-button__icon::before {
- content: '';
+ @media (min-width: 48.06rem) {
+ .uw-navigation-button {
+ display: none; } }
+ .uw-navigation-button:hover, .uw-navigation-button:focus {
+ border: 0;
+ outline: none !important; }
+ .uw-navigation-button:active {
+ outline: none !important; }
+ .uw-navigation-button[disabled] {
+ cursor: default;
+ pointer-events: none; }
+ .uw-navigation-button[aria-expanded='true'] > .uw-navigation-button__lines {
+ background-color: transparent;
+ transition: background-color, opacity 0s;
+ width: 1.5rem; }
+ .uw-navigation-button > .uw-navigation-button__lines {
+ background-color: #757575;
display: block;
- height: 150%;
- width: 0; }
-
-.mobile-menu-button--close .mobile-menu-button__icon {
- background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2222%22%20height%3D%2222%22%20viewBox%3D%220%200%2022%2022%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%3E%0A%3Cpath%20fill%3D%22%23555559%22%20d%3D%22M21.9%202.2l-2.2-2.2-8.8%208.8-8.8-8.8-2.2%202.2%208.8%208.8-8.8%208.8%202.2%202.2%208.8-8.8%208.8%208.8%202.2-2.2-8.8-8.8%208.8-8.8z%22%2F%3E%0A%3C%2Fsvg%3E'); }
-
-.mobile-menu-button--menu .mobile-menu-button__icon {
- background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2233%22%20height%3D%2222%22%20viewBox%3D%220%200%2033%2022%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%3E%0A%3Cpath%20fill%3D%22%23555559%22%20d%3D%22M0%2022h33.1v-3.7h-33.1v3.7zM0%2012.8h33.1v-3.7h-33.1v3.7zM0%200v3.7h33.1v-3.7h-33.1z%22%2F%3E%0A%3C%2Fsvg%3E');
- background-size: 33px 22px;
- width: 33px; }
-
-.mobile-menu {
- background-color: #eee;
- background-color: rgba(238, 238, 238, 0.98);
+ font-size: 0;
+ height: 0.125rem;
+ left: 50%;
+ margin-left: -0.75rem;
+ position: absolute;
+ top: 28%;
+ transition: background-color 0.3s;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ width: 1.5rem; }
+ .uw-navigation-button > .uw-navigation-button__lines::before, .uw-navigation-button > .uw-navigation-button__lines::after {
+ background: #757575;
+ content: '';
+ height: 100%;
+ left: 0;
+ position: absolute;
+ transition: transform 0.3s;
+ width: 100%; }
+ .uw-navigation-button > .uw-navigation-button__lines::before {
+ transform: translateY(-250%); }
+ .uw-navigation-button > .uw-navigation-button__lines::after {
+ transform: translateY(250%); }
+ .uw-navigation-button[aria-expanded='true'] > .uw-navigation-button__lines::before {
+ transform: translateY(0) rotate(45deg); }
+ .uw-navigation-button[aria-expanded='true'] > .uw-navigation-button__lines::after {
+ transform: translateY(0) rotate(-45deg); }
+
+.no-scroll {
+ bottom: 0;
left: 0;
- overflow-y: auto;
+ overflow: auto;
position: fixed;
- top: 0;
- width: 100%;
- z-index: 999999; }
-
-.mobile-menu__menu {
- list-style-type: none;
- margin: 0;
- padding: 0;
- margin: 0.75em 0 0; }
- .mobile-menu__menu li {
- padding-left: 0; }
- .mobile-menu__menu li::before {
- display: none; }
+ right: 0;
+ top: 0; }
-.mobile-menu__item {
- margin: 0;
- padding: 0;
- position: relative; }
+.uw-navigation-button[aria-expanded="true"] ~ .uw-header__navigation {
+ display: block; }
-.mobile-menu__link {
- background-color: transparent;
- border: 0;
- color: #757575;
- display: block;
- font-family: Typ1451-Regular,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
- font-size: 1.266rem;
- font-weight: 600;
- line-height: 1.45;
- margin: 0;
- padding: 0.76965rem 1rem;
- text-align: left;
- text-decoration: none;
- white-space: normal;
- width: auto;
- z-index: 3; }
- .mobile-menu__link:hover, .mobile-menu__link:focus, .mobile-menu__link:active, .mobile-menu__link.is-active {
- color: #000; }
- .mobile-menu__link.has-subnav {
- margin-right: 44px; }
+.uw-header__navigation {
+ display: none; }
+ .uw-header__navigation.close {
+ display: none; }
+ .uw-header__navigation.open {
+ display: block; }
+ @media (min-width: 48.06rem) {
+ .uw-header__navigation {
+ display: block !important; }
+ .uw-header__navigation.open {
+ display: block !important; } }
-.mobile-menu__subnav-arrow {
- outline: 2px solid transparent;
- outline-offset: 2px;
- height: 54px;
- overflow: hidden;
- width: 44px;
- background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2219%22%20height%3D%2212%22%20viewBox%3D%220%200%2019%2012%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%3E%0A%3Cpath%20fill%3D%22%238e8e8e%22%20d%3D%22M2.3%200l7.5%207.5%207.5-7.5%202.3%202.3-9.7%209.7-9.7-9.7%202.3-2.3z%22%2F%3E%0A%3C%2Fsvg%3E');
- background-attachment: initial;
- background-color: initial;
- background-position: 50%;
- background-repeat: no-repeat;
- background-size: 19px 12px;
- border: 0;
- box-shadow: none;
- cursor: pointer;
- display: inline-block;
- outline-offset: 0;
- position: absolute;
- right: 0;
- top: 0;
- vertical-align: top;
- z-index: 2; }
- .mobile-menu__subnav-arrow:focus {
- outline-color: #4773aa; }
- .mobile-menu__subnav-arrow::before {
- content: '';
- display: block;
- height: 150%;
- width: 0; }
- [dir='rtl'] .mobile-menu__subnav-arrow {
- left: 0;
- right: auto; }
- .mobile-menu__subnav-arrow[aria-expanded="true"] {
- background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2219%22%20height%3D%2212%22%20viewBox%3D%220%200%2019%2012%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%3E%0A%3Cpath%20fill%3D%22%238e8e8e%22%20d%3D%22M2.3%2012l7.5-7.5%207.5%207.5%202.3-2.3-9.7-9.7-9.7%209.7%202.3%202.3z%22%2F%3E%0A%3C%2Fsvg%3E'); }
+.no-scroll .uw-header__navigation.open {
+ display: block; }
-.mobile-menu__subnav {
- background-color: #fafafa;
- background-color: rgba(250, 250, 250, 0.98);
- display: none;
- list-style: none;
- margin: 0;
- padding: 0; }
- .mobile-menu__subnav .mobile-menu__link {
- color: #757575;
- padding-left: 24px; }
- .mobile-menu__subnav .mobile-menu__link:hover, .mobile-menu__subnav .mobile-menu__link:focus, .mobile-menu__subnav .mobile-menu__link:active {
- color: #000; }
+@media (min-width: 48.06rem) {
+ .no-scroll .uw-header__navigation.open {
+ display: block !important; } }
.page-title {
padding-top: 1rem; }
@@ -5460,17 +5444,23 @@ picture {
width: 100%; }
.uw-site-logo {
- width: 12.5rem; }
+ width: 8rem; }
+ @media (min-width: 30rem) {
+ .uw-site-logo {
+ width: 12.5rem; } }
.uw-site-logo .uw-site-logo__link {
background: url("../source/images/logos/uwaterloo-logo.svg") 0 50% no-repeat;
background-color: #000;
background-size: contain;
color: #000;
display: block;
- height: 2.688rem;
+ height: 100%;
text-align: center;
text-indent: -999rem;
width: 100%; }
+ @media (min-width: 30rem) {
+ .uw-site-logo .uw-site-logo__link {
+ height: 2.688rem; } }
.uw-site-name a:hover {
text-decoration: underline; }
@@ -5898,3 +5888,9 @@ html:not(.js) .uw-tabcontent[role="tabpanel"][hidden] {
height: 0;
overflow: hidden;
text-indent: -9999px; }
+
+.uw-content-moderation {
+ display: none; }
+
+.admin .uw-content-moderation {
+ display: block; }
diff --git a/js/component_scripts.min.js b/js/component_scripts.min.js
index fd6f029032eccf358797e87391e093898b513acd..6d1d9e0b79a16cdc64be74e10a40de8b0e9a3ae5 100644
--- a/js/component_scripts.min.js
+++ b/js/component_scripts.min.js
@@ -237,23 +237,40 @@
(function ($, Drupal) {
Drupal.behaviors.menuhorizontal = {
attach: function (context, settings) {
+
+
+
+
+
$(document).ready(function(){
- // const toggle = document.querySelector(".toggle");
+ const toggle = document.querySelector(".uw-navigation-button");
+ const navHeader = document.querySelector(".uw-header__navigation");
const menus = document.querySelectorAll(".menu--horizontal");
+ // const activeSubs = document.querySelectorAll(".submenu-active");
const items = document.querySelectorAll(".menu--item");
+
/* Toggle mobile menu */
-// // function toggleMenu() {
-// // if (menu.classList.contains("active")) {
-// // menu.classList.remove("active");
-// // toggle.querySelector("a").innerHTML = "<i class='fas fa-bars'></i>";
-// // } else {
-// // menu.classList.add("active");
-// // toggle.querySelector("a").innerHTML = "<i class='fas fa-times'></i>";
-// // }
-// // }
+ function toggleMenu() {
+
+ if (this.classList.contains('active')) {
+ this.classList.remove('active');
+ this.setAttribute('aria-expanded', 'false');
+ navHeader.classList.remove('open');
+ navHeader.classList.add('close');
+ $('html').removeClass('no-scroll');
+ } else {
+ this.classList.add('active');
+ this.setAttribute('aria-expanded', 'true');
+ navHeader.classList.remove('close');
+ navHeader.classList.add('open');
+ $('html').addClass('no-scroll');
+
+ }
+
+ };
for (let menu of menus) {
/* Activate Submenu */
@@ -297,15 +314,11 @@
}
}
- /* Event Listeners */
- /* add to hamburger mobile menu button */
- // toggle.addEventListener("click", toggleMenu, false);
-
for (let item of items) {
if (item.querySelector(".menu--subnav")) {
item.addEventListener("click", toggleItem, false);
}
- // add event listeners to keyup event of enter and escape keys for the menu--items .
+ // Add event listeners to keyup event of enter and escape keys for the menu--items .
item.addEventListener('keyup', function(e) {
if(e.key === "Enter") {
@@ -325,8 +338,61 @@
}
});
}
+
document.addEventListener("click", closeSubmenu, false);
+ // Add event listeners on the menu toggle button.
+ toggle.addEventListener("click", toggleMenu, false);
+
+
+
+
+ // apply timeout to the to event firing
+ // so it fires at end of event.
+ function debouncer( func ) {
+ var timeoutID ,
+ timeout = 200;
+ return function () {
+ var scope = this ,
+ args = arguments;
+ clearTimeout( timeoutID );
+ timeoutID = setTimeout( function () {
+ func.apply( scope , Array.prototype.slice.call( args ) );
+ } , timeout );
+ };
+ }
+ // Check the width of the screen and
+ // force the button click if wider that 767px.
+ function menuCheckWidth() {
+ // Set screenWidth var
+ var screenWidth = $(window).width();
+ if (screenWidth > 767 ) {
+ console.log('its wider than 767 ');
+ if($('html').hasClass('no-scroll')){
+ toggle.click();
+ }
+ else{
+ $('.uw-header__navigation').addClass('open');
+ }
+
+ }
+ else {
+ if($('.uw-header__navigation').hasClass('open')){
+ $('.uw-header__navigation').removeClass('open');
+ $('.uw-header__navigation').addClass('close');
+ }
+ }
+ }
+ // Listen to event resize and apply the debouncer
+ // to the menuCheckWidth function.
+ $(window).resize(
+ debouncer( function () {
+ menuCheckWidth();
+ }
+ )
+ );
+
+ menuCheckWidth();
});
}
};
diff --git a/source/_patterns/03-layouts/header/_header.scss b/source/_patterns/03-layouts/header/_header.scss
index 9ed265ba7dccbbf863d30dc91a28af16b034284e..db34feca7ef94941e2f82e49269d5a630c037769 100644
--- a/source/_patterns/03-layouts/header/_header.scss
+++ b/source/_patterns/03-layouts/header/_header.scss
@@ -10,43 +10,50 @@ $site-name-bg: gesso-grayscale(gray-2);
@include uw-contained-width;
display: grid;
font-family:gesso-font-family(condensedbook);
- grid-template-columns: 100%;
+ grid-template-columns: auto 6rem;
padding:gesso-spacing(sm);
position: relative;
- @include medium {
- grid-template-columns: auto 8rem;
- }
.uw-site-logo {
- grid-column: 1 / 3;
+ grid-column: 1 / 2;
grid-row: 1 / 2;
- @include medium {
- grid-column: 1 / 2;
- grid-row: 1 / 2;
- }
}
.uw-header-menu {
- grid-column: 1 / 3;
- grid-row: 2 / 3;
-
- @include medium {
- grid-column: 2 / 3;
- grid-row: 1 / 2;
- }
+ grid-column: 2 / 3;
+ grid-row: 1 / 2;
}
-
}
- .uw-site-name{
+ .uw-header__nav{
+ @include uw-full-width;
background-color: $site-name-bg;
}
+ .uw-header__center{
+ @include uw-contained-width;
+ display: grid;
+ grid-template-columns: auto 4rem;
+ padding:0;
+ }
+ .uw-header__site-name{
+ grid-column: 1 / 2;
+ grid-row: 1 / 2;
+ }
+ .uw-navigation-button{
+ grid-column: 2 / 3;
+ grid-row: 1 / 2;
+ }
+ .uw-header__navigation{
+ grid-column: 1 / 3;
+ grid-row: 2 / 3;
+ }
+
.messages-list {
background-color: $uw-white;
- grid-column: 1 / 5;
- grid-row: 4 / 5;
+ grid-column: 1 / 3;
+ grid-row: 2 / 3;
margin-bottom: 0;
margin-top: 0;
padding: 0 1rem;
diff --git a/source/_patterns/03-layouts/header/header.twig b/source/_patterns/03-layouts/header/header.twig
index f21bc3ecf05eca28c0ad3e6aab51914d81f7598c..27522a83c0a94f0dfba5fa885a2adfa191e0b3fb 100644
--- a/source/_patterns/03-layouts/header/header.twig
+++ b/source/_patterns/03-layouts/header/header.twig
@@ -16,26 +16,31 @@
'faculty': faculty
}%}
-
- <div class="uw-header__site-name">
- {% include '@components/site-name/site-name.twig' with {
- 'site_name': site_name
- } %}
- </div>
-
- <div class="uw-header__navigation">
- {% include "@components/menu/menu--horizontal/menu--horizontal.twig" with {
- 'modifier_classes': 'main',
- 'menu_name': 'horizontal',
- 'items': nav_items
- }%}
-
- {% include "@components/menu/menu--secondary/menu--secondary.twig" with {
- 'modifier_classes': 'secondary',
- 'items': secondary_items
- }%}
-
- </div>
-
+ <nav class="uw-header__nav">
+ <div class="uw-header__center">
+ <div class="uw-header__site-name">
+ {% include '@components/site-name/site-name.twig' with {
+ 'site_name': site_name
+ } %}
+ </div>
+ <button class="uw-navigation-button" aria-controls="uw-header__navigation" aria-expanded="false">
+ <span class="uw-navigation-button__text">Menu</span>
+ <span class="uw-navigation-button__lines"></span>
+ </button>
+ </div>
+ <div id="uw-header__navigation" class="uw-header__navigation">
+ {% include "@components/menu/menu--horizontal/menu--horizontal.twig" with {
+ 'modifier_classes': 'main',
+ 'menu_name': 'horizontal',
+ 'items': nav_items
+ }%}
+
+ {% include "@components/menu/menu--secondary/menu--secondary.twig" with {
+ 'modifier_classes': 'secondary',
+ 'items': secondary_items
+ }%}
+
+ </div>
+ </nav>
</header>
diff --git a/source/_patterns/03-layouts/site-container/site-container.yml b/source/_patterns/03-layouts/site-container/site-container.yml
index e1c37977dc34918c42c2b6e7f86309789cdc6aed..ddfbe58151d40fccbdf893833faa808994a7a7a0 100644
--- a/source/_patterns/03-layouts/site-container/site-container.yml
+++ b/source/_patterns/03-layouts/site-container/site-container.yml
@@ -159,7 +159,7 @@ nav_items:
options:
attributes:
class: ''
- active_trail: true
+ active_trail: false
menu_items_count: 10
submenu:
- text: 'Research areas'
@@ -175,7 +175,7 @@ nav_items:
options:
attributes:
class: ''
- active_trail: true
+ active_trail: false
submenu:
- text: 'Clinical'
url: '#'
@@ -211,7 +211,7 @@ nav_items:
options:
attributtes:
class: ''
- active-trial: true
+ active-trial: false
submenu:
- text: 'Academic Program for Graduate Study in Industrial-Organizational Psychology'
url: '#'
@@ -219,8 +219,7 @@ nav_items:
options:
attributes:
class: ''
- active_trail: true
- active: true
+ active_trail: false
- text: 'Social Psychology'
url: '#'
original_link:
diff --git a/source/_patterns/04-components/menu/menu--header/_menu--header.scss b/source/_patterns/04-components/menu/menu--header/_menu--header.scss
index e6bad21ddb0ff320bdcd26d89e9ffceb79a76ec0..283dd2ec384bf83076251a64b2f79a5551ec41a5 100644
--- a/source/_patterns/04-components/menu/menu--header/_menu--header.scss
+++ b/source/_patterns/04-components/menu/menu--header/_menu--header.scss
@@ -25,6 +25,7 @@ $menu-horizontal-bg: gesso-brand(org-default,uw-black,lvl4);
.menu {
border:1px solid #fff;
height:auto;
+ position:relative;
width:6rem;
a{
color: gesso-brand(org-default,uw-white,lvl1);
@@ -64,10 +65,7 @@ $menu-horizontal-bg: gesso-brand(org-default,uw-black,lvl4);
right:0.5rem;
text-align: center;
top:0.5rem;
- transform: scale(0.75, 0.75);
- @include medium{
- transform: scale(0.75, 0.75) rotate(90deg);
- }
+ transform: scale(0.75, 0.75) rotate(90deg);
}
}
}
@@ -82,9 +80,10 @@ $menu-horizontal-bg: gesso-brand(org-default,uw-black,lvl4);
left:inherit;
min-height:auto;
min-width:13rem;
- padding:1rem;
- right:2rem;
+ padding:1rem 0;
+ right:0;
width:auto;
+
.menu--item{
max-width:inherit;
}
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 f1969f04571b6250f50ddf5dc7910ac29a45cb94..d343ad2440388fb87936b35fec5ddc64ada943df 100644
--- a/source/_patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss
+++ b/source/_patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss
@@ -204,7 +204,7 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
&--wrapper{
@include uw-contained-width;
display:grid;
- padding:gesso-spacing(xs);
+ padding:0 gesso-spacing(xs);
position:relative;
@include medium{
grid-template-columns: 3rem auto;
@@ -303,7 +303,6 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
// hide all menus that are classed subnav
&--subnav {
-
display: none;
font-size: $menu-horizontal-sub-font-size;
text-transform: none;
@@ -322,10 +321,15 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
&.has-submenu--medium .menu--subnav{
//background: #00f !important;
min-height: 25rem;
+
}
&.has-submenu--large .menu--subnav{
//background: #800080 !important;
- min-height: 35rem;
+ min-height:50rem;
+ @include large {
+ min-height: 35rem;
+ }
+
}
.menu--subnav{
@include uw-contained-width;
@@ -338,15 +342,14 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
flex-wrap:wrap;
height:100%;
left:3rem;
- min-height:80vh;
padding-bottom:1rem;
- padding-top:2.5rem !important;
+ padding-top:2.5rem;
position:absolute;
top:100%;
width:100%;
z-index:10;
- @include xl {
- width:calc(100% - 7rem);
+ @include small {
+ width:calc(100% - 6rem);
}
.menu--subnav{
align-items: inherit;
diff --git a/source/_patterns/04-components/menu/menu--horizontal/menu--horizontal.js b/source/_patterns/04-components/menu/menu--horizontal/menu--horizontal.js
index f282813177fc6c28b73d6a3f43c7951b6c4df97a..ffed82f0cc1ca04008f4655765995b9ae3e67602 100644
--- a/source/_patterns/04-components/menu/menu--horizontal/menu--horizontal.js
+++ b/source/_patterns/04-components/menu/menu--horizontal/menu--horizontal.js
@@ -1,23 +1,39 @@
(function ($, Drupal) {
Drupal.behaviors.menuhorizontal = {
attach: function (context, settings) {
+
+
+
+
+
$(document).ready(function(){
- // const toggle = document.querySelector(".toggle");
+ const toggle = document.querySelector(".uw-navigation-button");
+ const navHeader = document.querySelector(".uw-header__navigation");
const menus = document.querySelectorAll(".menu--horizontal");
const items = document.querySelectorAll(".menu--item");
+
/* Toggle mobile menu */
-// // function toggleMenu() {
-// // if (menu.classList.contains("active")) {
-// // menu.classList.remove("active");
-// // toggle.querySelector("a").innerHTML = "<i class='fas fa-bars'></i>";
-// // } else {
-// // menu.classList.add("active");
-// // toggle.querySelector("a").innerHTML = "<i class='fas fa-times'></i>";
-// // }
-// // }
+ function toggleMenu() {
+
+ if (this.classList.contains('active')) {
+ this.classList.remove('active');
+ this.setAttribute('aria-expanded', 'false');
+ navHeader.classList.remove('open');
+ navHeader.classList.add('close');
+ $('html').removeClass('no-scroll');
+ } else {
+ this.classList.add('active');
+ this.setAttribute('aria-expanded', 'true');
+ navHeader.classList.remove('close');
+ navHeader.classList.add('open');
+ $('html').addClass('no-scroll');
+
+ }
+
+ };
for (let menu of menus) {
/* Activate Submenu */
@@ -61,15 +77,11 @@
}
}
- /* Event Listeners */
- /* add to hamburger mobile menu button */
- // toggle.addEventListener("click", toggleMenu, false);
-
for (let item of items) {
if (item.querySelector(".menu--subnav")) {
item.addEventListener("click", toggleItem, false);
}
- // add event listeners to keyup event of enter and escape keys for the menu--items .
+ // Add event listeners to keyup event of enter and escape keys for the menu--items .
item.addEventListener('keyup', function(e) {
if(e.key === "Enter") {
@@ -89,8 +101,60 @@
}
});
}
+
document.addEventListener("click", closeSubmenu, false);
+ // Add event listeners on the menu toggle button.
+ toggle.addEventListener("click", toggleMenu, false);
+
+
+
+
+ // apply timeout to the to event firing
+ // so it fires at end of event.
+ function debouncer( func ) {
+ var timeoutID ,
+ timeout = 200;
+ return function () {
+ var scope = this ,
+ args = arguments;
+ clearTimeout( timeoutID );
+ timeoutID = setTimeout( function () {
+ func.apply( scope , Array.prototype.slice.call( args ) );
+ } , timeout );
+ };
+ }
+ // Check the width of the screen and
+ // force the button click if wider that 767px.
+ function menuCheckWidth() {
+ // Set screenWidth var
+ var screenWidth = $(window).width();
+ if (screenWidth > 767 ) {
+ if($('html').hasClass('no-scroll')){
+ toggle.click();
+ }
+ else{
+ $('.uw-header__navigation').addClass('open');
+ }
+
+ }
+ else {
+ if($('.uw-header__navigation').hasClass('open')){
+ $('.uw-header__navigation').removeClass('open');
+ $('.uw-header__navigation').addClass('close');
+ }
+ }
+ }
+ // Listen to event resize and apply the debouncer
+ // to the menuCheckWidth function.
+ $(window).resize(
+ debouncer( function () {
+ menuCheckWidth();
+ }
+ )
+ );
+
+ menuCheckWidth();
});
}
};
diff --git a/source/_patterns/04-components/mobile-menu-button/_mobile-menu-button.scss b/source/_patterns/04-components/mobile-menu-button/_mobile-menu-button.scss
index 3debcb7e2f1c2dc39ea6ff4ca4812bbf4bf16474..98d0e797f6225224eef177180f2f7b1807a6666c 100644
--- a/source/_patterns/04-components/mobile-menu-button/_mobile-menu-button.scss
+++ b/source/_patterns/04-components/mobile-menu-button/_mobile-menu-button.scss
@@ -1,42 +1,103 @@
// @file
// Styles for the mobile menu buttons.
-.mobile-menu-button {
+.uw-navigation-button{
@include focus();
background-color: transparent;
- border: 0;
- border-radius: 0;
- box-shadow: none;
- display: inline-block;
- font-family: gesso-font-family(system);
- font-size: rem(gesso-font-size(1));
- font-weight: gesso-font-weight(bold);
- height: 55px;
- line-height: 55px;
- margin: 0;
- padding: 0 gesso-spacing(sm);
+ border-radius: inherit;
+ color: gesso-grayscale('gray-6');
+ cursor: pointer;
+ display:block;
+ @include medium{
+ display:none;
+ }
+ font-family: gesso-font-family(book);
+ font-size: gesso-font-size(-4);
+ font-weight: 400;
+ letter-spacing:0;
+ margin: inherit;
+ margin-bottom: 0;
+ max-width: inherit;
+ padding:0;
+ padding-top: gesso-spacing(sm);
+ position: relative;
+ text-align: center;
text-decoration: none;
-}
+ text-transform: uppercase;
+ user-select: none;
+ vertical-align: inherit;
+ white-space: nowrap;
+ width: 100%;
+
+ &:visited {
+ //color: $color-text;
+ }
+
+ &:hover,
+ &:focus {
+ //background-color: $color-background-hover;
+ //background-image:$button-background-image;
+ border: 0;
+ outline: none !important;
-.mobile-menu-button__icon {
- @include image-replace(22px, 22px);
- background-position: 50% 50%;
- background-repeat: no-repeat;
- background-size: 22px 22px;
- display: inline-block;
- margin-top: gesso-spacing(sm);
-}
-.mobile-menu-button--close {
- .mobile-menu-button__icon {
- @include svg-background-inline(mobile-close);
}
-}
-.mobile-menu-button--menu {
- .mobile-menu-button__icon {
- @include svg-background-inline(mobile-menu);
- background-size: 33px 22px;
- width: 33px;
+ &:active {
+ //background-color: $color-background-active;
+ //background-image:$button-background-image;
+ //color: $color-text-active;
+ outline: none !important;
+ }
+
+ &[disabled] {
+ //background-color: $color-background-disabled;
+ //background-image:$button-background-image;
+ //color: $color-text-disabled;
+ cursor: default;
+ pointer-events: none;
+ }
+ &[aria-expanded='true'] >.uw-navigation-button__lines{
+ background-color: transparent;
+ transition: background-color, opacity 0s;
+ width: 1.5rem;
+ }
+ > .uw-navigation-button__lines {
+ background-color: gesso-grayscale(gray-5);
+ display: block;
+ font-size: 0;
+ height: 0.125rem;
+ left: 50%;
+ margin-left: -0.75rem;
+ position: absolute;
+ top:28%;
+ transition: background-color 0.3s;
+ user-select: none;
+ width: 1.5rem;
+ &::before,
+ &::after{
+ background: gesso-grayscale(gray-5);
+ content: '';
+ height: 100%;
+ left: 0;
+ position: absolute;
+ transition: transform 0.3s;
+ width: 100%;
+ }
+ &::before{
+ transform: translateY(-250%);
+ }
+ &::after{
+ transform: translateY(250%);
+ }
+ }
+
+ &[aria-expanded='true'] > .uw-navigation-button__lines::before{
+ transform: translateY(0) rotate(45deg);
+
}
+ &[aria-expanded='true'] > .uw-navigation-button__lines::after{
+ transform: translateY(0) rotate(-45deg);
+ }
+
}
diff --git a/source/_patterns/04-components/mobile-menu/_mobile-menu.scss b/source/_patterns/04-components/mobile-menu/_mobile-menu.scss
index 81b8be5d03e38741dbf97e1208d0365fad34b599..304ea99b817ce9aa404f618b2712079c55d70e3a 100644
--- a/source/_patterns/04-components/mobile-menu/_mobile-menu.scss
+++ b/source/_patterns/04-components/mobile-menu/_mobile-menu.scss
@@ -1,118 +1,167 @@
-// @file
-// Styles for the mobile menu.
+//// @file
+//// Styles for the mobile menu.
+//
+//$mobile-menu-fallback-bg-color: gesso-color(ui, generic, background-light) !default;
+//$mobile-menu-bg-color: rgba(gesso-color(ui, generic, background-light), 0.98) !default;
+//$mobile-menu-link-color: gesso-color(ui, generic, text-dark) !default;
+//$mobile-menu-link-hover-color: gesso-color(ui, generic, text-darker) !default;
+//$mobile-menu-submenu-fallback-bg-color: gesso-color(ui, generic, background-lighter) !default;
+//$mobile-menu-submenu-bg-color: rgba(gesso-color(ui, generic, background-lighter), 0.98) !default;
+//$mobile-menu-submenu-link-color: gesso-color(ui, generic, text-dark) !default;
+//$mobile-menu-submenu-link-hover-color: gesso-color(ui, generic, text-darker) !default;
+//$mobile-menu-button-height: 54px;
+//$mobile-menu-button-width: 44px;
+//$mobile-menu-font-size: gesso-font-size(2);
+//$mobile-menu-line-height: gesso-line-height(base);
+//
+//.mobile-menu {
+// background-color: $mobile-menu-fallback-bg-color;
+// background-color: $mobile-menu-bg-color;
+// left: 0;
+// overflow-y: auto;
+// position: fixed;
+// top: 0;
+// width: 100%;
+// z-index: 999999;
+//}
+//
+//.mobile-menu__menu {
+// @include list-clean;
+// margin: 0.75em 0 0;
+//}
+//
+//.mobile-menu__item {
+// margin: 0;
+// padding: 0;
+// position: relative;
+//}
+//
+//.mobile-menu__link {
+// background-color: transparent;
+// border: 0;
+// color: $mobile-menu-link-color;
+// display: block;
+// font-family: gesso-font-family(system);
+// font-size: rem($mobile-menu-font-size);
+// font-weight: gesso-font-weight(bold);
+// line-height: $mobile-menu-line-height;
+// margin: 0;
+// padding: rem(($mobile-menu-button-height - ($mobile-menu-font-size * $mobile-menu-line-height)) / 2) rem(gesso-spacing(sm));
+// text-align: left;
+// text-decoration: none;
+// white-space: normal;
+// width: auto;
+// z-index: 3;
+//
+// &:hover,
+// &:focus,
+// &:active,
+// &.is-active {
+// color: $mobile-menu-link-hover-color;
+// }
+//
+// &.has-subnav {
+// margin-right: $mobile-menu-button-width;
+// }
+//}
+//
+//.mobile-menu__subnav-arrow {
+// @include focus();
+// @include image-replace($mobile-menu-button-width, $mobile-menu-button-height);
+// @include svg-background-inline(mobile-arrow-down);
+// background-attachment: initial;
+// background-color: initial;
+// background-position: 50%;
+// background-repeat: no-repeat;
+// background-size: 19px 12px;
+// border: 0;
+// box-shadow: none;
+// cursor: pointer;
+// display: inline-block;
+// outline-offset: 0;
+// position: absolute;
+// right: 0;
+// top: 0;
+// vertical-align: top;
+// z-index: 2;
+//
+// @if $support-for-rtl {
+// [dir='rtl'] & {
+// left: 0;
+// right: auto;
+// }
+// }
+//
+// &[aria-expanded="true"] {
+// @include svg-background-inline(mobile-arrow-up);
+// }
+//}
+//
+//.mobile-menu__subnav {
+// background-color: $mobile-menu-submenu-fallback-bg-color;
+// background-color: $mobile-menu-submenu-bg-color;
+// display: none;
+// list-style: none;
+// margin: 0;
+// padding: 0;
+//
+// .mobile-menu__link {
+// color: $mobile-menu-submenu-link-color;
+// padding-left: gesso-spacing(md);
+//
+// &:hover,
+// &:focus,
+// &:active {
+// color: $mobile-menu-submenu-link-hover-color;
+// }
+// }
+//}
-$mobile-menu-fallback-bg-color: gesso-color(ui, generic, background-light) !default;
-$mobile-menu-bg-color: rgba(gesso-color(ui, generic, background-light), 0.98) !default;
-$mobile-menu-link-color: gesso-color(ui, generic, text-dark) !default;
-$mobile-menu-link-hover-color: gesso-color(ui, generic, text-darker) !default;
-$mobile-menu-submenu-fallback-bg-color: gesso-color(ui, generic, background-lighter) !default;
-$mobile-menu-submenu-bg-color: rgba(gesso-color(ui, generic, background-lighter), 0.98) !default;
-$mobile-menu-submenu-link-color: gesso-color(ui, generic, text-dark) !default;
-$mobile-menu-submenu-link-hover-color: gesso-color(ui, generic, text-darker) !default;
-$mobile-menu-button-height: 54px;
-$mobile-menu-button-width: 44px;
-$mobile-menu-font-size: gesso-font-size(2);
-$mobile-menu-line-height: gesso-line-height(base);
-.mobile-menu {
- background-color: $mobile-menu-fallback-bg-color;
- background-color: $mobile-menu-bg-color;
+.no-scroll {
+ bottom: 0;
left: 0;
- overflow-y: auto;
+ overflow: auto;
position: fixed;
+ right: 0;
top: 0;
- width: 100%;
- z-index: 999999;
-}
-.mobile-menu__menu {
- @include list-clean;
- margin: 0.75em 0 0;
-}
-.mobile-menu__item {
- margin: 0;
- padding: 0;
- position: relative;
}
-.mobile-menu__link {
- background-color: transparent;
- border: 0;
- color: $mobile-menu-link-color;
- display: block;
- font-family: gesso-font-family(system);
- font-size: rem($mobile-menu-font-size);
- font-weight: gesso-font-weight(bold);
- line-height: $mobile-menu-line-height;
- margin: 0;
- padding: rem(($mobile-menu-button-height - ($mobile-menu-font-size * $mobile-menu-line-height)) / 2) rem(gesso-spacing(sm));
- text-align: left;
- text-decoration: none;
- white-space: normal;
- width: auto;
- z-index: 3;
- &:hover,
- &:focus,
- &:active,
- &.is-active {
- color: $mobile-menu-link-hover-color;
- }
-
- &.has-subnav {
- margin-right: $mobile-menu-button-width;
- }
+.uw-navigation-button[aria-expanded="true"] ~ .uw-header__navigation {
+ display:block;
}
-.mobile-menu__subnav-arrow {
- @include focus();
- @include image-replace($mobile-menu-button-width, $mobile-menu-button-height);
- @include svg-background-inline(mobile-arrow-down);
- background-attachment: initial;
- background-color: initial;
- background-position: 50%;
- background-repeat: no-repeat;
- background-size: 19px 12px;
- border: 0;
- box-shadow: none;
- cursor: pointer;
- display: inline-block;
- outline-offset: 0;
- position: absolute;
- right: 0;
- top: 0;
- vertical-align: top;
- z-index: 2;
-
- @if $support-for-rtl {
- [dir='rtl'] & {
- left: 0;
- right: auto;
- }
+.uw-header__navigation{
+ display:none;
+ &.close{
+ display:none;
+ }
+ &.open{
+ display:block;
}
+ @include medium{
+ display:block !important;
+ &.open{
+ display:block !important;
+ }
- &[aria-expanded="true"] {
- @include svg-background-inline(mobile-arrow-up);
}
}
-.mobile-menu__subnav {
- background-color: $mobile-menu-submenu-fallback-bg-color;
- background-color: $mobile-menu-submenu-bg-color;
- display: none;
- list-style: none;
- margin: 0;
- padding: 0;
+.no-scroll{
+ .uw-header__navigation{
+ &.open{
+ display:block;
+ }
+ @include medium{
- .mobile-menu__link {
- color: $mobile-menu-submenu-link-color;
- padding-left: gesso-spacing(md);
+ &.open{
+ display:block !important;
+ }
- &:hover,
- &:focus,
- &:active {
- color: $mobile-menu-submenu-link-hover-color;
}
}
-}
+}
\ No newline at end of file
diff --git a/source/_patterns/04-components/site-logo/_site-logo.scss b/source/_patterns/04-components/site-logo/_site-logo.scss
index 519e64099c9f10d4de8b7715661703d4a2bd0b32..538c3adee4897a75291b41ec0b2d562ac53760b1 100644
--- a/source/_patterns/04-components/site-logo/_site-logo.scss
+++ b/source/_patterns/04-components/site-logo/_site-logo.scss
@@ -2,14 +2,21 @@
// Styles for Site logo.
.uw-site-logo {
- width:12.5rem;
+ width:8rem;
+ @include xs {
+ width:12.5rem;
+ }
.uw-site-logo__link{
background: url('../source/images/logos/uwaterloo-logo.svg') 0 50% no-repeat;
background-color: gesso-brand(org-default,uw-black,lvl4);
background-size: contain;
color: gesso-brand(org-default,uw-black,lvl4);
display: block;
- height: 2.688rem;
+ height: 100%;
+
+ @include xs {
+ height: 2.688rem;
+ }
text-align:center;
text-indent: -999rem;
width: 100%;