From 34515fa159adebe19c960407cc2e4ced757fd6ae Mon Sep 17 00:00:00 2001 From: Vamshi Reddy Date: Fri, 4 Aug 2023 12:49:28 +0530 Subject: [PATCH 1/4] fixing hover effect on cards on News page Signed-off-by: Vamshi Reddy --- src/components/Card/Card.style.js | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/src/components/Card/Card.style.js b/src/components/Card/Card.style.js index efb011b96090..97cf1230423a 100644 --- a/src/components/Card/Card.style.js +++ b/src/components/Card/Card.style.js @@ -41,16 +41,21 @@ export const CardWrapper = styled.div` border-top-right-radius: 0.5rem; border-top-left-radius: 0.5rem; - .gatsby-image-wrapper, .old-gatsby-image-wrapper{ + .gatsby-image-wrapper{ + height:80%; + transition: all 0.3s ease-in; + } + .old-gatsby-image-wrapper{ height:100%; + width:70%; + margin-left: 3rem; transition: all 0.3s ease-in; } - img{ - height: inherit; - max-height: 180px; - display: block; - text-align: center; - margin: auto; + img{ + padding: 0px; + margin-top: 0.5rem; + width: 100%; + height: 100%; } } @@ -97,6 +102,7 @@ export const CardWrapper = styled.div` .post-meta-block{ height: auto; display: flex; + .author{ text-align: end; From ecbd9f7b7d06e0f0afb0df196ea766eedc275b2b Mon Sep 17 00:00:00 2001 From: Vamshi Reddy Date: Thu, 10 Aug 2023 22:09:59 +0530 Subject: [PATCH 2/4] all the changes are made which were requested Signed-off-by: Vamshi Reddy --- src/components/Card/Card.style.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/Card/Card.style.js b/src/components/Card/Card.style.js index 97cf1230423a..f9be67887a9d 100644 --- a/src/components/Card/Card.style.js +++ b/src/components/Card/Card.style.js @@ -43,6 +43,9 @@ export const CardWrapper = styled.div` .gatsby-image-wrapper{ height:80%; + width:70%; + margin-top: 0.5rem; + margin-left: 3rem; transition: all 0.3s ease-in; } .old-gatsby-image-wrapper{ @@ -53,7 +56,6 @@ export const CardWrapper = styled.div` } img{ padding: 0px; - margin-top: 0.5rem; width: 100%; height: 100%; } @@ -102,6 +104,7 @@ export const CardWrapper = styled.div` .post-meta-block{ height: auto; display: flex; + margin-buttom: 0.5rem; .author{ @@ -124,6 +127,7 @@ export const CardWrapper = styled.div` .readmore-btn-wrapper{ display:flex; justify-content: flex-start; + } .readmore-btn::after{ @@ -142,6 +146,7 @@ export const CardWrapper = styled.div` align-items: center; transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + svg{ font-size: 1.5rem; transition: all 0.3s; From 2bd692f94264bdcfd0edaee68582c2c07224de38 Mon Sep 17 00:00:00 2001 From: Vamshi Reddy Date: Thu, 10 Aug 2023 23:34:28 +0530 Subject: [PATCH 3/4] added margin to the images Signed-off-by: Vamshi Reddy --- src/components/Card/Card.style.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/Card/Card.style.js b/src/components/Card/Card.style.js index f9be67887a9d..42660847d0c3 100644 --- a/src/components/Card/Card.style.js +++ b/src/components/Card/Card.style.js @@ -44,18 +44,17 @@ export const CardWrapper = styled.div` .gatsby-image-wrapper{ height:80%; width:70%; - margin-top: 0.5rem; - margin-left: 3rem; + margin: auto; transition: all 0.3s ease-in; } .old-gatsby-image-wrapper{ height:100%; width:70%; - margin-left: 3rem; + margin: auto; transition: all 0.3s ease-in; } img{ - padding: 0px; + padding: 10px; width: 100%; height: 100%; } From 99ddeb81b1618839c4ae10ae3c9133ead7d38775 Mon Sep 17 00:00:00 2001 From: Vamshi Reddy Date: Sat, 12 Aug 2023 00:57:45 +0530 Subject: [PATCH 4/4] trying to resolve padding and multiple elements issue Signed-off-by: Vamshi Reddy --- src/components/Card/Card.style.js | 31 +++++++++---------- .../Company/News-grid/NewsGrid.style.js | 24 ++++++++++++++ 2 files changed, 38 insertions(+), 17 deletions(-) diff --git a/src/components/Card/Card.style.js b/src/components/Card/Card.style.js index 42660847d0c3..bb0b988977ff 100644 --- a/src/components/Card/Card.style.js +++ b/src/components/Card/Card.style.js @@ -35,30 +35,27 @@ export const CardWrapper = styled.div` } } - .post-thumb-block{ + .post-thumb-block{ overflow: hidden; height: 11.5rem; border-top-right-radius: 0.5rem; border-top-left-radius: 0.5rem; - .gatsby-image-wrapper{ - height:80%; - width:70%; - margin: auto; - transition: all 0.3s ease-in; - } - .old-gatsby-image-wrapper{ - height:100%; - width:70%; - margin: auto; - transition: all 0.3s ease-in; - } - img{ - padding: 10px; - width: 100%; - height: 100%; + .gatsby-image-wrapper, .old-gatsby-image-wrapper{ + height:100%; + margin-top: 0.2rem; + transition: all 0.3s ease-in; + } + img{ + height: inherit; + max-height: 180px; + display: block; + text-align: center; + margin: auto; } + } + .post-content-block{ padding: 1rem 2rem; diff --git a/src/sections/Company/News-grid/NewsGrid.style.js b/src/sections/Company/News-grid/NewsGrid.style.js index 18f605e384d9..6af902eb10e8 100644 --- a/src/sections/Company/News-grid/NewsGrid.style.js +++ b/src/sections/Company/News-grid/NewsGrid.style.js @@ -51,6 +51,30 @@ export const NewsPageWrapper = styled.div` .search-box-container { width: 35%; } + .post-thumb-block{ + overflow: hidden; + height: 11.5rem; + border-top-right-radius: 0.5rem; + border-top-left-radius: 0.5rem; + + .gatsby-image-wrapper{ + height: 100%; + width: 80%; + margin: auto; + transition: all 0.3s ease-in; + } + .old-gatsby-image-wrapper{ + height:100%; + width:80%; + margin: auto; + transition: all 0.3s ease-in; + } + img{ + padding: 4px; + width: 100%; + height: 100%; + } + } .post-content-block { height: 10rem;