diff --git a/src/components/Object/Object.jsx b/src/components/Object/Object.jsx index de91261..0a5814e 100644 --- a/src/components/Object/Object.jsx +++ b/src/components/Object/Object.jsx @@ -6,52 +6,29 @@ function Object(props) { const [needsExpansion, setNeedsExpansion] = useState(false); const contentRef = useRef(null); - const checkIfContentOverflows = () => { - if (contentRef.current) { - // Временно убираем класс collapsed для измерения полной высоты - const element = contentRef.current; - const hadCollapsedClass = element.classList.contains( - "item__content--collapsed" - ); - - if (hadCollapsedClass) { - element.classList.remove("item__content--collapsed"); - } - - // Измеряем полную высоту - const fullHeight = element.scrollHeight; - - // Возвращаем класс обратно - if (hadCollapsedClass) { - element.classList.add("item__content--collapsed"); - } - - // Измеряем высоту в свернутом состоянии - const collapsedHeight = element.clientHeight; - - // Проверяем, есть ли разница больше чем 20px (чтобы избежать ложных срабатываний) - const heightDifference = fullHeight - collapsedHeight; - setNeedsExpansion(heightDifference > 20); - } - }; - useEffect(() => { - // Задержка для правильного расчета после рендера - const timeoutId = setTimeout(() => { - checkIfContentOverflows(); - }, 200); + const checkExpansion = () => { + if (!props.desc || !props.address || !contentRef.current) { + setNeedsExpansion(false); + return; + } - // Проверяем при изменении размера окна + const contentElement = contentRef.current; + const contentHeight = contentElement.scrollHeight; + const containerHeight = contentElement.clientHeight; + + const needsExp = contentHeight > containerHeight; + setNeedsExpansion(needsExp); + }; + + setTimeout(checkExpansion, 100); + const handleResize = () => { - setTimeout(checkIfContentOverflows, 100); + setTimeout(checkExpansion, 100); }; - window.addEventListener("resize", handleResize); - - return () => { - clearTimeout(timeoutId); - window.removeEventListener("resize", handleResize); - }; + window.addEventListener('resize', handleResize); + return () => window.removeEventListener('resize', handleResize); }, [props.desc, props.address]); const toggleExpansion = () => { @@ -78,11 +55,26 @@ function Object(props) { {needsExpansion && ( -
+
diff --git a/src/components/Object/Object.scss b/src/components/Object/Object.scss index 195d930..83789e2 100644 --- a/src/components/Object/Object.scss +++ b/src/components/Object/Object.scss @@ -10,112 +10,127 @@ margin: 0 20px; border-radius: 15px; background-color: white; - min-height: 450px; - transition: height 0.3s ease; + height: 450px; + transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1), min-height 0.6s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; &--expanded { - height: auto; + height: auto !important; min-height: 450px; + transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1), min-height 0.6s cubic-bezier(0.4, 0, 0.2, 1); } @media (min-width: 1800px) { - min-height: 480px; + height: 480px; &--expanded { + height: auto !important; min-height: 480px; } } @media (max-width: 1300px) { - min-height: 430px; + height: 430px; &--expanded { + height: auto !important; min-height: 430px; } } @media (max-width: 1200px) { - min-height: 410px; + height: 410px; &--expanded { + height: auto !important; min-height: 410px; } } @media (max-width: 1100px) { - min-height: 390px; + height: 390px; &--expanded { + height: auto !important; min-height: 390px; } } @media (max-width: $laptopWidth) { - min-height: 370px; + height: 370px; margin: 0 15px; &--expanded { + height: auto !important; min-height: 370px; } } @media (max-width: $tabletWidth) { - min-height: 500px; + height: 500px; &--expanded { + height: auto !important; min-height: 500px; } } @media (max-width: 740px) { - min-height: 480px; + height: 480px; &--expanded { + height: auto !important; min-height: 480px; } } @media (max-width: 690px) { - min-height: 460px; + height: 460px; &--expanded { + height: auto !important; min-height: 460px; } } @media (max-width: 635px) { - min-height: 440px; + height: 440px; &--expanded { + height: auto !important; min-height: 440px; } } @media (max-width: 570px) { - min-height: 420px; + height: 420px; &--expanded { + height: auto !important; min-height: 420px; } } @media (max-width: $mobileWidth) { - min-height: 400px; + height: 400px; margin: 0 10px; &--expanded { + height: auto !important; min-height: 400px; } } @media (max-width: 420px) { - min-height: 380px; + height: 380px; &--expanded { + height: auto !important; min-height: 380px; } } } + .item__image:hover { text-decoration: none; } @@ -181,6 +196,7 @@ flex-direction: column; justify-content: space-between; min-height: 0; + position: relative; @media (max-width: $mobileWidth) { margin: 15px 15px 10px 15px; @@ -192,10 +208,10 @@ display: flex; flex-direction: column; margin-bottom: 10px; - transition: max-height 0.3s ease, opacity 0.2s ease; + transition: max-height 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1); &--collapsed { - max-height: 180px; + max-height: 250px; overflow: hidden; position: relative; @@ -208,61 +224,46 @@ height: 20px; background: linear-gradient(transparent, white); pointer-events: none; - } - - @media (min-width: 1800px) { - max-height: 200px; - } - - @media (max-width: 1300px) { - max-height: 170px; - } - - @media (max-width: 1200px) { - max-height: 160px; - } - - @media (max-width: 1100px) { - max-height: 150px; - } - - @media (max-width: $laptopWidth) { - max-height: 140px; - } - - @media (max-width: $tabletWidth) { - max-height: 190px; - } - - @media (max-width: 740px) { - max-height: 180px; - } - - @media (max-width: 690px) { - max-height: 170px; - } - - @media (max-width: 635px) { - max-height: 160px; - } - - @media (max-width: 570px) { - max-height: 150px; + transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1); } @media (max-width: $mobileWidth) { - max-height: 160px; + max-height: 200px !important; } - @media (max-width: 420px) { - max-height: 150px; + max-height: 180px !important; + } + } + + &:not(.item__content--collapsed) { + max-height: none !important; + overflow: visible; + + &::after { + opacity: 0; } } } .item__expand-wrapper { margin-top: auto; - padding-top: 5px; + padding-top: 2px; + position: relative; + z-index: 10; + background: white; + border-radius: 0 0 15px 15px; + padding-bottom: 2px; + display: flex; + justify-content: flex-start; + align-items: flex-end; + min-height: 20px; + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + + @media (max-width: $mobileWidth) { + padding-top: 4px; + padding-bottom: 4px; + margin-top: 4px; + } } .item__price { @@ -315,20 +316,25 @@ font-size: 11px; font-weight: 500; cursor: pointer; - padding: 4px 0; - margin-bottom: 5px; + padding: 2px 0; + margin-bottom: 2px; text-align: left; - transition: color 0.2s ease; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-family: inherit; flex-shrink: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + position: relative; + z-index: 15; + display: block; + width: 100%; &:hover { color: #0056b3 !important; text-decoration: underline; + transform: translateY(-1px); } &:focus { @@ -342,16 +348,32 @@ @media (min-width: 1800px) { font-size: 13px; - padding: 5px 0; + padding: 3px 0; } @media (min-width: 768.98px) and (max-width: $laptopWidth) { font-size: 10px; + padding: 2px 0; + } + + @media (max-width: $tabletWidth) { + font-size: 11px; padding: 3px 0; + margin-bottom: 2px; } @media (max-width: $mobileWidth) { font-size: 11px; - margin-bottom: 3px; + margin-bottom: 1px; + padding: 3px 0; + min-height: 18px; + display: flex; + align-items: center; } } + +.item__expand-wrapper { + display: block !important; + visibility: visible !important; + opacity: 1 !important; +} diff --git a/src/components/Sliders/SliderObjects.jsx b/src/components/Sliders/SliderObjects.jsx index 02dd93f..2166ca4 100644 --- a/src/components/Sliders/SliderObjects.jsx +++ b/src/components/Sliders/SliderObjects.jsx @@ -85,19 +85,19 @@ const SliderComponent = () => { image={objectPicOne} price="2 500 000 ₽" desc="2-комн. кв., 47 м², 1/2 этаж" - address="Челябинская область, Челябинск, Лазурная улица, 14А" + address="Челябинская область, Челябинск, Лазурная улица, 14А, район Металлургический, микрорайон Северо-Западный" />