Жесть с гитом + анимация картиночек
This commit is contained in:
Marselchi
parent
8b77a56b59
commit
9354dce770
19
lab5/package-lock.json
generated
19
lab5/package-lock.json
generated
@ -1058,6 +1058,17 @@
|
||||
"integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/node": {
|
||||
"version": "20.11.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.0.tgz",
|
||||
"integrity": "sha512-o9bjXmDNcF7GbM4CNQpmi+TutCgap/K3w1JyKgxAjqx41zp9qlIAVFi0IhCNsJcXolEqLWhbFbEeL0PvYm4pcQ==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"undici-types": "~5.26.4"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/prop-types": {
|
||||
"version": "15.7.9",
|
||||
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.9.tgz",
|
||||
@ -5632,6 +5643,14 @@
|
||||
"react": ">=15.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/undici-types": {
|
||||
"version": "5.26.5",
|
||||
"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
|
||||
"integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/unpipe": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
|
||||
|
||||
@ -2,4 +2,99 @@
|
||||
width: 400px;
|
||||
height: 600px;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.logoimg {
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
transition: scale 100ms;
|
||||
}
|
||||
|
||||
.logoimg .logoimg-front-image {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.logoimg .logoimg-image {
|
||||
width: clamp(400px, 20vw, 600px);
|
||||
aspect-ratio: 2 / 3;
|
||||
border-radius: clamp(0.5rem, 0.75vw, 2rem);
|
||||
}
|
||||
|
||||
.logoimg-faders {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
transition: opacity 1500ms;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.logoimg:hover .logoimg-faders {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.logoimg:active {
|
||||
scale: 0.98;
|
||||
}
|
||||
|
||||
.logoimg-fader {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
.logoimg-fader:nth-child(odd) {
|
||||
animation: fade-left 3s linear infinite;
|
||||
}
|
||||
|
||||
.logoimg-fader:nth-child(even) {
|
||||
animation: fade-right 3s linear infinite;
|
||||
}
|
||||
|
||||
.logoimg-fader:is(:nth-child(3), :nth-child(4)) {
|
||||
animation-delay: 750ms;
|
||||
}
|
||||
|
||||
.logoimg-fader:is(:nth-child(5), :nth-child(6)) {
|
||||
animation-delay: 1500ms;
|
||||
}
|
||||
|
||||
.logoimg-fader:is(:nth-child(7), :nth-child(8)) {
|
||||
animation-delay: 2250ms;
|
||||
}
|
||||
|
||||
|
||||
@keyframes fade-left {
|
||||
from {
|
||||
scale: 1;
|
||||
translate: 0%;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
scale: 0.8;
|
||||
translate: -30%;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-right {
|
||||
from {
|
||||
scale: 1;
|
||||
translate: 0%;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
scale: 0.8;
|
||||
translate: 30%;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@ -10,10 +10,12 @@ const FilmLogo = ({ id }) => {
|
||||
const imag = item.image ?? imgPlaceholder;
|
||||
return (
|
||||
<Col xs={12} sm={6} lg={3}
|
||||
className="w-auto h-auto m-2"
|
||||
className="w-auto h-auto m-3 logoimg p-0"
|
||||
>
|
||||
<Link to={`/selected/${id}`} >
|
||||
<Image src={imag} fluid alt="" id="normRaz"/>
|
||||
<Image src={imag} fluid id="normRaz" className='logoimg-front-image m-0 p-0'/>
|
||||
{/* Delete line below to disable animation */}
|
||||
<div className='logoimg-faders' id='normRaz' >{Array.from({ length: 8 }, (_, index) => (<Image key={index} src={imag} fluid alt="" id="normRaz" className='logoimg-fader m-0 p-0'/>)) }</div>
|
||||
</Link>
|
||||
</Col>
|
||||
);
|
||||
|
||||
@ -1,3 +1,9 @@
|
||||
.bg-grey{
|
||||
background-color: #D9D9D9;
|
||||
}
|
||||
}
|
||||
.test{
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-decoration: none;
|
||||
background-color: #D9D9D9;
|
||||
}
|
||||
@ -16,7 +16,7 @@ const Genre = ({ id }) => {
|
||||
return (
|
||||
<Col xs={12} sm={6} lg={3} xl={2} className="bg-grey rounded-3 text-center p-3 m-2">
|
||||
<Link
|
||||
className="text-decoration-none text-black fs-5 font-family-Average Sans text-break w-100"
|
||||
className="text-decoration-none text-black fs-5 font-family-Average Sans text-break test"
|
||||
to={`/search/?genre=${id}`}
|
||||
>
|
||||
{genreName}
|
||||
|
||||
@ -29,4 +29,15 @@ header a{
|
||||
color: black;
|
||||
text-wrap: pretty;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
}
|
||||
.hdr-btn{
|
||||
transition: transform 100ms;
|
||||
transition: background-color 300ms;
|
||||
}
|
||||
.hdr-btn:hover{
|
||||
background-color:#2B82CF;
|
||||
& a{
|
||||
transform: scale(1.5,1.5);
|
||||
transition-duration: 100ms;
|
||||
}
|
||||
}
|
||||
|
||||
@ -55,10 +55,10 @@ const Header = () => {
|
||||
</Link>
|
||||
</Col>
|
||||
<Col xs={12} sm={6} lg={3} xl={2} className="flex-column p-0 bg-cyan">
|
||||
<div className="d-flex p-1 ps-0 justify-content-center mw-100 mh-100 text-break">
|
||||
<div className="d-flex p-1 ps-0 justify-content-center mw-100 mh-100 text-break hdr-btn">
|
||||
{first}
|
||||
</div>
|
||||
<div className="d-flex p-1 ps-0 pb-2 justify-content-center mw-100 mh-100 text-break">
|
||||
<div className="d-flex p-1 ps-0 pb-2 justify-content-center mw-100 mh-100 text-break hdr-btn">
|
||||
{second}
|
||||
</div>
|
||||
</Col>
|
||||
|
||||
@ -10,7 +10,6 @@ const MovieSearch = (search, genreFilter) => {
|
||||
expand = `${expand}&genreId=${genreFilter}&name_like=${name}`;
|
||||
}
|
||||
const data = await LinesApiService.getAll(expand);
|
||||
console.log(data);
|
||||
setMovies(data ?? []);
|
||||
};
|
||||
useEffect(() => {
|
||||
@ -20,15 +19,6 @@ const MovieSearch = (search, genreFilter) => {
|
||||
const handleSearch = async (e, setSearch) => {
|
||||
setSearch(e.target.value);
|
||||
};
|
||||
// const [searchResult, setSearchResult] = useState([]);
|
||||
// const handleSearch = async (e, setSearch) => {
|
||||
// if (e.target.value) {
|
||||
// const result = movies.filter((movie) =>
|
||||
// movie.name.toLowerCase().includes(e.target.value.toLowerCase()));
|
||||
// setSearchResult(result);
|
||||
// } else { setSearchResult(movies); }
|
||||
// setSearch(e.target.value);
|
||||
// };
|
||||
return {
|
||||
movies,
|
||||
handleSearch,
|
||||
|
||||
@ -8,14 +8,12 @@ import './SearchBar.css';
|
||||
import FilterContext from './FilterContext.jsx';
|
||||
import MovieContext from './MovieContext.jsx';
|
||||
import MovieSearch from './Search';
|
||||
import UserContext from '../users/UserContext.jsx';
|
||||
|
||||
const SearchBar = () => {
|
||||
const [search, setSearch] = useState('');
|
||||
const { genres, currentFilter, handleFilterChange } = useContext(FilterContext);
|
||||
const { movies, handleSearch } = MovieSearch(search, currentFilter);
|
||||
const { setLines } = useContext(MovieContext);
|
||||
const { currentUser } = useContext(UserContext);
|
||||
const [fav, setFav] = useState(false);
|
||||
if (window.location.pathname.includes('/favourite') && !fav) {
|
||||
setFav(true);
|
||||
|
||||
@ -28,8 +28,8 @@ const Page1 = () => {
|
||||
}
|
||||
</Row>
|
||||
</section>
|
||||
<section className="d-flex justify-content-center">
|
||||
<Row className="m-3 justify-content-evenly w-100 text-break">
|
||||
<section className="d-flex justify-content-center w-100">
|
||||
<Row className="m-3 justify-content-evenly w-100 text-break m-0">
|
||||
{
|
||||
genres.map((genre) =>
|
||||
<Genre key={genre.id}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user