Merge pull request #856 from ita-social-projects/change_roll-up-text-…

…button_on_streetcode_mobile_page Change roll up text button on streetcode mobile page
ita-social-projects · Oct 1, 2023 · b0c8b81 · b0c8b81
2 parents 3e628f5 + 7433585
commit b0c8b81
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 5 deletions.
diff --git a/src/features/StreetcodePage/TextBlock/ReadMore/ReadMore.component.tsx b/src/features/StreetcodePage/TextBlock/ReadMore/ReadMore.component.tsx
@@ -5,6 +5,7 @@ import { CSSProperties, useEffect, useRef, useState } from 'react';
 import SearchTerms from '@streetcode/TextBlock/SearchTerms/SearchTerms.component';
 import classnames from 'classnames';
 import * as lodash from 'lodash';
+import useWindowSize from '@/app/common/hooks/stateful/useWindowSize.hook';
 
 interface Props {
   text: string;
@@ -13,11 +14,12 @@ interface Props {
 
 const ReadMore = ({ text, maxLines = 25 }: Props) => {
     const [clamped, setClamped] = useState(true);
-    const [showButtons, setShowButtons] = useState(true);
+    const [showButtons, setShowButtons] = useState(false);
     const containerRef = useRef<HTMLDivElement | null>(null);
     const readMoreRef = useRef<HTMLSpanElement | null>(null);
     const firstRender = useRef(true);
-
+    const windowSize = useWindowSize();
+
     const handleClick = () => setClamped(!clamped);
 
     useEffect(() => {
@@ -30,7 +32,9 @@ const ReadMore = ({ text, maxLines = 25 }: Props) => {
             if (containerRef.current) {
                 const hadClampClass = containerRef.current.classList.contains('clamp');
                 if (!hadClampClass) containerRef.current.classList.add('clamp');
-                setShowButtons(hasClamping(containerRef.current));
+                if (hasClamping(containerRef.current)) {
+                    setShowButtons(hasClamping(containerRef.current));
+                }
                 if (!hadClampClass) containerRef.current.classList.remove('clamp');
             }
         };
@@ -81,7 +85,7 @@ const ReadMore = ({ text, maxLines = 25 }: Props) => {
                 >
                     <SearchTerms mainText={text} />
                 </div>
-                {showButtons && (
+                {showButtons && windowSize.width > 480 && (
                     <div className="readMoreContainer">
                         <span
                             className="readMore"
@@ -92,6 +96,17 @@ const ReadMore = ({ text, maxLines = 25 }: Props) => {
                         </span>
                     </div>
                 )}
+                {showButtons && windowSize.width <= 480 && (
+                    <div className={clamped ? "readMoreContainer" : "readLessContainer"}>
+                        <span
+                            className={clamped ? "readMore" : "readLess"}
+                            onClick={handleClick}
+                            ref={readMoreRef}
+                        >
+                            {clamped ? 'Трохи ще' : 'Згорнути текст'}
+                        </span>
+                    </div>
+                )}
             </div>
         </>
     );

diff --git a/src/features/StreetcodePage/TextBlock/ReadMore/ReadMore.styles.scss b/src/features/StreetcodePage/TextBlock/ReadMore/ReadMore.styles.scss
@@ -50,4 +50,25 @@
         justify-content: center;
     }
 
-}
+    .readLessContainer{
+        position: sticky;
+        bottom: 40px;
+    }
+
+    .readLess {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 46px;
+        background-color: white;
+        border-radius: 8px;
+        border-style: solid;
+        border-width: 2px;
+        width: 252px;
+        color: #E04031;
+        margin: auto;
+        font-size: 14px;
+        font-weight: 500;
+    }
+}
+