Skip to content

Commit

Permalink
Merge pull request ufosc#40 from PhillipsCorey/main
Browse files Browse the repository at this point in the history 
Issue ufosc#35: Redesign of Homepage Carousel
  • Loading branch information
@AntonCSalvador
AntonCSalvador authored Sep 3, 2024
2 parents 3ef5c91 + 029eadd commit 310f23a
Show file tree
Hide file tree
Showing 6 changed files with 169 additions and 41 deletions.
Binary file added public/images/arrow_left_alt.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.
Binary file added public/images/arrow_right_alt.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.
96 changes: 75 additions & 21 deletions src/Carousel/Carousel.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,59 +5,113 @@ body {
}

.Carousel {
height: 90vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 50px auto;
position: relative; /* Relative positioning for the button container */
width: 80vw; /* Set a fixed width for the carousel */
/* height: 80vh; Set a fixed height for the carousel */
overflow: hidden; /* Hide overflow to keep images within the container */
margin: auto auto auto auto;
width: fit-content;
height: fit-content;

border-radius: 5%;
background-size: cover;
background-size: no-repeat;

}

.Carousel img {
width: 50vh; /* Ensure the image covers the container's width */
width: calc(15vw + 15vh); /* Ensure the image covers the container's width */
object-fit: cover;
object-position: 55% 50%;
justify-content: center;
align-items: center;
transition: 0.5s ease;
}

.left-button button, .right-button button {
background-color: #4a5568;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
padding: 8px 16px;
/* base button layout */
background-color: transparent;
width: 5vh;
height: 5vh;
border-radius: 50%;

/* centering image in button */
display: flex;
align-items: center;
justify-content: center;

/* ring animation */
border: 0.2rem solid transparent;
padding: 0.2rem;
background-clip: content-box;

transition:
transform 0.5s ease,
border 0.5s ease,
background-color 0.2s ease;
}

.left-button button:hover, .right-button button:hover {
border: 0.2rem solid purple;
transform: scale(1.3);
}

.left-button button:active, .right-button button:active {
background-color: purple;
}

.left-button img, .right-button img {
width: 30px; /* Adjust the width as needed */
width: auto; /* Adjust the width as needed */
height: auto; /* Maintains the aspect ratio */
display: block; /* Ensures the image doesn't have extra space around it */
margin-top: 30px;
}

.button-container {
display: flex;
justify-content: bottom;
align-items: bottom;
position: absolute;
width: 180%;
overflow: hidden;
width: 100%;
height: fit-content;
padding: 20px 0;
box-sizing: border-box;
}

/* Custom spacing between buttons using margin */
.left-button, .right-button{
margin-right: auto; /* Pushes the button to the left */
margin-left: auto; /* Pushes the button to the left */
.left-button{
position: relative;
left: 2%; /* the left button should have a 2% margin from the border of the box */
}

/* Custom spacing between buttons using margin */
.right-button{
position: relative;
left: calc(98% - 10vh); /*the right button also needs a 2% border from the box, but life isn't easy. this is the formula for it: 100% - [margin_width] - 2*[button_size] */
}

.nav-button {
/* base nav button layout */
width: 2rem;
height: 2rem;
border-radius: 50%;
margin: 0 0.25rem 0 0.25rem;

/* ring animation */
border: 0.2rem solid transparent;
padding: 0.2rem;
background-clip: content-box;

transition:
transform 0.5s ease,
border 0.5s ease,
background-color 0.5s ease;
}

.nav-button:hover{
border: 0.2rem solid purple;
transform: scale(1.3);
}

.nav-buttons-container{
position: absolute;
bottom: 1vh;
}
54 changes: 43 additions & 11 deletions src/Carousel/Carousel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,12 @@ export const images = [
"images/LGTM.png",
];

// Preload the images to reduce the chance of oddities occuring on the carousel
for (const image of images) {
const imageElement = new Image();
imageElement.src = image;
}

export const name = [
"C++",
"Java",
Expand All @@ -28,35 +34,61 @@ export const text = [
"Looks Good To Merge, Let's Get The Money, Let's Guzzle That Milk",
]

export const Carousel = ({ imageIndex }) => {
export const Carousel = ({ imageIndex, fade }) => {
return (
<div className="Carousel">
<div className="heading-text" style={{fontSize: "4vh", marginTop: "3vh", marginBottom: "2vh", fontFamily: "cursive"}}>{name[imageIndex]}</div>
<img class="h-auto" src={images[imageIndex]} alt={`Displaying ${images[imageIndex]}`} />
<div className="description-text" style={{fontSize: "3vh", marginTop: "3vh"}}>{text[imageIndex]}</div>
<div className="heading-text" style={{
fontSize: "calc(4vw + 2vh)",
marginTop: "3vh",
marginBottom: "2vh",
fontFamily: "cursive",
opacity: fade ? 0 : 1,
transition: 'opacity 0.5s ease-in-out',
}}>{name[imageIndex]}</div>

<img class="h-auto" src={images[imageIndex]} alt={`Displaying ${images[imageIndex]}`} style={{
opacity: fade ? 0 : 1,
transition: 'opacity 0.5s ease-in-out',}}/>
<div className="description-text" style={{
fontSize: "calc(2vw + 1vh)",
padding: "4vh",
opacity: fade ? 0 : 1,
transition: 'opacity 0.5s ease-in-out',}}>{text[imageIndex]}</div>
</div>
);
};

export const Carousel_Rotate_Left = ({ onRotate }) => {
export const Carousel_Rotate_Left = ({fadeFunction}) => {
return (
<div className="left-button">
<button onClick={onRotate} style={{ background: 'none', border: 'none' }}>
<img src="images/arrow_left.png" alt="Rotate Left" />
<button onClick={fadeFunction}>
<img src="images/arrow_left_alt.png" alt="Rotate Left" />
</button>
</div>
);
};

export const Carousel_Rotate_Right = ({ onRotate }) => {
export const Carousel_Rotate_Right = ({fadeFunction}) => {
return (
<div className="right-button">
<button onClick={onRotate} style={{ background: 'none', border: 'none' }}>
<img src="images/arrow_right.png" alt="Rotate Right" />
<button onClick={fadeFunction}>
<img src="images/arrow_right_alt.png" alt="Rotate Right" />
</button>
</div>
);
};
};

export const Carousel_Navigation_Buttons = ({ fadeFunction, movementFunction, activeIndex }) => {
return (
<div className="nav-buttons-container">
{images.map((_, index) => (
<button className="nav-button" key={index} onClick={() => fadeFunction(movementFunction, index)} style={{
backgroundColor: activeIndex === index ? 'purple' : '#000000',
}}></button>
))}
</div>
);
}



23 changes: 21 additions & 2 deletions src/Home/Home.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@

#meetHeading{
font-family: cursive;
font-size: 4em;
font-size: calc(6vw + 2vh);

padding-left: 20px;
padding-right: 20px;
Expand Down Expand Up @@ -110,7 +110,7 @@

#downloadLabel{

font-size: 40px;
font-size: calc(4vw + 1vh);
padding-bottom: 20px;

}
Expand All @@ -130,6 +130,25 @@
width: 100%
}

#downloadButton a{
font-size: calc(2vw + 0.5vh);
}

#musicButton{
z-index: 1;
}

.Carousel-Wrapper {
height: calc(75vh + 10vw);
width: 80vw;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 3vh auto 10px auto;
position: relative; /* Relative positioning for the button container */

border-radius: 5%;
background-size: cover;
background-size: no-repeat;
}
37 changes: 30 additions & 7 deletions src/Home/Home.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,16 @@ import { useState, useRef, useEffect } from 'react';
import "./Home.css";
import Navbar from "../Navbar/Navbar";
import Footer from "../Footer/Footer";
import {Carousel, Carousel_Rotate_Left, Carousel_Rotate_Right, images} from '../Carousel/Carousel';
import {Carousel, Carousel_Rotate_Left, Carousel_Rotate_Right, Carousel_Navigation_Buttons, images} from '../Carousel/Carousel';


const Home = () => {
const [isMuted, setIsMuted] = useState(false); // Initialize as muted
const audioRef = useRef(null); // Ref for the audio element
const [videoPlaying, setVideoPlaying] = useState(false);
const [currentImageIndex, setCurrentImageIndex] = useState(0);
const [fade, setFade] = useState(false);
const fadeTimeout = 0.75 * 1000;

const handleRotateLeft = () => {
setCurrentImageIndex(prevIndex => (prevIndex - 1 + images.length) % images.length);
Expand All @@ -19,7 +21,27 @@ const Home = () => {
setCurrentImageIndex(prevIndex => (prevIndex + 1) % images.length);
};


const handleButtonNav = (selectedIndex) => {
setCurrentImageIndex(selectedIndex);
}

const handleFadeArrows = (movementFunction) => {
setFade(true);
setTimeout(() => {
movementFunction();
setFade(false);
}, fadeTimeout)
}

const handleFadeNav = (movementFunction, selectedIndex) => {
if(!(selectedIndex === currentImageIndex)){
setFade(true);
setTimeout(() => {
movementFunction(selectedIndex);
setFade(false);
}, fadeTimeout)
}
}

const toggleMute = () => {
setIsMuted(!isMuted);
Expand Down Expand Up @@ -112,13 +134,14 @@ const Home = () => {


<div id="meetChars">
<h2 id="meetHeading">Meet Our Charactetrs!</h2>
<div className="Carousel border-4 border-custom-purple w-3/5 ">
<Carousel imageIndex={currentImageIndex} />
<h2 id="meetHeading">Meet Our Characters!</h2>
<div className="Carousel-Wrapper border-4 border-custom-purple w-3/5 ">
<Carousel imageIndex={currentImageIndex} fade={fade}/>
<div className="button-container">
<Carousel_Rotate_Left onRotate={handleRotateLeft} />
<Carousel_Rotate_Right onRotate={handleRotateRight} />
<Carousel_Rotate_Left fadeFunction={() => handleFadeArrows(handleRotateLeft)} />
<Carousel_Rotate_Right fadeFunction={() => handleFadeArrows(handleRotateRight)} />
</div>
<Carousel_Navigation_Buttons fadeFunction={handleFadeNav} movementFunction={handleButtonNav} activeIndex={currentImageIndex} />
</div>
</div>

Expand Down

0 comments on commit 310f23a

Please sign in to comment.