diff --git a/assets/css/index.css b/assets/css/index.css index af7ff00..d72a5a8 100644 --- a/assets/css/index.css +++ b/assets/css/index.css @@ -199,7 +199,8 @@ ul { padding: 0; } ul li { - /* padding-left: var(--gutter); */ + padding-left: 30px; + position: relative; } ul li { @@ -213,6 +214,9 @@ ul li::before { display: inline-block; margin-right: 8px; /* spacing between the bullet and text */ + position: absolute; + left: 0; + top: 0; } li:has(> a):hover::before { @@ -252,7 +256,8 @@ button.button__link.button__submit::before, font-size: 1em; height: 1em; width: 1em; - margin-right: 0.75rem; + /* margin-right: 0.75rem; */ + margin-right: 12px; text-align: start; font-family: var(--ff-primary); font-style: normal; @@ -265,56 +270,6 @@ button.button__link.button__submit:hover::before, content: "\25cb"; } -/* -============ -elements -============ -*/ - -.anchor-point { - position: absolute; - top: 2em; - left: 18.5%; - width: 1rem; - height: 1rem; -} -figure { - margin: 0; -} - -button { - background: none; - font: inherit; - cursor: pointer !important; - pointer-events: auto !important; -} - -.button__link { - display: inline-block; - padding: 0.05em 0.5em; - text-align: center; - text-decoration: none; - border-radius: 0.25em; - background-color: var(--cc-primary-light); - color: var(--cc-bg); - font-family: var(--ff-serif); - /* transition: background-color 0.1s ease-in-out, color 0.5s; */ - /* border: var(--cc-primary-light) 2px solid; */ - /* background-color: var(--cc-blue); */ -} -.button__link:hover { - background-color: var(--cc-primary); - /* background-color: var(--cc-orange); */ -} - -button#togglePlainTextView { - border: none; -} -button#togglePlainTextView:hover { - /* background-color: var(--cc-primary); */ - /* color: var(--cc-bg); */ -} - /* ============ dot2dot and settings @@ -418,7 +373,7 @@ menu overlay background-color: var(--cc-bg); opacity: 0; visibility: hidden; - transition: opacity 0.5s, visibility 0.5s; + /* transition: opacity 0.5s, visibility 0.5s; */ z-index: 10; display: none; justify-content: end; @@ -477,12 +432,13 @@ header desktop .mobile__section-subtitle { font-family: var(--ff-serif); font-style: italic; - /* margin-left: 2em; */ - margin-left: 1em; - padding: 0 !important; + margin-left: 1.75em; + /* margin-left: 1em; */ + /* padding: 0 !important; */ } .dates-container .mobile__section-subtitle { margin-left: 2em; + display: none; } @media (min-width: 769px) { @@ -537,17 +493,15 @@ header desktop margin-right: 1em; } - .mobile__section-subtitle { - display: none; + .section-header.mobile__section-subtitle { + /* display: none; */ + position: absolute; + transform: translateY(-1em); } .dates li { width: fit-content; pointer-events: auto; display: block; - /* display: inline; */ - /* display: flex; - - flex-direction: column; */ } .dates li .time { display: block; @@ -555,8 +509,6 @@ header desktop } .ae-subtitle { grid-column: 1 / -1; - - /* width: 66.66%; */ } ul.menu-container { @@ -595,10 +547,12 @@ header mobile right: 0; } .menu-toggle.toggle.pseudo-list-item { + /* width: auto; */ width: 100%; margin: 0; height: 1.5em; padding: 0; + background-color: var(--cc-bg); } .menu-header-container button, #togglePlainTextView { @@ -621,7 +575,7 @@ header mobile /* left: 0.3rem; */ /* left: 1em; */ width: calc(100% - 2em); - width: 100%; + /* width: 100%; */ left: 0; right: 0; bottom: 0; @@ -632,6 +586,9 @@ header mobile display: flex; justify-content: center; align-items: center; + + height: 2.5em; + /* align-items: start; */ } .plain-text-container { z-index: 10000; @@ -681,6 +638,10 @@ main { .content-container { display: flex; flex-direction: column; + width: auto; + } + .desktop__section.fixed { + display: none; } } @@ -773,20 +734,14 @@ ul li.first-item { padding-left: 0; } ul li.first-item button { - padding-left: var(--gutter); + /* padding-left: var(--gutter); */ + padding-left: 30px; } #dates-event-times { position: fixed; top: 0; } -/* todo revise */ -/* ul.items:not(.dates) { - padding: 0; -} */ -ul.items li:hover { - list-style: circle; -} /* mobile layout */ @media (max-width: 768px) { @@ -802,9 +757,20 @@ ul.items li:hover { } .pagination { text-align: end; + /* !review 24-03-13 */ + /* top: 2em; + position: fixed; */ + top: 0; + position: absolute; + + right: 0; + } + .pagination .pseudo-list-item { + padding-right: 1em; } .menu-header-container .menu-toggle { - float: right; + /* float: right; */ + padding-left: 30px !important; } } button.toggle { @@ -812,8 +778,13 @@ button.toggle { position: relative; } -.first-item.list-style-circle::marker { - list-style: circle; +.first-item.list-style-circle::before { + /* list-style: circle; */ + /* unicode hollow dot */ + content: "\25cb"; +} +.menu-toggle.list-style-circle.pseudo-list-item::before { + /* list-style: circle; */ /* unicode hollow dot */ content: "\25cb"; } @@ -866,6 +837,11 @@ layout #col2 > *:not(ul), #col3 > *:not(ul) { padding: 0 2.3rem; + padding: 0 30px; +} +.section-header { + padding: 0 !important; + font-size: var(--fs-med); } /* #col1 > *, #col2 > *, @@ -875,7 +851,8 @@ layout /* mobile layout order */ @media (max-width: 768px) { - .content-container { + .content-container, + main { max-height: unset; margin: 0; margin-bottom: 1em; @@ -883,7 +860,8 @@ layout .ae-title { margin-top: 2rem; - margin-bottom: 1rem; + z-index: 100; + /* margin-bottom: 1rem; */ } ul { /* --gutter: 1rem; */ @@ -895,7 +873,7 @@ layout #col2 > *:not(ul), #col3 > *:not(ul) { /* padding: 0 1rem; */ - margin-right: 1rem; + /* margin-right: 1rem; */ } .mobile__section-subtitle { margin-left: 1.75em; @@ -955,9 +933,7 @@ img { .menu-items { margin-left: 0; } -.menu-items li { - padding: 0; -} + ul li::before { margin-right: 8px; } @@ -965,9 +941,9 @@ ul li::before { .menu-items { margin-left: 0; } - .menu-items li { + /* .menu-items li { padding: 0; - } + } */ ul li::before { margin-right: 8px; } @@ -1122,3 +1098,88 @@ input[type="range"]:focus::-webkit-slider-runnable-track, input[type="range"]:focus::-moz-range-track { background: var(--cc-primary-light); } + +/* +============ +elements +============ +*/ + +.anchor-point { + position: absolute; + top: 2em; + left: 18.5%; + width: 1rem; + height: 1rem; +} +figure { + margin: 0; +} + +button { + background: none; + font: inherit; + cursor: pointer !important; + pointer-events: auto !important; +} + +.button__link { + display: inline-block; + padding: 0.05em 0.5em !important; + text-align: center; + text-decoration: none; + border-radius: 0.25em; + background-color: var(--cc-primary-light); + color: var(--cc-bg); + font-family: var(--ff-serif); + /* transition: background-color 0.1s ease-in-out, color 0.5s; */ + /* border: var(--cc-primary-light) 2px solid; */ + /* background-color: var(--cc-blue); */ +} +.button__link:hover { + background-color: var(--cc-primary); + /* background-color: var(--cc-orange); */ +} + +button#togglePlainTextView { + border: none; +} +button#togglePlainTextView:hover { + /* background-color: var(--cc-primary); */ + /* color: var(--cc-bg); */ +} + +.dates.items li { + padding-left: 30px; +} + +.event-schedule.pseudo-list-item { + padding-left: 30px; +} +@media (max-width: 768px) { + .menu-header-container .menu-toggle { + left: 0; + padding-right: 1em; + width: 100%; + text-align: start; + } + button.menu-toggle, + button#togglePlainTextView { + color: var(--cc-primary); + } + button.menu-toggle { + background: transparent; + } + .menu-toggle::before { + position: absolute; + left: 0; + } + + .menu-header-container .menu-toggle { + padding-right: 1em !important; + + display: flex; + align-items: center; + justify-content: start; + } +} diff --git a/assets/css/templates/about.css b/assets/css/templates/about.css index ac278e3..17a74e9 100644 --- a/assets/css/templates/about.css +++ b/assets/css/templates/about.css @@ -21,3 +21,11 @@ ul li p { display: inline; } +@media screen and (max-width: 768px) { + main { + margin: 0; + } + section.contact { + margin-bottom: 2em; + } +} diff --git a/assets/css/templates/home.css b/assets/css/templates/home.css new file mode 100644 index 0000000..7d432e6 --- /dev/null +++ b/assets/css/templates/home.css @@ -0,0 +1,6 @@ +@media (max-width: 768px) { + .menu-toggle.toggle.pseudo-list-item { + padding-left: 30px; + width: auto; + } +} diff --git a/assets/css/templates/nightschool.css b/assets/css/templates/nightschool.css index bf894a6..adb5202 100644 --- a/assets/css/templates/nightschool.css +++ b/assets/css/templates/nightschool.css @@ -44,3 +44,9 @@ menu .button__link { background-color: var(--cc-primary-highlight); } + +/* items */ +ul.items:not(.dates), +#artists-items { + padding: 0 0 0 2.3rem; +} diff --git a/assets/css/templates/satellite.css b/assets/css/templates/satellite.css new file mode 100644 index 0000000..0de472e --- /dev/null +++ b/assets/css/templates/satellite.css @@ -0,0 +1,5 @@ +/* items */ +#artists-items, +ul.items:not(.dates) { + padding: 0 0 0 2.3rem; +} diff --git a/assets/css/templates/supporters.css b/assets/css/templates/supporters.css index 11ef5f0..def5693 100644 --- a/assets/css/templates/supporters.css +++ b/assets/css/templates/supporters.css @@ -29,7 +29,8 @@ Layout } #col2 { - margin-right: 1.5rem !important; + margin-right: 0; + padding: 0 30px; } .logos img { /* margin: 2em; */ @@ -40,6 +41,8 @@ Layout display: flex; align-content: center; justify-content: center; + + flex-direction: column; } } diff --git a/assets/js/ae24-squig.js b/assets/js/ae24-squig.js index f7a94b6..51a458f 100644 --- a/assets/js/ae24-squig.js +++ b/assets/js/ae24-squig.js @@ -124,7 +124,10 @@ function setupHoverInteractions(data) { const svg = d3.select("#lineCanvas"); const liOffset = 14; - d3.selectAll(".dates li, .events-container li, .artists-container li") + // d3.selectAll(".dates li, .events-container li, .artists-container li") + d3.selectAll( + ".dates li:not(.first-item), .events-container li:not(.first-item), .artists-container li:not(.first-item)" + ) .on("mouseover", function (event, d) { const element = d3.select(this); const elementId = element.attr("data-id"); @@ -174,23 +177,45 @@ function setupHoverInteractions(data) { }); data.artists[elementId].events.forEach((eventId) => { - const eventElement = document - .querySelector(`[data-id="${eventId}"][data-type="events"]`) - .getBoundingClientRect(); - points.push({ - x: eventElement.left - liOffset, - y: eventElement.top + liOffset, - }); - - const dateId = data.events[eventId].date; - const dateElement = document - .querySelector(`[data-id="${dateId}"][data-type="date"]`) - .getBoundingClientRect(); + const eventElement = document.querySelector( + `[data-id="${eventId}"][data-type="events"]` + ); - points.push({ - x: dateElement.left - liOffset, - y: dateElement.top + liOffset, - }); + if (eventElement) { + const rect = eventElement.getBoundingClientRect(); + points.push({ + x: rect.left - liOffset, + y: rect.top + liOffset, + }); + const dateId = data.events[eventId].date; + const dateElement = document + .querySelector(`[data-id="${dateId}"][data-type="date"]`) + .getBoundingClientRect(); + points.push({ + x: dateElement.left - liOffset, + y: dateElement.top + liOffset, + }); + } else { + // Handle the case where the event is not on the current page + // Determine if the event belongs to 'satellite' or 'nightschool' by checking the eventId + if (eventId.startsWith("satellite")) { + const satelliteElement = document + .getElementById("page__satellite") + .getBoundingClientRect(); + points.push({ + x: satelliteElement.left - liOffset, + y: satelliteElement.top + liOffset, + }); + } else if (eventId.startsWith("nightschool")) { + const nightschoolElement = document + .getElementById("page__nightschool") + .getBoundingClientRect(); + points.push({ + x: nightschoolElement.left - liOffset, + y: nightschoolElement.top + liOffset, + }); + } + } }); } else if (elementType === "date") { // fetch related events, draw line from date to each event, then to event's artists diff --git a/assets/js/menu-overlay.js b/assets/js/menu-overlay.js index 498f494..4d23333 100644 --- a/assets/js/menu-overlay.js +++ b/assets/js/menu-overlay.js @@ -12,10 +12,12 @@ document.addEventListener("DOMContentLoaded", function () { // toggle body scroll if (window.innerWidth <= 768) { - if (!isOpen) { - document.body.style.overflowY = "hidden"; - } else { - document.body.style.overflowY = "scroll"; + if (!document.body.classList.contains("plain-text")) { + if (!isOpen) { + document.body.style.overflowY = "hidden"; + } else { + document.body.style.overflowY = "scroll"; + } } } }); diff --git a/assets/js/script.js b/assets/js/script.js index ea41d81..fc1f437 100644 --- a/assets/js/script.js +++ b/assets/js/script.js @@ -1,7 +1,83 @@ document.addEventListener("DOMContentLoaded", function () { + const handleTouchStart = function (e) { + this.touchStartY = e.touches[0].clientY; + }; + + const touchContext = { touchStartY: 0 }; + + const handleTouchMove = function (e) { + e.preventDefault(); + const touchEndY = e.touches[0].clientY; + const deltaY = this.touchStartY - touchEndY; + const col3 = document.getElementById("col3"); + col3.scrollTop += deltaY; + this.touchStartY = touchEndY; + }.bind(touchContext); + + const handleWheel = function (e) { + e.preventDefault(); + const col3 = document.getElementById("col3"); + col3.scrollTop += e.deltaY; + }; + + let customScrollHandlingAdded = false; + + // add custom scroll handling + function addCustomScrollHandling() { + // early exit + if (customScrollHandlingAdded) return; + + window.addEventListener("touchstart", handleTouchStart.bind(touchContext), { + passive: false, + }); + window.addEventListener("touchmove", handleTouchMove, { passive: false }); + window.addEventListener("wheel", handleWheel, { passive: false }); + + customScrollHandlingAdded = true; + } + + function removeCustomScrollHandling() { + if (!customScrollHandlingAdded) return; + + window.removeEventListener( + "touchstart", + handleTouchStart.bind(touchContext), + { passive: false } + ); + window.removeEventListener("touchmove", handleTouchMove, { + passive: false, + }); + window.removeEventListener("wheel", handleWheel, { passive: false }); + + customScrollHandlingAdded = false; + } + + // desktop check + if (window.innerWidth >= 768) { + addCustomScrollHandling(); + } + + // handle window resizing + window.addEventListener("resize", function () { + if (window.innerWidth >= 768 && !customScrollHandlingAdded) { + addCustomScrollHandling(); + } else if (window.innerWidth < 768 && customScrollHandlingAdded) { + removeCustomScrollHandling(); + } + }); + // function to toggle styles const togglePlainText = document.getElementById("togglePlainTextView"); const settingsButton = document.getElementById("settingsButton"); + const settingsContainer = document.getElementById("settingsContainer"); + + const body = document.body; + const menuHeaderContainer = document.querySelector( + ".menu-header-container-global" + ); + const menuToggleButton = document.querySelector(".menu-toggle"); + const menuItems = document.getElementById("menu-items"); + const ulElements = document.querySelectorAll("ul"); // update button text based on the new state const isDisabledStyles = localStorage.getItem("stylesDisabled") === "true"; @@ -9,6 +85,60 @@ document.addEventListener("DOMContentLoaded", function () { ? "Plain Text View" : "Styled Text View"; + function applyPlainTextStyles(enable) { + if (enable) { + body.classList.add("plain-text"); + body.style.maxWidth = "60em"; + if (menuHeaderContainer) { + menuHeaderContainer.style.position = "fixed"; + menuHeaderContainer.style.right = "0.3rem"; + menuHeaderContainer.style.top = "2em"; + } + + // if (menuToggleButton.attributes.expanded) { + if (!body.classList.contains("home") && menuToggleButton) { + menuToggleButton.setAttribute("expanded", "false"); + menuItems.style.visibility = "hidden"; + menuItems.style.opacity = "0"; + menuItems.style.pointerEvents = "none"; + } + if (settingsContainer) { + settingsButton.style.display = "none"; + settingsContainer.style.display = "none"; + } + + ulElements.forEach((ul) => { + ul.style.margin = "0"; + ul.style.padding = "0"; + }); + + // Remove custom scroll handling in plain text mode + removeCustomScrollHandling(); + } else { + body.classList.remove("plain-text"); + body.style.maxWidth = ""; + if (menuHeaderContainer) { + menuHeaderContainer.style.position = ""; + menuHeaderContainer.style.right = ""; + menuHeaderContainer.style.top = ""; + } + if (settingsContainer) { + settingsButton.style.display = "block"; + settingsContainer.style.display = "flex"; + } + ulElements.forEach((ul) => { + ul.style.margin = ""; + ul.style.padding = ""; + }); + // add custom scroll handling in styled text mode + addCustomScrollHandling(); + } + } + + if (isDisabledStyles) { + applyPlainTextStyles(true); + } + togglePlainText.addEventListener("click", function () { const isDisabled = localStorage.getItem("stylesDisabled") === "true"; // Toggle the disabled state based on the opposite of the current state @@ -18,6 +148,9 @@ document.addEventListener("DOMContentLoaded", function () { // Save the new state in localStorage localStorage.setItem("stylesDisabled", !isDisabled); + // Apply or remove plain text styles + applyPlainTextStyles(!isDisabled); + if (settingsButton) { settingsButton.style.display = !isDisabled ? "block !important" @@ -61,6 +194,9 @@ document.addEventListener("DOMContentLoaded", function () { if (parent) { parent.classList.toggle("list-style-circle", isExpanded); } + if (button.classList.contains("menu-toggle")) { + button.classList.toggle("list-style-circle", isExpanded); + } } // attach event listeners to all toggle buttons @@ -78,25 +214,6 @@ function initSections() { const sectionId = button.getAttribute("aria-controls"); const sectionItems = document.getElementById(sectionId); - // if (isMobile) { - // // collapse section items & set aria-expanded to false on mobile - // sectionItems.style.display = "none"; - // button.setAttribute("aria-expanded", "false"); - - // // style collapsed sections - // const parent = button.closest("li.first-item"); - // if (parent) { - // parent.classList.add("list-style-circle"); - // } - // } else { - // // style collapsed sections for desktop - // const isExpanded = button.getAttribute("aria-expanded") === "true"; - // const parent = button.closest("li.first-item"); - // if (parent) { - // parent.classList.toggle("list-style-circle", !isExpanded); - // } - // } - // style collapsed sections for desktop const isExpanded = button.getAttribute("aria-expanded") === "true"; const parent = button.closest("li.first-item"); diff --git a/site/config/config.php b/site/config/config.php index a80977e..9bed4c7 100644 --- a/site/config/config.php +++ b/site/config/config.php @@ -76,8 +76,8 @@ function generateRelationsJson() * all config options: https://getkirby.com/docs/reference/system/options */ return [ - // 'debug' => true, - 'debug' => false, + 'debug' => true, + // 'debug' => false, 'panel' => [ 'install' => true ], diff --git a/site/snippets/event-content.php b/site/snippets/event-content.php index 7a5f0b2..2996acd 100644 --- a/site/snippets/event-content.php +++ b/site/snippets/event-content.php @@ -1,13 +1,20 @@ + -Event: -
+ + + + + ticketed()->toBool()) : ?> @@ -71,9 +78,11 @@
-Lineup: +
+
\ No newline at end of file diff --git a/site/snippets/footer.php b/site/snippets/footer.php index 5e04320..aa999a2 100644 --- a/site/snippets/footer.php +++ b/site/snippets/footer.php @@ -14,16 +14,19 @@