some stylings changes

r-e-d-ant · Jul 14, 2022 · 66ef9f8 · 66ef9f8
1 parent 1980ab0
commit 66ef9f8
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 15 deletions.
diff --git a/public/css/style.css b/public/css/style.css
@@ -128,15 +128,21 @@ a {
     cursor: pointer;
     display: flex;
   }
-  .hero-art-nav:first-child img {
-    border: 2px solid var(--second-clr);
+  .hero-art-nav img {
+    border: 2px solid transparent;
   }
   .hero-art-nav {
     margin-right: .5rem;
     transition: 150ms transform;
   }
-  .hero-art-nav:hover {
-    transform: scale(1.04);
+  .remove-border {
+    border: 2px solid transparent;
+  }
+  .add-border {
+    border: 2px solid var(--second-clr);
+  }
+  .hero-art-nav:hover img {
+    border: 2px solid var(--second-clr);
   }
   .hero-art-nav:last-child {
     margin-right: 0;

diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx
@@ -1,15 +1,31 @@
 
+import { useEffect } from "react";
 import { useState } from "react";
 import Header from "./Header"
 
 const Hero = () => {
     const [heroImg, setHeroImg] = useState('/images/hero_img_1.png');
 
-    const handleNavImageClick = (imgUrl) => {
+    useEffect(() => {
+        const firstImg = document.querySelector('.firstImg')
+        firstImg.classList.add('add-border');
+    }, [])
+
+    const handleNavImageClick = (e, imgUrl) => {
         setHeroImg(imgUrl)
+
+        // set the active border on nav //
+
+        /* remove the border on all the siblings and add it to the target nav */
+        for (let i = 0; i < e.target.parentNode.parentNode.children.length; i++) {
+            const el = e.target.parentNode.parentNode.children[i];
+            el.firstChild.classList.remove('remove-border');
+
+        }
+        e.target.classList.add('add-border');
     }
     return ( 
-        <div>
+        <div id="hero">
             <section className="section hero-section" style={{ backgroundImage: "url("+heroImg+")" }}>
                 <Header />
                 <div className="hero-art-info-container">
@@ -20,16 +36,16 @@ const Hero = () => {
                     </div>
                     <div className="hero-art-nav-container container">
                         <div className="hero-art-nav">
-                            <img src="/images/hero_art_navs/hero_nav_img_1.png" alt="" onClick={() => handleNavImageClick('/images/hero_img_1.png')}></img>
+                            <img src="/images/hero_art_navs/hero_nav_img_1.png" alt="" className="remove-border firstImg" onClick={(e) => handleNavImageClick(e, '/images/hero_img_1.png')}></img>
                         </div>
                         <div className="hero-art-nav">
-                            <img src="/images/hero_art_navs/hero_nav_img_2.png" alt="" onClick={() => handleNavImageClick('/images/hero_img_2.png')}></img>
+                            <img src="/images/hero_art_navs/hero_nav_img_2.png" alt="" className="remove-border" onClick={(e) => handleNavImageClick(e, '/images/hero_img_2.png')}></img>
                         </div>
                         <div className="hero-art-nav">
-                            <img src="/images/hero_art_navs/hero_nav_img_3.png" alt="" onClick={() => handleNavImageClick('/images/hero_img_3.png')}></img>
+                            <img src="/images/hero_art_navs/hero_nav_img_3.png" alt="" className="remove-border" onClick={(e) => handleNavImageClick(e, '/images/hero_img_3.png')}></img>
                         </div>
                         <div className="hero-art-nav">
-                            <img src="/images/hero_art_navs/hero_nav_img_4.png" alt="" onClick={() => handleNavImageClick('/images/hero_img_4.png')}></img>
+                            <img src="/images/hero_art_navs/hero_nav_img_4.png" alt="" className="remove-border" onClick={(e) => handleNavImageClick(e, '/images/hero_img_4.png')}></img>
                         </div>
                     </div>
                 </div>

diff --git a/src/routes/CollectionsPage.jsx b/src/routes/CollectionsPage.jsx
@@ -7,23 +7,30 @@ const CollectionsPage = () => {
     const [page, setPage] = useState(1);
     const {data: arts, isPending, error} = useFetch(`https://api.artic.edu/api/v1/artworks?page=${page}&limit=20&fields=id,api_link,title,artist_title,image_id,artist_display,publication_history,place_of_origin,date_display`);
 
-    const goToTop = () => {
+    // go to the top of the page everytime when going on this route
+    window.scroll({
+        top: 0, 
+        left: 0,
+        behavior: 'smooth'
+    })
+
+    const goToGalleryTop = () => {
         // function to scroll at the top
         window.scroll({
             top: 700, 
             left: 0, 
-            behavior: 'smooth' 
+            behavior: 'smooth'
         })
     }
     const nextPage = () => {
         // go to next page
-        goToTop();
+        goToGalleryTop();
         setPage(page + 1);
     }
 
     const prevPage = () => {
         // go to previous page
-        goToTop();
+        goToGalleryTop();
         setPage(page - 1);
     }
 

diff --git a/src/routes/Home.jsx b/src/routes/Home.jsx
@@ -53,7 +53,7 @@ const Home = () => {
                 <div className="call-to-see-collections-container">
                     <div className="container call-to-see-collections">
                         <h3 className="call-txt">Explore thousands of artworks in the museum’s collection—from our renowned icons to lesser-known works from every corner of the globe</h3>
-                        <Link to={'/collections'} className="btn btn-call-collections" onClick={window.scroll({top: 700, left: 0, behavior: 'smooth' })}>See all of the Collections</Link>
+                        <Link to={'/collections'} className="btn btn-call-collections">See all of the Collections</Link>
                     </div>
                 </div>
             </section>