From 736cf8b6caa864a04da81447a637ffabef99f44e Mon Sep 17 00:00:00 2001 From: Palak Date: Fri, 4 Aug 2023 19:42:50 +0530 Subject: [PATCH 1/2] Fix post alignment --- src/components/Post/index.css | 3 +- src/reusableComponents/ImageSlider/index.css | 85 ++------------------ src/reusableComponents/ImageSlider/index.jsx | 15 +--- 3 files changed, 11 insertions(+), 92 deletions(-) diff --git a/src/components/Post/index.css b/src/components/Post/index.css index 1740d51e9..440a49e0b 100644 --- a/src/components/Post/index.css +++ b/src/components/Post/index.css @@ -50,7 +50,8 @@ } .post__background { - min-height: 350px; + /* min-height: 350px; */ + height: 350px; background: linear-gradient( 130deg, #dee2ed, diff --git a/src/reusableComponents/ImageSlider/index.css b/src/reusableComponents/ImageSlider/index.css index a581c2487..180b4407a 100644 --- a/src/reusableComponents/ImageSlider/index.css +++ b/src/reusableComponents/ImageSlider/index.css @@ -3,15 +3,16 @@ display: flex; justify-content: center; margin: 0 auto; - /* min-height: 300px; */ height: 350px; - /* min-width: 300px; */ - /* max-width: 350px; */ position: relative; - /* width: 100%; */ - /* object-fit:scale-down; */ overflow: hidden; - /* aspect-ratio: 16/1; */ + border-bottom: 2px solid #eee; +} + +.post__image { + width: 100% !important; + height: 100%; + object-fit: cover; } .slide { @@ -42,7 +43,6 @@ .slider-action { display: flex; - /*height: 100%;*/ justify-content: space-between; position: absolute; width: 90%; @@ -59,77 +59,8 @@ width: 5%; } -/*.chevron:hover, .circle:hover {*/ -/* !*color: #ab4bc2;*!*/ -/* transform: scale(1.2);*/ -/*}*/ - .chevron:active, .circle:active { transform: scale(1); z-index: 9; -} - -/*.overlay {*/ -/* position: absolute;*/ -/* top: 0;*/ -/* left: 0;*/ -/* width: 100%;*/ -/* height: 100%;*/ -/* background-color: rgba(0, 0, 0, 0.5);*/ -/* z-index: 1;*/ -/* opacity: 0;*/ -/* transition: opacity 0.3s ease;*/ -/*}*/ - -/*.slide:hover .overlay {*/ -/* opacity: 1;*/ -/*}*/ - -/*.overlay-content {*/ -/* position: absolute;*/ -/* top: 50%;*/ -/* left: 50%;*/ -/* transform: translate(-50%, -50%);*/ -/* text-align: center;*/ -/* color: white;*/ -/*}*/ - -/*.overlay-content h3 {*/ -/* font-size: 24px;*/ -/* margin-bottom: 10px;*/ -/*}*/ - -/*.overlay-content p {*/ -/* font-size: 16px;*/ -/*}*/ - -/*.slide-button {*/ -/* position: absolute;*/ -/* top: 50%;*/ -/* transform: translateY(-50%);*/ -/* width: 40px;*/ -/* height: 40px;*/ -/* border-radius: 50%;*/ -/* background-color: #ab4bc2;*/ -/* display: flex;*/ -/* justify-content: center;*/ -/* align-items: center;*/ -/* color: white;*/ -/* font-size: 20px;*/ -/* cursor: pointer;*/ -/* opacity: 0;*/ -/* transition: opacity 0.3s ease;*/ -/*}*/ - -/*.slide-button:hover {*/ -/* opacity: 1;*/ -/*}*/ - -/*.slide-button.left {*/ -/* left: 20px;*/ -/*}*/ - -/*.slide-button.right {*/ -/* right: 20px;*/ -/*}*/ +} \ No newline at end of file diff --git a/src/reusableComponents/ImageSlider/index.jsx b/src/reusableComponents/ImageSlider/index.jsx index a9c532210..883e0d13d 100644 --- a/src/reusableComponents/ImageSlider/index.jsx +++ b/src/reusableComponents/ImageSlider/index.jsx @@ -22,10 +22,6 @@ const ImageSlider = ({ slides, doubleClickHandler }) => { setTimeout(nextStep, 1000); }, [slides]); - // useEffect(() => { - // setTimeout(() => setCurrent(current + 1), 1000); - // }, [slides]); - return slides.length ? (
{slides.map(({ imageUrl, thumbnail }, index) => ( @@ -38,17 +34,12 @@ const ImageSlider = ({ slides, doubleClickHandler }) => { key={index} > {slides.length > 1 ? (
@@ -56,13 +47,11 @@ const ImageSlider = ({ slides, doubleClickHandler }) => { className="circle" onClick={prevStep} title={"View Previous Image"} - // style={isCommentBox ? {width: "60%"} : {width: "60%"}} />
) : ( @@ -75,5 +64,3 @@ const ImageSlider = ({ slides, doubleClickHandler }) => { }; export default ImageSlider; - -// className={index === current ? "slide active" : "slide"} From a23d4237961630aa48d7d741a68538854dd47722 Mon Sep 17 00:00:00 2001 From: narayan soni Date: Sat, 5 Aug 2023 02:04:14 +0530 Subject: [PATCH 2/2] refactor: imageslider --- src/reusableComponents/ImageSlider/index.css | 2 +- src/reusableComponents/ImageSlider/index.jsx | 80 ++++++++++---------- 2 files changed, 40 insertions(+), 42 deletions(-) diff --git a/src/reusableComponents/ImageSlider/index.css b/src/reusableComponents/ImageSlider/index.css index 180b4407a..e7952c108 100644 --- a/src/reusableComponents/ImageSlider/index.css +++ b/src/reusableComponents/ImageSlider/index.css @@ -63,4 +63,4 @@ .circle:active { transform: scale(1); z-index: 9; -} \ No newline at end of file +} diff --git a/src/reusableComponents/ImageSlider/index.jsx b/src/reusableComponents/ImageSlider/index.jsx index 883e0d13d..fa5b01b96 100644 --- a/src/reusableComponents/ImageSlider/index.jsx +++ b/src/reusableComponents/ImageSlider/index.jsx @@ -8,8 +8,6 @@ import { LazyLoadImage } from "react-lazy-load-image-component"; const ImageSlider = ({ slides, doubleClickHandler }) => { const [current, setCurrent] = useState(0); - //destructure slides.length to get const { length } = slides; - const prevStep = () => { setCurrent(current === 0 ? slides.length - 1 : current - 1); }; @@ -22,45 +20,45 @@ const ImageSlider = ({ slides, doubleClickHandler }) => { setTimeout(nextStep, 1000); }, [slides]); - return slides.length ? ( -
- {slides.map(({ imageUrl, thumbnail }, index) => ( -
- - {slides.length > 1 ? ( -
- - -
- ) : ( - <> - )} -
- ))} -
- ) : null; + return ( + slides.length > 0 && ( +
+ {slides.map(({ imageUrl, thumbnail }, index) => ( +
+ + {slides.length > 1 && ( +
+ + +
+ )} +
+ ))} +
+ ) + ); }; export default ImageSlider;