Skip to content

Commit

Permalink
QOLOE-17 Primary navigation + header fixes (#81)
Browse files Browse the repository at this point in the history 
* WIP: Updates - removed unused colour var, fixed popper placement issue on zoom

* WIP: Updates
  • Loading branch information
@MitchAnderson93 @tedqgov
MitchAnderson93 authored and tedqgov committed May 8, 2024
1 parent 59d4031 commit 11ee78d
Show file tree
Hide file tree
Showing 3 changed files with 26 additions and 76 deletions.
32 changes: 5 additions & 27 deletions src/components/bs5/header/header.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,55 +4,33 @@

.qld__header {
// extract from health.qld.gov.au, to be removed, temporary workaround:
// future state: color: var($--qld-color-light-siteTitle);
--#{$prefix}header-color-light-siteTitle: #022A50;
--#{$prefix}header-color-light-designAccent: #6BBE27;
--#{$prefix}header-color-light-heading: #03213F;
--#{$prefix}header-color-light-text: #414141;
--#{$prefix}header-color-light-text__muted: #636363;
--#{$prefix}header-color-light-link: #09549F;
--#{$prefix}header-color-light-link__visited: #551A8B;
--#{$prefix}header-color-light-button__text: #FFFFFF;
--#{$prefix}header-color-light-button: #09549F;
--#{$prefix}header-color-light-button__hover: #003E7D;
--#{$prefix}header-color-light-focus: #0085B3;
--#{$prefix}header-color-light-border: #EBEBEB;
--#{$prefix}header-color-light-background: #FFFFFF;
--#{$prefix}header-color-light-background__shade: #F5F5F5;
--#{$prefix}header-color-light-hint: #6f777b;
--#{$prefix}header-color-light-system-underline: #FFFFFF;
--#{$prefix}header-color-light-underline: #3F7AB4;
--#{$prefix}header-color-light-hover-underline: #09549F;
--#{$prefix}header-color-light-visited-underline: #8B63B0;
--#{$prefix}header-color-light-hover-visited-underline: #551A8B;
--#{$prefix}header-color-light-alt-button: #008733;
--#{$prefix}header-color-light-alt-button__hover: #00702B;
--#{$prefix}header-color-light-alt-border: #818181;
--#{$prefix}header-color-light-alt-background: #EBEBEB;
--#{$prefix}header-color-light-alt-background__shade: #E0E0E0;
--#{$prefix}header-color-light-alt-hint: #61696B;
--#{$prefix}header-color-dark-siteTitle: #FFFFFF;
--#{$prefix}header-color-dark-designAccent: #6BBE27;
--#{$prefix}header-color-dark-heading: #FFFFFF;
--#{$prefix}header-color-dark-text: #FFFFFF;
--#{$prefix}header-color-dark-text__muted: #DEEBF9;
--#{$prefix}header-color-dark-link: #FFFFFF;
--#{$prefix}header-color-dark-link__visited: #A668F4;
--#{$prefix}header-color-dark-button__text: #121940;
--#{$prefix}header-color-dark-button: #9AC02C;
--#{$prefix}header-color-dark-button__hover: #ADD33F;
--#{$prefix}header-color-dark-focus: #01B0E5;
--#{$prefix}header-color-dark-border: #1D9AC6;
--#{$prefix}header-color-dark-background: #09549F;
--#{$prefix}header-color-dark-background__shade: #04498F;
--#{$prefix}header-color-dark-system-underline: #03213F;
--#{$prefix}header-color-dark-underline: #B5CCE2;
--#{$prefix}header-color-dark-hover-underline: #FFFFFF;
--#{$prefix}header-color-dark-visited-underline: #B5CCE2;
--#{$prefix}header-color-dark-hover-visited-underline: #E1C2FF;
--#{$prefix}header-color-dark-alt-button: #EFD700;
--#{$prefix}header-color-dark-alt-button__hover: #FFE817;
--#{$prefix}header-color-dark-alt-border: #11B2D4;
--#{$prefix}header-color-dark-alt-background: #05325F;
--#{$prefix}header-color-dark-alt-background__shade: #052C53;
--#{$prefix}header-underline__thickness-thin: 0.5px;
Expand Down Expand Up @@ -210,7 +188,7 @@
align-items: center;
color: var(--#{$prefix}header-color-light-link);
font-size: .875rem;
line-height: 1.4285714286;
line-height: 1.42;
padding-left: .75rem;

&:hover {
Expand Down Expand Up @@ -278,7 +256,7 @@
display: flex;
flex-direction: column;
font-size: .875rem;
line-height: 1.1428571429;
line-height: 1.14;
padding: .5rem 1rem;

//HERE
Expand All @@ -305,7 +283,7 @@

@include media-breakpoint-up(md) {
font-size: .875rem;
line-height: 1.1428571429;
line-height: 1.14;
}

@include media-breakpoint-up(lg) {
Expand Down Expand Up @@ -576,7 +554,7 @@

.qld__header__heading {
color: var(--#{$prefix}header-color-light-siteTitle);
font-family: ff-meta-web-pro, Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
font-family: $font-family-sans-serif;
font-size: 1rem;
font-weight: 700;
line-height: 1.25;
Expand All @@ -592,7 +570,7 @@
.qld__header__subline {
color: var(--#{$prefix}header-color-light-text__muted);
font-size: .875rem;
line-height: 1.1428571429;
line-height: 1.14;
max-width: 80ch;

@include media-breakpoint-up(md) {
Expand Down
35 changes: 21 additions & 14 deletions src/components/bs5/navbar/navbar.functions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,22 +52,29 @@ export function initializeNavbar() {
const firstLi = parentUl.querySelector('.nav-item-home');
const dropdownMenu = toggle.parentNode.querySelector('.dropdown-menu');

// Check if a Popper instance should be activated or not
const resizeHandler = () => {
if (window.innerWidth > 992) {
if (!dropdownMenu.dataset.popperActive) {
let popperInstance = initializeDropdownPopper(firstLi, dropdownMenu);
dropdownMenu.dataset.popperActive = 'true';
activePoppers.push(popperInstance);
}
} else {
if (dropdownMenu.dataset.popperActive) {
activePoppers.forEach(popperInstance => popperInstance.destroy());
activePoppers = []; // Clear out the array after destroying instances
delete dropdownMenu.dataset.popperActive;
// Check if a Popper instance should be activated or not
const resizeHandler = () => {
if (window.innerWidth > 992) {
if (!dropdownMenu.dataset.popperActive) {
let popperInstance = initializeDropdownPopper(firstLi, dropdownMenu);
dropdownMenu.dataset.popperActive = 'true';
activePoppers.push(popperInstance);
} else {
// If the Popper instance exists, update its position
activePoppers.forEach(popperInstance => {
popperInstance.update();
});
}
} else {
if (dropdownMenu.dataset.popperActive) {
activePoppers.forEach(popperInstance => popperInstance.destroy());
activePoppers = []; // Clear out the array after destroying instances
delete dropdownMenu.dataset.popperActive;
}
}
}
};

};

// Attach resize listener to update Popper on resize
window.addEventListener('resize', resizeHandler);
Expand Down
35 changes: 0 additions & 35 deletions src/components/bs5/navbar/navbar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,55 +4,20 @@

.navbar {
// extract from health.qld.gov.au, to be removed, temporary workaround:
// future state: color: var($--qld-color-light-siteTitle);
--#{$prefix}navbar-color-light-siteTitle: #022A50;
--#{$prefix}navbar-color-light-designAccent: #6BBE27;
--#{$prefix}navbar-color-light-heading: #03213F;
--#{$prefix}navbar-color-light-text: #414141;
--#{$prefix}navbar-color-light-text__muted: #636363;
--#{$prefix}navbar-color-light-link: #09549F;
--#{$prefix}navbar-color-light-link__visited: #551A8B;
--#{$prefix}navbar-color-light-button__text: #FFFFFF;
--#{$prefix}navbar-color-light-button: #09549F;
--#{$prefix}navbar-color-light-button__hover: #003E7D;
--#{$prefix}navbar-color-light-focus: #0085B3;
--#{$prefix}navbar-color-light-border: #EBEBEB;
--#{$prefix}navbar-color-light-background: #FFFFFF;
--#{$prefix}navbar-color-light-background__shade: #F5F5F5;
--#{$prefix}navbar-color-light-hint: #6f777b;
--#{$prefix}navbar-color-light-system-underline: #FFFFFF;
--#{$prefix}navbar-color-light-underline: #3F7AB4;
--#{$prefix}navbar-color-light-hover-underline: #09549F;
--#{$prefix}navbar-color-light-visited-underline: #8B63B0;
--#{$prefix}navbar-color-light-hover-visited-underline: #551A8B;
--#{$prefix}navbar-color-light-alt-button: #008733;
--#{$prefix}navbar-color-light-alt-button__hover: #00702B;
--#{$prefix}navbar-color-light-alt-border: #818181;
--#{$prefix}navbar-color-light-alt-background: #EBEBEB;
--#{$prefix}navbar-color-light-alt-background__shade: #E0E0E0;
--#{$prefix}navbar-color-light-alt-hint: #61696B;
--#{$prefix}navbar-color-dark-siteTitle: #FFFFFF;
--#{$prefix}navbar-color-dark-designAccent: #6BBE27;
--#{$prefix}navbar-color-dark-heading: #FFFFFF;
--#{$prefix}navbar-color-dark-text: #FFFFFF;
--#{$prefix}navbar-color-dark-text__muted: #DEEBF9;
--#{$prefix}navbar-color-dark-link: #FFFFFF;
--#{$prefix}navbar-color-dark-link__visited: #A668F4;
--#{$prefix}navbar-color-dark-button__text: #121940;
--#{$prefix}navbar-color-dark-button: #9AC02C;
--#{$prefix}navbar-color-dark-button__hover: #ADD33F;
--#{$prefix}navbar-color-dark-focus: #01B0E5;
--#{$prefix}navbar-color-dark-border: #1D9AC6;
--#{$prefix}navbar-color-dark-background: #09549F;
--#{$prefix}navbar-color-dark-background__shade: #04498F;
--#{$prefix}navbar-color-dark-system-underline: #03213F;
--#{$prefix}navbar-color-dark-underline: #B5CCE2;
--#{$prefix}navbar-color-dark-hover-underline: #FFFFFF;
--#{$prefix}navbar-color-dark-visited-underline: #B5CCE2;
--#{$prefix}navbar-color-dark-hover-visited-underline: #E1C2FF;
--#{$prefix}navbar-color-dark-alt-button: #EFD700;
--#{$prefix}navbar-color-dark-alt-button__hover: #FFE817;
--#{$prefix}navbar-color-dark-alt-border: #11B2D4;
--#{$prefix}navbar-color-dark-alt-background: #05325F;
--#{$prefix}navbar-color-dark-alt-background__shade: #052C53;

Expand Down

0 comments on commit 11ee78d

Please sign in to comment.