Skip to content

Commit

Permalink
fix header content overlap, adjust mobile audio button positioning, a…
Browse files Browse the repository at this point in the history 
…dd left margin to mobile
  • Loading branch information
@alexrturner
alexrturner committed Apr 2, 2024
1 parent 5e832b4 commit 9ea6716
Show file tree
Hide file tree
Showing 6 changed files with 103 additions and 64 deletions.
26 changes: 13 additions & 13 deletions assets/css/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,9 +115,6 @@ button {
color: inherit;
}

.ae-title {
/* padding-left: 0.25em; */
}
.ae-title h1 {
/* font-size: var(--fs-xl); */

Expand Down Expand Up @@ -261,8 +258,13 @@ button.button__link.button__submit::before,
text-align: start;
font-family: var(--ff-primary);
font-style: normal;
/* background-color: currentColor; */
/* vertical-align: middle; */
}
@media (max-width: 769px) {
button.button__link.button__submit::before,
.pseudo-list-item::before {
width: auto;
margin-left: 0.25em;
}
}
button.button__link.button__submit:hover::before,
.pseudo-list-item:not(.section__subtitle):hover::before {
Expand Down Expand Up @@ -860,7 +862,7 @@ layout

.ae-title {
margin-top: 2rem;
z-index: 100;
/* z-index: 100; */
/* margin-bottom: 1rem; */
}
ul {
Expand All @@ -869,12 +871,6 @@ layout
/* padding: 0 0 0 var(--icon-size); */
}

#col1 > *:not(ul),
#col2 > *:not(ul),
#col3 > *:not(ul) {
/* padding: 0 1rem; */
/* margin-right: 1rem; */
}
.mobile__section-subtitle {
margin-left: 1.75em;
}
Expand Down Expand Up @@ -946,6 +942,7 @@ ul li::before {
} */
ul li::before {
margin-right: 8px;
margin-left: 0.25em;
}
}

Expand Down Expand Up @@ -1033,9 +1030,12 @@ SCROLL UNDER
.menu-header-container {
z-index: 11;
}
.menu-header-container * {
.menu-header-container *:not(.pagination) {
z-index: 11;
}
.menu-header-container .pagination {
z-index: 50;
}

.ae-subtitle {
width: auto;
Expand Down
4 changes: 4 additions & 0 deletions assets/css/templates/home.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,9 @@
.menu-toggle.toggle.pseudo-list-item {
padding-left: 30px;
width: auto;
background: transparent;
}
.audio-button {
mix-blend-mode: multiply;
}
}
12 changes: 0 additions & 12 deletions assets/js/ae24-audio-svg.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,16 +20,6 @@ document.addEventListener("DOMContentLoaded", function () {
y: clickedButtonPosition.top + clickedButtonPosition.height / 2,
},
];
// function determineOrder() {
// const today = new Date();
// if (today.getDay() % 2 === 0) {
// // even day order
// return [".ae-title", ".homepage__dates", ".homepage__tag"];
// } else {
// // odd day order
// return [".homepage__dates", ".homepage__tag", ".ae-title"];
// }
// }

function shuffleOrder(array) {
for (let i = array.length - 1; i > 0; i--) {
Expand All @@ -40,8 +30,6 @@ document.addEventListener("DOMContentLoaded", function () {
}

const targetSelectors = [".ae-title", ".homepage__dates", ".homepage__tag"];
// todo: for determined selectors, use the following line instead
// const targetSelectors = determineOrder();

const targetSelectorsOrdered = shuffleOrder(targetSelectors.slice());

Expand Down
73 changes: 53 additions & 20 deletions assets/js/save-the-date.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,6 @@ document.addEventListener("DOMContentLoaded", function () {

document.addEventListener("DOMContentLoaded", function () {
// select the SVG, dots and audio buttons
// var svgElement = document.querySelector("#logo-0 svg");
// var cls3Elements = svgElement.querySelectorAll(".cls-3");
var svgElement = document.querySelector("#dots svg");
// var cls3Elements = svgElement.querySelectorAll(".st0");
var cls3Elements = svgElement.querySelectorAll("#dots path");
Expand All @@ -58,6 +56,28 @@ document.addEventListener("DOMContentLoaded", function () {
);
}

// Function to adjust the position by 2em without leaving the viewport
function adjustPosition(button) {
const emSize = parseFloat(getComputedStyle(document.body).fontSize);
const movement = 2 * emSize; // Convert 2em to pixels
let { left, top } = button.getBoundingClientRect();

// Adjusting position to move left or right, and up or down by 2em
// ensure the button doesn't move out of the viewport
left = Math.min(
window.innerWidth - button.offsetWidth,
Math.max(0, left + (Math.random() < 0.5 ? -movement : movement))
);
top = Math.min(
window.innerHeight - button.offsetHeight,
Math.max(0, top + (Math.random() < 0.5 ? -movement : movement))
);

// update button position
button.style.left = `${left}px`;
button.style.top = `${top}px`;
}

audioButtons.forEach((button) => {
const screenWidth = window.innerWidth;
let attempts = 0;
Expand All @@ -73,18 +93,6 @@ document.addEventListener("DOMContentLoaded", function () {
.getElementById("svg-container")
.getBoundingClientRect();

// var leftPixels =
// svgRect.left +
// cx * (svgRect.width / svgElement.viewBox.baseVal.width) -
// button.offsetWidth / 2 -
// containerRect.left;

// var topPixels =
// svgRect.top +
// cy * (svgRect.height / svgElement.viewBox.baseVal.height) -
// button.offsetHeight / 2 -
// containerRect.top;

var leftPercent =
((svgRect.left +
cx * (svgRect.width / svgElement.viewBox.baseVal.width) -
Expand All @@ -101,15 +109,40 @@ document.addEventListener("DOMContentLoaded", function () {
button.style.position = "absolute";
button.style.left = `${leftPercent}%`;
button.style.top = `${topPercent}%`;
// button.style.left = `${leftPixels}px`;
// button.style.top = `${topPixels}px`;
}

// smaller screens: place the button on path
if (screenWidth < 769) {
// smaller screens: place the button on path
var rCircle = Math.floor(Math.random() * cls3Elements.length);
var circle = cls3Elements[rCircle];
setPosition(circle);
let placed = false;
while (!placed && attempts < maxAttempts) {
var rCircle = Math.floor(Math.random() * cls3Elements.length);
var circle = cls3Elements[rCircle];
setPosition(circle);

let overlap = Array.from(audioButtons).some((otherButton) => {
return otherButton !== button && isOverlapping(button, otherButton);
});

if (!overlap) {
placed = true; // found a non-overlapping position
// break; // exit loop once a position is found
} else {
attempts++;
}
}

if (attempts === maxAttempts) {
console.log(
"Failed to place an audio button without overlapping after maximum attempts."
);
adjustPosition(button);
}
// if (!placed) {
// console.log(
// "Failed to place an audio button without overlapping after maximum attempts."
// );
// button.style.display = "none !important"; // This line hides the button if a position wasn't found
// }
} else {
// larger screens: find a non-overlapping position
let placed = false;
Expand Down
50 changes: 32 additions & 18 deletions assets/js/script.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
// - touch and scroll handling, specific to the col3 element
// - plain text view toggle functionality

document.addEventListener("DOMContentLoaded", function () {
const handleTouchStart = function (e) {
this.touchStartY = e.touches[0].clientY;
Expand All @@ -17,7 +20,9 @@ document.addEventListener("DOMContentLoaded", function () {
const handleWheel = function (e) {
e.preventDefault();
const col3 = document.getElementById("col3");
col3.scrollTop += e.deltaY;
if (col3) {
col3.scrollTop += e.deltaY;
}
};

let customScrollHandlingAdded = false;
Expand Down Expand Up @@ -70,6 +75,7 @@ document.addEventListener("DOMContentLoaded", function () {
const togglePlainText = document.getElementById("togglePlainTextView");
const settingsButton = document.getElementById("settingsButton");
const settingsContainer = document.getElementById("settingsContainer");
const plainTextContainer = document.getElementById("plainTextContainer");

const body = document.body;
const menuHeaderContainer = document.querySelector(
Expand All @@ -88,12 +94,20 @@ document.addEventListener("DOMContentLoaded", function () {
function applyPlainTextStyles(enable) {
if (enable) {
body.classList.add("plain-text");
// limit body width for ease of reading on large screens
body.style.maxWidth = "60em";

// add fixed position to menu header and plain text button
if (menuHeaderContainer) {
menuHeaderContainer.style.position = "fixed";
menuHeaderContainer.style.right = "0.3rem";
menuHeaderContainer.style.top = "2em";
}
if (plainTextContainer) {
plainTextContainer.style.position = "fixed";
plainTextContainer.style.right = "0.3rem";
plainTextContainer.style.top = "0.5rem";
}

// if (menuToggleButton.attributes.expanded) {
if (!body.classList.contains("home") && menuToggleButton) {
Expand All @@ -112,7 +126,7 @@ document.addEventListener("DOMContentLoaded", function () {
ul.style.padding = "0";
});

// Remove custom scroll handling in plain text mode
// remove custom scroll handling in plain text mode
removeCustomScrollHandling();
} else {
body.classList.remove("plain-text");
Expand Down Expand Up @@ -209,24 +223,24 @@ document.addEventListener("DOMContentLoaded", function () {
toggleSection(this);
});
});
});
function initSections() {
const isMobile = window.innerWidth <= 768;
const sections = document.querySelectorAll("[aria-controls]");

sections.forEach((button) => {
const sectionId = button.getAttribute("aria-controls");
const sectionItems = document.getElementById(sectionId);
// function to init sections
function initSections() {
const isMobile = window.innerWidth <= 768;
const sections = document.querySelectorAll("[aria-controls]");

// 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);
}
});
}
sections.forEach((button) => {
const sectionId = button.getAttribute("aria-controls");
const sectionItems = document.getElementById(sectionId);

document.addEventListener("DOMContentLoaded", function () {
// 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);
}
});
}
// initialize sections on page load
initSections();
});
2 changes: 1 addition & 1 deletion site/snippets/header.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,7 @@
<?php endif ?>
</div>
<?php endif ?>
<div class="plain-text-container" style="position: fixed; top: 0.5rem; right: 0.3rem;">
<div id="plainTextContainer" class="plain-text-container">
<button id="togglePlainTextView" class="pseudo-list-item">Plain Text View</button>

<?php
Expand Down

0 comments on commit 9ea6716

Please sign in to comment.