From fcfb321741f2847cbdcde37e72955110579dbd2b Mon Sep 17 00:00:00 2001 From: VinayMatta63 Date: Fri, 14 May 2021 14:40:10 +0530 Subject: [PATCH 1/4] Routing fix --- src/Blogs/Blog.module.css | 429 ---------------------- src/containers/Blogs/Blog.module.css | 405 ++++++++++++++++++++ src/{ => containers}/Blogs/BlogCard.jsx | 271 ++++++++------ src/{ => containers}/Blogs/BlogData.jsx | 5 +- src/{ => containers}/Blogs/SingleBlog.jsx | 0 src/{ => containers}/Blogs/index.jsx | 0 src/routes/index.jsx | 71 ++-- 7 files changed, 602 insertions(+), 579 deletions(-) delete mode 100644 src/Blogs/Blog.module.css create mode 100644 src/containers/Blogs/Blog.module.css rename src/{ => containers}/Blogs/BlogCard.jsx (59%) rename src/{ => containers}/Blogs/BlogData.jsx (93%) rename src/{ => containers}/Blogs/SingleBlog.jsx (100%) rename src/{ => containers}/Blogs/index.jsx (100%) diff --git a/src/Blogs/Blog.module.css b/src/Blogs/Blog.module.css deleted file mode 100644 index 8b87a2e..0000000 --- a/src/Blogs/Blog.module.css +++ /dev/null @@ -1,429 +0,0 @@ - -.InnoHeading{ - font-weight: 500; - border-left: 4px solid #e2e8f0; - padding-left: 20px; - margin: 20px 0 30px 7px; -} -.CatHeading{ - font-weight: 500; - margin: 20px 0 30px 7px; -} -.innoBlogBox{ - box-sizing: border-box; - margin: 0; - min-width: 0; - width: 100%; - max-width: 1140px; - margin-left: auto; - margin-right: auto; - padding-left: 1rem; - padding-right: 1rem; -} -.blogBoxInner{ - display: flex; - - flex-wrap: wrap; - - justify-content: center; - margin: -0.5rem; -} -.blogCard{ - min-width: 18rem; - max-width: 340px; - flex-grow: 1; - float:left; - padding: 8px; -} -.SingleRight .blogCard{ - min-width: 21rem; - max-width: 340px; - -} -.SingleblogCard{ - padding: 8px; -} -/* .SingleblogCard .insideCard{ - box-shadow: 0px 2px 4px rgb(46, 41 ,51, 0.08), 0px 5px 10px rgb(71, 63 ,79 , 0.16); -} */ -.SingleblogCard .insideCard:hover, .SingleRight .insideCard:hover{ - transform: none !important; - box-shadow: none !important; -} -.insideCard{ - border-radius: 16px; - transition: transform 250ms ease, box-shadow 250ms ease, color 250ms ease; - box-shadow: 1px 1px 5px 0 rgb(1 ,1, 1 ,0.05); - overflow: hidden; - height: 100%; - background:#fff; -} -.insideCard:hover -{ - transform: translateY(-0.25rem); - box-shadow: 0px 2px 4px rgb(46, 41 ,51, 0.08), 0px 5px 10px rgb(71, 63 ,79 , 0.16); -} -.cardArticle{ - box-sizing: border-box; - margin: 0; - min-width: 0; - align-items: stretch; - height: 100%; - flex-direction: row; - display: flex; -} -.innerContent{ - margin: 0; - display: flex; - flex-direction: column; - justify-content: center; - flex: 1 1; - padding: 30px; -} -.cardCategory{ - box-sizing: border-box; - margin: 0; - min-width: 0; - display: inline-block; - margin-bottom: 1rem; -} -.cardCategoryLink{ - font-size: 13px; - padding: 0.15rem 1rem 0.25rem 1rem; - border-radius: 0.5rem; - border: 1px solid #0e95d4; - color: #fff; - text-decoration: none; - font-weight: 600; - vertical-align: middle; - transition: all 250ms ease; - background-color: #0e95d4; -} -.cardCategoryLink:hover -{ - background-color:#718096; - border: 1px solid #718096; -} -.blogName{ - display: block; - color: #2d3748; - font-weight: 700; - text-decoration: none; - margin-bottom: 1rem; - font-size: 1.25rem; - -} -.blogContent{ - color: #718096; - font-size: 14px; - line-height: 22px; - margin-bottom: 16px; -} -.profileBox{ - font-size: 14px; - display: flex; - align-items: center; -} -.profileImg{ - margin: 0; - width: 50px; - height: 50px; - border-radius: 25px; - overflow: hidden; - margin-right: 16px; -} -.SingleRight .profileImg{ - margin: auto; - width: 100px; - - height: 100px; - border-radius: 50px; - overflow: hidden; - -} -.SingleRight .profileBox{ - display: block; -} -.SingleRight .profileInfoBox{ - font-size: 15px; - margin: auto; - display: table; - margin-top: 20px; - color: #000; -} -.profileInfoBox{ - margin: 0; - min-width: 0; - flex: 1 1; - flex-wrap: wrap; - justify-content: space-between; - color: #a0aec0; - line-height: 22px; - display: inline-block; -} -.Blogdate{ - font-size: 12px; - color: #a0aec0; - line-height: 22px; -} -.CategoryList{ - box-sizing: border-box; -} -.categoryLinklist -{ - - - display: inline-block; - text-align: center; - line-height: inherit; - - text-decoration: none; - font-size: inherit; - - color: #718096; - - border: 0; - border-radius: 4px; - background-color: #fff; - border-radius: 1rem; - - transition: transform 250ms ease, box-shadow 250ms ease, color 250ms ease; - box-shadow: 1px 1px 5px 0 rgba(1,1,1,0.05); - - display: flex; - - align-items: center; - text-align: initial; - overflow: hidden; - margin-bottom: 1rem; - -} -.categoryLinklist:hover div:first-of-type -{ - background-color:#0e95d4; - color:#fff -} -.categoryLinkIcon -{ - box-sizing: border-box; - margin: 0; - min-width: 0; - - display: flex; - - transition: all 250ms ease; - - align-items: center; - - justify-content: center; - - align-self: stretch; - background-color: #e2e8f0; - width: 70px; -} -.categorylistName -{ - font-size: 16px; - line-height: 21px; - font-weight: bold; - display: block; - color:#718096; - text-decoration: none; - margin-bottom: 1rem; - - - flex: auto; - - white-space: nowrap; - padding: 1rem; - margin: 0; -} -.BlogContainer{ - background-color: #f8f8f8; - padding:80px 0; -} -.topPick{ - background-image: url('../assets/blogBackground.png'); - /* opacity: 0.05; */ - background-position: center; - background-repeat: repeat; - padding: 80px 0; -} -.topHeading{ - color:#718096; - line-height: 32px; - text-align: center; - margin-bottom: 30px; -} -.ToppickBox{ - min-width: 80%; - max-width: 380px; - - flex-grow: 1; - padding: 8px; - -} -.topSingle{ - - transition: transform 250ms ease, box-shadow 250ms ease, color 250ms ease; - box-shadow: 1px 1px 5px 0 rgba(1,1,1,0.05); - overflow: hidden; - height: 100%; - background-color: transparent; - border-radius: 16px; - -} -.innerTop{ - - - align-items: stretch; - height: 100%; - - flex-direction: row; - position: relative; - - display: flex; -} -.topLink{ - - color: #0e95d4; - - text-decoration: none; - text-align: center; - position: relative; - display: block; -} -.imgTop{ - height: 100%; - vertical-align: middle; - min-height: 241px; - max-height: 470px; - background-color: transparent; -} -.imgWrap{ - - color: #0e95d4; - - text-decoration: none; - - - flex-basis: 100%; - margin: 0; - - text-align: center; - position: relative; - display: block; -} -.backtopImg{ - max-width: 100%; - display: block; - position: static; - all: inherit; - bottom: 0; - height: 100%; - left: 0; - margin: 0; - - padding: 0; - position: absolute; - right: 0; - top: 0; - width: 100%; - object-fit: cover; -} -.topContent{ - - - line-height: 30px; - - - - display: block; - color: #fff; - font-weight: bold; - - text-decoration: none; - margin-bottom: 16px; - font-size: 24px; - margin-top: auto; -} -.tendingBox{ - padding:10px; -} -.trendingInner{ - border-radius: 1rem; - background-color: #fff; - transition: transform 250ms ease, box-shadow 250ms ease, color 250ms ease; - box-shadow: 1px 1px 5px 0 rgba(1,1,1,0.05); - overflow: hidden; - height: 100%; -} -.leftImgBox{ - max-width: 296px; - display: block; -} -.leftImg{ - max-width: 100%; - display: block; - position: static; - border-radius: 16px 0 0 16px; -} -.outerTrending{ - float: left; - width: 615px; -} -.SingleBlogContent{ - color: #718096; - font-size: 18px; - line-height: 31px; - margin-bottom: 20px; -} -.Socialul{ - display: flex; - list-style: none; - padding: 0; -} -.SingleblogCard .Socialul{ - float:right; -} -.Socialli{ - vertical-align: middle; - border-radius: 23px; - margin: 0 3px; - background: #edf2f7; - width: 46px; - text-align: center; - height: 46px; -} -.Socialli:hover{ - background-color: #aee0f7; -} -.SingleRight .profileName{ - text-align: center; - margin-bottom: 20px; -} -.RelatedPostBox .blogName{ - font-size:13px; -} -.RelatedPostBox .profileInfoBox{ - display:flex; -} -.RelatedPostBox .innerContent{ - padding:20px; - border-left: 5px solid rgb(14 149 212 / 70%); -} -.RelatedPostBox .blogCard{ - min-width: 21rem; -} -.RelatedPostBox .profileName{ - font-size: 14px; -} -.RelatedPostHeading { - color: #3a3a3a; - font-size: 21px; - text-align: center; - margin-bottom: 20px; -} -.SingleRight .insideCard{ - margin-bottom: 50px; -} \ No newline at end of file diff --git a/src/containers/Blogs/Blog.module.css b/src/containers/Blogs/Blog.module.css new file mode 100644 index 0000000..d232e55 --- /dev/null +++ b/src/containers/Blogs/Blog.module.css @@ -0,0 +1,405 @@ +.InnoHeading { + font-weight: 500; + border-left: 4px solid #e2e8f0; + padding-left: 20px; + margin: 20px 0 30px 7px; +} +.CatHeading { + font-weight: 500; + margin: 20px 0 30px 7px; +} +.innoBlogBox { + box-sizing: border-box; + margin: 0; + min-width: 0; + width: 100%; + max-width: 1140px; + margin-left: auto; + margin-right: auto; + padding-left: 1rem; + padding-right: 1rem; +} +.blogBoxInner { + display: flex; + + flex-wrap: wrap; + + justify-content: center; + margin: -0.5rem; +} +.blogCard { + min-width: 18rem; + max-width: 340px; + flex-grow: 1; + float: left; + padding: 8px; +} +.SingleRight .blogCard { + min-width: 21rem; + max-width: 340px; +} +.SingleblogCard { + padding: 8px; +} +/* .SingleblogCard .insideCard{ + box-shadow: 0px 2px 4px rgb(46, 41 ,51, 0.08), 0px 5px 10px rgb(71, 63 ,79 , 0.16); +} */ +.SingleblogCard .insideCard:hover, +.SingleRight .insideCard:hover { + transform: none !important; + box-shadow: none !important; +} +.insideCard { + border-radius: 16px; + transition: transform 250ms ease, box-shadow 250ms ease, color 250ms ease; + box-shadow: 1px 1px 5px 0 rgb(1, 1, 1, 0.05); + overflow: hidden; + height: 100%; + background: #fff; +} +.insideCard:hover { + transform: translateY(-0.25rem); + box-shadow: 0px 2px 4px rgb(46, 41, 51, 0.08), + 0px 5px 10px rgb(71, 63, 79, 0.16); +} +.cardArticle { + box-sizing: border-box; + margin: 0; + min-width: 0; + align-items: stretch; + height: 100%; + flex-direction: row; + display: flex; +} +.innerContent { + margin: 0; + display: flex; + flex-direction: column; + justify-content: center; + flex: 1 1; + padding: 30px; +} +.cardCategory { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: inline-block; + margin-bottom: 1rem; +} +.cardCategoryLink { + font-size: 13px; + padding: 0.15rem 1rem 0.25rem 1rem; + border-radius: 0.5rem; + border: 1px solid #0e95d4; + color: #fff; + text-decoration: none; + font-weight: 600; + vertical-align: middle; + transition: all 250ms ease; + background-color: #0e95d4; +} +.cardCategoryLink:hover { + background-color: #718096; + border: 1px solid #718096; +} +.blogName { + display: block; + color: #2d3748; + font-weight: 700; + text-decoration: none; + margin-bottom: 1rem; + font-size: 1.25rem; +} +.blogContent { + color: #718096; + font-size: 14px; + line-height: 22px; + margin-bottom: 16px; +} +.profileBox { + font-size: 14px; + display: flex; + align-items: center; +} +.profileImg { + margin: 0; + width: 50px; + height: 50px; + border-radius: 25px; + overflow: hidden; + margin-right: 16px; +} +.SingleRight .profileImg { + margin: auto; + width: 100px; + + height: 100px; + border-radius: 50px; + overflow: hidden; +} +.SingleRight .profileBox { + display: block; +} +.SingleRight .profileInfoBox { + font-size: 15px; + margin: auto; + display: table; + margin-top: 20px; + color: #000; +} +.profileInfoBox { + margin: 0; + min-width: 0; + flex: 1 1; + flex-wrap: wrap; + justify-content: space-between; + color: #a0aec0; + line-height: 22px; + display: inline-block; +} +.Blogdate { + font-size: 12px; + color: #a0aec0; + line-height: 22px; +} +.CategoryList { + box-sizing: border-box; +} +.categoryLinklist { + display: inline-block; + text-align: center; + line-height: inherit; + + text-decoration: none; + font-size: inherit; + + color: #718096; + + border: 0; + border-radius: 4px; + background-color: #fff; + border-radius: 1rem; + + transition: transform 250ms ease, box-shadow 250ms ease, color 250ms ease; + box-shadow: 1px 1px 5px 0 rgba(1, 1, 1, 0.05); + + display: flex; + + align-items: center; + text-align: initial; + overflow: hidden; + margin-bottom: 1rem; +} +.categoryLinklist:hover div:first-of-type { + background-color: #0e95d4; + color: #fff; +} +.categoryLinkIcon { + box-sizing: border-box; + margin: 0; + min-width: 0; + + display: flex; + + transition: all 250ms ease; + + align-items: center; + + justify-content: center; + + align-self: stretch; + background-color: #e2e8f0; + width: 70px; +} +.categorylistName { + font-size: 16px; + line-height: 21px; + font-weight: bold; + display: block; + color: #718096; + text-decoration: none; + margin-bottom: 1rem; + + flex: auto; + + white-space: nowrap; + padding: 1rem; + margin: 0; +} +.BlogContainer { + background-color: #f8f8f8; + padding: 80px 0; +} +.topPick { + background-image: url("assets/blogBackground.png"); + /* opacity: 0.05; */ + background-position: center; + background-repeat: repeat; + padding: 80px 0; +} +.topHeading { + color: #718096; + line-height: 32px; + text-align: center; + margin-bottom: 30px; +} +.ToppickBox { + min-width: 80%; + max-width: 380px; + + flex-grow: 1; + padding: 8px; +} +.topSingle { + transition: transform 250ms ease, box-shadow 250ms ease, color 250ms ease; + box-shadow: 1px 1px 5px 0 rgba(1, 1, 1, 0.05); + overflow: hidden; + height: 100%; + background-color: transparent; + border-radius: 16px; +} +.innerTop { + align-items: stretch; + height: 100%; + + flex-direction: row; + position: relative; + + display: flex; +} +.topLink { + color: #0e95d4; + + text-decoration: none; + text-align: center; + position: relative; + display: block; +} +.imgTop { + height: 100%; + vertical-align: middle; + min-height: 241px; + max-height: 470px; + background-color: transparent; +} +.imgWrap { + color: #0e95d4; + + text-decoration: none; + + flex-basis: 100%; + margin: 0; + + text-align: center; + position: relative; + display: block; +} +.backtopImg { + max-width: 100%; + display: block; + position: static; + all: inherit; + bottom: 0; + height: 100%; + left: 0; + margin: 0; + + padding: 0; + position: absolute; + right: 0; + top: 0; + width: 100%; + object-fit: cover; +} +.topContent { + line-height: 30px; + + display: block; + color: #fff; + font-weight: bold; + + text-decoration: none; + margin-bottom: 16px; + font-size: 24px; + margin-top: auto; +} +.tendingBox { + padding: 10px; +} +.trendingInner { + border-radius: 1rem; + background-color: #fff; + transition: transform 250ms ease, box-shadow 250ms ease, color 250ms ease; + box-shadow: 1px 1px 5px 0 rgba(1, 1, 1, 0.05); + overflow: hidden; + height: 100%; +} +.leftImgBox { + max-width: 296px; + display: block; +} +.leftImg { + max-width: 100%; + display: block; + position: static; + border-radius: 16px 0 0 16px; +} +.outerTrending { + float: left; + width: 615px; +} +.SingleBlogContent { + color: #718096; + font-size: 18px; + line-height: 31px; + margin-bottom: 20px; +} +.Socialul { + display: flex; + list-style: none; + padding: 0; +} +.SingleblogCard .Socialul { + float: right; +} +.Socialli { + vertical-align: middle; + border-radius: 23px; + margin: 0 3px; + background: #edf2f7; + width: 46px; + text-align: center; + height: 46px; +} +.Socialli:hover { + background-color: #aee0f7; +} +.SingleRight .profileName { + text-align: center; + margin-bottom: 20px; +} +.RelatedPostBox .blogName { + font-size: 13px; +} +.RelatedPostBox .profileInfoBox { + display: flex; +} +.RelatedPostBox .innerContent { + padding: 20px; + border-left: 5px solid rgb(14 149 212 / 70%); +} +.RelatedPostBox .blogCard { + min-width: 21rem; +} +.RelatedPostBox .profileName { + font-size: 14px; +} +.RelatedPostHeading { + color: #3a3a3a; + font-size: 21px; + text-align: center; + margin-bottom: 20px; +} +.SingleRight .insideCard { + margin-bottom: 50px; +} diff --git a/src/Blogs/BlogCard.jsx b/src/containers/Blogs/BlogCard.jsx similarity index 59% rename from src/Blogs/BlogCard.jsx rename to src/containers/Blogs/BlogCard.jsx index 1a4952e..a274e8a 100644 --- a/src/Blogs/BlogCard.jsx +++ b/src/containers/Blogs/BlogCard.jsx @@ -1,113 +1,147 @@ -import React from 'react' -import blogProfile from "../assets/blogProfile.png"; -import blogLeftimg from "../assets/blogLeftimg.jpg"; +import React from "react"; +import blogProfile from "assets/blogProfile.png"; +import blogLeftimg from "assets/blogLeftimg.jpg"; import FacebookIcon from "@material-ui/icons/Facebook"; import InstagramIcon from "@material-ui/icons/Instagram"; import TwitterIcon from "@material-ui/icons/Twitter"; import style from "./Blog.module.css"; -const BlogCard =(props) =>{ - return ( - <> -
-
-
-
-
-
- - {props.Category} - +import { useHistory } from "react-router"; +const BlogCard = (props) => { + const history = useHistory(); + return ( + <> +
+
+
+
+
+
+ { + history.push(props.Category); + }} + > + {props.Category} + +
+ { + history.push(); + }} + > + {props.BlogHeading} + +
{props.AboutBlog}
+
+
+
- - {props.BlogHeading} - -
{props.AboutBlog}
-
-
- +
+
+ {props.Name}
-
-
- {props.Name} -
- - +
{props.BlogDate}
- -
-
-
+
+
- - ); -} -const BlogListBox = (props)=> -{ -return ( - <> -
- -
- {props.CategoryIcon} -
- {props.CategoryName} - -
- -); -} +
+ + ); +}; +const BlogListBox = (props) => { + const history = useHistory(); + + return ( + <> +
+ { + history.push(); + }} + > +
{props.CategoryIcon}
+ {props.CategoryName} + +
+ + ); +}; const TrendingBlogBox = (props) => { + const history = useHistory(); + return ( <> -
-
-
-
- -
- -
- -
- - - {props.BlogHeading} - -
{props.AboutBlog}
-
-
- +
+
+
+
+ { + history.push(); + }} + > +
+
-
-
- {props.Name} + +
+
+ { + history.push(); + }} + > + {props.Category} + +
+ { + history.push(); + }} + > + {props.BlogHeading} + +
{props.AboutBlog}
+
+
+
+
+
+ {props.Name} +
-
{props.BlogDate}
+
{props.BlogDate}
+
-
-
+
+
- ); }; const SingleBlogBox = (props) => { + const history = useHistory(); + return ( <>
@@ -116,9 +150,14 @@ const SingleBlogBox = (props) => {
@@ -201,6 +239,7 @@ const SingleBlogRight = (props) => {
@@ -246,39 +285,47 @@ const SingleBlogRight = (props) => {
- );}; - const RelatedPost = (props) => { - return ( - <> -
-
-
-
-
- - {props.BlogHeading} - + ); +}; +const RelatedPost = (props) => { + const history = useHistory(); -
-
- {props.Name} -
+ return ( + <> +
+
+
+
+
+ { + history.push(); + }} + > + {props.BlogHeading} + -
{props.BlogDate}
+
+
+ {props.Name}
+ +
{props.BlogDate}
-
-
+
+
- - ); - }; +
+ + ); +}; export { BlogCard, BlogListBox, TrendingBlogBox, SingleBlogBox, SingleBlogRight, - RelatedPost -}; \ No newline at end of file + RelatedPost, +}; diff --git a/src/Blogs/BlogData.jsx b/src/containers/Blogs/BlogData.jsx similarity index 93% rename from src/Blogs/BlogData.jsx rename to src/containers/Blogs/BlogData.jsx index f756d90..db96a56 100644 --- a/src/Blogs/BlogData.jsx +++ b/src/containers/Blogs/BlogData.jsx @@ -1,6 +1,5 @@ -import blogProfile from "../assets/blogProfile.png"; -import blogLeftimg from "../assets/blogLeftimg.jpg"; -import {LocalHospitalIcon} from "@material-ui/icons"; +import blogProfile from "assets/blogProfile.png"; +import blogLeftimg from "assets/blogLeftimg.jpg"; const BlogData = [ { Category: "Agriculture", diff --git a/src/Blogs/SingleBlog.jsx b/src/containers/Blogs/SingleBlog.jsx similarity index 100% rename from src/Blogs/SingleBlog.jsx rename to src/containers/Blogs/SingleBlog.jsx diff --git a/src/Blogs/index.jsx b/src/containers/Blogs/index.jsx similarity index 100% rename from src/Blogs/index.jsx rename to src/containers/Blogs/index.jsx diff --git a/src/routes/index.jsx b/src/routes/index.jsx index 6480f7a..2180ccf 100644 --- a/src/routes/index.jsx +++ b/src/routes/index.jsx @@ -1,9 +1,9 @@ import React from "react"; import { - BrowserRouter as Router, - Switch, - Route, - Redirect, + BrowserRouter as Router, + Switch, + Route, + Redirect, } from "react-router-dom"; import styled from "styled-components"; @@ -13,40 +13,41 @@ import Team from "containers/Team"; import Events from "pages/Events"; import EventDetails from "containers/Events/EventDetials"; +import BlogsComponent from "containers/Blogs"; export default function App() { - return ( - -
- - - - - - - - - - - - - - - - - - - - - - 404 - - -