Develop

src/app/common/components/modals/ListenText/ListenText.styles.scss

@@ -3,6 +3,7 @@
 @use "@assets/sass/variables/_variables.colors.scss" as c;
 @use "@assets/sass/mixins/_utils.mixins.scss" as mut;
 @use "@assets/sass/mixins/_vendor.mixins.scss" as vnd;
+@use "@assets/sass/variables/_variables.layers.scss" as l;
 
 .modal {
     @include mut.sized(1200px, 46px);
@@ -14,7 +15,7 @@
     background-color: c.$pure-white-color;
     border: 2px solid #DB3424;
 
-    z-index: 1000;
+    z-index: l.$stickyEl;
     box-shadow: 0 2px 15px rgba(163, 163, 163, 0.25);
 }
 

src/app/layout/app/App.styles.scss

@@ -3,6 +3,7 @@
 @use "@assets/sass/mixins/_utils.mixins.scss" as mut;
 @use "@assets/sass/mixins/_vendor.mixins.scss" as vnd;
 @use "@sass/_utils.functions.scss" as f;
+@use "@assets/sass/variables/_variables.layers.scss" as l;
 @import 'react-toastify/dist/ReactToastify.css';
 
 p,
@@ -27,7 +28,7 @@ div {
     @include mut.parent-sized();
 
     @include vnd.vendored(transition, 'background .5s ease');
-    z-index: 5;
+    z-index: l.$dimmed;
 }
 
 .mainBlockWrapper {

src/app/layout/header/HeaderBlock.styles.scss

@@ -3,6 +3,7 @@
 @use "@sass/variables/_variables.colors.scss" as c;
 @use "@sass/mixins/_utils.mixins.scss" as mut;
 @use "@sass/mixins/_vendor.mixins.scss" as vnd;
+@use "@assets/sass/variables/_variables.layers.scss" as l;
 
 $navbar-innerwidth: 500px; 
 $navbar-hidden-innerwidth: 400px;
@@ -14,7 +15,7 @@ $navbar-hidden-innerwidth: 400px;
 
   background-color: c.$pure-white-color;
   position: fixed;
-  z-index: 7;
+  z-index: l.$modal;
   svg {
 
     &:hover {
@@ -178,7 +179,7 @@ $navbar-hidden-innerwidth: 400px;
 
 
     position: fixed;
-    z-index: 6;
+    z-index: l.$modal - 1;
     background-color: c.$pure-white-color;
     transform: translateY(f.pxToRem(-200px));
     @include vnd.vendored(transition, 'transform 0.7s ease');

src/assets/sass/mixins/_utils.mixins.scss

@@ -253,7 +253,7 @@
   }
 }
 
-@mixin blur($edge:0, $top:0, $height:0) {
+@mixin blur($edge:0, $top:0, $height:0, $z-index) {
   position: relative;
   &:after {
     content: '';
@@ -264,6 +264,6 @@
     height: f.pxToRem($height);
     background: linear-gradient($edge, rgba(255,255,255,0.01) 0%, rgba(255,255,255,0.25) 5%, rgba(255, 255, 255, 0.664) 21%);
     -webkit-text-fill-color: transparent;
-    z-index: 100;
+    z-index: $z-index;
   }
 }

src/assets/sass/variables/_variables.layers.scss

@@ -0,0 +1,7 @@
+
+$loader: 100000;
+$maxLayer: 9999;
+$modal: 1000;
+$dimmed: 900;
+$stickyEl: 500;
+$slickArrow: 250;

src/features/AdditionalPages/NewsPage/News.component.tsx

@@ -1,15 +1,17 @@
+/* eslint-disable complexity */
 /* eslint-disable @typescript-eslint/no-non-null-asserted-optional-chain */
 /* eslint-disable max-len */
 import './News.styles.scss';
 
 import React, { useEffect, useRef, useState } from 'react';
 import { Helmet } from 'react-helmet';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import { NewsWithUrl } from '@models/news/news.model';
 import dayjs from 'dayjs';
 import parse from 'html-react-parser';
 
 import NewsApi from '@/app/api/news/news.api';
+import FRONTEND_ROUTES from '@/app/common/constants/frontend-routes.constants';
 import { useRouteUrl } from '@/app/common/hooks/stateful/useRouter.hook';
 import useWindowSize from '@/app/common/hooks/stateful/useWindowSize.hook';
 import base64ToUrl from '@/app/common/utils/base64ToUrl.utility';
@@ -22,9 +24,9 @@ import RandomNewsBlock from './RandomNewsBlock.component';
 
 const NewsPage = () => {
     const newsUrl = useRouteUrl();
+    const navigate = useNavigate();
     const [newsImg, setNewsImg] = useState<HTMLImageElement | null>(null);
     const [newsValue, setValue] = useState<NewsWithUrl>();
-    const [news, setNews] = useState<News>();
     const { imagesStore } = useMobx();
     const [parsedNewsText, setParsedNewsText] = useState<string>('');
     const [paragraphsCount, setParCount] = useState<number>(0);
@@ -41,10 +43,8 @@ const NewsPage = () => {
                 const value = res as NewsWithUrl;
                 setParsedNewsText(parse(value.news.text ?? '') as string);
                 setParCount(((value.news.text as string)?.match(/<p\b[^>]*>/gi) || []).length);
-            });
-        NewsApi.getByUrl(newsUrl)
-            .then((res) => {
-                setNews(res);
+            }).catch(() => {
+                navigate(`${FRONTEND_ROUTES.OTHER_PAGES.ERROR404}`);
             });
     }, [newsUrl]);
 
@@ -88,64 +88,69 @@ const NewsPage = () => {
     return (
         <div>
             <Helmet>
-                <meta property="og:title" content={news?.title} />
+                <meta property="og:title" content={newsValue?.news.title} />
                 <meta property="og:description" content="«Стріткод: історія на кожному кроці» — платформа про імена в назвах вулиць." />
                 <meta name="twitter:card" content="«Стріткод: історія на кожному кроці» — платформа про імена в назвах вулиць." />
                 <meta
                     property="og:image"
                     content={newsImg?.src || ''}
                 />
             </Helmet>
-            <div className="newsContainer">
-                <div className="wrapper" ref={wrapperRef}>
-                    <BreadCrumbForNews separator={<div className="separator" />} news={newsValue?.news} />
-                    <div className="NewsHeader">
-                        <h1 className="">{newsValue?.news.title}</h1>
-                        <h3 className="news-date">{dayjs(news?.creationDate).format('DD.MM.YYYY')}</h3>
-                    </div>
-                    <div className="newsWithImageWrapper">
-                        {newsImg != null && (windowSize.width > 1024) ? (
-                            <img
-                                className="newsImage"
-                                key={newsValue?.news.id}
-                                src={base64ToUrl(getImage(newsValue?.news.imageId!)?.base64, getImage(newsValue?.news.imageId!)?.mimeType)}
-                                alt={newsValue?.news.title}
-                            />
-                        ) : ''}
-                        <div className="newsTextArea">
-                            {paragraphsCount >= 2 ? parsedNewsText.slice(0, 3) : parsedNewsText}
+            {newsValue
+                ? (
+                    <div className="newsContainer">
+                        <div className="wrapper" ref={wrapperRef}>
+                            <BreadCrumbForNews separator={<div className="separator" />} news={newsValue?.news} />
+                            <div className="NewsHeader">
+                                <h1 className="">{newsValue?.news.title}</h1>
+                                <h3 className="news-date">{dayjs(newsValue?.news.creationDate).format('DD.MM.YYYY')}</h3>
+                            </div>
+                            <div className="newsWithImageWrapper">
+                                {newsImg != null && (windowSize.width > 1024) ? (
+                                    <img
+                                        className="newsImage"
+                                        key={newsValue?.news.id}
+                                        src={base64ToUrl(getImage(newsValue?.news.imageId!)?.base64, getImage(newsValue?.news.imageId!)?.mimeType)}
+                                        alt={newsValue?.news.title}
+                                    />
+                                ) : ''}
+                                <div className="newsTextArea">
+                                    {paragraphsCount >= 2 ? parsedNewsText.slice(0, 3) : parsedNewsText}
+                                </div>
+                                {newsImg != null && (windowSize.width <= 1024) && (width >= wrapperWidth * 0.6) ? (
+                                    <img
+                                        className="newsGoodImageClass Full"
+                                        key={newsValue?.news.id}
+                                        src={base64ToUrl(getImage(newsValue?.news.imageId!)?.base64, getImage(newsValue?.news.imageId!)?.mimeType)}
+                                        alt={newsValue?.news.title}
+                                    />
+                                ) : ''}
+                                <div className="newsTextArea">
+                                    {paragraphsCount >= 2 ? parsedNewsText.slice(3) : ''}
+                                </div>
+                            </div>
+                            <div className="newsLinks">
+                                <Link
+                                    className={`Link ${newsValue?.prevNewsUrl === null ? 'toHide' : ''}`}
+                                    to={`/news/${newsValue?.prevNewsUrl}`}
+                                    onClick={prevArticleClickEvent}
+                                >
+                                    Попередня новина
+                                </Link>
+                                <Link
+                                    className={`Link ${newsValue?.nextNewsUrl === null ? 'toHide' : ''}`}
+                                    to={`/news/${newsValue?.nextNewsUrl}`}
+                                    onClick={nextArticleClickEvent}
+                                >
+                                    Наступна новина
+                                </Link>
+                            </div>
+                            <RandomNewsBlock newsValue={newsValue} />
                         </div>
-                        {newsImg != null && (windowSize.width <= 1024) && (width >= wrapperWidth * 0.6) ? (
-                            <img
-                                className="newsGoodImageClass Full"
-                                key={newsValue?.news.id}
-                                src={base64ToUrl(getImage(newsValue?.news.imageId!)?.base64, getImage(newsValue?.news.imageId!)?.mimeType)}
-                                alt={newsValue?.news.title}
-                            />
-                        ) : ''}
-                        <div className="newsTextArea">
-                            {paragraphsCount >= 2 ? parsedNewsText.slice(3) : ''}
-                        </div>
-                    </div>
-                    <div className="newsLinks">
-                        <Link
-                            className={`Link ${newsValue?.prevNewsUrl === null ? 'toHide' : ''}`}
-                            to={`/news/${newsValue?.prevNewsUrl}`}
-                            onClick={prevArticleClickEvent}
-                        >
-                        Попередня новина
-                        </Link>
-                        <Link
-                            className={`Link ${newsValue?.nextNewsUrl === null ? 'toHide' : ''}`}
-                            to={`/news/${newsValue?.nextNewsUrl}`}
-                            onClick={nextArticleClickEvent}
-                        >
-                        Наступна новина
-                        </Link>
                     </div>
-                    <RandomNewsBlock newsValue={newsValue} />
-                </div>
-            </div>
+                )
+                : <></>}
+
         </div>
     );
 };

src/features/AdditionalPages/PartnersPage/Title/Title.styles.scss

@@ -38,6 +38,8 @@
 
         .subTitle{
             @include mut.with-font($font-family: ft.$roboto-font, $font-weight: 500, $font-size: 20px);
+            position: relative;
+            z-index: 1;
         }
     }
 }

src/features/AdminPage/NewStreetcode/TextBlock/TextForm/TextForm.component.tsx

@@ -46,7 +46,7 @@ const TextForm = ({
             </Form.Item>
             <Form.Item>
                 <TextEditor
-                    character_limit={15000}
+                    character_limit={25000}
                     inputInfo={inputInfo}
                     setInputInfo={setInputInfo}
                     onChange={onChange}

src/features/MainPage/InstagramBlock/InstagramBlock.styles.scss

@@ -4,6 +4,7 @@
 @use "@assets/sass/mixins/_utils.mixins.scss" as mut;
 @use "@sass/_utils.functions.scss" as f;
 @use '@assets/sass/mixins/_utils.mixins.scss' as ut;
+@use "@assets/sass/variables/_variables.layers.scss" as l;
 
 .InstagramBlock {
     .sliderContainer {
@@ -15,7 +16,6 @@
 
             .slick-prev,
             .slick-next {
-                z-index: 9999;
                 filter: none !important;
             }
 

src/features/MainPage/NewsSlider/NewsSliderItem/NewsSliderItem.styles.scss

@@ -145,8 +145,8 @@
             left: 0;
             right: 0;
 
-            height: f.pxToRem(54px);
-            padding-top: f.pxToRem(18px);
+            //height of 2 lines + 10px
+            height: f.pxToRem(46px);
             padding-left: f.pxToRem(30px);
 
             @include mut.with-font(ft.$roboto-font, $font-weight: bolder, $font-size: 15px);

src/features/MainPage/StreetcodeSlider/StreetcodeSlider.component.tsx

@@ -32,12 +32,14 @@ const StreetcodeSlider = () => {
         slidesToShow: 1,
         swipeOnClick: false,
         centerMode: false,
-        centerPadding: '-5px',
+        initialSlide: 0,
     };
 
     const windowsize = useWindowSize();
     if (windowsize.width <= 1024 && windowsize.width >= 768) props.centerMode = true;
     if (windowsize.width <= 1024) props.dots = true;
+    if (windowsize.width <= 1024 && windowsize.width >= 768) props.initialSlide = 1;
+    if (windowsize.width <= 768) props.variableWidth = false;
 
     useAsync(async () => {
         const shuffleSeed = Math.floor(Date.now() / 1000);

src/features/MainPage/StreetcodeSlider/StreetcodeSlider.styles.scss

@@ -57,8 +57,6 @@ $bgImg: '@assets/images/streetcode-card/background.webp';
 
         .slick-center {
             transform: scale(1.16);
-            padding-left: f.pxToRem(16px);
-            padding-right: f.pxToRem(16px);
             padding-bottom: f.pxToRem(20px);
         }
     }