Merge pull request 'Жесть с гитом + анимация картиночек' (#2) from master into new-features

Reviewed-on: http://student.git.athene.tech/Marselchii/PIbd-21_Sagirov_M.M._Internet_Programming/pulls/2

lab5/package-lock.json

@@ -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",

lab5/src/components/filmLogo/FilmLogo.css

@@ -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;
+        }
+     }

lab5/src/components/filmLogo/FilmLogo.jsx

@@ -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>
         );

lab5/src/components/genre/Genre.css

@@ -1,3 +1,9 @@
 .bg-grey{
         background-color: #D9D9D9;
-    }
+    }
+.test{
+    display: block;
+    width: 100%;
+    text-decoration: none;
+    background-color: #D9D9D9;
+}

lab5/src/components/genre/Genre.jsx

@@ -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}

lab5/src/components/header/Header.css

@@ -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;
+        }
+}

lab5/src/components/header/Header.jsx

@@ -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>

lab5/src/components/searchbar/Search.js

@@ -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,

lab5/src/components/searchbar/SearchBar.jsx

@@ -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);

lab5/src/pages/Page1.jsx

@@ -28,8 +28,8 @@ const Page1 = () => {
         }
     </Row>
   </section>
-  <section className="d-flex justify-content-center">
+  <section className="d-flex justify-content-center w-100">
-    <Row className="m-3 justify-content-evenly w-100 text-break">
+    <Row className="m-3 justify-content-evenly w-100 text-break m-0">
         {
         genres.map((genre) =>
                 <Genre key={genre.id}