From a8761014776edf4e80df3539349cc9b5a3d897a6 Mon Sep 17 00:00:00 2001
From: hosead6168 <dominique11h@yahoo.com>
Date: Thu, 16 Dec 2021 19:08:50 -0600
Subject: [PATCH] fix(*): adj responsiveness

---
 src/Components/Form/Contact.css        |  13 ++-
 src/Components/Form/ContactForm.jsx    |   1 -
 src/Components/Timeline/timeline.css   | 122 ++++++-------------------
 src/Pages/Articles/Article/Article.jsx |   4 +-
 src/Pages/Articles/Articles.css        |  32 ++++++-
 src/Pages/Articles/Articles.jsx        | 108 +++++++++-------------
 6 files changed, 112 insertions(+), 168 deletions(-)

diff --git a/src/Components/Form/Contact.css b/src/Components/Form/Contact.css
index 85ab4003..d0cd9871 100755
--- a/src/Components/Form/Contact.css
+++ b/src/Components/Form/Contact.css
@@ -47,21 +47,30 @@
   opacity: 0.6;
 }
 
-@media only screen and (min-width: 768px) {
+@media only screen and (max-width: 768px) {
+  .contact-container form {
+    width: 80% !important;
+  }
   .contact-container {
-    width: 100%;
+    height: 30vh;
   }
 }
 @media only screen and (max-width: 480px) {
   .contact-container {
     width: 100vw;
   }
+  .contact-container p {
+    width: 80%;
+  }
   .contact-container .contact-input {
     width: 170%;
   }
   .contact-container textarea {
     width: 170%;
   }
+  .contact-container {
+    height: 40vh;
+  }
 }
 /* @media only screen and (min-width: 480px) {
     .contact-container {
diff --git a/src/Components/Form/ContactForm.jsx b/src/Components/Form/ContactForm.jsx
index 532b8c1f..bbf724b1 100755
--- a/src/Components/Form/ContactForm.jsx
+++ b/src/Components/Form/ContactForm.jsx
@@ -31,7 +31,6 @@ const ContactForm = () => {
                 <input className='contact-input' type="text" name="name" placeholder="Name" />
                 <input className='contact-input' type="email" name="email" placeholder="Enter Email" />
                 <textarea className='area' name="message" placeholder='Your Message' />
-                <div style={{color: 'white', fontSize: '2rem'}}  onClick={handleNotification}>Test</div>
                 <StyledFormSubmit  onClick={handleNotification} type="submit" value="Submit"/>
             </form>
         </div>
diff --git a/src/Components/Timeline/timeline.css b/src/Components/Timeline/timeline.css
index edb62d43..10baed86 100644
--- a/src/Components/Timeline/timeline.css
+++ b/src/Components/Timeline/timeline.css
@@ -31,9 +31,9 @@
 .left {
   margin-left: 4rem;
 }
-*/
-  /* Place the container to the left */
-  .left {
+
+/* Place the container to the left */
+.left {
   left: 0%;
 }
 
@@ -61,76 +61,22 @@
 }
 
 /* Media queries - Responsive timeline on screens less than 600px wide */
-@media only screen and (max-width: 480px) {
-  /* Logo  */
-  .imageHiglights {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    margin-top: 0px;
-  }
-  .middleHightlights {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 90%;
-    line-height: 1;
-    margin-top: 20px;
-  }
-  .a-content {
-    color: black;
-    width: 100%;
-    font-size: 1.5rem;
-    text-align: center;
-    line-height: 30px;
-  }
-
-  .middleHightlights h2 {
-    font-size: 2.1em;
-    text-align: center;
-  }
-  .breakdown {
-    width: 90%;
-    font-size: 1.2em;
-  }
-  .rightHighlights,
-  .leftHighlights {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
+@media only screen and (max-width: 768px) {
+  .about-container {
     width: 100%;
-    height: 60%;
   }
-  /* Logo End */
-
-  /*Timeline  */
-
-  .timeline {
-    margin: 0;
+  .content {
     width: 100%;
+    padding: 60px 0px;
   }
-
-  .timelineP {
-    font-size: 1.2em;
-  }
-
   /* The timeline line and bullet points */
   .timeline::after {
     display: none;
   }
 
-  /* Container around content */
-  .container {
-    padding: 10px 40px;
-    position: relative;
-    width: 100%;
-  }
-
   /* Place the container to the left */
   .left {
-    left: 0;
+    margin-left: 0;
   }
 
   /* Place the container to the right */
@@ -148,49 +94,35 @@
   .about-container::after {
     display: none;
   }
-  /* About  */
-  .about {
+  .content {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    margin: 0;
-    padding-top: 50px;
-    background-color: #1a1e23;
-  }
-  .about-container {
-    width: 80%;
   }
-
-  .aboutHeader {
+  .timelineP {
     font-size: 2.5rem;
-    margin-bottom: 10px;
-    text-align: center;
-    color: white;
+    line-height: 1.4;
   }
-  .aboutImage {
-    width: 100%;
-    height: 50vh;
+  .content h2 {
+    font-size: 3rem;
+  }
+}
+
+@media only screen and (max-width: 480px) {
+  .timelineP {
+    font-size: 2rem;
   }
-  .aboutP {
-    font-size: 1.5rem;
-    color: white;
-    text-align: center;
+  .content {
+    padding: 20px 20px;
   }
-  .leftAbout {
-    margin: 0;
-    font-family: "Times New Roman", Times, serif;
-    line-height: 2;
+  .content h2 {
+    font-size: 2.3rem;
   }
-  .rightAbout {
-    opacity: 0.7;
-    margin: 0;
+  .left {
+    margin-left: 0;
   }
-
-  .content {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
+  .right {
+    left: 0;
   }
 }
diff --git a/src/Pages/Articles/Article/Article.jsx b/src/Pages/Articles/Article/Article.jsx
index 6da7201c..5f8493ec 100755
--- a/src/Pages/Articles/Article/Article.jsx
+++ b/src/Pages/Articles/Article/Article.jsx
@@ -1,5 +1,5 @@
 import React, { useContext, useState, useEffect } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams, Link } from 'react-router-dom';
 import { GlobalState } from '../../../GlobalState';
 import '../Articles.css'
 import PermIdentityIcon from '@material-ui/icons/PermIdentity';
@@ -58,6 +58,7 @@ const ArticleItem = () => {
                                     <br />
                                     <p className='blog-content-info'  dangerouslySetInnerHTML={{ __html: marked(markdown) }}></p>
                                     <br />
+                                    <Link to='/blog'>Back</Link>
                                 </section>
                                 {/* <input type="checkbox" checked={checked}
                                     onChange={() => props.handleCheck(_id)} /> */}
@@ -67,7 +68,6 @@ const ArticleItem = () => {
                     </div>
                 </article>
             </main>
-            <hr style={{ background: 'rgb(235,183,65)', width: '100%' }} />
         </>
     )
 }
diff --git a/src/Pages/Articles/Articles.css b/src/Pages/Articles/Articles.css
index 1bcc810d..ef99c802 100755
--- a/src/Pages/Articles/Articles.css
+++ b/src/Pages/Articles/Articles.css
@@ -69,7 +69,7 @@
   grid-template-columns: 3fr 1fr;
   grid-column-gap: 2rem;
   margin-top: 5rem;
-  padding-bottom: 10%;
+  padding: 0% 4% 10% 4%;
 }
 
 .article-header {
@@ -464,3 +464,33 @@
 .blog-categories h6 {
   text-transform: uppercase;
 }
+
+@media only screen and (max-width: 768px) {
+  .article-sidebar {
+    display: none;
+  }
+  .article-box {
+    grid-template-columns: 1fr;
+    padding: 4%;
+  }
+  .article-card {
+    display: block;
+  }
+}
+@media only screen and (max-width: 480px) {
+  .article-box {
+    padding: 8%;
+  }
+  .article-card-header {
+    font-size: 3rem !important;
+  }
+  .work-content {
+    font-size: 2rem !important;
+  }
+
+  .article-header,
+  .blog-tabs,
+  #tabs {
+    display: none;
+  }
+}
diff --git a/src/Pages/Articles/Articles.jsx b/src/Pages/Articles/Articles.jsx
index 168eff93..7e80d9aa 100755
--- a/src/Pages/Articles/Articles.jsx
+++ b/src/Pages/Articles/Articles.jsx
@@ -1,12 +1,12 @@
 
-import React, { useState, useContext } from 'react';
+import React, { useState, useContext, useEffect } from 'react';
 import './Articles.css'
 import Subscribe from '../../Components/Subscribe/Subscribe'
-// import { articleData, categoryTags } from './ArticleData';
 import ArticleCard from './ArticleCard';
 // import { auth, login, logout } from '../../services/firebase';
 import { GlobalState } from '../../GlobalState';
-import Loading from '../../Loading';
+// import Loading from '../../Loading';
+import SkeletonBlog from '../../Components/Skeleton/skeletonBlog';
 import axios from 'axios';
 import Pagination from '../../Components/Pagination/pagination';
 import { StyledHr } from '../../Layout/Hr/styledHr';
@@ -18,7 +18,7 @@ const Articles = () => {
     // const [token] = state.token
     const [callback, setCallback] = state.articlesAPI.callback
     const [loading, setLoading] = useState(false)
-    // const [tagsShow, setTagsShow] = useState('All')
+    const [tagsShow, setTagsShow] = useState('All')
     const [search, setSearch] = useState('')
     const [status, setStatus] = useState('active')
     const [currentPage, setCurrentPage] = useState(1)
@@ -28,16 +28,14 @@ const Articles = () => {
     const indexOfFirstPost = indexOfLastPost - postsPerPage;
     const mainPosts = articles
     const archivedPosts = [];
+
     mainPosts.map((article) => {
       if (article.archived) {
         archivedPosts.push(article);
         mainPosts.pop(article)
       }
-    })
-    console.log(state, 'state')
-    console.log(articles, 'articles')
-    console.log(mainPosts, 'main')
-    console.log(archivedPosts, 'archivedPosts')
+    });
+
     const currentPosts = mainPosts.slice(indexOfFirstPost, indexOfLastPost)
 
     const paginate = pageNum => setCurrentPage(pageNum);
@@ -68,7 +66,6 @@ const Articles = () => {
 
     const archiveArticle = async (id, archived) => {
         try {
-          console.log('clicks')
           const archive = !archived
             setLoading(true)
             const archiveArticle = axios.patch(`/api/articles/${id}`, {archive})
@@ -100,69 +97,38 @@ const Articles = () => {
         setSearch(value.substr(0, 20))
     }
 
-    const updateItemsShow = (/*str*/) => {
-        // setTagsShow(str)
+    const updateItemsShow = (str) => {
+        setTagsShow(str)
         setStatus("active")
     }
 
-    // let taggedArticles = []
-    // if (tagsShow === "All") {
-    //     taggedArticles = filteredArticles
-    // }
-    // else if (tagsShow === "JavaScript") {
-    //     taggedArticles = filteredArticles.filter(item => item.type.includes("JavaScript"))
-    // }
-    // else if (tagsShow === "Python") {
-    //     taggedArticles = filteredArticles.filter(item => item.type.includes("Python"))
-    // }
-    // else if (tagsShow === "Software Engineer") {
-    //     taggedArticles = filteredArticles.filter(item => item.type.includes("Software Engineer"))
-    // }
+    let taggedArticles = []
+    if (tagsShow === "All") {
+        taggedArticles = currentPosts
+    }
+    else if (tagsShow === "JavaScript") {
+        taggedArticles = currentPosts.filter(item => item.category.includes("JavaScript"))
+    }
+    else if (tagsShow === "Python") {
+        taggedArticles = currentPosts.filter(item => item.category.includes("Python"))
+    }
+    else if (tagsShow === "Software Engineer") {
+        taggedArticles = currentPosts.filter(item => item.category.includes("Software Engineer"))
+    }
 
     // Load this effect on mount
-    // useEffect(() => {
-    //   setLoading(true);
-    //   const timer = setTimeout(() => {
-    //       setLoading(false);
-    //   }, 5000);
-    //   // Cancel the timer while unmounting
-    //   return () => clearTimeout(timer);
-
-    //   // eslint-disable-next-line react-hooks/exhaustive-deps
-
-    // }, []);
-
-    if (loading) return <div className="products"><Loading /></div>
+    useEffect(() => {
+      setLoading(true);
+      const timer = setTimeout(() => {
+          setLoading(false);
+      }, 5000);
+      // Cancel the timer while unmounting
+      return () => clearTimeout(timer);
+    }, []);
+
+    // if (loading) return <div className="products"><Loading /></div>
     return (
         <>
-        {loading && (
-                    <div class="row display-row">
-                        <SkeletonCard/>
-                        <SkeletonCard/>
-                        <SkeletonCard/>
-                    </div>
-                )}
-                 {!loading && (
-                   <User/>
-                   )}
-                   {/*
-                </div>
-                <hr class="featurette-divider"/>
-                <div class="row ">
-                    <p className="display-row"><a class="btn btn-secondary" href="/create">Add Demo Profile &raquo;</a></p>
-                </div>
-                <hr class="featurette-divider"/>
-                <h2 className="text-center">Unregistered *Demo* Users</h2>
-                <div class="row display-row">
-              */}
-                    {loading && (
-                        <div class="row display-row">
-                            <SkeletonCard/>
-                        </div>
-                    )}
-                    {!loading && (
-                        <UnregisteredUsers/>
-                    )}
             <div className='article-container'>
                 <div className='article-header'>
                     <div className='artcile-header-logo'>
@@ -219,8 +185,15 @@ const Articles = () => {
                             </div>
                         </section>
                         {/* <!--───────────────card───────────────--> */}
+                        {loading ?
                         <section className='articleList'>
-                            {mainPosts.map(article => {
+                          <SkeletonBlog/>
+                          <SkeletonBlog/>
+                          <SkeletonBlog/>
+                        </section>
+                        :
+                          <section className='articleList'>
+                            {taggedArticles.map(article => {
                                 return (
                                     <ArticleCard archiveArticle={archiveArticle} deleteArticle={deleteArticle} handleCheck={mainPosts} article={article}
                                         key={article.id}
@@ -230,6 +203,7 @@ const Articles = () => {
                             <Pagination currentPage={currentPage} paginate={paginate} nextPage={nextPage} prevPage={prevPage}
                             postsPerPage={postsPerPage} totalPosts={mainPosts.length} />
                         </section>
+                      }
                         <div>
                             <section className='article-sidebar'>
                                 <div className="popular">