From b14b9d37cccb9fc48bd630061669fd6d032d860c Mon Sep 17 00:00:00 2001 From: malyna2 Date: Tue, 10 Oct 2023 18:15:13 +0300 Subject: [PATCH 01/50] getting streetcodes on main page with pagination --- src/app/api/streetcode/streetcodes.api.ts | 4 +++ .../common/constants/api-routes.constants.ts | 1 + src/app/stores/streetcode-mainpage-store.ts | 16 ++++++++++ .../StreetcodeSlider.component.tsx | 32 ++++++++++++------- 4 files changed, 41 insertions(+), 12 deletions(-) diff --git a/src/app/api/streetcode/streetcodes.api.ts b/src/app/api/streetcode/streetcodes.api.ts index 87151e58c..9b6501c36 100644 --- a/src/app/api/streetcode/streetcodes.api.ts +++ b/src/app/api/streetcode/streetcodes.api.ts @@ -27,6 +27,10 @@ const StreetcodesApi = { getAllMainPage: () => Agent.get(`${API_ROUTES.STREETCODES.GET_ALL_MAINPAGE}`), + getPageMainPage: (page: number, pageSize: number, shuffleSeed: number) => Agent + .get(`${API_ROUTES.STREETCODES.GET_PAGE_MAINPAGE}`, + new URLSearchParams(Object.entries({ page: page.toString(), pageSize: pageSize.toString(), shuffleSeed: shuffleSeed.toString() }))), + getAllCatalog: (page: number, count: number) => Agent .get( `${API_ROUTES.STREETCODES.GET_ALL_CATALOG}`, diff --git a/src/app/common/constants/api-routes.constants.ts b/src/app/common/constants/api-routes.constants.ts index 60a63c581..723010d8d 100644 --- a/src/app/common/constants/api-routes.constants.ts +++ b/src/app/common/constants/api-routes.constants.ts @@ -161,6 +161,7 @@ export const API_ROUTES = { GET_ALL: 'streetcode/getAll', GET_BY_FILTER: 'streetcode/getByFilter', GET_ALL_MAINPAGE: 'streetcode/getAllMainPage', + GET_PAGE_MAINPAGE: 'streetcode/getPageMainPage', GET_ALL_PUBLISHED: 'streetcode/getAllPublished', GET_ALL_SHORT: 'streetcode/getAllShort', GET_SHORT_BY_ID: 'streetcode/getShortById', diff --git a/src/app/stores/streetcode-mainpage-store.ts b/src/app/stores/streetcode-mainpage-store.ts index 7f214ab91..ac47a8ae1 100644 --- a/src/app/stores/streetcode-mainpage-store.ts +++ b/src/app/stores/streetcode-mainpage-store.ts @@ -5,6 +5,10 @@ import { StreetcodeMainPage } from '@/models/streetcode/streetcode-types.model'; export default class StreetcodesMainPageStore { public streetcodes = new Array(); + + private page = 1; + private readonly pageSize = 3; + private shuffleSeed = Math.floor(Date.now() / 1000); constructor() { makeAutoObservable(this); @@ -17,6 +21,18 @@ export default class StreetcodesMainPageStore { }).catch((error) => {}); }; + public fetchNextPageOfStreetcodesMainPage = async () => { + const arrayOfStreetcodes = await StreetcodesApi.getPageMainPage(this.page, this.pageSize, this.shuffleSeed); + + if (arrayOfStreetcodes.length !== 0) { + this.page += 1; + return arrayOfStreetcodes; + } + else { + throw new Error('No more streetcodes to load'); + } + }; + get getStreetcodesArray() { return this.streetcodes; } diff --git a/src/features/MainPage/StreetcodeSlider/StreetcodeSlider.component.tsx b/src/features/MainPage/StreetcodeSlider/StreetcodeSlider.component.tsx index be0378b8d..a7a00e8cb 100644 --- a/src/features/MainPage/StreetcodeSlider/StreetcodeSlider.component.tsx +++ b/src/features/MainPage/StreetcodeSlider/StreetcodeSlider.component.tsx @@ -13,8 +13,11 @@ import { StreetcodeMainPage } from '@/models/streetcode/streetcode-types.model'; import SlickSlider from '../../SlickSlider/SlickSlider.component'; import StreetcodeSliderItem from './StreetcodeSliderItem/StreetcodeSliderItem.component'; +import useMobx from '@/app/stores/root-store'; const StreetcodeSlider = () => { + const { streetcodeMainPageStore } = useMobx(); + const { fetchNextPageOfStreetcodesMainPage } = streetcodeMainPageStore; const [streetcodes, setStreetcodes] = useState([]); const [images, setImages] = useState([]); @@ -37,19 +40,24 @@ const StreetcodeSlider = () => { if (windowsize.width <= 1024) props.dots = true; useAsync(async () => { - try { - const response = await StreetcodesApi.getAllMainPage(); - setStreetcodes(response); - - const newImages : Image[] = []; - for (const streetcode of response) { - await ImagesApi.getById(streetcode.imageId) - .then((img) => { - newImages.push(img); - setImages(newImages); - }); + const newStreetcodes: StreetcodeMainPage[] = []; + const newImages: Image[] = []; + while (true) { + try { + const response = await fetchNextPageOfStreetcodesMainPage(); + newStreetcodes.push(...response); + setStreetcodes(newStreetcodes); + for (const streetcode of response) { + await ImagesApi.getById(streetcode.imageId) + .then((img) => { + newImages.push(img); + }); + } + setImages(newImages); + } catch (error: unknown) { + break; } - } catch (error) {} + } }); if (streetcodes.length > 0) { From 50bd5896da094307c622816ffd94afb4572f5cf0 Mon Sep 17 00:00:00 2001 From: malyna2 Date: Wed, 11 Oct 2023 21:22:24 +0300 Subject: [PATCH 02/50] added blur to the top of the teaser block on streetcode page --- .../StreetcodeCard.component.tsx | 5 +- .../StreetcodeCard/StreetcodeCard.styles.scss | 46 ++++++++++++------- 2 files changed, 33 insertions(+), 18 deletions(-) diff --git a/src/features/StreetcodePage/MainBlock/StreetcodeCard/StreetcodeCard.component.tsx b/src/features/StreetcodePage/MainBlock/StreetcodeCard/StreetcodeCard.component.tsx index 919367199..ffc43424b 100644 --- a/src/features/StreetcodePage/MainBlock/StreetcodeCard/StreetcodeCard.component.tsx +++ b/src/features/StreetcodePage/MainBlock/StreetcodeCard/StreetcodeCard.component.tsx @@ -119,10 +119,13 @@ const StreetcodeCard = ({ streetcode, setActiveTagId, setActiveBlock }: Props) = setActiveTagBlock={setActiveBlock} /> +
+

{streetcode?.teaser}

- + +
{audio?.base64 && audioIsLoaded ? ( diff --git a/src/features/StreetcodePage/MainBlock/StreetcodeCard/StreetcodeCard.styles.scss b/src/features/StreetcodePage/MainBlock/StreetcodeCard/StreetcodeCard.styles.scss index 6c5924fb9..62b7c28d8 100644 --- a/src/features/StreetcodePage/MainBlock/StreetcodeCard/StreetcodeCard.styles.scss +++ b/src/features/StreetcodePage/MainBlock/StreetcodeCard/StreetcodeCard.styles.scss @@ -2,6 +2,22 @@ @use "@sass/variables/_variables.colors.scss" as c; @use "@sass/variables/_variables.fonts.scss" as ft; @use "@sass/_utils.functions.scss" as f; + +@mixin blur($edge:0, $top:0, $height:0) { + position: relative; + &:after { + content: ''; + position: absolute; + top: $top; + left: 0; + right: 0; + 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: 1; + } +} + .card { display: flex; flex-direction: row; @@ -65,10 +81,16 @@ .tagContainer{ @include mut.rem-margined(13px, 0, 13px, 0); } +.blurTop{ + @include blur($edge: 0deg, $top: 9px, $height: 16px); +} +.blurBottom{ + @include blur($edge: 180deg, $top: -20px, $height: 21px); +} .teaserBlock { - padding-bottom: f.pxToRem(20px); @include mut.with-font($font-weight: 300, $font-size: 20px); - @include mut.rem-margined(25px, 0px, 0px, 0px); + @include mut.rem-margined($top: 10px); + @include mut.rem-padded($top: 15px, $bottom: 15px); line-height: 23px; overflow: auto; flex-grow: 1; @@ -90,17 +112,6 @@ border-width: 3px; border-color: c.$accented-red-color; } - &:before { - content: ''; - position: absolute; - top: -25px; - left: 0; - right: 0; - height: f.pxToRem(25px); - background: linear-gradient(180deg, rgba(255,255,255,0.01) 0%, rgba(255,255,255,0.25) 5%, rgba(255,255,255,0.75) 21%); - -webkit-text-fill-color: transparent; - } - } .audioBtnActive { background-color: c.$accented-red-color; @@ -170,10 +181,14 @@ @media screen and (max-width: 1024px) { .blockCentering { @include mut.rem-padded($top: 2px, $right: 10px, $bottom: 0px, $left: 10px); + .blurTop{ + @include blur($edge: 0deg, $top: 4px, $height: 11px); + } .teaserBlock { line-height: f.pxToRem(18.75px); font-size: f.pxToRem(16px); - @include mut.rem-margined(15px, 0px, 0px, 0px); + @include mut.rem-margined($top: 5px); + @include mut.rem-padded($top: 10px, $bottom: 15px); @include mut.with-font($font-weight: 300, $font-size: 16px); } .card { @@ -258,9 +273,6 @@ .cardFooter{ margin-top: f.pxToRem(39px) !important; @include mut.rem-padded(0px, 0px, 0px, 0px); - &:before { - top: -64px; - } .audioBtn{ width: 100%; } From 0e0b71876c03ce3d85887fe5036d42283e507291 Mon Sep 17 00:00:00 2001 From: malyna2 Date: Thu, 12 Oct 2023 19:35:09 +0300 Subject: [PATCH 03/50] Mixin moved to appropriate file, z index changed to 100 for this mixin --- src/assets/sass/mixins/_utils.mixins.scss | 15 +++++++++++++ .../StreetcodeCard/StreetcodeCard.styles.scss | 21 +++---------------- 2 files changed, 18 insertions(+), 18 deletions(-) diff --git a/src/assets/sass/mixins/_utils.mixins.scss b/src/assets/sass/mixins/_utils.mixins.scss index 3e0094802..333f51036 100644 --- a/src/assets/sass/mixins/_utils.mixins.scss +++ b/src/assets/sass/mixins/_utils.mixins.scss @@ -252,3 +252,18 @@ @content; } } + +@mixin blur($edge:0, $top:0, $height:0) { + position: relative; + &:after { + content: ''; + position: absolute; + top: $top; + left: 0; + right: 0; + 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; + } +} diff --git a/src/features/StreetcodePage/MainBlock/StreetcodeCard/StreetcodeCard.styles.scss b/src/features/StreetcodePage/MainBlock/StreetcodeCard/StreetcodeCard.styles.scss index 62b7c28d8..a1972051e 100644 --- a/src/features/StreetcodePage/MainBlock/StreetcodeCard/StreetcodeCard.styles.scss +++ b/src/features/StreetcodePage/MainBlock/StreetcodeCard/StreetcodeCard.styles.scss @@ -3,21 +3,6 @@ @use "@sass/variables/_variables.fonts.scss" as ft; @use "@sass/_utils.functions.scss" as f; -@mixin blur($edge:0, $top:0, $height:0) { - position: relative; - &:after { - content: ''; - position: absolute; - top: $top; - left: 0; - right: 0; - 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: 1; - } -} - .card { display: flex; flex-direction: row; @@ -82,10 +67,10 @@ @include mut.rem-margined(13px, 0, 13px, 0); } .blurTop{ - @include blur($edge: 0deg, $top: 9px, $height: 16px); + @include mut.blur($edge: 0deg, $top: 9px, $height: 16px); } .blurBottom{ - @include blur($edge: 180deg, $top: -20px, $height: 21px); + @include mut.blur($edge: 180deg, $top: -20px, $height: 21px); } .teaserBlock { @include mut.with-font($font-weight: 300, $font-size: 20px); @@ -182,7 +167,7 @@ .blockCentering { @include mut.rem-padded($top: 2px, $right: 10px, $bottom: 0px, $left: 10px); .blurTop{ - @include blur($edge: 0deg, $top: 4px, $height: 11px); + @include mut.blur($edge: 0deg, $top: 4px, $height: 11px); } .teaserBlock { line-height: f.pxToRem(18.75px); From da8909a4aefe41d6f74aa81aa304f310293917d8 Mon Sep 17 00:00:00 2001 From: KateYatsiuk Date: Fri, 13 Oct 2023 21:17:25 +0300 Subject: [PATCH 04/50] Fixed indentations and other minor styles --- .../MainPage/Heading/Heading.styles.scss | 12 ++++++++-- .../InstagramBlock/InstagramBlock.styles.scss | 10 +++++++- .../NewsSlider/NewsSlider.styles.scss | 23 +++++++++++++++---- .../PartnersBlockMain.styles.scss | 5 ++-- .../TeamSlider/TeamComponent.styles.scss | 1 + .../TeamItemSlider/TeamItemSlider.styles.scss | 2 +- 6 files changed, 42 insertions(+), 11 deletions(-) diff --git a/src/features/MainPage/Heading/Heading.styles.scss b/src/features/MainPage/Heading/Heading.styles.scss index f389552aa..5012e8a0b 100644 --- a/src/features/MainPage/Heading/Heading.styles.scss +++ b/src/features/MainPage/Heading/Heading.styles.scss @@ -22,21 +22,24 @@ .headingButton { @include mut.sized($width: 235px); @include mut.with-font($font-family: ft.$roboto-font, $font-weight: 500, $font-size: 20px); - + line-height: 23.44px; text-decoration: underline; text-align: right; color: c.$text-red-color; cursor: pointer; } - @media screen and (max-width: 1024px){ + + @media screen and (max-width: 1024px) { @include mut.sized($height: 50px, $width: 100%); + .leftPart { .blockName { @include mut.with-font($font-family: ft.$closer-text-font, $font-weight: 500, $font-size: 24px); line-height: 40px; } } + .headingButton { @include mut.with-font($font-family: ft.$roboto-font, $font-weight: 500, $font-size: 16px); line-height: 18.75px; @@ -44,7 +47,12 @@ } @media screen and (max-width: 480px) { + display: inline-flex; + align-items: center; + justify-content: center; + gap: f.pxToRem(30px); @include mut.rem-padded($left: 33px, $right: 33px); + .leftPart { .blockName { @include mut.rem-margined($left: 0px); diff --git a/src/features/MainPage/InstagramBlock/InstagramBlock.styles.scss b/src/features/MainPage/InstagramBlock/InstagramBlock.styles.scss index 08a11f1ea..d045a3167 100644 --- a/src/features/MainPage/InstagramBlock/InstagramBlock.styles.scss +++ b/src/features/MainPage/InstagramBlock/InstagramBlock.styles.scss @@ -33,6 +33,10 @@ } } + .slick-dots { + bottom: f.pxToRem(3px) !important; + } + .slick-next { right: 20px !important; @@ -51,7 +55,11 @@ .slick-track { @include mut.flexed($align-items: flex-start, $gap: 20px); @include mut.rem-padded($bottom: 30px); - @include mut.rem-margined($left: 20px); + @include mut.rem-margined($top: 52px, $left: 20px); + + @media screen and (max-width: 1024px) { + @include mut.rem-margined($top: 30px, $left: 20px); + } } diff --git a/src/features/MainPage/NewsSlider/NewsSlider.styles.scss b/src/features/MainPage/NewsSlider/NewsSlider.styles.scss index f60d8cb9d..432fc87f4 100644 --- a/src/features/MainPage/NewsSlider/NewsSlider.styles.scss +++ b/src/features/MainPage/NewsSlider/NewsSlider.styles.scss @@ -21,7 +21,12 @@ .newsSliderComponent { margin-bottom: f.pxToRem(30px); - margin-top: f.pxToRem(32px); + margin-top: f.pxToRem(20px); + + @media screen and (min-width: 767px) and (max-width: 1024px) { + margin-top: f.pxToRem(15px); + } + @media screen and (max-width: 768px) { margin-top: f.pxToRem(15px); } @@ -41,12 +46,13 @@ } .slick-slide { - width: unset !important; - - @media screen and (max-width: 767px) { + width: unset !important; + + @media screen and (max-width: 767px) { width: 100% !important; } - } + } + .newsSliderContent { width: 100%; @include mut.flex-centered(); @@ -74,6 +80,13 @@ } } + @media screen and (min-width: 767px) and (max-width: 1024px) { + .newsSliderContent { + margin-top: 0px !important; + padding-top: 0px !important; + } + } + .redirectButton { @include mut.sized($width: 100%, $height: 46px); @include mut.full-rounded(10px); diff --git a/src/features/MainPage/PartnersBlockMain/PartnersBlockMain.styles.scss b/src/features/MainPage/PartnersBlockMain/PartnersBlockMain.styles.scss index 5cba5f712..5214ddd5e 100644 --- a/src/features/MainPage/PartnersBlockMain/PartnersBlockMain.styles.scss +++ b/src/features/MainPage/PartnersBlockMain/PartnersBlockMain.styles.scss @@ -13,7 +13,7 @@ row-gap: 0; .partnersItem { - @include mut.rem-margined($top: 87px, $right: 10px, $bottom: 30px, $left: 10px); + @include mut.rem-margined($top: 53px, $right: 10px, $bottom: 30px, $left: 10px); @media screen and (max-width: 768px) { @include mut.rem-margined($top: 50px, $right: 10px, $bottom: 30px, $left: 10px); } @@ -29,13 +29,14 @@ } .keyPartnersBlock { - margin: 0; + @include mut.rem-margined($top: 25px, $bottom: 80px); } } @media screen and (max-width: 1200px) { .partnersBlock { .keyPartnersBlock { + @include mut.rem-margined($top: 0px, $bottom: 30px); .partnersItem { @include mut.rem-margined($top: 15px, $right: 10px, $bottom: 10px, $left: 15px); @include mut.sized($width: 350px, $height: 106px); diff --git a/src/features/MainPage/TeamSlider/TeamComponent.styles.scss b/src/features/MainPage/TeamSlider/TeamComponent.styles.scss index 2b2e2a3f7..749d36b4a 100644 --- a/src/features/MainPage/TeamSlider/TeamComponent.styles.scss +++ b/src/features/MainPage/TeamSlider/TeamComponent.styles.scss @@ -75,6 +75,7 @@ $bgImg: '@assets/images/streetcode-card/background.webp'; height: unset; .mainContent { + margin-top: f.pxToRem(28px); ::-webkit-scrollbar { width: f.pxToRem(2px); } diff --git a/src/features/MainPage/TeamSlider/TeamItemSlider/TeamItemSlider.styles.scss b/src/features/MainPage/TeamSlider/TeamItemSlider/TeamItemSlider.styles.scss index c2f00e46f..cce29f571 100644 --- a/src/features/MainPage/TeamSlider/TeamItemSlider/TeamItemSlider.styles.scss +++ b/src/features/MainPage/TeamSlider/TeamItemSlider/TeamItemSlider.styles.scss @@ -20,7 +20,7 @@ margin-left: f.pxToRem(20px); @media (min-width: 768px) and (max-width: 1024px) { - margin-top: f.pxToRem(40px); + margin-top: f.pxToRem(18px); @include mut.sized(266px, 402px); padding-bottom: f.pxToRem(20px); } From 7e77b3ea840ca371a80900d5a8a0ed274aa7e3ef Mon Sep 17 00:00:00 2001 From: malyna2 Date: Fri, 13 Oct 2023 23:27:52 +0300 Subject: [PATCH 05/50] conflict merge --- .../StreetcodeCard.component.tsx | 185 ++++++++++-------- 1 file changed, 100 insertions(+), 85 deletions(-) diff --git a/src/features/StreetcodePage/MainBlock/StreetcodeCard/StreetcodeCard.component.tsx b/src/features/StreetcodePage/MainBlock/StreetcodeCard/StreetcodeCard.component.tsx index ffc43424b..2e33d8cc6 100644 --- a/src/features/StreetcodePage/MainBlock/StreetcodeCard/StreetcodeCard.component.tsx +++ b/src/features/StreetcodePage/MainBlock/StreetcodeCard/StreetcodeCard.component.tsx @@ -2,13 +2,14 @@ import './StreetcodeCard.styles.scss'; import { observer } from 'mobx-react-lite'; import { useEffect, useState } from 'react'; +import { Helmet } from 'react-helmet'; import { PlayCircleFilled } from '@ant-design/icons'; import TagList from '@components/TagList/TagList.component'; import BlockSlider from '@features/SlickSlider/SlickSlider.component'; import { useAsync } from '@hooks/stateful/useAsync.hook'; import { StreetcodeTag } from '@models/additional-content/tag.model'; import Streetcode from '@models/streetcode/streetcode-types.model'; -import useMobx, { useAudioContext, useModalContext, useStreecodePageLoaderContext } from '@stores/root-store'; +import { useAudioContext, useModalContext, useStreecodePageLoaderContext } from '@stores/root-store'; import { Button } from 'antd'; @@ -78,93 +79,107 @@ const StreetcodeCard = ({ streetcode, setActiveTagId, setActiveBlock }: Props) = return ( streecodePageLoaderContext.isPageLoaded ? ( -
-
-
- - {images.filter((image) => (image.imageDetails?.alt === ImageAssigment.animation.toString() - || image.imageDetails?.alt === ImageAssigment.blackandwhite.toString())).map((im) => ( - {im.imageDetails?.alt} - ))} - + <> + + + + + 1 ? base64ToUrl(images[1].base64, images[1].mimeType) + : base64ToUrl(images[0].base64, images[0].mimeType) + } + /> + +
+
+
+ + {images.filter((image) => (image.imageDetails?.alt === ImageAssigment.animation.toString() + || image.imageDetails?.alt === ImageAssigment.blackandwhite.toString())).map((im) => ( + {im.imageDetails?.alt} + ))} + +
-
-
-
- Стріткод # - {streetcode?.index ?? 0 <= 9999 ? `000${streetcode?.index}`.slice(-4) - : streetcode?.index} -
-

- {streetcode?.title} -

-
- {streetcode?.dateString} -
-
- tag.isVisible)} - setActiveTagId={setActiveTagId} - setActiveTagBlock={setActiveBlock} - /> -
-
- -

- {streetcode?.teaser} -

- -
-
- {audio?.base64 && audioIsLoaded - ? ( - - ) - : ( - - )} - - {arlink - ? ( - - ) - : <>} +
+
+ Стріткод # + {streetcode?.index ?? 0 <= 9999 ? `000${streetcode?.index}`.slice(-4) + : streetcode?.index} +
+

+ {streetcode?.title} +

+
+ {streetcode?.dateString} +
+
+ tag.isVisible)} + setActiveTagId={setActiveTagId} + setActiveTagBlock={setActiveBlock} + /> +
+
+ +

+ {streetcode?.teaser} +

+ +
+
+ {audio?.base64 && audioIsLoaded + ? ( + + ) + : ( + + )} + + {arlink + ? ( + + ) + : <>} +
-
- ) : '' + + ) : <> ); }; From 3fb6ba34e6751464ffd25dc33215dc38e4819376 Mon Sep 17 00:00:00 2001 From: malyna2 Date: Sun, 15 Oct 2023 15:09:13 +0300 Subject: [PATCH 06/50] improved fetching of images --- .../StreetcodeSlider/StreetcodeSlider.component.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/features/MainPage/StreetcodeSlider/StreetcodeSlider.component.tsx b/src/features/MainPage/StreetcodeSlider/StreetcodeSlider.component.tsx index a7a00e8cb..e73059af2 100644 --- a/src/features/MainPage/StreetcodeSlider/StreetcodeSlider.component.tsx +++ b/src/features/MainPage/StreetcodeSlider/StreetcodeSlider.component.tsx @@ -47,13 +47,13 @@ const StreetcodeSlider = () => { const response = await fetchNextPageOfStreetcodesMainPage(); newStreetcodes.push(...response); setStreetcodes(newStreetcodes); + const promises = []; + for (const streetcode of response) { - await ImagesApi.getById(streetcode.imageId) - .then((img) => { - newImages.push(img); - }); + promises.push(ImagesApi.getById(streetcode.imageId).then((img) => { newImages.push(img); })) } - setImages(newImages); + + await Promise.all(promises).then(() => { setImages(newImages); }); } catch (error: unknown) { break; } From 175198d93a6aebb23a094bfdab1c453158680b88 Mon Sep 17 00:00:00 2001 From: malyna2 Date: Mon, 16 Oct 2023 12:41:04 +0300 Subject: [PATCH 07/50] Fixed image card displaying for resolution from 381 to 360 --- .../StreetcodeCard/StreetcodeCard.styles.scss | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/features/StreetcodePage/MainBlock/StreetcodeCard/StreetcodeCard.styles.scss b/src/features/StreetcodePage/MainBlock/StreetcodeCard/StreetcodeCard.styles.scss index 6c5924fb9..fd7a3451a 100644 --- a/src/features/StreetcodePage/MainBlock/StreetcodeCard/StreetcodeCard.styles.scss +++ b/src/features/StreetcodePage/MainBlock/StreetcodeCard/StreetcodeCard.styles.scss @@ -272,4 +272,14 @@ } } } -} \ No newline at end of file +} + +@media screen and (max-width: 385px) { + .blockCentering { + .card { + .leftSider { + @include mut.sized(98%, 489px); + } + } + } +} From 8be348202d94ef0b6b700ef78b3be40ec6c2ab67 Mon Sep 17 00:00:00 2001 From: BohdanBybliv Date: Mon, 16 Oct 2023 21:16:53 +0300 Subject: [PATCH 08/50] added the same style for all slider buttons --- src/features/SlickSlider/SlickSlider.styles.scss | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/src/features/SlickSlider/SlickSlider.styles.scss b/src/features/SlickSlider/SlickSlider.styles.scss index 5b9285b82..33b59da67 100644 --- a/src/features/SlickSlider/SlickSlider.styles.scss +++ b/src/features/SlickSlider/SlickSlider.styles.scss @@ -83,16 +83,9 @@ li.slick-active button:before { .slick-arrow { opacity: .4; filter: c.$selected-arrow-filter-color; -} -.nonInfiniteSlider { - .slick-arrow { + &:hover { opacity: .25; - filter: c.$selected-arrow-filter-color; - - &:hover { - opacity: .25; - } } } From 3f08b00eed56c689a402bb9e805018cd8d501583 Mon Sep 17 00:00:00 2001 From: BohdanBybliv Date: Mon, 16 Oct 2023 21:18:35 +0300 Subject: [PATCH 09/50] if one news is displayed, add posibility to click --- src/features/MainPage/NewsSlider/NewsSlider.component.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/features/MainPage/NewsSlider/NewsSlider.component.tsx b/src/features/MainPage/NewsSlider/NewsSlider.component.tsx index 784d20727..d97e36299 100644 --- a/src/features/MainPage/NewsSlider/NewsSlider.component.tsx +++ b/src/features/MainPage/NewsSlider/NewsSlider.component.tsx @@ -92,7 +92,13 @@ const NewsSlider = () => {
{(news.length === 1) ? ( -
+
{ + handleOnItemClick(e, news[0].url.toString()); + }} + >
) : ( From d58ad556874f0f02a1b304ef6734e26d5f0f43e9 Mon Sep 17 00:00:00 2001 From: BohdanBybliv Date: Mon, 16 Oct 2023 21:24:53 +0300 Subject: [PATCH 10/50] fix problem with text, that isn't showed in text and authorship on admin page --- .../NewStreetcode/TextBlock/TextBlock.component.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/features/AdminPage/NewStreetcode/TextBlock/TextBlock.component.tsx b/src/features/AdminPage/NewStreetcode/TextBlock/TextBlock.component.tsx index 46585811d..114568735 100644 --- a/src/features/AdminPage/NewStreetcode/TextBlock/TextBlock.component.tsx +++ b/src/features/AdminPage/NewStreetcode/TextBlock/TextBlock.component.tsx @@ -21,10 +21,12 @@ const TextBlock = React.memo(({ inputInfo, setInputInfo, video, setVideo, onChange, parseId, }: Props) => { const [inputInfoAsync, setInputInfoAsync] = useState>(); + const [isLoaded, setIsLoaded] = useState(false); useAsync(() => { if(parseId != null) { TextsApi.getByStreetcodeId(parseId).then((result) => { setInputInfoAsync(result); + setIsLoaded(true); }); } }, [parseId]); @@ -34,8 +36,7 @@ const TextBlock = React.memo(({ }, [inputInfoAsync]); return ( - inputInfoAsync !== null - ? ( + isLoaded ? ( Date: Tue, 17 Oct 2023 10:59:20 +0300 Subject: [PATCH 11/50] Loading sun is works in a right way --- src/app/stores/streetcodes-catalog-store.ts | 13 ++++++++----- .../StreetcodeCatalog.component.tsx | 11 +++-------- 2 files changed, 11 insertions(+), 13 deletions(-) diff --git a/src/app/stores/streetcodes-catalog-store.ts b/src/app/stores/streetcodes-catalog-store.ts index a25b87796..c16e29f42 100644 --- a/src/app/stores/streetcodes-catalog-store.ts +++ b/src/app/stores/streetcodes-catalog-store.ts @@ -6,7 +6,7 @@ import { StreetcodeCatalogRecord } from '@/models/streetcode/streetcode-types.mo export default class StreetcodesCatalogStore { public catalog = new Array(); - public isNotEightorZero = false; + public moreThenEight = false; constructor() { makeAutoObservable(this); @@ -14,14 +14,17 @@ export default class StreetcodesCatalogStore { public fetchCatalogStreetcodes = async (page: number, count = 8) => { try { + const fetchedPublishCount = (await StreetcodesApi.getAllPublished()) + .length; const array = await StreetcodesApi.getAllCatalog(page, count); if ( - this.catalog.length === 0 - || !array.some((item) => item.id === this.catalog.at(0)?.id) + this.catalog.length === 0 || !array.some((item) => item.id === this.catalog.at(0)?.id) ) { this.catalog = this.catalog.concat(array); - if (array.length !== 0 && array.length < count) { - this.isNotEightorZero = true; + if (this.catalog.length === fetchedPublishCount || fetchedPublishCount <= 8) { + this.moreThenEight = false; + } else { + this.moreThenEight = true; } } } catch (error) {} diff --git a/src/features/StreetcodeCatalogPage/StreetcodeCatalog.component.tsx b/src/features/StreetcodeCatalogPage/StreetcodeCatalog.component.tsx index f91bde140..1d8adcf97 100644 --- a/src/features/StreetcodeCatalogPage/StreetcodeCatalog.component.tsx +++ b/src/features/StreetcodeCatalogPage/StreetcodeCatalog.component.tsx @@ -12,10 +12,9 @@ import StreetcodeCatalogItem from './StreetcodeCatalogItem/StreetcodeCatalogItem const StreetcodeCatalog = () => { const { streetcodeCatalogStore } = useMobx(); - const { fetchCatalogStreetcodes, getCatalogStreetcodesArray, isNotEightorZero } = streetcodeCatalogStore; + const { fetchCatalogStreetcodes, getCatalogStreetcodesArray, moreThenEight } = streetcodeCatalogStore; const [loading, setLoading] = useState(false); const [screen, setScreen] = useState(1); - const [publishCount, setPublishCount] = useState(0); const handleSetNextScreen = () => { setScreen(screen + 1); @@ -28,11 +27,7 @@ const StreetcodeCatalog = () => { useAsync(async () => { const count = await StreetcodesApi.getCount(); - const fetchedPublishCount = (await StreetcodesApi.getAllPublished()).length; - setPublishCount(fetchedPublishCount); - if (publishCount === 8) { - setLoading(false); - } + if (count === getCatalogStreetcodesArray.length) { return; } @@ -63,7 +58,7 @@ const StreetcodeCatalog = () => {
{ - loading && (!isNotEightorZero && publishCount !== 8) + loading && (moreThenEight) && (
From 6941d24ee0aad6a39333017a1d067a5b22a2c772 Mon Sep 17 00:00:00 2001 From: KateYatsiuk Date: Tue, 17 Oct 2023 13:27:21 +0300 Subject: [PATCH 12/50] Changed all social media icons + minor fixes --- src/app/common/constants/social.constants.ts | 10 +++ src/app/layout/footer/Footer.component.tsx | 49 +++++++++----- src/app/layout/footer/Footer.styles.scss | 4 +- .../SocialMediaLinks.component.tsx | 32 +++++---- src/assets/images/contact-us/Email.svg | 3 + src/assets/images/contact-us/Facebook.svg | 3 + src/assets/images/contact-us/Facebook.webp | Bin 280 -> 0 bytes src/assets/images/contact-us/Instagram.svg | 3 + src/assets/images/contact-us/Instagram.webp | Bin 304 -> 0 bytes src/assets/images/contact-us/Telegram.svg | 3 + src/assets/images/contact-us/TikTok.svg | 3 + src/assets/images/contact-us/TikTok.webp | Bin 232 -> 0 bytes src/assets/images/contact-us/Twitter.svg | 4 ++ src/assets/images/contact-us/Twitter.webp | Bin 262 -> 0 bytes src/assets/images/contact-us/YouTube.svg | 3 + src/assets/images/contact-us/Youtube.webp | Bin 242 -> 0 bytes src/assets/images/contact-us/email.webp | Bin 208 -> 0 bytes src/assets/images/footer/Facebook.svg | 3 + src/assets/images/footer/Facebook.webp | Bin 230 -> 0 bytes src/assets/images/footer/Instagram.svg | 3 + src/assets/images/footer/Instagram.webp | Bin 252 -> 0 bytes src/assets/images/footer/Telegram.svg | 10 +++ src/assets/images/footer/TikTok.webp | Bin 188 -> 0 bytes src/assets/images/footer/Tiktok.svg | 3 + src/assets/images/footer/Twitter.webp | Bin 212 -> 0 bytes src/assets/images/footer/Twitter2.svg | 4 ++ src/assets/images/footer/Youtube.svg | 3 + src/assets/images/footer/Youtube.webp | Bin 154 -> 0 bytes src/assets/images/header-drawer/Facebook.svg | 3 + src/assets/images/header-drawer/Facebook.webp | Bin 312 -> 0 bytes src/assets/images/header-drawer/Instagram.svg | 3 + .../images/header-drawer/Instagram.webp | Bin 320 -> 0 bytes src/assets/images/header-drawer/Telegram.svg | 10 +++ src/assets/images/header-drawer/TikTok.webp | Bin 248 -> 0 bytes src/assets/images/header-drawer/Tiktok.svg | 3 + src/assets/images/header-drawer/Twitter.webp | Bin 270 -> 0 bytes src/assets/images/header-drawer/Youtube.svg | 3 + src/assets/images/header-drawer/Youtube.webp | Bin 214 -> 0 bytes .../AboutUsHeaderText.component.tsx | 36 +++++----- .../FounderCard/FounderCard.component.tsx | 39 ++++++----- .../FounderCard/FounderCard.styles.scss | 5 +- .../Founders/Founders.component.tsx | 4 +- .../ContactBlock/ContactBlock.component.tsx | 62 ++++++++++------- .../ContactBlock/ContactBlock.styles.scss | 64 +++++++++++------- 44 files changed, 251 insertions(+), 124 deletions(-) create mode 100644 src/app/common/constants/social.constants.ts create mode 100644 src/assets/images/contact-us/Email.svg create mode 100644 src/assets/images/contact-us/Facebook.svg delete mode 100644 src/assets/images/contact-us/Facebook.webp create mode 100644 src/assets/images/contact-us/Instagram.svg delete mode 100644 src/assets/images/contact-us/Instagram.webp create mode 100644 src/assets/images/contact-us/Telegram.svg create mode 100644 src/assets/images/contact-us/TikTok.svg delete mode 100644 src/assets/images/contact-us/TikTok.webp create mode 100644 src/assets/images/contact-us/Twitter.svg delete mode 100644 src/assets/images/contact-us/Twitter.webp create mode 100644 src/assets/images/contact-us/YouTube.svg delete mode 100644 src/assets/images/contact-us/Youtube.webp delete mode 100644 src/assets/images/contact-us/email.webp create mode 100644 src/assets/images/footer/Facebook.svg delete mode 100644 src/assets/images/footer/Facebook.webp create mode 100644 src/assets/images/footer/Instagram.svg delete mode 100644 src/assets/images/footer/Instagram.webp create mode 100644 src/assets/images/footer/Telegram.svg delete mode 100644 src/assets/images/footer/TikTok.webp create mode 100644 src/assets/images/footer/Tiktok.svg delete mode 100644 src/assets/images/footer/Twitter.webp create mode 100644 src/assets/images/footer/Twitter2.svg create mode 100644 src/assets/images/footer/Youtube.svg delete mode 100644 src/assets/images/footer/Youtube.webp create mode 100644 src/assets/images/header-drawer/Facebook.svg delete mode 100644 src/assets/images/header-drawer/Facebook.webp create mode 100644 src/assets/images/header-drawer/Instagram.svg delete mode 100644 src/assets/images/header-drawer/Instagram.webp create mode 100644 src/assets/images/header-drawer/Telegram.svg delete mode 100644 src/assets/images/header-drawer/TikTok.webp create mode 100644 src/assets/images/header-drawer/Tiktok.svg delete mode 100644 src/assets/images/header-drawer/Twitter.webp create mode 100644 src/assets/images/header-drawer/Youtube.svg delete mode 100644 src/assets/images/header-drawer/Youtube.webp diff --git a/src/app/common/constants/social.constants.ts b/src/app/common/constants/social.constants.ts new file mode 100644 index 000000000..acd7296aa --- /dev/null +++ b/src/app/common/constants/social.constants.ts @@ -0,0 +1,10 @@ +const SOCIAL_MEDIA = { + FACEBOOK: 'https://www.facebook.com/streetcodeua', + INSTAGRAM: 'https://www.instagram.com/streetcodeua', + TWITTER: 'https://twitter.com/streetcodeua', + TELEGRAM: 'https://t.me/streetcodeua', + TIKTOK: 'https://www.tiktok.com/@streetcodeua', + YOUTUBE: 'https://www.youtube.com/@streetcodeua', +}; + +export default SOCIAL_MEDIA; diff --git a/src/app/layout/footer/Footer.component.tsx b/src/app/layout/footer/Footer.component.tsx index a61b8c27b..9551419b3 100644 --- a/src/app/layout/footer/Footer.component.tsx +++ b/src/app/layout/footer/Footer.component.tsx @@ -1,24 +1,28 @@ import './Footer.styles.scss'; -import FaceBook from '@images/footer/Facebook.webp'; -import Instagram from '@images/footer/Instagram.webp'; +import FaceBook from '@images/footer/Facebook.svg'; +import Instagram from '@images/footer/Instagram.svg'; import StreetcodeFooter from '@images/footer/streetcode-footer.webp'; -import TikTok from '@images/footer/TikTok.webp'; -import Twitter from '@images/footer/Twitter.webp'; -import Youtube from '@images/footer/Youtube.webp'; +import Telegram from '@images/footer/Telegram.svg'; +import TikTok from '@images/footer/TikTok.svg'; +import Twitter from '@images/footer/Twitter2.svg'; +import Youtube from '@images/footer/Youtube.svg'; import { useEffect, useState } from 'react'; import { HashLink as Link } from 'react-router-hash-link'; import useWindowSize from '@hooks/stateful/useWindowSize.hook'; import JobApi from '@/app/api/job/Job.api'; -import FRONTEND_ROUTES from '@/app/common/constants/frontend-routes.constants'; import { ContactUsModal } from '@/app/common/components/modals/ContactUsModal/ContactUsModal.component'; +import FRONTEND_ROUTES from '@/app/common/constants/frontend-routes.constants'; +import SOCIAL_MEDIA from '@/app/common/constants/social.constants'; import scrollWithOffset from '@/app/common/utils/window.utility'; const Footer = () => { const windowSize = useWindowSize(); const [hasVacancies, setHasVacancies] = useState(false); + const REPORTS = 'https://drive.google.com/drive/folders/11Ef4y_6ZHyqT5eDxD5Cn-aWhr-kThh3A?usp=drive_link'; + useEffect(() => { JobApi.getActive() .then( @@ -48,7 +52,7 @@ const Footer = () => {
  • scrollWithOffset(el, 100)} + scroll={(el: any) => scrollWithOffset(el, 100)} > Вакансії @@ -59,32 +63,41 @@ const Footer = () => { diff --git a/src/app/layout/footer/Footer.styles.scss b/src/app/layout/footer/Footer.styles.scss index 61567e5d6..411db8701 100644 --- a/src/app/layout/footer/Footer.styles.scss +++ b/src/app/layout/footer/Footer.styles.scss @@ -70,6 +70,7 @@ li{ .ant-typography.text-white{ color: white; + @include mut.with-font($font-weight: 300, $font-size: 15px); } } } @@ -83,9 +84,6 @@ > * { @include mut.rem-margined($right: 14.62px); } - li:nth-child(5) { - @include mut.sized($height: 20px); - } } } @media screen and (max-width: 480px) { diff --git a/src/app/layout/header/HeaderDrawer/SocialMediaLinks/SocialMediaLinks.component.tsx b/src/app/layout/header/HeaderDrawer/SocialMediaLinks/SocialMediaLinks.component.tsx index 59757d692..05eefe311 100644 --- a/src/app/layout/header/HeaderDrawer/SocialMediaLinks/SocialMediaLinks.component.tsx +++ b/src/app/layout/header/HeaderDrawer/SocialMediaLinks/SocialMediaLinks.component.tsx @@ -1,36 +1,38 @@ import './SocialMediaLinks.styles.scss'; -import FaceBook from '@images/header-drawer/Facebook.webp'; -import Instagram from '@images/header-drawer/Instagram.webp'; -import TikTok from '@images/header-drawer/TikTok.webp'; -import Twitter from '@images/header-drawer/Twitter.webp'; -import Youtube from '@images/header-drawer/Youtube.webp'; +import FaceBook from '@images/header-drawer/Facebook.svg'; +import Instagram from '@images/header-drawer/Instagram.svg'; +import Telegram from '@images/header-drawer/Telegram.svg'; +import TikTok from '@images/header-drawer/TikTok.svg'; +import Youtube from '@images/header-drawer/Youtube.svg'; + +import SOCIAL_MEDIA from '@/app/common/constants/social.constants'; const SocialMediaLinks = () => ( diff --git a/src/assets/images/contact-us/Email.svg b/src/assets/images/contact-us/Email.svg new file mode 100644 index 000000000..faa656c17 --- /dev/null +++ b/src/assets/images/contact-us/Email.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/contact-us/Facebook.svg b/src/assets/images/contact-us/Facebook.svg new file mode 100644 index 000000000..acfe44a20 --- /dev/null +++ b/src/assets/images/contact-us/Facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/contact-us/Facebook.webp b/src/assets/images/contact-us/Facebook.webp deleted file mode 100644 index 020865f50c5cba70cc7851fd182e5b34f96ce6e4..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 280 zcmV+z0q6cwNk&Ex0RRA3MM6+kP&iBj0RR9mAwUQar$Cr(RJQpu-RmI8q;10d>zs#O zGmy4THb?XC?Kj9a(#~K8fBtl5@CoW}`(P-1@f6IJgNQ;12)3;Tjs8FoQ>!+F{ckpr z;H)5`{}X^PZ~J+kXB9^B);!oWL(CUVSNQhClR{*kY7`*zWTOW%U+iWxH=dmy{|Er^ zZ}5Af9`1tqF>x6zrdTlm>S4o@3(#WUNx9C`9vax=`#{~pEDJhp9+#S-3;XB2@A0pM zh~AT+{T%~<{T&_9-Y`t5=NZjVdR8xZ eEl diff --git a/src/assets/images/contact-us/Instagram.svg b/src/assets/images/contact-us/Instagram.svg new file mode 100644 index 000000000..85e642178 --- /dev/null +++ b/src/assets/images/contact-us/Instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/contact-us/Instagram.webp b/src/assets/images/contact-us/Instagram.webp deleted file mode 100644 index 9be16aaf46c224a89a67255b01c09237fda35fb3..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 304 zcmV-00nh$YNk&E}0RRA3MM6+kP&iB+0RR9mAwUQauOJXeLfao~27+vx&R_B-Cy=y} zH+uhWzd^QZ;@EC-MOs-^Cp&&e zG?t + + diff --git a/src/assets/images/contact-us/TikTok.svg b/src/assets/images/contact-us/TikTok.svg new file mode 100644 index 000000000..520916e18 --- /dev/null +++ b/src/assets/images/contact-us/TikTok.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/contact-us/TikTok.webp b/src/assets/images/contact-us/TikTok.webp deleted file mode 100644 index 14481f4b0a0206d26943e6be578b1ef938ded24a..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 232 zcmVO z$Q!+Xx8ES!NcRTkZ}lcMxI|h90Kkz50KP*}HTN(utZk(YKg9HAVgF$T)RP4w`ac2G zDq9_?b3uKL31g7QtYh$w!7&DN90Fh-gFnpNlHT3(lzVc>F#&K9$#(~?GNW#=;&-; + + + diff --git a/src/assets/images/contact-us/Twitter.webp b/src/assets/images/contact-us/Twitter.webp deleted file mode 100644 index 0398b0391d96da9ed0754c4ff240183c2f9de364..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 262 zcmV+h0r~z?Nk&Hg00012MM6+kP&iET0000lA;1O@zd)F6RJQpu-RmI8q;10d>zs#O zBgnStknRt618LiA4(i~SbpI;q;EB}D_ChRpiu4eY(0?2N0DuG8R_f*zq9pydMA`pZ zHGn&a=>G&Dm#Y-UN>UqN1fU3j_ZIneo45K=BY>@MJ~ICSpqO=WsqeKb4Q3w)SyTWT ztjR?UbOC@qm^Gn60tMqfGc!Hv_Dz9aWlrj=>Vn&_*~*S-U!k*o#XiGx0bSsprnqMM zCy7HXxxq<2i9C>;1Ab}=C&Js_0*zxu&3_VtENa0!!^xl5>$GSq@YB&O*bhd$KF+K2 MUXabDh!kRE0 + + diff --git a/src/assets/images/contact-us/Youtube.webp b/src/assets/images/contact-us/Youtube.webp deleted file mode 100644 index 291e249270058d23d3377095f468629e83a68879..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 242 zcmVBGOb<&Lkd}y$_3IA6^vS zEhUP~DE}$j96(zGP@9sL0{*8o2cSJ`ElZAPDmmpFlP%}tF)K`vBjyvzH!`Kn93H6~ sd?FjL6$a2(_yPM03KW0O2%y?qUU8=O;aN8NUhtTdv#K@`kxCK|0afE05AViNk&G<00012MM6+kP&iDy0000lA;1O@pCAxOLfhYK2ZC&yX8w>jIe{QV zJo0}WGi}?H|5J(`12b46Z4Ut8Ke&_zBj8B3t*E(=9@LK^`(Lds8D$vJ{|SKJW-bN{ zO&%^e!XX;aKRUl5-vF9-72xaif)os}4p`L9d(z<8hi*TSUtsl`BE_huFTD7NSm!m$ KtOD55W_AD_!e2xH diff --git a/src/assets/images/footer/Facebook.svg b/src/assets/images/footer/Facebook.svg new file mode 100644 index 000000000..833835f3f --- /dev/null +++ b/src/assets/images/footer/Facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/footer/Facebook.webp b/src/assets/images/footer/Facebook.webp deleted file mode 100644 index c1330ce602d33000e69c0ae0bbe7b6784da34232..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 230 zcmVL$Tgw + + diff --git a/src/assets/images/footer/Instagram.webp b/src/assets/images/footer/Instagram.webp deleted file mode 100644 index ab8b38f7a4da9caf4e48095a44acc2866c28e28e..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 252 zcmVu!_fBp@!jU2lp zxElNuOwv@_F-QggcntlI0{{TTNRs0=gCl5AAF#LiXAAIg1`++A0D$@)N}s3tyRwY# zC%*xN{Hy}Le!5frV0PJd{X7vw+Wz!Q>ch5xZhPn~Uj>LJH>zzbPZX>}PS5GJ0!n-B z0g=AhU`yND;B_YmdCo$)F<|$)fv$CUoxGr56SR{Z#x)m8E);}szF?E>+~Ds{2E_hq z1wtpevVwKU>(q(W0w_oNRO8I{=N diff --git a/src/assets/images/footer/Telegram.svg b/src/assets/images/footer/Telegram.svg new file mode 100644 index 000000000..f4287d293 --- /dev/null +++ b/src/assets/images/footer/Telegram.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/images/footer/TikTok.webp b/src/assets/images/footer/TikTok.webp deleted file mode 100644 index d9dc252574c965ad0420f4534b94ab9240bd3281..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 188 zcmV;t07L&$Nk&Gr00012MM6+kP&iDd0000l8-NB7pI{(uoA@`q?Kd(1^G}d%i+_SO zu?zqJ;ec=iID&`6wv8NV!d}|&ceC!l+S&LOMD%|GXi@+m(&9$mQh5jB7Mxq~$PVB= zb|C%@Yp;|Eehk)&B==i;YQWgAR;&}lh7A8+OBntlKNno0MYq#c(ebL=g;tmfF1NA^ qBUAz4AtFuyU^E;Z?3XKi9OKXRjV8rLOlC+*?-g1Y$_H2uG!6iS-cYgt diff --git a/src/assets/images/footer/Tiktok.svg b/src/assets/images/footer/Tiktok.svg new file mode 100644 index 000000000..638ae7fa2 --- /dev/null +++ b/src/assets/images/footer/Tiktok.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/footer/Twitter.webp b/src/assets/images/footer/Twitter.webp deleted file mode 100644 index 171e58e00dfde81d21634a1bf1f8dbea6e808756..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 212 zcmV;_04x7eNk&G@00012MM6+kP&iD$0000l8-NB7ub`l98^-)ecbCKb&p$!7E&d2z zf=QZcI|j>e1S^i-0{{SGB-?G9ha9K`{{Q+fR=@`w3W(_c1mOR4rRT768%;^_>5!fP zo|oz3T$BZX@-h^z^(q-4DPb`T + + + diff --git a/src/assets/images/footer/Youtube.svg b/src/assets/images/footer/Youtube.svg new file mode 100644 index 000000000..fcb0ce891 --- /dev/null +++ b/src/assets/images/footer/Youtube.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/footer/Youtube.webp b/src/assets/images/footer/Youtube.webp deleted file mode 100644 index f8b38ca8862afca53fcb3d913cf69ed9fe0ee75d..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 154 zcmV;L0A>GDNk&GJ00012MM6+kP&iD60000l8o&e)H8^M^$&r>nY2SUAz@RsRA#J;1 zf-r=je3T-@U@;g%YLFRxgd%)|B4h#*5K1F`o1ck;TEel!Yo>FI-+7P=LN6#RxUEnD zxznIqITni+!tI5G)4%dBzydWqzFTcru9@O^>x2c@bYmC#ez727fgh7&G6_hH4&_(A IQ7Zw*0)k^cJOBUy diff --git a/src/assets/images/header-drawer/Facebook.svg b/src/assets/images/header-drawer/Facebook.svg new file mode 100644 index 000000000..3132b25de --- /dev/null +++ b/src/assets/images/header-drawer/Facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/header-drawer/Facebook.webp b/src/assets/images/header-drawer/Facebook.webp deleted file mode 100644 index fd1d910a2af0ef028204d7f934366ee6e9405ad9..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 312 zcmV-80muGQNk&F60RRA3MM6+kP&iB@0RR9m8h{26KY^fa+qfH%@yGZVhr+gP8`=FI z{dTvGg0^iWZ#w|TpXyfxZQCY8urPQb?9k493?9JstwpRn5Go5))KGw70Meog80)C)l7DaEnz(!t(%=-^J(30*<@S|qwLIQdGq K2*7*F4V(Z}f{w5N diff --git a/src/assets/images/header-drawer/Instagram.svg b/src/assets/images/header-drawer/Instagram.svg new file mode 100644 index 000000000..8b11c3ad8 --- /dev/null +++ b/src/assets/images/header-drawer/Instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/header-drawer/Instagram.webp b/src/assets/images/header-drawer/Instagram.webp deleted file mode 100644 index a8730ecb80b44d8f5f6f827cc6646df3cd2e0070..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 320 zcmV-G0l)rINk&FE0RRA3MM6+kP&iC00RR9m8h{267hxc6o9s7o{~FJ9C~Vudq0|4- zcXz9(Z6nEZ02uyA_q9dHMv{64WALZ&{!(x70oN}>>^`D);U|rPF_8b8$}=8=N`m+z zulOd(QBe6HB=|~lZPYyTJwS|PyKQp|6PK~9Ypkh0s!h~tK{*d=2a#S zurl=f>pDPAo_T~{vaLV3&B+A0?0Qx+zOeT20W__F>&O-2G{J6U1MM{TtkQro!80%L zlkN0_)0{3q-duM*1dXI2D=-}7;Z7sgApre3c~tF~?Y5DpHjhbjAJsq9#Kqo_wU9E9 SKa0f7V0Dj56O!6{1polaB%AsG diff --git a/src/assets/images/header-drawer/Telegram.svg b/src/assets/images/header-drawer/Telegram.svg new file mode 100644 index 000000000..775db9e1e --- /dev/null +++ b/src/assets/images/header-drawer/Telegram.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/images/header-drawer/TikTok.webp b/src/assets/images/header-drawer/TikTok.webp deleted file mode 100644 index 6b9c6a7cb9a4902628e2b0934dd490461cd50d9c..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 248 zcmV?Kf(@2s{Xay&1O%9VWDuKZrFTCg0=^*df8&ctaXzF{ zE~#gT7hc>MQI^IGcTa7xMB3cs3rB!?x#l*Po;GS;5r$2;3^A%hlvOF y!clbqw3!xQFDyxDB~2k23XLb-?>lMe3K}xyL6zUCx2lIw@T-38hQs5J@2OgYT5hQT diff --git a/src/assets/images/header-drawer/Tiktok.svg b/src/assets/images/header-drawer/Tiktok.svg new file mode 100644 index 000000000..620f37414 --- /dev/null +++ b/src/assets/images/header-drawer/Tiktok.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/header-drawer/Twitter.webp b/src/assets/images/header-drawer/Twitter.webp deleted file mode 100644 index 6e5ce5c102df3d4fc6309745e732fd0e1b03e6e8..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 270 zcmV+p0rCD)Nk&En0RRA3MM6+kP&iEa0000l8bAdQAEBUaBgeOJJb#RnhQhXO8`|IZ z8sG zw + + diff --git a/src/assets/images/header-drawer/Youtube.webp b/src/assets/images/header-drawer/Youtube.webp deleted file mode 100644 index a5da90288c934c9b73a67e9c7a8caf1649d3b532..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 214 zcmV;{04e`cNk&G_00012MM6+kP&iD&0000l8o&e)=b)f%8_9ckj6cY`(lFDujaT+V zyl++1wvpui2Ep*>dF&zxm^350Nvvc98k{E}z-<>XP(k37@c3v1H;8^D>hn1oeDWZ^ z7g$qdZUw39n}Nefa@*!%fmF^JcK?k^M(7}-{}TZ0bDf2s^vawhw>yBIyhohmzqbKX z4ybNLVG>rzl?+T8VC4W@O#pE5KlR%#3O4+{q%~{>d7VOfz7-#`N~5rsOF(-BT (
    ПРО НАС
    -
    -
    - Привіт! Ми – ГО , що разом із командою досвідчених креаторів, провідних істориків та потужних партнерів створює «Стріткод» – найбільшу платформу про історію України, вбудовану в простори міст. +
    +
    + Привіт! Ми — ГО + {' '} + , що разом із командою досвідчених креаторів, провідних істориків та потужних партнерів створює «Стріткод» — найбільшу платформу про історію України, вбудовану в простори міст.
    -
    -
    -
    -
    +
    +
    +
    +
    Ми розповідаємо про видатні постаті та визначні події, на честь яких названі наші вулиці.
    -
    -
    -
    +
    +
    +
    Пояснюємо історичні зв’язки у просторі та часі.
    -
    -
    -
    +
    +
    +
    Посилюємо історичну просвіту, популяризуємо історію, допомагаємо з декомунізацією історичної свідомості.
    -
    +
    Все це верифіковано, концентровано, структуровано та в одному місці. Щоб нарешті позбутися колонізаторських впливів та наслідків.
    -) +); -export default AboutUsHeaderText; \ No newline at end of file +export default AboutUsHeaderText; diff --git a/src/features/AboutUsPage/Founders/Founder/FounderCard/FounderCard.component.tsx b/src/features/AboutUsPage/Founders/Founder/FounderCard/FounderCard.component.tsx index b18c7f998..65c0374f1 100644 --- a/src/features/AboutUsPage/Founders/Founder/FounderCard/FounderCard.component.tsx +++ b/src/features/AboutUsPage/Founders/Founder/FounderCard/FounderCard.component.tsx @@ -1,24 +1,23 @@ -import './FounderCard.styles.scss' -import Instagram from '@/assets/images/about-us/instagram.png' -import Facebook from '@/assets/images/about-us/facebook.png' +import './FounderCard.styles.scss'; -const FounderCard = (founder: FounderProps) => { - return ( -
    -
    - -
    -
    -
    -

    {founder.founderName}

    -

    {founder.founderRole}

    -
    - - -
    +import Facebook from '@/assets/images/partners/facebook.svg'; +import Instagram from '@/assets/images/partners/instagram.svg'; + +const FounderCard = (founder: FounderProps) => ( +
    +
    + +
    +
    +
    +

    {founder.founderName}

    +

    {founder.founderRole}

    +
    + +
    - ) -} -export default FounderCard; \ No newline at end of file +
    +); +export default FounderCard; diff --git a/src/features/AboutUsPage/Founders/Founder/FounderCard/FounderCard.styles.scss b/src/features/AboutUsPage/Founders/Founder/FounderCard/FounderCard.styles.scss index c662690e6..7f1fbbdb6 100644 --- a/src/features/AboutUsPage/Founders/Founder/FounderCard/FounderCard.styles.scss +++ b/src/features/AboutUsPage/Founders/Founder/FounderCard/FounderCard.styles.scss @@ -43,6 +43,9 @@ justify-content: center; display: flex; gap: 14px; + @media screen and (min-width: 1024px) { + transform: scale(1.4); + } } @media screen and (max-width: s.$smallDesctop) @@ -58,7 +61,7 @@ font-size: 24px !important; } p { - word-break: break-all; + word-break: word-break; font-size: 15px !important; } } diff --git a/src/features/AboutUsPage/Founders/Founders.component.tsx b/src/features/AboutUsPage/Founders/Founders.component.tsx index 7e73012a2..6211efa7c 100644 --- a/src/features/AboutUsPage/Founders/Founders.component.tsx +++ b/src/features/AboutUsPage/Founders/Founders.component.tsx @@ -24,11 +24,11 @@ const FounderInna: FounderProps = { const FounderNatalia: FounderProps = { founderName: 'Наталя Демідова', - founderRole: 'Авторка ідеї, співзасновниця проєкту', + founderRole: 'Авторка ідеї, співзасновниця ГО', founderImage: Natalia, founderInstagram: 'https://www.instagram.com/notatka8/', founderFacebook: 'https://www.facebook.com/NatalyaDemydiv', - founderText: '«Я хочу, щоб українські діти, які зростатимуть після Перемоги, знали, хто в цьому світі на що здатний. Хочу, щоби розуміли причинно-наслідкові зв’язки і були захищені цим знанням. Для того маємо відновлювати історичну пам’ять вже зараз. Це водночас і просто, і складно. Просто – бо є проєкт «Стріткод», бачення, як його втілити, і команда, яка вже це робить. Складно, бо масштаби – вся Україна. Але це той проєкт, який має бути реалізований, тут без варіантів. Тому несемось!) Приєднуйтеся ;)»', + founderText: '«Я хочу, щоб українські діти, які зростатимуть після Перемоги, знали, хто в цьому світі на що здатний. Хочу, щоби розуміли причинно-наслідкові зв’язки і були захищені цим знанням. Для того маємо відновлювати історичну пам’ять вже зараз. Це водночас і просто, і складно. Просто — бо є проєкт «Стріткод», бачення, як його втілити, і команда, яка вже це робить. Складно, бо масштаби — вся Україна. Але це той проєкт, який має бути реалізований, тут без варіантів. Тому несемось!) Приєднуйтеся ;)»', order: false, }; diff --git a/src/features/AdditionalPages/ContactUsPage/MainBlock/ContactBlock/ContactBlock.component.tsx b/src/features/AdditionalPages/ContactUsPage/MainBlock/ContactBlock/ContactBlock.component.tsx index 20a8d21cc..fc0450813 100644 --- a/src/features/AdditionalPages/ContactUsPage/MainBlock/ContactBlock/ContactBlock.component.tsx +++ b/src/features/AdditionalPages/ContactUsPage/MainBlock/ContactBlock/ContactBlock.component.tsx @@ -1,22 +1,27 @@ import './ContactBlock.styles.scss'; -import Email from '@images/contact-us/email.webp'; -import Facebook from '@images/contact-us/Facebook.webp'; -import Instagram from '@images/contact-us/Instagram.webp'; +import Email from '@images/contact-us/Email.svg'; +import Facebook from '@images/contact-us/Facebook.svg'; +import Instagram from '@images/contact-us/Instagram.svg'; import Logo from '@images/contact-us/logo-2.webp'; -import TikTok from '@images/contact-us/TikTok.webp'; -import Twitter from '@images/contact-us/Twitter.webp'; -import YouTube from '@images/contact-us/Youtube.webp'; +import Telegram from '@images/contact-us/Telegram.svg'; +import TikTok from '@images/contact-us/TikTok.svg'; +import Twitter from '@images/contact-us/Twitter.svg'; +import YouTube from '@images/contact-us/Youtube.svg'; import { EMAIL_INFO } from '@constants/email.constants'; +import SOCIAL_MEDIA from '@/app/common/constants/social.constants'; + const ContactBlock = () => (
    - email-logo +
    + +
    {EMAIL_INFO.EMAIL} @@ -24,28 +29,35 @@ const ContactBlock = () => (
    diff --git a/src/features/AdditionalPages/ContactUsPage/MainBlock/ContactBlock/ContactBlock.styles.scss b/src/features/AdditionalPages/ContactUsPage/MainBlock/ContactBlock/ContactBlock.styles.scss index 33239aece..77f99cc75 100644 --- a/src/features/AdditionalPages/ContactUsPage/MainBlock/ContactBlock/ContactBlock.styles.scss +++ b/src/features/AdditionalPages/ContactUsPage/MainBlock/ContactBlock/ContactBlock.styles.scss @@ -7,48 +7,66 @@ transform: translate3d(0, 0, 0); //required to make safari use gpu for render filter:drop-shadow @include vnd.vendored(filter, 'drop-shadow(0 0 10px rgba(255, 0, 0, 0.612))'); cursor: pointer; + transform: scale(1.7); } -.contactUsContainer{ - .contactBlock{ +.contactUsContainer { + .contactBlock { position: relative; bottom: f.pxToRem(50px); - .contactCover{ + .contactCover { position: relative; z-index: 1; } - .contactLogo{ + .contactLogo { position: absolute; top: f.pxToRem(-110px); left: f.pxToRem(-54px); z-index: 0; } - .emailBlock img, .phonesBlock img{ - margin-right: f.pxToRem(10px); - } - .emailBlock{ - @include mut.flexed($align-items: center); + .emailBlock { + @include mut.flexed($align-items: baseline); margin-bottom: f.pxToRem(20px); + @media screen and (max-width: 1024px) { + @include mut.flexed($align-items: normal); + } + .icon { + transform: scale(1.7); + margin-right: f.pxToRem(20px); + @media screen and (max-width: 1024px) { + transform: scale(1.025); + margin-right: f.pxToRem(5px); + } + } - .icon:hover{ + .icon:hover { @include hoverStyles; } } - .socials{ - .icon{ + .socials { + display: flex; + flex-direction: row; + align-items: center; + + .icon { transition: all 0.2s ease; - margin-right: f.pxToRem(30px); + margin-right: f.pxToRem(35px); + transform: scale(1.7); + @media screen and (max-width: 1024px) { + transform: scale(1.025); + } } - .icon:hover{ + + .icon:hover { @include hoverStyles; } } - .email{ + .email { @include mut.with-font($font-family: ft.$closer-text-font, $font-weight: 500, $font-size: 36px); line-height: 48px; color: #1D1F23; @@ -57,14 +75,15 @@ } @media screen and (max-width: 1024px) { - .contactUsContainer{ - .contactBlock{ + .contactUsContainer { + .contactBlock { bottom: 0; - .icon{ + + .icon { transform: scale(0.6); } - .contactLogo{ + .contactLogo { @include mut.with-font($font-family: ft.$closer-text-font, $font-weight: 500, $font-size: 54px); line-height: 71px; width: f.pxToRem(140px); @@ -74,11 +93,11 @@ left: f.pxToRem(220px); } - .socials .icon{ + .socials .icon { margin-right: f.pxToRem(20px); } - .email{ + .email { @include mut.with-font($font-family: ft.$closer-text-font, $font-weight: 500, $font-size: 20px); line-height: 26px; font-family: 'Closer Text'; @@ -86,5 +105,4 @@ } } } -} - +} \ No newline at end of file From 660f5852e0af2811d1dab2f1cb8038f2703971e8 Mon Sep 17 00:00:00 2001 From: BohdanBybliv Date: Tue, 17 Oct 2023 19:02:53 +0300 Subject: [PATCH 13/50] made url more readable --- .../SearchBlock/SearchResultItem/SearchItem.component.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/app/layout/header/SearchBlock/SearchResultItem/SearchItem.component.tsx b/src/app/layout/header/SearchBlock/SearchResultItem/SearchItem.component.tsx index 0329203ea..b5390f05f 100644 --- a/src/app/layout/header/SearchBlock/SearchResultItem/SearchItem.component.tsx +++ b/src/app/layout/header/SearchBlock/SearchResultItem/SearchItem.component.tsx @@ -8,7 +8,10 @@ interface Props { } const SearchResultItem = ({ searchResultItem } : Props) => { - const url = `/${searchResultItem.streetcodeTransliterationUrl}${searchResultItem.factId !== 0 ? (`?factId=${searchResultItem.factId}`) : ('')}${searchResultItem.timelineItemId !== 0 ? (`?timelineItemId=${searchResultItem.timelineItemId}`) : ('')}${searchResultItem.blockName ? (`#${searchResultItem.blockName}`) : ('')}`; + const url = `/${searchResultItem.streetcodeTransliterationUrl + }${searchResultItem.factId !== 0 ? (`?factId=${searchResultItem.factId}`) : ('') + }${searchResultItem.timelineItemId !== 0 ? (`?timelineItemId=${searchResultItem.timelineItemId}`) : ('') + }${searchResultItem.blockName ? (`#${searchResultItem.blockName}`) : ('')}`; const sourceName = `Стріткод #${searchResultItem.streetcodeIndex.toString().padStart(4, '0') }${searchResultItem.sourceName ? `/${searchResultItem.sourceName}` : ''}`; From d2fc738a54e43f31cb033efd7dac7aceb28276ea Mon Sep 17 00:00:00 2001 From: BohdanBybliv Date: Tue, 17 Oct 2023 19:16:37 +0300 Subject: [PATCH 14/50] added utility function to get url hash --- src/app/common/utils/getUrlHash.utility.tsx | 2 ++ .../InterestingFacts.component.tsx | 22 +++++++++++++------ .../TextBlock/TextBlock.component.tsx | 17 +++++++++----- .../TimelineBlock/TimelineBlock.component.tsx | 21 ++++++++++++------ 4 files changed, 43 insertions(+), 19 deletions(-) create mode 100644 src/app/common/utils/getUrlHash.utility.tsx diff --git a/src/app/common/utils/getUrlHash.utility.tsx b/src/app/common/utils/getUrlHash.utility.tsx new file mode 100644 index 000000000..7a9f918b7 --- /dev/null +++ b/src/app/common/utils/getUrlHash.utility.tsx @@ -0,0 +1,2 @@ +const getUrlHash = (location: Location): string => location.hash.replace('#', ''); +export default getUrlHash; \ No newline at end of file diff --git a/src/features/StreetcodePage/InterestingFactsBlock/InterestingFacts.component.tsx b/src/features/StreetcodePage/InterestingFactsBlock/InterestingFacts.component.tsx index b58fe76c0..d5820ada9 100644 --- a/src/features/StreetcodePage/InterestingFactsBlock/InterestingFacts.component.tsx +++ b/src/features/StreetcodePage/InterestingFactsBlock/InterestingFacts.component.tsx @@ -11,6 +11,7 @@ import ImagesApi from '@/app/api/media/images.api'; import { useAsync } from '@/app/common/hooks/stateful/useAsync.hook'; import { Fact } from '@/models/streetcode/text-contents.model'; import { useSearchParams } from 'react-router-dom'; +import getUrlHash from '@/app/common/utils/getUrlHash.utility'; const InterestingFactsComponent = () => { const { streetcodeStore } = useStreetcodeDataContext(); @@ -18,6 +19,7 @@ const InterestingFactsComponent = () => { const { getStreetCodeId, errorStreetCodeId } = streetcodeStore; const [sliderArray, setSliderArray] = useState([]); const [middleFactIndex, setMiddleFactIndex] = useState(0); + const [isScrolled, setIsScrolled] = useState(false); const facts = useRef([]); useAsync( @@ -42,19 +44,25 @@ const InterestingFactsComponent = () => { const [searchParams, setSearchParams] = useSearchParams(); const factID = Number(searchParams.get('factId')); - const initialSlide = sliderArray.findIndex(fact => fact.id === factID) == -1 ? 0 : sliderArray.findIndex(fact => fact.id === factID); + let initialSlideIndex = sliderArray.findIndex(fact => fact.id === factID); + if(initialSlideIndex === -1) initialSlideIndex = 0; useEffect(() => { - const hash = location.hash.replace('#', ''); - const element = document.getElementById(hash); + if (!isScrolled){ + const hash = getUrlHash(location); + const element = document.getElementById(hash); - setTimeout(() => { - element?.scrollIntoView({behavior: "smooth", block: "center"}); - }, 1000); + setTimeout(() => { + if(element !== null) { + element.scrollIntoView({behavior: "smooth", block: "center"}); + setIsScrolled(true); + } + }, 1000); + } }); const setings = { - initialSlide: initialSlide, + initialSlide: initialSlideIndex, dots: facts.current.length > 3, swipeOnClick: false, touchThreshold: 25, diff --git a/src/features/StreetcodePage/TextBlock/TextBlock.component.tsx b/src/features/StreetcodePage/TextBlock/TextBlock.component.tsx index 45f787256..ec870c287 100644 --- a/src/features/StreetcodePage/TextBlock/TextBlock.component.tsx +++ b/src/features/StreetcodePage/TextBlock/TextBlock.component.tsx @@ -14,6 +14,7 @@ import { Text } from '@/models/streetcode/text-contents.model'; import AdditionalText from './AdditionalTextBlock/AdditionalTextBlock.component'; import ReadMore from './ReadMore/ReadMore.component'; +import getUrlHash from '@/app/common/utils/getUrlHash.utility'; const TextComponent = () => { const { streetcodeStore: { getStreetCodeId } } = useStreetcodeDataContext(); @@ -22,6 +23,7 @@ const TextComponent = () => { const { getByStreetcodeId: getText } = textsApi; const [text, setText] = useState(); const [video, setVideo] = useState