build pint club

assets/blocks/accordion/accordion.css

@@ -0,0 +1,62 @@
+.accordion {
+  margin-top: 2rem;
+}
+
+@media (min-width: 1200px) {
+  .accordion {
+    width: unset;
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .accordion > div {
+    width: calc(50% - 1rem);
+    margin-right: 2rem;
+  }
+
+  .accordion > div:nth-of-type(2n) {
+    margin-right: 0;
+  }
+}
+
+.accordion > div {
+  text-align: left;
+  font-size: 66%;
+  line-height: 1.4;
+  font-weight: var(--weight-normal);
+  margin-bottom: 1rem;
+}
+
+.accordion > div h3 {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  transition: letter-spacing 0.2s;
+}
+
+.accordion > div h3:hover,
+.accordion > div h3:focus {
+  letter-spacing: 1px;
+}
+
+.accordion > div h3::after {
+  content: '\2303';
+  display: block;
+  margin-left: 3px;
+  transform: rotate(180deg);
+  transition: transform 0.2s;
+}
+
+.accordion > div h3 + p {
+  margin-top: 1rem;
+}
+
+.accordion > div h3[aria-expanded=false] + p {
+  display: none;
+  visibility: hidden;
+}
+
+.accordion > div h3[aria-expanded=true]::after {
+  transform: rotate(0deg);
+}

assets/blocks/accordion/accordion.js

@@ -0,0 +1,26 @@
+import { 
+  createEl,
+  toClassName
+} from '../../scripts/scripts.js';
+
+function toggle(e) {
+  const expanded = e.target.getAttribute('aria-expanded');
+  if (expanded === 'true') {
+    e.target.setAttribute('aria-expanded', false);
+  } else {
+    e.target.setAttribute('aria-expanded', true);
+  }
+}
+
+export default function decorateAccordion(block) {
+  const rows = block.querySelectorAll('div:scope > div');
+  rows.forEach((row) => {
+    const q = row.querySelector('h3');
+    q.setAttribute('role', 'button');
+    q.setAttribute('aria-expanded', false);
+    q.setAttribute('aria-controls', toClassName(q.textContent));
+    q.addEventListener('click', toggle);
+    const a = q.nextElementSibling;
+    a.id = toClassName(q.textContent);
+  })
+}

assets/blocks/club-carousel/club-carousel.css

@@ -0,0 +1,106 @@
+.club-carousel-container {
+  position: relative;
+  flex: 1 1 auto;
+  max-width: unset;
+  width: 100%;
+  padding: 0;
+}
+
+.club-carousel {
+  visibility: hidden;
+  display: none;
+}
+
+.club-carousel[data-block-loaded=true] {
+  visibility: visible;
+  display: flex;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  scroll-behavior: smooth;
+  max-height: inherit;
+  width: unset;
+}
+
+.club-carousel::-webkit-scrollbar {
+  display: none;
+}
+
+@media (min-width: 768px) {
+  .club-carousel {
+    height: calc(100vh * .6);
+  }
+}
+
+.club-carousel-slide {
+  display: inline-block;
+  flex-shrink: 0;
+  flex-grow: 0;
+}
+
+.club-carousel-slide:not(:last-child) {
+  margin-right: 1rem;
+}
+
+.club-carousel-slide img {
+  height: 100%;
+  max-width: 254px;
+  object-fit: cover;
+}
+
+@media (min-width: 464px) {
+  .club-carousel-slide {
+    max-width: calc(100vw / 2.6);
+  }
+
+  .club-carousel-slide img {
+    max-width: unset;
+    width: calc(100vw / 2.6);
+  }
+}
+
+@media (min-width: 768px) {
+  .club-carousel .club-carousel-slide {
+    max-width: unset;
+    width: unset;
+  }
+
+  .club-carousel .club-carousel-slide img {
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+@media (min-width: 1200px) {
+  .club-carousel .club-carousel-slide img {
+  }
+}
+
+.club-carousel .icon {
+  position: absolute;
+  bottom: 1.5rem;
+  background: var(--color-white);
+  opacity: 0.2;
+}
+
+.club-carousel .icon.nav.right {
+  right: 1.5rem;
+}
+
+.club-carousel .icon.nav.left {
+  left: 1.5rem;
+}
+
+@media (min-width: 768px) {
+  .club-carousel .icon.nav.right {
+    right: 1rem;
+  }
+
+  .club-carousel .icon.nav.left {
+    left: 1rem;
+  }
+}
+
+.club-carousel .icon.nav:hover,
+.club-carousel .icon.nav:focus {
+  opacity: 1;
+}

assets/blocks/club-carousel/club-carousel.js

@@ -0,0 +1,71 @@
+import { 
+  createEl
+} from '../../scripts/scripts.js';
+
+async function fetchCarousel(url) {
+  const resp = await fetch(`${url}.plain.html`);
+  if (resp.ok) {
+    const html = await resp.text();
+    const placeholder = createEl('div');
+    placeholder.innerHTML = html;
+    const pictures = placeholder.querySelectorAll('picture');
+    return [ ...pictures ];
+  } else {
+    console.error('Carousel cannot be created');
+  }
+}
+
+function navScroll(e) {
+  const btn = e.target.closest('button');
+  const carousel = btn.closest('.club-carousel');
+  const num = carousel.querySelectorAll('.club-carousel-slide').length;
+  const slide = carousel.querySelector('.club-carousel-slide');
+  const slideWidth = slide.offsetWidth;
+  const container = carousel.parentElement;
+  const containerWidth = container.offsetWidth;
+  const direction = btn.classList[btn.classList.length - 1];
+  // const currPosition = carousel.scrollLeft;
+  // const totalWidth = slideWidth * num;
+
+  if (direction === 'left') {
+    carousel.scrollLeft -= containerWidth - 10;
+  } else if (direction === 'right') {
+    carousel.scrollLeft += containerWidth + 10;
+  }
+}
+
+export default async function decorateClubCarousel(block) {
+  const { href } = block.querySelector('a');
+  const { pathname } = new URL(href);
+  const pictures = await fetchCarousel(pathname);
+  block.innerHTML = '';
+  if (pictures) {
+
+    pictures.forEach((pic) => {
+      const container = createEl('div', {
+        class: 'club-carousel-slide'
+      });
+      container.append(pic);
+      block.append(container);
+    });
+
+    const rightBtn = createEl('button', {
+      class: 'icon nav right',
+      title: `scroll right` 
+    });
+
+    const leftBtn = createEl('button', {
+      class: 'icon nav left',
+      title: `scroll left` 
+    });
+
+    rightBtn.addEventListener('click', navScroll);
+    leftBtn.addEventListener('click', navScroll);
+
+    block.prepend(leftBtn);
+    block.prepend(rightBtn);
+
+  } else {
+    block.remove();
+  }
+}

assets/blocks/club-checkout/club-checkout.css

@@ -0,0 +1,77 @@
+.club-checkout-container {
+  text-align: center;
+}
+
+@media (min-width: 1200px) {
+  .club-checkout {
+    width: unset;
+  }
+}
+
+.club-checkout > div {
+  /* border: 2px solid red; */
+  font-size: 66%;
+  line-height: 1.4;
+  font-weight: var(--weight-normal);
+}
+
+.club-checkout > div div {
+  padding: 4rem 1rem;
+}
+
+.club-checkout > div svg:not(.icon-reg) {
+  width: 20rem;
+  height: 20rem;
+}
+
+.club-checkout a.btn {
+  margin-top: 1.6rem;
+}
+
+@media (min-width: 768px) {
+  .club-checkout > div {
+    display: flex;
+  }
+
+  .club-checkout > div.club-checkout-2 > div {
+    width: calc(100% / 2);
+  }
+
+  .club-checkout > div.club-checkout-2 > div:first-child {
+    margin-right: 1rem;
+  }
+
+  .club-checkout > div.club-checkout-2 > div:last-child {
+    margin-left: 1rem;
+  }
+
+  .club-checkout > div.club-checkout-3 > div {
+    width: calc(100% / 3);
+  }
+
+  .club-checkout > div.club-checkout-3 > div:nth-child(2) {
+    margin: 0 2rem;
+  }
+
+  .club-checkout > div.club-checkout-3 svg {
+    width: 15rem;
+    height: 15rem;
+  }
+}
+
+/* COLORS */
+@media (min-width: 768px) {
+  .club-checkout.club-checkout-blue {
+    padding: 2rem;
+  }
+}
+
+.club-checkout.club-checkout-blue {
+  background: var(--color-blue);
+  color: var(--color-white);
+}
+
+.club-checkout.club-checkout-blue a.btn {
+  background: var(--color-white);
+  color: var(--color-blue);
+}