Skip to content

Commit

Permalink
Merge pull request #157 from Qld-Health-Online-Team/release-v1.8.0
Browse files Browse the repository at this point in the history 
Release v1.8.0
  • Loading branch information
@AmirNajariH
AmirNajariH authored Aug 19, 2024
2 parents 1550db4 + 68b86fa commit dce2d36
Show file tree
Hide file tree
Showing 4 changed files with 69 additions and 96 deletions.
43 changes: 0 additions & 43 deletions src/components/_global/css/global.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
24 changes: 8 additions & 16 deletions src/components/breadcrumbs/css/component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,21 +17,21 @@
}
& &__list--desktop{
display: none;
@include QLD-media(md) {
@include QLD-media(lg) {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
}
}
& &__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;
Expand Down Expand Up @@ -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: " ";
Expand All @@ -93,18 +87,16 @@

&: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 {
display: none;
}

@include QLD-media(md) {
@include QLD-media(lg) {

white-space: nowrap;
}
Expand Down Expand Up @@ -162,7 +154,7 @@
@include QLD-space(padding, 1unit 1unit);
margin: 0;

@include QLD-media(md) {
@include QLD-media(lg) {
display: none;
}

Expand All @@ -184,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 {
Expand Down Expand Up @@ -223,7 +215,7 @@
}

~ *:last-child {
@include QLD-media(md) {
@include QLD-media(lg) {
@include QLD-space(margin-bottom, auto);
}
}
Expand Down
56 changes: 19 additions & 37 deletions src/components/breadcrumbs/js/global.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
);
Expand All @@ -34,12 +29,9 @@

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';


// 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);
}
Expand All @@ -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";
Expand Down Expand Up @@ -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--");
Expand All @@ -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;
}

Expand Down Expand Up @@ -154,15 +132,13 @@
breadCrumbsUlLis[1].className = "qld__overflow_menu--breadcrumbs";
breadCrumbsUlLis[1].appendChild(overflowMenu);
breadCrumbsUlLis[1].style.display = "flex";
truncateLastLi(breadCrumbsUlLis, breadcrumbUL);
}

breadcrumb.init = function () {
if (getTheElements()) {
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;
Expand All @@ -175,8 +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);
Expand All @@ -190,9 +165,12 @@

} 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)) &&
Expand All @@ -204,23 +182,27 @@

i++;
}
} else if(parseFloat(breadCrumbsUl.style.maxWidth.replace(/\D/g, '')) < totalLisOffsetWidth) {

insertOverFlowButton(overflowMenu, breadCrumbsUlLis[1]);
breadCrumbsUlLis[1].style.display = "none";
appendOverflow(breadCrumbsUlLis, overflowMenu, breadCrumbsUl);
} else if(parseFloat(breadCrumbsUl.style.maxWidth.replace(/[^\d.]/g, '')) < totalLisOffsetWidth) {

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) &&
while ((parseFloat(breadCrumbsUl.style.maxWidth.replace(/[^\d.]/g, ''))< totalLisOffsetWidth) &&
(i < breadcrumbLisLength - 2)
) {

insertOverFlowButton(overflowMenu, breadCrumbsUlLis[i]);
breadCrumbsUlLis[i].style.display = "none";

i++;
}
}

truncateLastLi(breadCrumbsUlLis, breadCrumbsUl);
}
}
};
Expand Down
42 changes: 42 additions & 0 deletions src/styles/imports/utilities.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

0 comments on commit dce2d36

Please sign in to comment.