fix(*): updated responsiveness

HoseaCodes · Mar 26, 2022 · a3f5e06 · a3f5e06
1 parent 6648ab7
commit a3f5e06
Show file tree

Hide file tree

Showing 13 changed files with 81 additions and 34 deletions.
diff --git a/src/Components/Article/RelatedPosts.jsx b/src/Components/Article/RelatedPosts.jsx
@@ -7,14 +7,20 @@ import {NamePlate} from '../../Layout/Text/styledText';
 import {MarginTop} from '../../Layout/Margin/styledMargin';
 import {ArticleMainHr} from '../../Layout/Hr/styledHr';
 import {ReadMore} from '../../Layout/Button/styledButton';
+import { Link } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 
 const RelatedPosts = (props) => {
 
   const {timeFormater, readTime} = props;
   const articles = props.articles;
   const user = props.user;
   const recentPosts = articles.slice(0, 4)
+  const history = useHistory()
 
+  const handleReadMore = async () => {
+      history.push('/blog')
+}
   return (
           <MarginTop Whitesmoke>
             {recentPosts.map(article => {
@@ -28,10 +34,12 @@ const RelatedPosts = (props) => {
                                 <span>&nbsp;&#183;&nbsp;</span>
                                 <GrayDiv>{timeFormater}</GrayDiv>
                               </AlignContent>
-                              <AlignContent>
+                              <AlignContent Column>
                                 <div style={{marginRight: '1rem'}}>
-                                  <h4>{articles.title || "No Code Approach — Process Speech and convert to Text — Logic Apps"}</h4>
-                                  <p  style={{width: '80%'}}> {articles.description || "Using Azure Cognitive Services Speech to Text and Logic apps No Code — Workflow style We can re use the same pattern for other Azure Cognitive..."}
+                                <Link to={`/blog/${article.id}`} rel="noopener noreferrer">
+                                  <h4>{article.title || "No Code Approach — Process Speech and convert to Text — Logic Apps"}</h4>
+                                </Link>
+                                  <p  style={{width: '80%'}}> {article.description || "Using Azure Cognitive Services Speech to Text and Logic apps No Code — Workflow style We can re use the same pattern for other Azure Cognitive..."}
                                   </p>
                                 </div>
                                 <img height={'250rem'} width={'450rem'} src={article.images.url|| "https://tateeda.com/wp-content/uploads/2020/05/2.png"} alt="post"/>
@@ -49,7 +57,7 @@ const RelatedPosts = (props) => {
                           )
                         })}
             <AlignContent CenterBtn>
-              <ReadMore>Read more from me</ReadMore>
+              <ReadMore onClick={handleReadMore}>Read more from me</ReadMore>
             </AlignContent>
           </MarginTop>
   )

diff --git a/src/Components/Article/RightColumn.jsx b/src/Components/Article/RightColumn.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useContext} from 'react';
 import {PageLinks, StyledRightContainer, AlignContent, SideUserContainer,
   PostContainer} from '../../Layout/Container/styledArticle';
 import {SquareImage, CircleImage} from '../../Layout/Image/styledImage';
@@ -9,18 +9,32 @@ import {MdBookmarkBorder} from 'react-icons/md';
 import { MarginTop } from '../../Layout/Margin/styledMargin';
 import { ArticleInput } from '../../Layout/Input/styledInput';
 import { Link } from 'react-router-dom';
-
+import { useHistory } from 'react-router-dom';
+import { GlobalState } from '../../GlobalState';
 
 const RightColumn = ({user, articles}) => {
 
+  const recentPosts = articles.slice(0, 5);
+  const history = useHistory();
+  const state = useContext(GlobalState);
+  const [isLoggedIn] = state.userAPI.isLoggedIn
 
-  const recentPosts = articles.slice(0, 5)
   console.log(user)
+
+  const handleClick= async (e) => {
+    history.push(`/${e}`)
+  }
   return (
           <StyledRightContainer>
             <AlignContent Center>
-              <ArticleBtn RightColumn >Get Started</ArticleBtn>
-              <ArticleLinkColor Green href='#'>Sign In</ArticleLinkColor>
+              {!isLoggedIn ?
+              <>
+                <ArticleBtn RightColumn onClick={() => handleClick('register')} >Get Started</ArticleBtn>
+                <ArticleLinkColor Green href='/login'>Sign In</ArticleLinkColor>
+              </>
+              :
+                <h2>Welcome, {user.name.split(' ')[0]}</h2>
+              }
             </AlignContent>
                 <MarginTop RightCloumnSearch>
                   <ArticleInput Search placeholder='Search' type="text"/>

diff --git a/src/Components/Footer/Footer.css b/src/Components/Footer/Footer.css
@@ -103,6 +103,16 @@ footer p {
   margin-left: 50px;
 }
 
+@media only screen and (min-device-width: 375px) and (max-device-width: 1180px) {
+  .twitter-footer {
+    display: none;
+  }
+
+  .social_footer_ul {
+    margin-left: 10% !important;
+  }
+}
+
 @media only screen and (max-width: 480px) {
   .dompl {
     margin: 0%;

diff --git a/src/Components/NavBar/NavBar.css b/src/Components/NavBar/NavBar.css
@@ -78,7 +78,8 @@
     height: 8vh;
     background-color: #1a1e23;
   }
-  .nav-logo {
+  .nav-logo,
+  .nav-title {
     display: none;
   }
   .nav-link {

diff --git a/src/Components/NavBar/NavBar.jsx b/src/Components/NavBar/NavBar.jsx
@@ -133,7 +133,7 @@ const NavBar = () => {
                     <img className='nav-logo' src={Logo} alt="HoseaCodes" />
                   </Link>
                   :
-                  <h1 style={{color: 'white'}}>Welcome, {user.name.split(' ')[0]}</h1>
+                  <h1 className='nav-title' style={{color: 'white'}}>Welcome, {user.name.split(' ')[0]}</h1>
                 }
                 <ul className={`left-nav ${isActive ? "" : "left-nav open"}`}>
                     {isAdmin && adminRouter()}

diff --git a/src/Components/NavBar/SideBar.jsx b/src/Components/NavBar/SideBar.jsx
@@ -36,7 +36,9 @@ const SideBar = () => {
     return (
       <StyledLeftContainer>
         <JustifyContent >
-          <LogoImage src={logo} alt="logo"/>
+          <Link to="/">
+            <LogoImage src={logo} alt="logo"/>
+          </Link>
         </JustifyContent>
         <StackedAlignn >
           <Link to="/"><BsHouseDoor style={{marginBottom: '5rem'}}/></Link>

diff --git a/src/Layout/Card/styledCard.jsx b/src/Layout/Card/styledCard.jsx
@@ -188,6 +188,9 @@ export const CardTitle = styled.h3`
   margin-top: 0;
   padding-top: 0;
   padding-bottom: 0;
+  @media only screen and (min-device-width: 375px) and (max-device-width: 1180px) {
+    font-size: 3.5rem;
+  }
 `;
 
 export const CardSubtitle = styled.h5`

diff --git a/src/Layout/Container/styledArticle.jsx b/src/Layout/Container/styledArticle.jsx
@@ -78,6 +78,10 @@ export const AlignContent = styled.div`
   ${props => props.Gray && css`
   color: dimgray;
 `}
+  ${props => props.Column && css`
+  @media only screen and (min-device-width: 375px) and (max-device-width: 1180px) {
+    flex-direction: column;
+  }`}
 `;
 
 export const Tag = styled.div`

diff --git a/src/Layout/Text/styledText.jsx b/src/Layout/Text/styledText.jsx
@@ -62,6 +62,9 @@ export const BlogTitle= styled.h2`
   font-size: 6rem;
   ${props => props.Green && css`
   `}
+  @media only screen and (min-device-width: 375px) and (max-device-width: 1180px) {
+    font-size: 4rem;
+  }
 `;
 
 export const Subtitle= styled.h6`

diff --git a/src/Pages/Articles/ArticleCard.jsx b/src/Pages/Articles/ArticleCard.jsx
@@ -35,7 +35,7 @@ const ArticleItem = (props) => {
                         <h2 className='article-card-header' >{title}</h2>
                     </Link>
                     <p className="article-card-meta"><span>1 &nbsp;<VisibilityIcon /> &nbsp;</span>{timeFormater}</p>
-                    <p className="work-content">{description}</p>
+                    <p className="work-content">{props.truncate(description)}</p>
                     <br />
                     {/* <div>{ReactHtmlParser(sanitizedHtml)}</div> */}
 

diff --git a/src/Pages/Articles/Articles.css b/src/Pages/Articles/Articles.css
@@ -33,6 +33,7 @@
   font-weight: bold;
   opacity: 0.5;
   text-decoration: none;
+  padding: 2%;
 }
 
 #tabs .nav-tabs .nav-link {
@@ -45,7 +46,6 @@
 
 .blog-tabs {
   display: flex;
-  justify-content: space-between;
 }
 
 .nav-item .nav-link {
@@ -108,6 +108,7 @@
   align-items: center;
   justify-content: center;
   text-align: center;
+  width: 100%;
 }
 
 .article-category-container {
@@ -149,12 +150,6 @@
   font-family: var(--main-font-family);
   cursor: pointer;
 }
-.work-content {
-  text-overflow: ellipsis;
-  height: 20vh;
-  overflow: hidden;
-  font-size: 3rem !important;
-}
 
 .article-line {
   background-color: lightgray;
@@ -174,7 +169,7 @@
   cursor: pointer;
   display: flex;
   flex-direction: column;
-  width: 50%;
+  width: 80%;
   height: 55%;
   border-radius: 12px;
 }
@@ -188,7 +183,7 @@
 
 .article-card-header {
   color: white;
-  font-size: 4rem !important;
+  font-size: 4rem;
   text-decoration: none;
 }
 
@@ -303,7 +298,7 @@
 
 .article-img {
   width: 100%;
-  height: 40rem;
+  height: 100%;
   object-fit: fill;
   border-radius: 12px;
 }
@@ -463,7 +458,17 @@
 .blog-categories h6 {
   text-transform: uppercase;
 }
+@media only screen and (min-device-width: 375px) and (max-device-width: 1180px) {
+  .popular,
+  .subscribe-container,
+  .article-sidebar-container {
+    display: none !important;
+  }
 
+  .article-box {
+    grid-template-columns: 1fr;
+  }
+}
 @media only screen and (max-width: 768px) {
   .article-sidebar {
     display: none;
@@ -480,12 +485,6 @@
   .article-box {
     padding: 8%;
   }
-  .article-card-header {
-    font-size: 3rem !important;
-  }
-  .work-content {
-    font-size: 2rem !important;
-  }
 
   .article-header,
   .blog-tabs,

diff --git a/src/Pages/Articles/Articles.jsx b/src/Pages/Articles/Articles.jsx
@@ -39,7 +39,10 @@ const Articles = () => {
     });
 
     const currentPosts = mainPosts.slice(indexOfFirstPost, indexOfLastPost)
-
+    const popularPosts = mainPosts.slice(indexOfLastPost, mainPosts.length)
+    const truncate = (str) => {
+      return str.length > 10 ? str.substring(0, 150) + "..." : str;
+  }
     const paginate = pageNum => setCurrentPage(pageNum);
     const nextPage = () => {
         if (currentPage > articles.length) return;
@@ -198,7 +201,7 @@ const Articles = () => {
                           <section className='articleList'>
                             {taggedArticles.map(article => {
                                 return (
-                                    <ArticleCard archiveArticle={archiveArticle} deleteArticle={deleteArticle} handleCheck={mainPosts} article={article}
+                                    <ArticleCard truncate={truncate} archiveArticle={archiveArticle} deleteArticle={deleteArticle} handleCheck={mainPosts} article={article}
                                         key={article.id}
                                     />
                                 )
@@ -207,12 +210,12 @@ const Articles = () => {
                             postsPerPage={postsPerPage} totalPosts={mainPosts.length} />
                         </section>
                       }
-                        <div>
+                        <div className='article-sidebar-container'>
                             <section className='article-sidebar'>
                                 <div className="popular">
                                     <h2 className='article-card-header'>Popular Post</h2>
                                     <section className='popular-articles'>
-                                        {mainPosts.map(article => {
+                                        {popularPosts.map(article => {
                                             return (
                                                 <a key={article.id} href={`/blog/${article.id}`} target="_blank"rel="noopener noreferrer" >
                                                     <div className="popular-link">{article.title}</div><br /></a>

diff --git a/src/Pages/Auth/register.jsx b/src/Pages/Auth/register.jsx
@@ -42,7 +42,7 @@ const Register = () => {
 	return (
 		<div id="login-page-container">
 			<div className="login-page">
-        <img onClick={updateRole} className="brand" src={Logo} alt="brand-name" />
+        <img onClick={updateRole}  src={Logo} alt="brand-name" />
 				<form onSubmit={registerSubmit}>
 					<h2>Registration</h2>
 					<label htmlFor="name">Name</label>