diff --git a/blocks/columns/columns.css b/blocks/columns/columns.css index b462342..f162975 100644 --- a/blocks/columns/columns.css +++ b/blocks/columns/columns.css @@ -13,7 +13,7 @@ order: 1; } -.columns > div > div:not(.columns-img-col, .columns.locations > div > div) { +.columns:not(.locations) > div > div:not(.columns-img-col) { max-width: 750px; margin-left: auto; margin-right: auto; @@ -137,7 +137,7 @@ } /* ratio variants */ -.columns.ratio > div > div { +.columns.ratio.block > div > div { margin: unset; } diff --git a/blocks/form/form-fields.js b/blocks/form/form-fields.js index 8066048..99e8a64 100644 --- a/blocks/form/form-fields.js +++ b/blocks/form/form-fields.js @@ -160,6 +160,7 @@ const createSubmit = (fd) => { const fieldWrapper = createFieldWrapper(fd); fieldWrapper.append(button); + button.disabled = true; return { field: button, fieldWrapper }; }; diff --git a/blocks/form/form.js b/blocks/form/form.js index 9536b0a..c8e222c 100644 --- a/blocks/form/form.js +++ b/blocks/form/form.js @@ -99,8 +99,18 @@ export default async function decorate(block) { if (!formLink) return; const form = await createForm(formLink.href); + const submitButton = form.querySelector('button[type="submit"]'); block.replaceChildren(form); + /* enabling the submit button only when all of the checkboxes are checked */ + const checkboxList = [...form.querySelectorAll('input[type="checkbox"]')]; + checkboxList.forEach((checkbox) => { + checkbox.addEventListener('input', () => { + const disabled = checkboxList.length !== checkboxList.filter((ch) => ch.checked).length; + submitButton.disabled = disabled; + }); + }); + form.addEventListener('submit', (e) => { e.preventDefault(); const valid = form.checkValidity(); diff --git a/blocks/table/table.css b/blocks/table/table.css index 319cfdb..c2453dd 100644 --- a/blocks/table/table.css +++ b/blocks/table/table.css @@ -1,6 +1,7 @@ .table { overflow: auto; width: 100%; + text-align: left; } .table .table-element { diff --git a/scripts/scripts.js b/scripts/scripts.js index 9c00c34..d56037b 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -76,6 +76,24 @@ function customDecorateBlocks(main) { }); } +function swappingPlacesBlock(main) { + const idLinks = [...main.querySelectorAll('a[href*="#id-"]')]; + const elWithId = [...main.querySelectorAll('.block, .section')] + .filter((el) => [...el.classList].find((className) => className.startsWith('id-'))); + + idLinks.forEach((link) => { + const id = link.href.split('#')[1]; + const selectedEl = elWithId.find((el) => el.classList.contains(id)); + let targetEl = link; + + if (link.closest('.button-container')) { + targetEl = link.closest('.button-container'); + } + + targetEl.replaceWith(selectedEl); + }); +} + /** * Decorates the main element. * @param {Element} main The main element @@ -90,6 +108,7 @@ export function decorateMain(main) { customDecorateSections(main); decorateBlocks(main); customDecorateBlocks(main); + swappingPlacesBlock(main); } /**