From 40e010bafd935e1ad72c69e7b937257f6655efc8 Mon Sep 17 00:00:00 2001 From: RedrockJS Date: Mon, 7 Jul 2025 13:38:58 +0300 Subject: [PATCH] fix: add adaptive to header, footer --- .idea/watcherTasks.xml | 4 + src/app/ekspertiza/avtotehnicheskaja/page.tsx | 22 +--- src/entities/base-menu/styles.module.scss | 50 +++++++- src/entities/top-menu/styles.module.scss | 46 +++++-- src/entities/top-menu/ui.tsx | 6 +- .../article/consultation/styles.module.scss | 1 + .../related-articles/styles.module.scss | 1 + .../expertise/autotech/model/breadcrums.ts | 14 +++ .../expertise/autotech/styles.module.scss | 1 + src/views/expertise/autotech/ui.tsx | 4 +- src/views/home/styles.module.scss | 24 ++-- src/widgets/breadcrumbs/styles.module.scss | 2 +- src/widgets/breadcrumbs/ui.tsx | 4 +- src/widgets/footer/styles.module.scss | 112 ++++++++++++++++-- src/widgets/footer/ui.tsx | 12 +- 15 files changed, 239 insertions(+), 64 deletions(-) create mode 100644 .idea/watcherTasks.xml create mode 100644 src/views/expertise/autotech/model/breadcrums.ts diff --git a/.idea/watcherTasks.xml b/.idea/watcherTasks.xml new file mode 100644 index 0000000..fb0d65a --- /dev/null +++ b/.idea/watcherTasks.xml @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/app/ekspertiza/avtotehnicheskaja/page.tsx b/src/app/ekspertiza/avtotehnicheskaja/page.tsx index e94df04..10072ef 100644 --- a/src/app/ekspertiza/avtotehnicheskaja/page.tsx +++ b/src/app/ekspertiza/avtotehnicheskaja/page.tsx @@ -1,25 +1,5 @@ import { AutoTech } from '@/views'; -import { ROUTES } from '@shared/const/route'; -import Breadcrumbs from '@widgets/breadcrumbs/ui'; - -const breadcrumbData = [ - { - name: 'Экспертиза', - path: ROUTES.EXPERTIZA, - }, - { - name: 'Автотехническая экспертиза', - path: '', - }, -]; - -const PAGE_NAME = 'Автотехническая экспертиза'; export default function Page() { - return ( - <> - - - - ); + return ; } diff --git a/src/entities/base-menu/styles.module.scss b/src/entities/base-menu/styles.module.scss index d4ea4c3..b9a5340 100644 --- a/src/entities/base-menu/styles.module.scss +++ b/src/entities/base-menu/styles.module.scss @@ -4,22 +4,56 @@ .Navbar { margin: 0 auto; - width: rem(1540px); + max-width: rem(1540px); + padding: 0 10px; height: rem(100px); display: flex; flex-direction: row; align-items: center; gap: rem(20px); + @include iftablet { + padding: 0 20px; + } + + @include iflaptop { + max-width: rem(1540px); + padding: 0 28px; + height: rem(100px); + gap: rem(20px); + } + + @include ifdesktop { + padding: 0 40px; + } + + .Invite{ + display: none; + + @include iflaptop{ + display: flex; + } + } + .Nav { margin-left: auto; .Menu { - display: flex; - flex-direction: row; - align-items: center; - gap: rem(32px); + display: none; + + @include iflaptop { + display: flex; + flex-direction: row; + align-items: center; + gap: rem(16px); + } + @include iflaptop { + gap: rem(16px); + } + @include ifdesktop { + gap: rem(32px); + } } .Parent { @@ -31,9 +65,13 @@ .Row { display: flex; justify-content: space-between; - gap: rem(16px); align-items: center; + gap: rem(8px); cursor: default; + + @include ifdesktop { + gap: rem(16px); + } } & a { diff --git a/src/entities/top-menu/styles.module.scss b/src/entities/top-menu/styles.module.scss index 4065af5..b32c9f7 100644 --- a/src/entities/top-menu/styles.module.scss +++ b/src/entities/top-menu/styles.module.scss @@ -5,10 +5,21 @@ .Top { margin: 0 auto; - width: rem(1540px); + max-width: rem(1540px); + padding: 0 10px; display: flex; justify-content: space-between; + @include iftablet { + padding: 0 20px; + } + @include iflaptop { + padding: 0 28px; + } + @include ifdesktop { + padding: 0 40px; + } + .Icons { display: flex; flex-direction: row; @@ -25,14 +36,19 @@ flex-direction: row; justify-content: center; align-items: center; - gap: rem(60px); + gap: rem(10px); + + @include iftablet { + gap: rem(20px); + } + @include iflaptop { + gap: rem(40px); + } + @include ifdesktop { + gap: rem(60px); + } .Item { - font-family: $font-roboto; - font-weight: $font-bold; - font-size: rem(16px); - line-height: 100%; - color: $color-white; display: flex; flex-direction: row; justify-content: center; @@ -44,6 +60,22 @@ border-radius: 50%; background: $color-white; } + + .Description { + display: none; + font-family: $font-roboto; + font-weight: $font-bold; + font-size: rem(14px); + line-height: 100%; + color: $color-white; + + @include iftablet { + display: inline-block; + } + @include iflaptop { + font-size: rem(16px); + } + } } } } \ No newline at end of file diff --git a/src/entities/top-menu/ui.tsx b/src/entities/top-menu/ui.tsx index 53196e2..6cc0bbc 100644 --- a/src/entities/top-menu/ui.tsx +++ b/src/entities/top-menu/ui.tsx @@ -13,12 +13,14 @@ function TopMenu() {

- spo-71@yandex.ru + spo-71@yandex.ru

- г. Сочи, Навагинская д. 9д, оф. 35 + + г. Сочи, Навагинская д. 9д, оф. 35 +

diff --git a/src/feature/article/consultation/styles.module.scss b/src/feature/article/consultation/styles.module.scss index fdc559b..2853782 100644 --- a/src/feature/article/consultation/styles.module.scss +++ b/src/feature/article/consultation/styles.module.scss @@ -4,6 +4,7 @@ display: grid; grid-template-columns: auto 360px; gap: 160px; + padding: 0 40px; } .Consultation { diff --git a/src/feature/article/related-articles/styles.module.scss b/src/feature/article/related-articles/styles.module.scss index 05311ca..92c6968 100644 --- a/src/feature/article/related-articles/styles.module.scss +++ b/src/feature/article/related-articles/styles.module.scss @@ -5,6 +5,7 @@ display: grid; grid-template-columns: auto 360px; gap: 160px; + padding: 0 40px; } .Header { diff --git a/src/views/expertise/autotech/model/breadcrums.ts b/src/views/expertise/autotech/model/breadcrums.ts new file mode 100644 index 0000000..4fdca66 --- /dev/null +++ b/src/views/expertise/autotech/model/breadcrums.ts @@ -0,0 +1,14 @@ +import { ROUTES } from '@shared/const/route'; + +export const PAGE_NAME = 'Автотехническая экспертиза'; + +export const breadcrumbData = [ + { + name: 'Экспертиза', + path: ROUTES.EXPERTIZA, + }, + { + name: 'Автотехническая экспертиза', + path: '', + }, +]; diff --git a/src/views/expertise/autotech/styles.module.scss b/src/views/expertise/autotech/styles.module.scss index 36d3507..31ff09f 100644 --- a/src/views/expertise/autotech/styles.module.scss +++ b/src/views/expertise/autotech/styles.module.scss @@ -4,6 +4,7 @@ display: grid; grid-template-columns: auto 360px; gap: 160px; + padding: 0 40px; } .Article { diff --git a/src/views/expertise/autotech/ui.tsx b/src/views/expertise/autotech/ui.tsx index c8048f9..34f0e35 100644 --- a/src/views/expertise/autotech/ui.tsx +++ b/src/views/expertise/autotech/ui.tsx @@ -1,14 +1,16 @@ import s from './styles.module.scss'; import { CallbackForm, Connect, OrderSchema } from '@/entities'; import { Consultation, RelatedArticles, Sidebar } from '@/feature/article'; -import { PartnersSlider } from '@/widgets'; +import { Breadcrumbs, PartnersSlider } from '@/widgets'; import { sidebarData } from './model/sidebar'; import { relatedArticlesData } from './model/relatedArticles'; import { expertData } from './model/expert'; +import { breadcrumbData } from './model/breadcrums'; function AutoTech() { return ( <> +
diff --git a/src/views/home/styles.module.scss b/src/views/home/styles.module.scss index b758439..7325cc7 100644 --- a/src/views/home/styles.module.scss +++ b/src/views/home/styles.module.scss @@ -1,15 +1,15 @@ -.Header { - display: flex; - flex-direction: column; -} - .Container { margin: 0 auto; - width: rem(1540px); - padding: 40px 0; -} + max-width: rem(1540px); + padding: 40px 10px; -.Footer { - margin: 0 auto; - width: rem(1540px); -} \ No newline at end of file + @include iftablet{ + padding: 40px 20px; + } + @include iflaptop{ + padding: 40px 28px; + } + @include ifdesktop{ + padding: 40px; + } +} diff --git a/src/widgets/breadcrumbs/styles.module.scss b/src/widgets/breadcrumbs/styles.module.scss index be4da3d..c3222b6 100644 --- a/src/widgets/breadcrumbs/styles.module.scss +++ b/src/widgets/breadcrumbs/styles.module.scss @@ -11,7 +11,7 @@ .Breadcrumbs { margin: 0 auto; width: rem(1540px); - padding: rem(20px) 0; + padding: rem(20px) 40px; display: flex; flex-direction: row; justify-content: space-between; diff --git a/src/widgets/breadcrumbs/ui.tsx b/src/widgets/breadcrumbs/ui.tsx index 1a2d0b7..27681f7 100644 --- a/src/widgets/breadcrumbs/ui.tsx +++ b/src/widgets/breadcrumbs/ui.tsx @@ -11,7 +11,7 @@ type BreadcrumbsProps = { }[]; }; -export default function Breadcrumbs({ breadcrumbs }: BreadcrumbsProps) { +function Breadcrumbs({ breadcrumbs }: BreadcrumbsProps) { return (
@@ -34,3 +34,5 @@ export default function Breadcrumbs({ breadcrumbs }: BreadcrumbsProps) {
); } + +export { Breadcrumbs }; diff --git a/src/widgets/footer/styles.module.scss b/src/widgets/footer/styles.module.scss index 7813517..c09e799 100644 --- a/src/widgets/footer/styles.module.scss +++ b/src/widgets/footer/styles.module.scss @@ -15,17 +15,37 @@ .Grid { margin: 0 auto; - width: 1540px; - padding: 40px 0 0; + max-width: 1540px; + padding: 20px 10px 20px; display: grid; - grid-template-columns: 1fr 1fr 1fr 1fr; - ///grid-template-rows: 1fr 1fr; + grid-template-columns: auto; grid-auto-columns: 1fr; - gap: 0px 0px; + gap: 40px 20px; grid-auto-flow: row; grid-template-areas: + "about" + "contacts" + "social"; + + @include iftablet { + grid-template-columns: 1fr 1fr; + grid-template-areas: + "about about" + "contacts social"; + padding: 40px 20px 0; + gap: 20px 2px; + } + @include iflaptop { + grid-template-columns: 1fr 1fr 1fr 1fr; + grid-template-areas: "about linksa linksb linksc" "contacts contacts social social"; + padding: 40px 28px 0; + gap: 0px 0px; + } + @include ifdesktop { + padding: 40px 40px 0; + } .About { grid-area: about; @@ -46,6 +66,14 @@ .LinksA { grid-area: linksa; padding: 10px; + display: none; + @include iftablet { + } + @include iflaptop { + display: block; + } + @include ifdesktop { + } .Title { @extend %title; @@ -63,6 +91,11 @@ .LinksB { grid-area: linksb; padding: 10px; + display: none; + + @include iflaptop { + display: block; + } .Title { @extend %title; @@ -80,6 +113,11 @@ .LinksC { grid-area: linksc; padding: 10px; + display: none; + + @include iflaptop { + display: block; + } .Title { @extend %title; @@ -103,16 +141,30 @@ .Icons { display: flex; - flex-direction: row; + flex-direction: column; justify-content: center; gap: 24px; + @include iflaptop { + flex-direction: row; + justify-content: center; + } + .IconBox { display: flex; - flex-direction: column; + flex-direction: row; align-items: center; gap: 16px; + @include iftablet { + } + + @include iflaptop { + display: flex; + flex-direction: column; + align-items: center; + } + .Icon { border-radius: 50%; width: 48px; @@ -130,7 +182,13 @@ .Social { grid-area: social; - padding-left: 200px; + + @include iflaptop { + padding-left: 100px; + } + @include ifdesktop { + padding-left: 200px; + } .Title { @extend %title; @@ -151,12 +209,12 @@ .Bottom { margin: 0 auto; - width: 1540px; + max-width: 1540px; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; - padding: 16px 0; + padding: 16px 10px; font-family: $font-roboto; font-weight: $font-regular; @@ -164,6 +222,40 @@ line-height: 100%; color: $color-white; + @include iftablet { + padding: 16px 20px; + } + @include iflaptop { + padding: 16px 28px; + } + @include ifdesktop { + padding: 16px 40px; + } + + .List { + display: flex; + flex-direction: column; + gap: 10px; + + @include iftablet{ + flex-direction: row; + } + } + + .ListItem { + &:after{ + padding-left: 0; + + @include iftablet { + content: '|'; + padding-left: 8px; + } + } + &:last-child:after { + content: unset; + } + } + & a { text-decoration: none; color: $color-link-hover; diff --git a/src/widgets/footer/ui.tsx b/src/widgets/footer/ui.tsx index da2388a..53d663f 100644 --- a/src/widgets/footer/ui.tsx +++ b/src/widgets/footer/ui.tsx @@ -107,9 +107,15 @@ function Footer() {
- © ООО “ДИ ТРАСО” | - Политика конфиденциальности | - Карта сайта +
    +
  • © ООО “ДИ ТРАСО”
    • +
  • + Политика конфиденциальности +
    • +
  • + Карта сайта +
    • +