Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enhancement : Carousel UI changed #328

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Enhancement : Carousel UI changed #328

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
38eab2d
Enhancement : Carousel UI changed
praptisharma28 Jan 20, 2024
fe6be86
home.scss path changed
praptisharma28 Jan 24, 2024
4122d89
Merge branch 'shelcia:master' into templates
praptisharma28 Jan 26, 2024
50008aa
corrections
praptisharma28 Jan 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
81 changes: 50 additions & 31 deletions src/pages/auth/HomePage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,19 @@
import React, { useContext, useEffect, useState } from "react";
import { Carousel, Col, Container, Row } from "react-bootstrap";
import React, { useContext } from "react";
import { Col, Container, Row } from "react-bootstrap";
import { Link } from "react-router-dom";
import { TemplateContext } from "../../context/TemplateContext";
import { Pattern3Default } from "../../components/common/CustomPatterns";
import "../../styles/components/home.scss"

const HomePage = () => {
const [templates] = useContext(TemplateContext);
return (
<React.Fragment>
<section className="wrapper">
<div className="section section-hero section-shaped">
<Pattern3Default />
<div className="page-header">
<Container className="shape-container d-flex align-items-center py-lg">
<Container className="shape-container d-flex align-items-center py-lg" style={{justifyContent:"center"}}>
<div className="col px-0">
<Row className="align-items-center justify-content-center">
<Col lg={6} className="text-center">
Expand Down Expand Up @@ -49,7 +52,7 @@ const HomePage = () => {
</svg>
</div>
</div>
<div className="section features-1">
<div className="section features-1 new-shape">
<Container>
<Row>
<Col md={8} className="mx-auto text-center">
Expand All @@ -60,7 +63,23 @@ const HomePage = () => {
<p className="lead">I am still working on it</p>
</Col>
</Row>
<TemplateCarousel />
{/* <TemplateCarousel /> */}
<div className="card-container">
<input type="radio" name="slider" id="item-1" checked />
<input type="radio" name="slider" id="item-2" />
<input type="radio" name="slider" id="item-3" />
<div className="cards">
<label className="card" htmlFor="item-1" id="song-1">
<img src={templates[0].img} alt="template" />
</label>
<label className="card" htmlFor="item-2" id="song-2">
<img src={templates[1].img} alt="template" />
</label>
<label className="card" htmlFor="item-3" id="song-3">
<img src={templates[2].img} alt="template" />
</label>
</div>
</div>
</Container>
</div>
<br />
Expand All @@ -72,31 +91,31 @@ const HomePage = () => {

export default HomePage;

const TemplateCarousel = () => {
const [templates] = useContext(TemplateContext);
const [index, setIndex] = useState(0);
// const TemplateCarousel = () => {
// const [templates] = useContext(TemplateContext);
// const [index, setIndex] = useState(0);

const handleSelect = (selectedIndex) => {
setIndex(selectedIndex);
};
useEffect(() => {
const interval = setInterval(() => {
setIndex((prevIndex) => (prevIndex + 1) % templates.length);
}, 5000);
return () => clearInterval(interval);
}, [index]);
// const handleSelect = (selectedIndex) => {
// setIndex(selectedIndex);
// };
// useEffect(() => {
// const interval = setInterval(() => {
// setIndex((prevIndex) => (prevIndex + 1) % templates.length);
// }, 5000);
// return () => clearInterval(interval);
// }, [index]);

return (
<Carousel activeIndex={index} onSelect={handleSelect} interval={null}>
{templates.map((template, index) => (
<Carousel.Item key={index}>
<img className="d-block w-100" src={template.img} alt="...." />
<Carousel.Caption>
<h3 className="text-white">{template.title}</h3>
<p className="text-light">{template.caption} </p>
</Carousel.Caption>
</Carousel.Item>
))}
</Carousel>
);
};
// return (
// <Carousel activeIndex={index} onSelect={handleSelect} interval={null}>
// {templates.map((template, index) => (
// <Carousel.Item key={index}>
// <img className="d-block w-100" src={template.img} alt="...." />
// <Carousel.Caption>
// <h3 className="text-white">{template.title}</h3>
// <p className="text-light">{template.caption} </p>
// </Carousel.Caption>
// </Carousel.Item>
// ))}
// </Carousel>
// );
// };
193 changes: 193 additions & 0 deletions src/styles/components/home.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,193 @@
@import url("https://fonts.googleapis.com/css?family=DM+Sans:400,500,700&display=swap");

* {
box-sizing: border-box;
}

/* html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
*/
.new-shape {
display: flex;
align-items: center;
justify-content: center;
padding: 30px 10px;
font-family: 'DM Sans', sans-serif;
height: 100vh;
}

input[type=radio] {
display: none;
}

.card {
position: absolute;
width: 60%;
height: 100%;
left: 0;
right: 0;
margin: auto;
transition: transform .4s ease;
cursor: pointer;
overflow: hidden;

}

.card-container {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
max-width: 800px;
max-height: 600px;
height: 100%;
transform-style: preserve-3d;
overflow: hidden;
height: 600px;
transform: translateX(50%);
left: -30%;
}

.cards {
position: relative;
width: 100%;
height: 100%;
margin-bottom: 20px;
overflow: hidden;
}

img {
width: 100%;
height: 100%;
border-radius: 20px;
object-fit: cover contain;

}

#item-1:checked ~ .cards #song-3, #item-2:checked ~ .cards #song-1, #item-3:checked ~ .cards #song-2 {
transform: translatex(-40%) scale(.8);
opacity: .4;
z-index: 0;
height: 400px;
object-fit: contain;
}


#item-1:checked ~ .cards #song-2, #item-2:checked ~ .cards #song-3, #item-3:checked ~ .cards #song-1 {
transform: translatex(40%) scale(.8);
opacity: .4;
z-index: 0;
height: 400px;
object-fit: contain;
}

#item-1:checked ~ .cards #song-1, #item-2:checked ~ .cards #song-2, #item-3:checked ~ .cards #song-3 {
transform: translatex(0) scale(1);
opacity: 1;
z-index: 1;
height: 400px;
object-fit: contain;

img {
box-shadow: 0px 0px 5px 0px rgba(81, 81, 81, 0.47);
}
}
@media (max-width:1100px) {
.card-container{
transform: translateX(0%);
left: 0%;
}
}
/*
.player {
background-color: #fff;
border-radius: 8px;
min-width: 320px;
padding: 16px 10px;
margin-top: 100px;
}

.upper-part {
position: relative;
display: flex;
align-items: center;
margin-bottom: 12px;
height: 36px;
overflow: hidden;
}

.play-icon{ margin-right: 10px; }

.song-info {
width: calc(100% - 32px);
display: block;
}

.song-info .title {
color: #403d40;
font-size: 14px;
line-height: 24px;
}

.sub-line {
display: flex;
justify-content: space-between;
width: 100%;
}

.subtitle, .time {
font-size: 12px;
line-height: 16px;
color: #c6c5c6;
}

.time {
font-size: 12px;
line-height: 16px;
color: #a5a5a5;
font-weight: 500;
margin-left: auto;
}

.progress-bar {
height: 3px;
width: 100%;
background-color: #e9efff;
border-radius: 2px;
overflow: hidden;
}

.progress {
display: block;
position: relative;
width: 60%;
height: 100%;
background-color: #2992dc;
border-radius: 6px;
}

.info-area {
width: 100%;
position: absolute;
top: 0;
left: 30px;
transition: transform .4s ease-in;
}

#item-2:checked ~ .player #test {
transform: translateY(0);
}

#item-2:checked ~ .player #test {
transform: translateY(-40px);
}

#item-3:checked ~ .player #test {
transform: translateY(-80px);
} */
Loading