Skip to content

feat 215: Comments section #19

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Vasia1101 merged 9 commits into from
Jun 15, 2026
Merged

feat 215: Comments section #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
f9f099f
Aligns project styling and extends type definitions
andrxpie Jun 10, 2026
5cb6e4a
Introduces nested routing for comments feature
andrxpie Jun 10, 2026
123c513
Refactor: Standardizes imports and updates page navigation
andrxpie Jun 10, 2026
ae30349
Feat: Implements comments drawer functionality
andrxpie Jun 10, 2026
3845e52
Refactor: Enhances Top Carousel accessibility and responsiveness
andrxpie Jun 10, 2026
9adccb4
Style: Refines Streetcode card layout and responsiveness
andrxpie Jun 10, 2026
00dd3a9
fix/215: cancel azure job.
andrxpie Jun 10, 2026
c7843df
Merge branch 'dev' of https://github.com/project-studying-dotnet/Stre…
andrxpie Jun 15, 2026
d3a497a
fix/215: after merge fix.
andrxpie Jun 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
105 changes: 54 additions & 51 deletions src/app/router/Routes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,58 +1,61 @@
import { createBrowserRouter, createRoutesFromElements, Route } from 'react-router-dom';
import RequireAuth from '@components/RequireAuth/RequireAuth.component';
import FRONTEND_ROUTES from '@constants/frontend-routes.constants';
import EditStreetcodePage from '@features/AdminPage/EditStreetcodePage/EditStreetcodePage.component';
import ForFansMainPage from '@features/AdminPage/ForFansPage/ForFansMainPage.component';
import App from '@layout/app/App.component';
import StreetcodeContent from '@streetcode/Streetcode.component';

import ContactUs from '@/features/AdditionalPages/ContactUsPage/ContanctUs.component';
import NotFound from '@/features/AdditionalPages/NotFoundPage/NotFound.component';
import PartnersPage from '@/features/AdditionalPages/PartnersPage/Partners.component';
import SupportPage from '@/features/AdditionalPages/SupportUsPage/SupportUs.component';
import AdminPage from '@/features/AdminPage/AdminPage.component';
import Dictionary from '@/features/AdminPage/DictionaryPage/Dictionary.component';
import LoginPage from '@/features/AdminPage/LoginPage/LoginPage.component';
import Partners from '@/features/AdminPage/PartnersPage/Partners.component';
import Streetcodes from '@/features/AdminPage/StreetcodesPage/Streetcodes.component';
import TeamPage from '@/features/AdminPage/TeamPage/TeamPage.component';
import StreetcodeCatalog from '@/features/StreetcodeCatalogPage/StreetcodeCatalog.component';
import StreetcodeEditor from '@/features/AdminPage/StreetcodesPage/StreetcodeEditor.component';
import CalendarPage from '@/features/AdminPage/CalendarPage/CalendarPage.component';
import VacanciesPage from '@/features/AdminPage/VacanciesPage/VacanciesPage.component';
import PublicNewsPage from '@/features/AdditionalPages/NewsPage/News.component';
import AdminNewsPage from '@/features/AdminPage/NewsPage/NewsPage.component';
import EditPge from '@/features/AdminPage/EditorPage/Editor.component';

const router = createBrowserRouter(createRoutesFromElements(
import { createBrowserRouter, createRoutesFromElements, Route } from "react-router-dom";
import RequireAuth from "@components/RequireAuth/RequireAuth.component";
import FRONTEND_ROUTES from "@constants/frontend-routes.constants";
import ForFansMainPage from "@features/AdminPage/ForFansPage/ForFansMainPage.component";
import App from "@layout/app/App.component";
import StreetcodeContent from "@streetcode/Streetcode.component";

import ContactUs from "@/features/AdditionalPages/ContactUsPage/ContanctUs.component";
import PublicNewsPage from "@/features/AdditionalPages/NewsPage/News.component";
import NotFound from "@/features/AdditionalPages/NotFoundPage/NotFound.component";
import PartnersPage from "@/features/AdditionalPages/PartnersPage/Partners.component";
import SupportPage from "@/features/AdditionalPages/SupportUsPage/SupportUs.component";
import AdminPage from "@/features/AdminPage/AdminPage.component";
import CalendarPage from "@/features/AdminPage/CalendarPage/CalendarPage.component";
import Dictionary from "@/features/AdminPage/DictionaryPage/Dictionary.component";
import EditPge from "@/features/AdminPage/EditorPage/Editor.component";
import LoginPage from "@/features/AdminPage/LoginPage/LoginPage.component";
import AdminNewsPage from "@/features/AdminPage/NewsPage/NewsPage.component";
import Partners from "@/features/AdminPage/PartnersPage/Partners.component";
import Streetcodes from "@/features/AdminPage/StreetcodesPage/Streetcodes.component";
import TeamPage from "@/features/AdminPage/TeamPage/TeamPage.component";
import VacanciesPage from "@/features/AdminPage/VacanciesPage/VacanciesPage.component";
import StreetcodeCatalog from "@/features/StreetcodeCatalogPage/StreetcodeCatalog.component";

const router = createBrowserRouter(
createRoutesFromElements(
<Route path="/" element={<App />}>
<Route path={FRONTEND_ROUTES.ADMIN.LOGIN} element={<LoginPage />} />

<Route element={<RequireAuth />}>
<Route path={FRONTEND_ROUTES.ADMIN.BASE} element={<AdminPage />}>
<Route index element={<Streetcodes />} />
<Route path="streetcodes" element={<Streetcodes />} />
<Route path="for-fans" element={<ForFansMainPage />} />
<Route path="partners" element={<Partners />} />
<Route path="team" element={<TeamPage />} />
<Route path="dictionary" element={<Dictionary />} />
<Route path="calendar" element={<CalendarPage />} />
<Route path="news" element={<AdminNewsPage />} />
<Route path="vacancies" element={<VacanciesPage />} />

<Route path={FRONTEND_ROUTES.ADMIN.NEW_STREETCODE} element={<EditPge />} />
</Route>
<Route path={FRONTEND_ROUTES.ADMIN.LOGIN} element={<LoginPage />} />

<Route element={<RequireAuth />}>
<Route path={FRONTEND_ROUTES.ADMIN.BASE} element={<AdminPage />}>
<Route index element={<Streetcodes />} />
<Route path="streetcodes" element={<Streetcodes />} />
<Route path="for-fans" element={<ForFansMainPage />} />
<Route path="partners" element={<Partners />} />
<Route path="team" element={<TeamPage />} />
<Route path="dictionary" element={<Dictionary />} />
<Route path="calendar" element={<CalendarPage />} />
<Route path="news" element={<AdminNewsPage />} />
<Route path="vacancies" element={<VacanciesPage />} />

<Route path={FRONTEND_ROUTES.ADMIN.NEW_STREETCODE} element={<EditPge />} />
</Route>
</Route>

<Route path={FRONTEND_ROUTES.OTHER_PAGES.CATALOG} element={<StreetcodeCatalog />} />
<Route path={FRONTEND_ROUTES.OTHER_PAGES.PARTNERS} element={<PartnersPage />} />
<Route path={FRONTEND_ROUTES.OTHER_PAGES.CONTACT_US} element={<ContactUs />} />
<Route path={FRONTEND_ROUTES.OTHER_PAGES.SUPPORT_US} element={<SupportPage />} />

<Route path="/:id" element={<StreetcodeContent />}>
<Route path="comments" element={<StreetcodeContent />} />
</Route>

<Route path={FRONTEND_ROUTES.OTHER_PAGES.CATALOG} element={<StreetcodeCatalog />} />
<Route path={FRONTEND_ROUTES.OTHER_PAGES.PARTNERS} element={<PartnersPage />} />
<Route path={FRONTEND_ROUTES.OTHER_PAGES.CONTACT_US} element={<ContactUs />} />
<Route path={FRONTEND_ROUTES.OTHER_PAGES.SUPPORT_US} element={<SupportPage />} />
<Route index path="/:id" element={<StreetcodeContent />} />
<Route index path={`${FRONTEND_ROUTES.OTHER_PAGES.NEWS}/:id`} element={<PublicNewsPage />} />
<Route path="*" element={<NotFound />} />
<Route path={`${FRONTEND_ROUTES.OTHER_PAGES.NEWS}/:id`} element={<PublicNewsPage />} />
<Route path="*" element={<NotFound />} />
</Route>,
));
),
);

export default router;
23 changes: 23 additions & 0 deletions src/assets/images/utils/Comment_btn.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
79 changes: 40 additions & 39 deletions src/features/MainPage/MainPage.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,47 +1,48 @@
import './MainPage.styles.scss';
/* eslint-disable max-len */
import "./MainPage.styles.scss";

import ScrollToTopBtn from '../../app/common/components/ScrollToTopBtn/ScrollToTopBtn.component';
import InstagramBlock from './InstagramBlock/InstagramBlock.component';
import PartnersBlockComponent from './PartnersBlockMain/PartnersBlockMain.component';
import StaticBanner from './StaticBanners/StaticBanner.component';
import StreetcodeSliderComponent from './StreetcodeSlider/StreetcodeSlider.component';
import TeamComponent from './TeamSlider/TeamComponent.component';
import TopCarouselComponent from './TopCarousel/TopCarousel.component';
import NewsSliderComponent from './NewsSlider/NewsSlider.component';
import ScrollToTopBtn from "@components/ScrollToTopBtn/ScrollToTopBtn.component";

import NewsSliderComponent from "./NewsSlider/NewsSlider.component";
import PartnersBlockComponent from "./PartnersBlockMain/PartnersBlockMain.component";
import StaticBanner from "./StaticBanners/StaticBanner.component";
import StreetcodeSliderComponent from "./StreetcodeSlider/StreetcodeSlider.component";
import TeamComponent from "./TeamSlider/TeamComponent.component";
import TopCarouselComponent from "./TopCarousel/TopCarousel.component";

const mainPageContent = () => (
<>
<TopCarouselComponent/>
<>
<TopCarouselComponent />
<div className="mainPageContainer">
<StreetcodeSliderComponent/>
<StaticBanner
id="catalog"
blockName="Хочеш більше стріткодів?"
blockContent="Не обмежуй знання про минуле нудними підручниками з минулого. Переходь на сторінку стріткодів про постаті та події, читай або слухай історичне та захоплююче."
buttonName="До стріткодів"
setActionOnClick={() => {
window.location.href = '../catalog';
}}
/>
<NewsSliderComponent/>
<TeamComponent/>
<PartnersBlockComponent/>
<StaticBanner
id="support"
blockName="Слід в історії у кожного різний. У тебе може бути свій"
blockContent="Підтримай проєкт про історію в назвах вулиць. Обери зручний спосіб для донату, який підсвітить історію в міських просторах. Наш проєкт живе та пульсує завдяки небайдужим стріткодерам — таким, як ти!"
buttonName="Задонатити"
setActionOnClick={() => {
window.location.href = '../support-us';
}}
/>
<div className="sticky">
<div className="sticky-content">
<ScrollToTopBtn/>
</div>
<StreetcodeSliderComponent />
<StaticBanner
id="catalog"
blockName="Хочеш більше стріткодів?"
blockContent="Не обмежуй знання про минуле нудними підручниками з минулого. Переходь на сторінку стріткодів про постаті та події, читай або слухай історичне та захоплююче."
buttonName="До стріткодів"
setActionOnClick={() => {
globalThis.location.href = "../catalog";
}}
/>
<NewsSliderComponent />
<TeamComponent />
<PartnersBlockComponent />
<StaticBanner
id="support"
blockName="Слід в історії у кожного різний. У тебе може бути свій"
blockContent="Підтримай проєкт про історію в назвах вулиць. Обери зручний спосіб для донату, який підсвітить історію в міських просторах. Наш проєкт живе та пульсує завдяки небайдужим стріткодерам — таким, як ти!"
buttonName="Задонатити"
setActionOnClick={() => {
globalThis.location.href = "../support-us";
}}
/>
<div className="sticky">
<div className="sticky-content">
<ScrollToTopBtn />
</div>
</div>
</div>
</>
</>
);

export default mainPageContent;
export default mainPageContent;
73 changes: 37 additions & 36 deletions src/features/MainPage/TopCarousel/TopCarousel.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,40 +1,41 @@
import './TopCarousel.styles.scss'
import { observer } from 'mobx-react-lite';
import { Carousel } from 'antd';
import StreetcodeMarker from '@images/footer/main-page.png';
import StreetcodeMarker2 from '@images/footer/Baner_2.png';
import StreetcodeMarker3 from '@images/footer/main-page2.png';
import StreetcodeMarker4 from '@images/footer/main-page3.png';
import StreetcodeMarker5 from '@images/footer/main-page4.png';
import "./TopCarousel.styles.scss";

import StreetcodeMarker2 from "@images/footer/Baner_2.png";
import StreetcodeMarker from "@images/footer/main-page.png";
import StreetcodeMarker3 from "@images/footer/main-page2.png";
import StreetcodeMarker4 from "@images/footer/main-page3.png";
import StreetcodeMarker5 from "@images/footer/main-page4.png";

import { observer } from "mobx-react-lite";

import { Carousel } from "antd";

const content = [
{
image: StreetcodeMarker,
},
{
image: StreetcodeMarker2,
},
{
image: StreetcodeMarker3,
},
{
image: StreetcodeMarker4,
},
{
image: StreetcodeMarker5,
}
{
image: StreetcodeMarker,
},
{
image: StreetcodeMarker2,
},
{
image: StreetcodeMarker3,
},
{
image: StreetcodeMarker4,
},
{
image: StreetcodeMarker5,
},
];
const TopCarouselBlock = () => {
return (
<Carousel className="top-carousel" autoplay autoplaySpeed={3000}>
{content.map(item => (
<div key={item.image}>
<img src={item.image}
className="carousel-image"
/>
</div>
))}
</Carousel>
);
};

const TopCarouselBlock = () => (
<Carousel className="top-carousel" autoplay autoplaySpeed={1000}>
{content.map((item) => (
<div key={item.image}>
<img src={item.image} className="carousel-image" alt={item.image} />
</div>
))}
</Carousel>
);

export default observer(TopCarouselBlock);
78 changes: 57 additions & 21 deletions src/features/MainPage/TopCarousel/TopCarousel.styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,36 +4,72 @@
@use "@sass/_utils.functions.scss" as f;
@use "@sass/mixins/_vendor.mixins.scss" as vnd;

.ant-carousel {
.slick-slider,
.slick-list,
.slick-track,
.slick-slide {
outline: none !important;
box-shadow: none !important;

&:focus,
&:active,
&:focus-visible,
&:focus-within {
outline: none !important;
box-shadow: none !important;
}
}

.slick-slide {
div,
img,
a {
outline: none !important;
box-shadow: none !important;

&:focus,
&:active,
&:focus-visible {
outline: none !important;
box-shadow: none !important;
}
}
}
}

.top-carousel {
@include mut.rem-padded($top: 82px);

.carousel-image {
width: 100%;
height: f.pxToRem(737px);
}
width: 100%;
object-fit: scale-down;
margin: auto;
overflow: hidden;

.slick-dots li button {
@include mut.sized(12px, 12px);
}
.slick-dots li button {
@include mut.sized(12px, 12px);
}

.slick-dots {
bottom: f.pxToRem(30px);;
top: auto;
}
.slick-dots {
bottom: f.pxToRem(30px);
top: auto;
}

.slick-dots li {
margin: 0 f.pxToRem(8px);
}
.slick-dots li {
margin: 0 f.pxToRem(8px);
}

@media screen and (min-width: 1800px) {
.carousel-image {
height: f.pxToRem(830px);
@media screen and (min-width: 1800px) {
.carousel-image {
height: f.pxToRem(830px);
}
}
}
}

@media screen and (max-width: 1024px) {
.top-carousel {
@include mut.rem-padded($top: 64px);
@media screen and (max-width: 1024px) {
.top-carousel {
@include mut.rem-padded($top: 64px);
}
}
}
}
Empty file added src/features/StreetcodePage/Comments/CommentDrawerContainer.styles.scss
View file
Open in desktop
Empty file.
Loading
Loading