Skip to content

Commit 5a1a096

Browse files
StoneMoneyStoneMoney
committed
Mobile-responsive button row
1 parent 10ba261 commit 5a1a096

5 files changed

Lines changed: 29 additions & 58 deletions

File tree

‎dist/engrid.css‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
*
2020
* ENGRID PAGE TEMPLATE ASSETS
2121
*
22-
* Date: Thursday, May 14, 2026 @ 10:33:01 ET
22+
* Date: Monday, May 18, 2026 @ 11:00:44 ET
2323
* By: nick
2424
* ENGrid styles: v0.25.0
2525
* ENGrid scripts: v0.25.1
@@ -12770,6 +12770,11 @@ body[data-engrid-debug]:before{
1277012770
justify-content:space-between;
1277112771
width:100%;
1277212772
}
12773+
@media screen and (max-width:500px){
12774+
[data-engrid-theme=tnc][data-engrid-event-page=checkout][data-engrid-subtheme=hero-banner][data-engrid-layout=centercenter1col] .event-buttons .en__submit,[data-engrid-theme=tnc][data-engrid-event-page=details][data-engrid-subtheme=hero-banner][data-engrid-layout=centercenter1col] .event-buttons .en__submit,[data-engrid-theme=tnc][data-engrid-event-page=thank-you][data-engrid-subtheme=hero-banner][data-engrid-layout=centercenter1col] .event-buttons .en__submit,[data-engrid-theme=tnc][data-engrid-event-page=unknown][data-engrid-subtheme=hero-banner][data-engrid-layout=centercenter1col] .event-buttons .en__submit,[data-engrid-theme=tnc][data-engrid-event-page=waitlist][data-engrid-subtheme=hero-banner][data-engrid-layout=centercenter1col] .event-buttons .en__submit{
12775+
flex-direction:column-reverse;
12776+
}
12777+
}
1277312778
[data-engrid-theme=tnc][data-engrid-event-page=checkout][data-engrid-subtheme=hero-banner][data-engrid-layout=centercenter1col] .event-buttons .en__submit .btn-outline-primary,[data-engrid-theme=tnc][data-engrid-event-page=details][data-engrid-subtheme=hero-banner][data-engrid-layout=centercenter1col] .event-buttons .en__submit .btn-outline-primary,[data-engrid-theme=tnc][data-engrid-event-page=thank-you][data-engrid-subtheme=hero-banner][data-engrid-layout=centercenter1col] .event-buttons .en__submit .btn-outline-primary,[data-engrid-theme=tnc][data-engrid-event-page=unknown][data-engrid-subtheme=hero-banner][data-engrid-layout=centercenter1col] .event-buttons .en__submit .btn-outline-primary,[data-engrid-theme=tnc][data-engrid-event-page=waitlist][data-engrid-subtheme=hero-banner][data-engrid-layout=centercenter1col] .event-buttons .en__submit .btn-outline-primary{
1277412779
--submit__button_background-color:#0000;
1277512780
--submit__button_border-color:var(--color-green);
@@ -12778,10 +12783,9 @@ body[data-engrid-debug]:before{
1277812783
--submit__button_hover_border-color:var(--color-green);
1277912784
--submit__button_hover_color:#fff;
1278012785
}
12781-
@media screen and (max-width:767.99px){
12786+
@media screen and (max-width:500px){
1278212787
[data-engrid-theme=tnc][data-engrid-event-page=checkout][data-engrid-subtheme=hero-banner][data-engrid-layout=centercenter1col] .event-buttons .en__submit .btn-outline-primary,[data-engrid-theme=tnc][data-engrid-event-page=details][data-engrid-subtheme=hero-banner][data-engrid-layout=centercenter1col] .event-buttons .en__submit .btn-outline-primary,[data-engrid-theme=tnc][data-engrid-event-page=thank-you][data-engrid-subtheme=hero-banner][data-engrid-layout=centercenter1col] .event-buttons .en__submit .btn-outline-primary,[data-engrid-theme=tnc][data-engrid-event-page=unknown][data-engrid-subtheme=hero-banner][data-engrid-layout=centercenter1col] .event-buttons .en__submit .btn-outline-primary,[data-engrid-theme=tnc][data-engrid-event-page=waitlist][data-engrid-subtheme=hero-banner][data-engrid-layout=centercenter1col] .event-buttons .en__submit .btn-outline-primary{
1278312788
margin-top:0;
12784-
width:auto;
1278512789
}
1278612790
}
1278712791
[data-engrid-theme=tnc][data-engrid-event-page=checkout][data-engrid-subtheme=hero-banner][data-engrid-layout=centercenter1col] .event-extras,[data-engrid-theme=tnc][data-engrid-event-page=details][data-engrid-subtheme=hero-banner][data-engrid-layout=centercenter1col] .event-extras,[data-engrid-theme=tnc][data-engrid-event-page=thank-you][data-engrid-subtheme=hero-banner][data-engrid-layout=centercenter1col] .event-extras,[data-engrid-theme=tnc][data-engrid-event-page=unknown][data-engrid-subtheme=hero-banner][data-engrid-layout=centercenter1col] .event-extras,[data-engrid-theme=tnc][data-engrid-event-page=waitlist][data-engrid-subtheme=hero-banner][data-engrid-layout=centercenter1col] .event-extras{

‎dist/engrid.js‎

Lines changed: 13 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
*
1818
* ENGRID PAGE TEMPLATE ASSETS
1919
*
20-
* Date: Thursday, May 14, 2026 @ 10:33:01 ET
20+
* Date: Monday, May 18, 2026 @ 11:00:44 ET
2121
* By: nick
2222
* ENGrid styles: v0.25.0
2323
* ENGrid scripts: v0.25.1
@@ -20953,59 +20953,23 @@ class ClickToExpand {
2095320953
constructor() {
2095420954
this.clickToExpandWrapper = document.querySelectorAll("div.click-to-expand");
2095520955
if (this.clickToExpandWrapper.length) {
20956-
this.clickToExpandWrapper.forEach((element, index) => {
20957-
var _a;
20958-
const textWrapperId = `click-to-expand-text-${index}`;
20959-
const ctaId = `click-to-expand-cta-${index}`;
20960-
// Extract screen reader tip from the live DOM
20961-
const screenReaderTip = element.querySelector(".click-to-expand-screenreader-tip");
20962-
let ariaLabel = "Show more";
20963-
if (screenReaderTip) {
20964-
const tipText = (_a = screenReaderTip.textContent) === null || _a === void 0 ? void 0 : _a.trim();
20965-
if (tipText) {
20966-
ariaLabel = `Show more: ${tipText}`;
20956+
this.clickToExpandWrapper.forEach(element => {
20957+
const content = element.innerHTML;
20958+
const wrapper_html = '<div class="click-to-expand-cta"></div><div class="click-to-expand-text-wrapper" tabindex="0">' + content + "</div>";
20959+
element.innerHTML = wrapper_html;
20960+
element.addEventListener("click", event => {
20961+
if (event) {
20962+
if (engrid_ENGrid.debug) console.log("A click-to-expand div was clicked");
20963+
element.classList.add("expanded");
2096720964
}
20968-
screenReaderTip.remove();
20969-
}
20970-
// Capture all original child nodes before restructuring
20971-
const originalChildren = Array.from(element.childNodes);
20972-
element.innerHTML = "";
20973-
// Create the text wrapper
20974-
const textWrapper = document.createElement("div");
20975-
textWrapper.className = "click-to-expand-text-wrapper";
20976-
textWrapper.id = textWrapperId;
20977-
textWrapper.setAttribute("aria-hidden", "true");
20978-
textWrapper.setAttribute("aria-label", "Expanded content" + (ariaLabel ? `${ariaLabel.replace('Show more', '')}` : ""));
20979-
textWrapper.setAttribute("tabindex", "-1");
20980-
originalChildren.forEach(child => {
20981-
textWrapper.appendChild(child);
2098220965
});
20983-
const cta = document.createElement("div");
20984-
cta.className = "click-to-expand-cta";
20985-
cta.id = ctaId;
20986-
cta.setAttribute("role", "button");
20987-
cta.setAttribute("tabindex", "0");
20988-
cta.setAttribute("aria-expanded", "false");
20989-
cta.setAttribute("aria-controls", textWrapperId);
20990-
cta.setAttribute("aria-label", ariaLabel);
20991-
element.appendChild(textWrapper);
20992-
element.appendChild(cta);
20993-
const expand = () => {
20994-
if (engrid_ENGrid.debug) {
20995-
console.log("A click-to-expand div was expanded");
20996-
}
20997-
element.classList.add("expanded");
20998-
cta.setAttribute("aria-expanded", "true");
20999-
cta.setAttribute("aria-hidden", "true");
21000-
textWrapper.setAttribute("aria-hidden", "false");
21001-
textWrapper.focus(); // Move focus to revealed content for screen reader announcement
21002-
};
21003-
element.addEventListener("click", expand);
2100420966
element.addEventListener("keydown", event => {
2100520967
if (event.key === "Enter") {
21006-
expand();
20968+
if (engrid_ENGrid.debug) console.log("A click-to-expand div had the 'Enter' key pressed on it");
20969+
element.classList.add("expanded");
2100720970
} else if (event.key === " ") {
21008-
expand();
20971+
if (engrid_ENGrid.debug) console.log("A click-to-expand div had the 'Spacebar' key pressed on it");
20972+
element.classList.add("expanded");
2100920973
event.preventDefault(); // Prevents the page from scrolling
2101020974
event.stopPropagation(); // Prevent a console error generated by LastPass https://github.com/KillerCodeMonkey/ngx-quill/issues/351#issuecomment-476017960
2101120975
}

‎dist/engrid.min.css‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/engrid.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/sass/event.scss‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -369,6 +369,10 @@
369369
flex-direction: row;
370370
justify-content: space-between;
371371

372+
@media screen and (max-width: 500px) {
373+
flex-direction: column-reverse;
374+
}
375+
372376
.btn-outline-primary {
373377
--submit__button_background-color: transparent;
374378
--submit__button_border-color: var(--color-green);
@@ -377,9 +381,8 @@
377381
--submit__button_hover_border-color: var(--color-green);
378382
--submit__button_hover_color: #fff;
379383

380-
@media screen and (max-width: 767.99px) {
384+
@media screen and (max-width: 500px) {
381385
margin-top: 0;
382-
width: initial;
383386
}
384387
}
385388
}

0 commit comments

Comments
 (0)