Skip to content

Commit

Permalink
Merge pull request tylerpierson#23 from brycesexton/main
Browse files Browse the repository at this point in the history 
fixed album carousel on desktop, minor changes
  • Loading branch information
@tylerpierson
tylerpierson authored Sep 13, 2024
2 parents 0499381 + 6ad2ce0 commit de9df75
Show file tree
Hide file tree
Showing 13 changed files with 154 additions and 131 deletions.
Binary file removed public/img/1.png
View file
Binary file not shown.
Binary file added public/img/1logo.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
<link href="https://fonts.googleapis.com/css2?family=Adamina&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Teko:[email protected]&display=swap" rel="stylesheet">

<meta name="viewport" content="width=device-width, initial-scale=1">
<script defer src="js/dist/vendors-node_modules_css-loader_dist_runtime_api_js-node_modules_css-loader_dist_runtime_getU-efc6cb.b6ef0f44ae728aa0791f.js?38c698d7296b6dd3366f"></script><script defer src="js/dist/App.e4a86e2976e72ff31afa.js?38c698d7296b6dd3366f"></script><script defer src="js/dist/main.0177eeb3983c34ee0494.js?38c698d7296b6dd3366f"></script></head>
<script defer src="js/dist/vendors-node_modules_css-loader_dist_runtime_api_js-node_modules_css-loader_dist_runtime_getU-efc6cb.b6ef0f44ae728aa0791f.js?5f064d4ae68b58c224df"></script><script defer src="js/dist/App.330d59e46797b28e63bb.js?5f064d4ae68b58c224df"></script><script defer src="js/dist/main.0177eeb3983c34ee0494.js?5f064d4ae68b58c224df"></script></head>

<body>
<div id="app"></div>
Expand Down
1 change: 1 addition & 0 deletions public/js/dist/App.2fbf3419be1d2738ba11c5a175655ef8.js.map
View file

Large diffs are not rendered by default.

102 changes: 54 additions & 48 deletions public/js/dist/App.e4a86e2976e72ff31afa.js → public/js/dist/App.330d59e46797b28e63bb.js
View file

Large diffs are not rendered by default.

1 change: 0 additions & 1 deletion public/js/dist/App.f37e7cee0098e13b064720e065485fc0.js.map
View file

This file was deleted.

26 changes: 15 additions & 11 deletions src/components/AlbumCarousel/AlbumCarousel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,26 +9,30 @@ const AlbumCarousel = ({ isFaded }) => {
{ src: '/img/kerosene.jpg', alt: 'Image 4', link: 'https://lowly.ffm.to/forester-kerosene' },
];

const extendedImages = [...images, ...images, ...images];

const [currentIndex, setCurrentIndex] = useState(0);

useEffect(() => {
const interval = setInterval(() => {
setCurrentIndex((prevIndex) => (prevIndex + 1) % (images.length * 3));
}, 3000);
setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);
}, 3000); // Change image every 3 seconds

return () => clearInterval(interval);
return () => clearInterval(interval);
}, [images.length]);

const visibleImages = [
images[currentIndex % images.length],
images[(currentIndex + 1) % images.length],
images[(currentIndex + 2) % images.length],
];

return (
<div id="newmusic" className={isFaded ? `${styles.faded} ${styles.carouselContainer}` : `${styles.carouselContainer}`}>
<div
id="newmusic"
className={isFaded ? `${styles.faded} ${styles.carouselContainer}` : `${styles.carouselContainer}`}
>
<div className={styles.carousel}>
<div
className={styles.carouselInner}
style={{ transform: `translateX(-${(currentIndex % images.length) * (100 / 3)}%)` }}
>
{extendedImages.map((image, index) => (
<div className={styles.carouselInner}>
{visibleImages.map((image, index) => (
<div className={styles.carouselItem} key={index} style={{ flex: '0 0 33.33%' }}>
<a target="_blank" href={image.link} rel="noopener noreferrer">
<img src={image.src} alt={image.alt} />
Expand Down
72 changes: 37 additions & 35 deletions src/components/AlbumCarousel/AlbumCarousel.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,53 +12,55 @@
background-size: cover;
background-position: center;
display: flex;
justify-content: flex-start; /* Changed the styling so the image starts to the far left when scrolling (when adding items to the carousel) */
align-items: center;
justify-content: center;
align-items: center;
}

.carousel {
.carousel {
max-width: 1560px;
width: 100%;
display: flex;
justify-content: center;
margin: auto;
}

.carouselInner {
display: flex;
width: calc(100% * 3);
transition: transform 0.5s ease-in-out;
will-change: transform;
}

.carouselItem {
flex: 0 0 33.33%;
box-sizing: border-box;
padding: 0 20px;
}

.carouselItem img {
width: 100%;
height: auto;
border-radius: 8px;
transition: transform 0.3s ease;

&:hover {
transform: scale(1.05);
}
}

display: flex;
}

.carouselInner {
display: flex;
width: calc(100% * 3);
transition: transform 0.5s ease-in-out;
will-change: transform;
}

.carouselItem {
flex: 0 0 33.33%;
box-sizing: border-box;
padding: 0 20px;
}

.carouselItem img {
width: 100%;
height: auto;
border-radius: 8px;
transition: transform 0.3s ease;

&:hover {
transform: scale(1.05);
}
}

@media screen and (max-width: 768px) {
@media screen and (max-width: 768px) {
.carouselContainer {
width: 100vw;
width: 100vw;
height: 20rem;
margin: 0;
}

.carouselInner {
width: 100%; /* Ensure the inner carousel takes up only the full width of one item */
width: 100%;
}

.carouselItem {
flex: 0 0 100%; /* Adjust to show only one item per screen */
padding: 0 10px; /* Adjust padding for smaller screens */
flex: 0 0 100%;
padding: 0 10px;
}
}
49 changes: 25 additions & 24 deletions src/components/MerchCarousel/MerchCarousel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,42 +3,43 @@ import styles from './MerchCarousel.module.scss';

const MerchCarousel = ({ isFaded }) => {
const images = [
{ src: '/img/hat1.png', alt: 'Image 1', link: 'https://forestermerch.com/products/lose-your-mind-find-your-soul-hat' },
{ src: '/img/hat2.png', alt: 'Image 2', link: 'https://forestermerch.com/products/forester-5-panel-hat' },
{ src: '/img/hoodie.png', alt: 'Image 3', link: 'https://forestermerch.com/products/sequoia-hoodie' },
//add as many merch images as you see fit, the carousel will display up to 3 images at a time on screen
{ src: '/img/hat2.png', alt: 'Image 1', link: 'https://forestermerch.com/products/forester-5-panel-hat' },
{ src: '/img/hoodie.png', alt: 'Image 2', link: 'https://forestermerch.com/products/sequoia-hoodie' },
{ src: '/img/hat1.png', alt: 'Image 3', link: 'https://forestermerch.com/products/lose-your-mind-find-your-soul-hat' },
// Add more merch images as needed
];

const visibleImages = images.length > 3 ? images : images.slice(0, 3);

const extendedImages = images.length > 3 ? [...visibleImages, ...visibleImages, ...visibleImages] : visibleImages;

const [currentIndex, setCurrentIndex] = useState(0);
const shouldScroll = images.length > 3;
const shouldScroll = images.length > 3;

useEffect(() => {
let interval;
if (shouldScroll) {
interval = setInterval(() => {
setCurrentIndex((prevIndex) => (prevIndex + 1) % (visibleImages.length * 3));
}, 3000);
setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);
}, 3000);
}

return () => {
if (interval) clearInterval(interval);
if (interval) clearInterval(interval);
};
}, [shouldScroll, visibleImages.length]);
}, [shouldScroll, images.length]);

const visibleImages = shouldScroll
? [
images[currentIndex % images.length],
images[(currentIndex + 1) % images.length],
images[(currentIndex + 2) % images.length],
]
: images;

return (
<div id="store" className={isFaded ? `${styles.faded} ${styles.carouselContainer}` : `${styles.carouselContainer}`}>
<div
id="store"
className={isFaded ? `${styles.faded} ${styles.carouselContainer}` : `${styles.carouselContainer}`}
>
<div className={styles.carousel}>
<div
className={styles.carouselInner}
style={{
transform: `translateX(-${shouldScroll ? (currentIndex % visibleImages.length) * (100 / 3) : 0}%)`,
}}
>
{extendedImages.map((image, index) => (
<div className={styles.carouselInner}>
{visibleImages.map((image, index) => (
<div className={styles.carouselItem} key={index} style={{ flex: '0 0 33.33%' }}>
<a target="_blank" href={image.link} rel="noopener noreferrer">
<img src={image.src} alt={image.alt} />
Expand All @@ -49,10 +50,10 @@ const MerchCarousel = ({ isFaded }) => {
</div>
{shouldScroll && (
<div className={styles.dotsContainer}>
{Array.from({ length: Math.ceil(visibleImages.length / 3) }).map((_, index) => (
{Array.from({ length: Math.ceil(images.length / 3) }).map((_, index) => (
<div
key={index}
className={`${styles.dot} ${currentIndex % visibleImages.length === index * 3 ? styles.active : ''}`}
className={`${styles.dot} ${currentIndex === index * 3 ? styles.active : ''}`}
onClick={() => setCurrentIndex(index * 3)}
></div>
))}
Expand Down
1 change: 0 additions & 1 deletion src/components/NavBar/NavBar.module.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
.NavBar {

border-radius: 30px;
padding: 1rem 2rem;
position: sticky;
Expand Down
23 changes: 17 additions & 6 deletions src/components/TourSection/TourSection.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,30 @@ import styles from './TourSection.module.scss';

const TourSection = ({ isFaded }) => {
useEffect(() => {
const script = document.createElement('script');
script.src = "https://widget.seated.com/app.js";
script.async = true;
document.body.appendChild(script);
// Laylo widget script
const layloScript = document.createElement('script');
layloScript.src = "https://embed.laylo.com/laylo-sdk.js";
layloScript.async = true;
document.body.appendChild(layloScript);

return () => {
document.body.removeChild(script);
// Clean up the Laylo script on component unmount
document.body.removeChild(layloScript);
};
}, []);

return (
<div id="tour" className={isFaded ? `${styles.faded} ${styles.tourSection}` : `${styles.tourSection}`}>
<div id="seated-55fdf2c0" className={styles.seatedEmbed} data-artist-id="ba27e0de-7b7e-4885-854a-87b49f4d12a1" data-css-version="3"></div>
{/* Laylo embed */}
<iframe
id="laylo-drop-46c2fa69-4ca5-4e2c-ba7e-46e26d1b0b40"
frameBorder="0"
scrolling="no"
allow="web-share"
allowTransparency="true"
style={{ width: '1px', minWidth: '100%', maxWidth: '1000px' }}
src="https://embed.laylo.com?dropId=46c2fa69-4ca5-4e2c-ba7e-46e26d1b0b40&color=2f152f&minimal=true&theme=dark"
></iframe>
</div>
);
};
Expand Down
2 changes: 1 addition & 1 deletion src/components/VideoBanner/VideoBanner.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import SocialMediaTop from '../SocialMedia/SocialMediaTop';
const VideoBanner = ({ isFaded }) => {
return (
<div id="video-banner" className={isFaded ? `${styles.faded} ${styles.videoBanner}` : `${styles.videoBanner}`}>
<img className={styles.logo} src="/img/placehold-logo.png" alt="Forester Logo" />
<img className={styles.logo} src="/img/1logo.png" alt="Forester Logo" />
<video autoPlay loop muted playsInline className={styles.videoBannerVideo}>
<source src="/video/forester-banner.mp4" type="video/mp4" />
Your browser does not support the video tag.
Expand Down
6 changes: 3 additions & 3 deletions src/components/VideoBanner/VideoBanner.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,13 @@
text-align: center;

.logo {
width: 20rem;
width: 35rem;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -0%);
transform: translate(-50%, -10%);
z-index: 1000;
filter: invert(1);
margin-top: 10rem;
}

.videoBannerVideo {
Expand Down

0 comments on commit de9df75

Please sign in to comment.