From a2305710315fa7dbc080dd86d8048aa717b959e2 Mon Sep 17 00:00:00 2001 From: "QH\\wa-najaria" Date: Fri, 16 Aug 2024 15:14:54 +1000 Subject: [PATCH 1/5] fixing last issue - cleaning the code - qhwt-1011 --- src/components/breadcrumbs/css/component.scss | 10 +------- src/components/breadcrumbs/js/global.js | 23 ------------------- 2 files changed, 1 insertion(+), 32 deletions(-) diff --git a/src/components/breadcrumbs/css/component.scss b/src/components/breadcrumbs/css/component.scss index 2cc2767b2..849aa86a3 100644 --- a/src/components/breadcrumbs/css/component.scss +++ b/src/components/breadcrumbs/css/component.scss @@ -68,12 +68,6 @@ @include QLD-underline('light','underline','default','noVisited'); color: var(--QLD-color-light__link); } - - // .qld__icon{ - // @include QLD-space(margin, 0 0.5unit); - // color: var(--QLD-color-light__action--secondary); - // @include QLD-space(height, 1unit); - // } &:after { content: " "; @@ -93,11 +87,9 @@ &:last-child { display: flex; - flex-grow: 1; - // overflow: hidden; white-space: wrap; text-overflow: ellipsis; - flex: 1 1 auto; + flex: 0 1 auto; flex-shrink: 3; &:after { diff --git a/src/components/breadcrumbs/js/global.js b/src/components/breadcrumbs/js/global.js index 846654563..100947c89 100644 --- a/src/components/breadcrumbs/js/global.js +++ b/src/components/breadcrumbs/js/global.js @@ -9,11 +9,6 @@ var originalBreadCrumbUl = null; function getTheElements(resized = false) { - // const banner = - // document.querySelector(".qld__banner--breadcrumbs") || - // document.querySelector(".qld__body--breadcrumb"); - - // if (document) { const bannerBreadCrumbsAll = document.querySelectorAll( "nav.qld__banner__breadcrumbs--desktop" ); @@ -37,9 +32,6 @@ const paddings = parseFloat(containerFluidStyle.getPropertyValue('padding-right').replace(/\D/g, '')) + parseFloat(containerFluidStyle.getPropertyValue('padding-left').replace(/\D/g, '')); bannerBreadCrumb.style.maxWidth = (containerFluid.offsetWidth - paddings) + 'px'; - - // console.log('here is the containerFluid.offsetWidth ', paddings , ' here is the containerFluid.offsetWidth ', bannerBreadCrumb) - if(!originalBreadCrumbUl) { originalBreadCrumbUl = bannerBreadCrumb.querySelector("ul.qld__link-list").cloneNode(true); } @@ -56,22 +48,13 @@ breadCrumbsUl, }; } - - - // } - - // return null; } function createOverFlow() { - //create the over flow menu here: - //start wrapper const overFlowWrapper = document.createElement("div"); overFlowWrapper.className = "qld__overflow_menu_wrapper"; - //end wrapper - //start overflow button const button = document.createElement("button"); button.className = "qld__btn qld__btn--toggle qld__overflow_menu__btn qld__accordion--closed"; @@ -105,11 +88,9 @@ svg.appendChild(path); button.appendChild(svg); - //end overflow button overFlowWrapper.appendChild(button); - // Start menu element const div = document.createElement("div"); div.className = "qld__overflow_menu qld__accordion--closed"; div.setAttribute("id", "overflow-menu--"); @@ -119,12 +100,9 @@ ul.setAttribute("aria-label", "qld__overflow_menu qld__link-columns"); div.appendChild(ul); - //end menu overFlowWrapper.appendChild(div); - //This menu does not have the uls , uls are going to be created in insertfunction - return overFlowWrapper; } @@ -162,7 +140,6 @@ const { breadCrumbsUl } = getTheElements(); const breadCrumbsUlLis = breadCrumbsUl.querySelectorAll("li"); - // if (breadCrumbsUl.offsetHeight > breadCrumbsUlLis[0].offsetHeight && breadCrumbsUlLis.length > 2 && breadCrumbsUlLis[0].offsetHeight > 0) { if (breadCrumbsUlLis.length > 2 && breadCrumbsUlLis[0].offsetHeight > 0) { const overflowMenu = createOverFlow(); let breadcrumbLisLength = breadCrumbsUlLis.length; From e40097faaa83abacfa5d2692779392784a5cceeb Mon Sep 17 00:00:00 2001 From: "QH\\wa-najaria" Date: Mon, 19 Aug 2024 12:01:02 +1000 Subject: [PATCH 2/5] fixing the regular expression + last element truncation logic - qhwt-1072 --- src/components/breadcrumbs/js/global.js | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/src/components/breadcrumbs/js/global.js b/src/components/breadcrumbs/js/global.js index 100947c89..2df47de1b 100644 --- a/src/components/breadcrumbs/js/global.js +++ b/src/components/breadcrumbs/js/global.js @@ -29,7 +29,7 @@ const containerFluidStyle = window.getComputedStyle(containerFluid); - const paddings = parseFloat(containerFluidStyle.getPropertyValue('padding-right').replace(/\D/g, '')) + parseFloat(containerFluidStyle.getPropertyValue('padding-left').replace(/\D/g, '')); + const paddings = parseFloat(containerFluidStyle.getPropertyValue('padding-right').replace(/[^\d.]/g, '')) + parseFloat(containerFluidStyle.getPropertyValue('padding-left').replace(/[^\d.]/g, '')); bannerBreadCrumb.style.maxWidth = (containerFluid.offsetWidth - paddings) + 'px'; if(!originalBreadCrumbUl) { @@ -132,7 +132,6 @@ breadCrumbsUlLis[1].className = "qld__overflow_menu--breadcrumbs"; breadCrumbsUlLis[1].appendChild(overflowMenu); breadCrumbsUlLis[1].style.display = "flex"; - truncateLastLi(breadCrumbsUlLis, breadcrumbUL); } breadcrumb.init = function () { @@ -153,7 +152,6 @@ } if(breadCrumbsUlLis.length > 5) { - insertOverFlowButton(overflowMenu, breadCrumbsUlLis[1]); breadCrumbsUlLis[1].style.display = "none"; appendOverflow(breadCrumbsUlLis, overflowMenu, breadCrumbsUl); @@ -166,7 +164,6 @@ } } else if((breadCrumbsUl.offsetHeight > (breadCrumbsUlLis[0].offsetHeight * 1.9))) { - insertOverFlowButton(overflowMenu, breadCrumbsUlLis[1]); breadCrumbsUlLis[1].style.display = "none"; appendOverflow(breadCrumbsUlLis, overflowMenu, breadCrumbsUl); @@ -181,14 +178,13 @@ i++; } - } else if(parseFloat(breadCrumbsUl.style.maxWidth.replace(/\D/g, '')) < totalLisOffsetWidth) { - + } else if(parseFloat(breadCrumbsUl.style.maxWidth.replace(/[^\d.]/g, '')) < totalLisOffsetWidth) { insertOverFlowButton(overflowMenu, breadCrumbsUlLis[1]); breadCrumbsUlLis[1].style.display = "none"; appendOverflow(breadCrumbsUlLis, overflowMenu, breadCrumbsUl); i = 2; - while ((parseFloat(breadCrumbsUl.style.maxWidth.replace(/\D/g, ''))< totalLisOffsetWidth) && + while ((parseFloat(breadCrumbsUl.style.maxWidth.replace(/[^\d.]/g, ''))< totalLisOffsetWidth) && (i < breadcrumbLisLength - 2) ) { @@ -198,6 +194,8 @@ i++; } } + + truncateLastLi(breadCrumbsUlLis, breadCrumbsUl); } } }; From 206f607b20f622b3e68b66f6b34af4362ee63647 Mon Sep 17 00:00:00 2001 From: "QH\\wa-najaria" Date: Mon, 19 Aug 2024 13:25:57 +1000 Subject: [PATCH 3/5] parent of the current page must never be truncated - qhwt-1072 --- src/components/breadcrumbs/js/global.js | 23 +++++++++++++++-------- 1 file changed, 15 insertions(+), 8 deletions(-) diff --git a/src/components/breadcrumbs/js/global.js b/src/components/breadcrumbs/js/global.js index 2df47de1b..42785bda7 100644 --- a/src/components/breadcrumbs/js/global.js +++ b/src/components/breadcrumbs/js/global.js @@ -151,7 +151,7 @@ totalLisOffsetWidth += breadCrumbsUlLis[i].offsetWidth; } - if(breadCrumbsUlLis.length > 5) { + if(breadcrumbLisLength > 5) { insertOverFlowButton(overflowMenu, breadCrumbsUlLis[1]); breadCrumbsUlLis[1].style.display = "none"; appendOverflow(breadCrumbsUlLis, overflowMenu, breadCrumbsUl); @@ -164,9 +164,13 @@ } } else if((breadCrumbsUl.offsetHeight > (breadCrumbsUlLis[0].offsetHeight * 1.9))) { - insertOverFlowButton(overflowMenu, breadCrumbsUlLis[1]); - breadCrumbsUlLis[1].style.display = "none"; - appendOverflow(breadCrumbsUlLis, overflowMenu, breadCrumbsUl); + + if(breadcrumbLisLength > 3) { + insertOverFlowButton(overflowMenu, breadCrumbsUlLis[1]); + breadCrumbsUlLis[1].style.display = "none"; + appendOverflow(breadCrumbsUlLis, overflowMenu, breadCrumbsUl); + } + i = 2; while ((breadCrumbsUl.offsetHeight > (breadCrumbsUlLis[0].offsetHeight * 1.9)) && @@ -179,9 +183,13 @@ i++; } } else if(parseFloat(breadCrumbsUl.style.maxWidth.replace(/[^\d.]/g, '')) < totalLisOffsetWidth) { - insertOverFlowButton(overflowMenu, breadCrumbsUlLis[1]); - breadCrumbsUlLis[1].style.display = "none"; - appendOverflow(breadCrumbsUlLis, overflowMenu, breadCrumbsUl); + + if(breadcrumbLisLength > 3) { + insertOverFlowButton(overflowMenu, breadCrumbsUlLis[1]); + breadCrumbsUlLis[1].style.display = "none"; + appendOverflow(breadCrumbsUlLis, overflowMenu, breadCrumbsUl); + } + i = 2; while ((parseFloat(breadCrumbsUl.style.maxWidth.replace(/[^\d.]/g, ''))< totalLisOffsetWidth) && @@ -190,7 +198,6 @@ insertOverFlowButton(overflowMenu, breadCrumbsUlLis[i]); breadCrumbsUlLis[i].style.display = "none"; - i++; } } From 292c3430bb7a9c84b2208ef2173f8d58067e7c35 Mon Sep 17 00:00:00 2001 From: "QH\\wa-najaria" Date: Mon, 19 Aug 2024 14:23:08 +1000 Subject: [PATCH 4/5] adding the error state codes into the correct file - qhwt-1063 --- src/components/_global/css/global.scss | 43 -------------------------- src/styles/imports/utilities.scss | 42 +++++++++++++++++++++++++ 2 files changed, 42 insertions(+), 43 deletions(-) diff --git a/src/components/_global/css/global.scss b/src/components/_global/css/global.scss index ed2daaa54..f126b7cc1 100644 --- a/src/components/_global/css/global.scss +++ b/src/components/_global/css/global.scss @@ -38,46 +38,3 @@ body { z-index: 3; } } - - -/* -Written to address squiz forms' error state issues -*/ - -div.sq-form-question-tickbox-list.sq-form-question-error { - fieldset { - label::before { - box-shadow: 0 0 0 3px $QLD-color-status__error; - } - } -} - -div.sq-form-question-option-list.sq-form-question-error { - fieldset { - label::before { - box-shadow: 0 0 0 3px $QLD-color-status__error; - } - } -} - -div.sq-form-question-error { - input[type=text]:not(:focus), - input[type=email]:not(:focus), - input[type=date]:not(:focus), - textarea:not(:focus), - select:not(:focus) { - border-color: $QLD-color-status__error; - background-color: $QLD-color-status__error--lightest; - } -} - -.qld__body--dark, .qld__body--dark-alt { - .sq-form-error { - color: $QLD-color-status__error--lightest; - } -} - -.sq-form-error { - color: $QLD-color-status__error; - margin-top: 0.5rem !important; -} diff --git a/src/styles/imports/utilities.scss b/src/styles/imports/utilities.scss index b319c7e2e..1ab690fce 100644 --- a/src/styles/imports/utilities.scss +++ b/src/styles/imports/utilities.scss @@ -674,4 +674,46 @@ select.qld__text-input--block.qld__field-width--1-quarter { select.qld__text-input--block.qld__field-width--3-quarters { max-width:$QLD-fluid-width__3-quarters; } +} + + +/* +Written to address squiz forms' error state issues +*/ + +div.sq-form-question-tickbox-list.sq-form-question-error { + fieldset { + label::before { + box-shadow: 0 0 0 3px $QLD-color-status__error; + } + } +} + +div.sq-form-question-option-list.sq-form-question-error { + fieldset { + label::before { + box-shadow: 0 0 0 3px $QLD-color-status__error; + } + } +} + +div.sq-form-question-error { + input[type=text]:not(:focus), + input[type=email]:not(:focus), + input[type=date]:not(:focus), + textarea:not(:focus), + select:not(:focus) { + border-color: $QLD-color-status__error; + background-color: $QLD-color-status__error--lightest; + } +} + +.qld__body--dark, .qld__body--dark-alt { + .sq-form-error { + color: $QLD-color-status__error--lightest; + } +} + +.sq-form-error { + color: $QLD-color-status__error; } \ No newline at end of file From aaf9d10f480f1844d08995e89bf4324cb29332cb Mon Sep 17 00:00:00 2001 From: "QH\\wa-najaria" Date: Mon, 19 Aug 2024 14:27:07 +1000 Subject: [PATCH 5/5] removing the tablet breadcrumbs - qhwt-1072 --- src/components/breadcrumbs/css/component.scss | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/breadcrumbs/css/component.scss b/src/components/breadcrumbs/css/component.scss index 849aa86a3..302ac6b87 100644 --- a/src/components/breadcrumbs/css/component.scss +++ b/src/components/breadcrumbs/css/component.scss @@ -17,7 +17,7 @@ } & &__list--desktop{ display: none; - @include QLD-media(md) { + @include QLD-media(lg) { display: flex; flex-direction: row; flex-wrap: wrap; @@ -25,13 +25,13 @@ } } & &__list--mobile{ - @include QLD-media(md) { + @include QLD-media(lg) { display: none; } } .qld__link-list.qld__link-list--inline:not(.qld__breadcrumbs .qld__breadcrumbs__list--mobile, .qld__banner__breadcrumbs--mobile ul) { display: none; - @include QLD-media(md) { + @include QLD-media(lg) { display: flex; flex-direction: row; flex-wrap: nowrap; @@ -96,7 +96,7 @@ display: none; } - @include QLD-media(md) { + @include QLD-media(lg) { white-space: nowrap; } @@ -154,7 +154,7 @@ @include QLD-space(padding, 1unit 1unit); margin: 0; - @include QLD-media(md) { + @include QLD-media(lg) { display: none; } @@ -176,7 +176,7 @@ .qld__banner__breadcrumbs--desktop { display: none; - @include QLD-media(md) { + @include QLD-media(lg) { @include QLD-space(margin, 0 0 1rem); display: inline-block; > .qld__link-list > li { @@ -215,7 +215,7 @@ } ~ *:last-child { - @include QLD-media(md) { + @include QLD-media(lg) { @include QLD-space(margin-bottom, auto); } }