simon/luxury-detailing-maine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updates to new services page (better formatting)

Browse Source
This commit is contained in:
sotrali
2026-01-08 09:17:15 -05:00
parent 852185cf29
commit 60d3f1828d
2 changed files with 25 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
reviews.html
+6 -9
View File
@@ -294,7 +294,6 @@
for (let i = 0; i < reviews.length; i++) { for (let i = 0; i < reviews.length; i++) {
let review = reviews[i]; let review = reviews[i];
let linkedName = `<a href="${review.url}" class="reviewLink" target="_blank">${review.name}</a>`; let linkedName = `<a href="${review.url}" class="reviewLink" target="_blank">${review.name}</a>`;
// load reviews // load reviews
target.insertAdjacentHTML( target.insertAdjacentHTML(
"beforeend", "beforeend",
@@ -323,21 +322,19 @@
/** gallery jiggling (indicate to user they can slide images for comparison) */ /** gallery jiggling (indicate to user they can slide images for comparison) */
let jiggled = false; let jiggled = false;
async function jiggleGallerySliders() {
let jiggleThreshold = document.getElementById("reviews").offsetHeight + 25; let jiggleThreshold = document.getElementById("reviews").offsetHeight + 25;
console.log('jiggle trheshold: ' + jiggleThreshold); async function jiggleGallerySliders() {
console.log('current pos: ' + window.scrollY);
// ensure jiggle only triggers once, upon gallery scrolling into view // ensure jiggle only triggers once, upon gallery scrolling into view
if (window.scrollY < jiggleThreshold || jiggled) return; if (window.scrollY < jiggleThreshold || jiggled) return;
jiggled = true;
// once user scrolls to gallery, move sliders on all images up a bit // once user scrolls to gallery, move sliders on all images right a bit
let sliders = juxtapose.sliders; let sliders = juxtapose.sliders;
for (let i = 0; i < sliders.length; i++) { for (let i = 0; i < sliders.length; i++) {
sliders[i].updateSlider(60, true); sliders[i].updateSlider(60, true);
} }
// sleep, then slide them all down, // sleep, then slide them all left,
await new Promise(resolve => setTimeout(resolve, 1000)); await new Promise(resolve => setTimeout(resolve, 1000));
for (let i = 0; i < sliders.length; i++) { for (let i = 0; i < sliders.length; i++) {
sliders[i].updateSlider(40, true); sliders[i].updateSlider(40, true);
@@ -348,7 +345,6 @@
for (let i = 0; i < sliders.length; i++) { for (let i = 0; i < sliders.length; i++) {
sliders[i].updateSlider(50, true); sliders[i].updateSlider(50, true);
} }
jiggled = true;
} }
@@ -374,7 +370,7 @@
images[i].style.height = newHeight + 'px'; images[i].style.height = newHeight + 'px';
} }
// resize images in iframe to match // resize images in each iframe to match new dimensions
images = document.getElementsByClassName("jx-image"); images = document.getElementsByClassName("jx-image");
for (let i = 0; i < images.length; i++) { for (let i = 0; i < images.length; i++) {
images[i].style.width = newWidth + 'px'; images[i].style.width = newWidth + 'px';
@@ -383,6 +379,7 @@
images[i].children[0].style.height = newHeight + 'px'; images[i].children[0].style.height = newHeight + 'px';
} }
// quickly touch every iframe/slider (otherwise the images glitch out until user interacts with slider again)
let sliders = juxtapose.sliders; let sliders = juxtapose.sliders;
for (let i = 0; i < sliders.length; i++) { for (let i = 0; i < sliders.length; i++) {
sliders[i].updateSlider(sliders[i].sliderPosition.replace("%", ""), true); sliders[i].updateSlider(sliders[i].sliderPosition.replace("%", ""), true);
services2.html
+18 -9
View File
@@ -24,19 +24,28 @@
#categoryLinks { #categoryLinks {
display: flex; display: flex;
flex-wrap: wrap;
justify-content: space-evenly; justify-content: space-evenly;
align-items: center; align-items: center;
gap: 2rem; gap: 5rem;
margin-top: 2rem; margin-top: 5rem;
} }
.jumpLink { .jumpLink {
border: 1px solid var(--gold);
padding: 1rem; padding: 1rem;
border-radius: 1rem; display: flex;
align-items: center;;
height: 8rem;
padding: 0 2rem;
text-decoration: none; text-decoration: none;
color: var(--gold); color: var(--gold);
border: 1px solid var(--gold);
border-radius: 1rem;
transition: 0.3s ease; transition: 0.3s ease;
} }
.jumpLink:hover { .jumpLink:hover {
@@ -174,11 +183,11 @@
<div id="tableOfContents"> <div id="tableOfContents">
<h1>Our Services</h1> <h1>Our Services</h1>
<div id="categoryLinks"> <div id="categoryLinks">
<a href="#packagesJump" class="jumpLink"><h2>Service<br/>Packages</h2></a> <a href="#packagesJump" class="jumpLink"><h2>Service Packages</h2></a>
<a href="#ceramicJump" class="jumpLink"><h2>Ceramic<br/>Coating</h2></a> <a href="#ceramicJump" class="jumpLink"><h2>Ceramic Coating</h2></a>
<a href="#paintJump"><h2>Polish &<br/>Paint Correction</h2></a> <a href="#paintJump" class="jumpLink"><h2>Polish &<br/>Paint Correction</h2></a>
<a href="#exteriorJump"><h2>Exterior<br/>Detailing</h2></a> <a href="#exteriorJump" class="jumpLink"><h2>Exterior Detailing</h2></a>
<a href="#interiorJump"><h2>Interior<br/>Detailing</h2></a> <a href="#interiorJump" class="jumpLink"><h2>Interior Detailing</h2></a>
</div> </div>
</div> </div>