-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix-BannerBlock enhancement_350_adaptive_main_page
- Loading branch information
1 parent
56a46a4
commit 5a7ee33
Showing
9 changed files
with
130 additions
and
132 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,77 +1,86 @@ | ||
| @use '@/app/styles/index' as color; | ||
| @use '../../shared/styles/utils/mixins' as media; | ||
| @use '@/shared/styles/utils/variables' as var; | ||
| @use '@/shared/styles/utils/mixins' as media; | ||
|
|
||
| .storybook { | ||
| width: 1500px; | ||
| height: 400px; | ||
| height: 400px; | ||
| } | ||
|
|
||
| .slider { | ||
| flex: 1 0 100%; | ||
| .bannerCard { | ||
| position: relative; | ||
| background-color: color.$theme-secondary-color; | ||
| display: flex; | ||
| width: 100%; | ||
| flex: 1 0 100%; | ||
| user-select: none; | ||
| } | ||
|
|
||
| .link { | ||
| color: color.$black; | ||
| .content { | ||
| position: absolute; | ||
| width: 100%; | ||
| height: 100%; | ||
| top: 30%; | ||
| left: 12%; | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 30px; | ||
|
|
||
| .content { | ||
| position: absolute; | ||
| left: 12%; | ||
| top: 100px; | ||
| @include media.respond-to('large') { | ||
| top: 20%; | ||
| } | ||
|
|
||
| @include media.respond-to('middle') { | ||
| left: 2%; | ||
| top: 40px; | ||
| } | ||
| @include media.respond-to('small') { | ||
| left: 3%; | ||
| top: 10px; | ||
| } | ||
|
|
||
| .title { | ||
| margin-top: 5px; | ||
| font-size: 30px; | ||
| color: color.$black; | ||
| line-height: 37.5px; | ||
| @include media.respond-to('middle') { | ||
| left: 5%; | ||
| gap: 15px; | ||
| } | ||
|
|
||
| @include media.respond-to('middle') { | ||
| font-size: 15px; | ||
| line-height: 18px; | ||
| font-weight: 500; | ||
| } | ||
| @include media.respond-to('small') { | ||
| font-size: 13px; | ||
| line-height: 10px; | ||
| } | ||
| } | ||
| @include media.respond-to('small') { | ||
| top: 25%; | ||
| } | ||
| } | ||
|
|
||
| .button { | ||
| border: 1px solid color.$body-color-light-grey; | ||
| column-gap: 15px; | ||
| background-color: inherit; | ||
| color: color.$black; | ||
| margin-top: 30px; | ||
| .title { | ||
| display: flex; | ||
| flex-direction: column; | ||
| line-height: 37px; | ||
| font-size: 30px; | ||
| font-weight: 500; | ||
|
|
||
| path { | ||
| fill: color.$black; | ||
| @include media.respond-to('middle') { | ||
| line-height: 18px; | ||
| font-size: 15px; | ||
| } | ||
| } | ||
|
|
||
| .button { | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| gap: 15px; | ||
| font-size: 16px; | ||
| color: var.$body-color; | ||
| fill: var.$body-color; | ||
| border: 1px solid rgb(52 52 52 / 10%); | ||
| border-radius: 5px; | ||
| padding: 5px 15px; | ||
| transition: 0.25s; | ||
|
|
||
| @include media.respond-to('middle') { | ||
| font-size: 15px; | ||
| width: 150px; | ||
| height: 30px; | ||
| margin-top: 10px; | ||
| font-size: 13px; | ||
| } | ||
| @include media.respond-to('small') { | ||
| font-size: 13px; | ||
| width: 130px; | ||
| height: 20px; | ||
| margin-top: 10px; | ||
|
|
||
| &:hover { | ||
| color: var.$white; | ||
| fill: var.$white; | ||
| background: var.$body-color; | ||
| } | ||
|
|
||
| &:active { | ||
| transform: scale(0.9); | ||
| } | ||
| } | ||
|
|
||
| .icon { | ||
| transform: rotate(270deg); | ||
| } | ||
|
|
||
| .image { | ||
| object-fit: cover; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,32 +1,34 @@ | ||
| import img1 from '@/assets/images/banner/banner.png' | ||
| import img2 from '@/assets/images/banner/banner_small.png' | ||
| import { TBannerCard } from '@/entities/BannerCard/BannerCard' | ||
| import { Routes } from '@/shared/config/routerConfig/routes' | ||
|
|
||
| export const bannerData: TBannerCard[] = [ | ||
| { | ||
| id: 100, | ||
| urlImg: img1, | ||
| urlImg_m: img1, | ||
| urlImg_m: img2, | ||
| alt: 'Mobil', | ||
| title: 'DJI OSMO', | ||
| subtitle: 'Mobile 4', | ||
| href: 'jelektronika/telefony-i-smart-chasy/umnye-chasy' | ||
| href: Routes.ABOUT // роут приведен только для примера | ||
| }, | ||
| { | ||
| id: 101, | ||
| urlImg: img1, | ||
| urlImg_m: img1, | ||
| urlImg_m: img2, | ||
| alt: 'Mobil', | ||
| title: 'DJI OSMO', | ||
| subtitle: 'Mobile 4', | ||
| href: 'jelektronika/telefony-i-smart-chasy/umnye-chasy' | ||
| href: Routes.BLOG // роут приведен только для примера | ||
| }, | ||
| { | ||
| id: 102, | ||
| urlImg: img1, | ||
| urlImg_m: img1, | ||
| urlImg_m: img2, | ||
| alt: 'Mobil', | ||
| title: 'DJI OSMO', | ||
| subtitle: 'Mobile 4', | ||
| href: 'jelektronika/telefony-i-smart-chasy/umnye-chasy' | ||
| href: Routes.CART // роут приведен только для примера | ||
| } | ||
| ] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| import BannerBlock from './ui/BannerBlock' | ||
| export default BannerBlock |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,29 +1,21 @@ | ||
| @use '@/app/styles/index' as color; | ||
| @use '../../../shared/styles/utils/mixins' as media; | ||
| @use '@/shared/styles/utils/mixins' as media; | ||
|
|
||
| .storybook { | ||
| width: 1500px; | ||
| height: 400px; | ||
| height: 400px; | ||
| } | ||
|
|
||
| .container { | ||
| display: flex; | ||
| column-gap: 20px; | ||
| width: 1440px; | ||
| max-width: 100%; | ||
| height: 370px; | ||
| margin: 0 auto; | ||
| padding: 0 10px; | ||
|
|
||
| @include media.respond-to('middle') { | ||
| width: 715px; | ||
| height: 187px; | ||
| padding: 0; | ||
| } | ||
| .bannerBlock { | ||
| display: flex; | ||
| gap: 20px; | ||
| width: 100%; | ||
| min-height: 370px; | ||
|
|
||
| @include media.respond-to('small') { | ||
| width: 335px; | ||
| height: 87px; | ||
|
|
||
| } | ||
| } | ||
| @include media.respond-to('large') { | ||
| min-height: 300px; | ||
| } | ||
|
|
||
| @include media.respond-to('middle') { | ||
| min-height: 140px; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,38 +1,37 @@ | ||
| import { FC } from 'react' | ||
|
|
||
| import BannerCard from '@/entities/BannerCard/BannerCard' | ||
| import Slider from '@/features/Slider/ui/Slider/Slider' | ||
| import { bannerData } from '@/mockData/bannerData' | ||
|
|
||
| import styles from './BannerBlock.module.scss' | ||
|
|
||
| /** | ||
| * Component BannerBlock | ||
| * Компонент для перелистывания главных картинок на главной странице. | ||
| * Компонент BannerBlock для перелистывания главных картинок на главной странице. | ||
| */ | ||
|
|
||
| const BannerBlock = () => { | ||
| if (bannerData.length === 0) { | ||
| return null | ||
| } | ||
|
|
||
| const BannerBlock: FC = () => { | ||
| return ( | ||
| <div className={styles.container}> | ||
| <Slider> | ||
| {bannerData?.map(item => { | ||
| return ( | ||
| <BannerCard | ||
| key={item.id} | ||
| id={item.id} | ||
| urlImg={item.urlImg} | ||
| urlImg_m={item.urlImg_m} | ||
| alt={item.alt} | ||
| title={item.title} | ||
| subtitle={item.subtitle} | ||
| href={item.href} | ||
| /> | ||
| ) | ||
| })} | ||
| </Slider> | ||
| </div> | ||
| bannerData?.length !== 0 && ( | ||
| <section className={styles.bannerBlock}> | ||
| <Slider> | ||
| {bannerData?.map(item => { | ||
| return ( | ||
| <BannerCard | ||
| key={item.id} | ||
| id={item.id} | ||
| urlImg={item.urlImg} | ||
| urlImg_m={item.urlImg_m} | ||
| alt={item.alt} | ||
| title={item.title} | ||
| subtitle={item.subtitle} | ||
| href={item.href} | ||
| /> | ||
| ) | ||
| })} | ||
| </Slider> | ||
| </section> | ||
| ) | ||
| ) | ||
| } | ||
| export default BannerBlock |