Skip to content
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.

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

skeletonNewsBlock #394

Merged
merged 32 commits into from
Jun 15, 2024
Merged
Show file tree
Hide file tree
Changes from 30 commits
Commits
Show all changes
32 commits
Select commit Hold shift + click to select a range
5617fe4
Добавил надпись об отсутствии товаров в избранном
kirill-k88 May 16, 2024
5c70b92
Заменил мокавыве данные в корзине в шапке на реальные данные из слайс…
kirill-k88 May 17, 2024
1b98ec4
enhancement_377_login_form_adaptive_new
AlexanderMorugin May 17, 2024
f5fbbd2
Merge branch 'master' into enhancement_381_favorite_page
kirill-k88 May 18, 2024
08d5067
skeletonNewsBlock
May 20, 2024
18adcf3
Merge pull request #392 from Studio-Yandex-Practicum/enhancement_377_…
AlexanderMorugin May 21, 2024
403a902
Merge pull request #391 from Studio-Yandex-Practicum/bag_386_header
kirill-k88 May 21, 2024
7c27885
Merge pull request #393 from Studio-Yandex-Practicum/enhancement_381_…
kirill-k88 May 21, 2024
9b51623
enhancement_350_adaptive_main_page
AlexanderMorugin May 22, 2024
a03704a
enhancement_350_adaptive_main_page
AlexanderMorugin May 22, 2024
9740436
step-2 enhancement_350_adaptive_main_page
AlexanderMorugin May 22, 2024
bc22043
#360-enhancement-create-Create-Account-Page
JuliaAvramenko May 23, 2024
bfc0650
fix-ReviewBlock enhancement_350_adaptive_main_page
AlexanderMorugin May 23, 2024
62bd790
fix-CategoryGrid enhancement_350_adaptive_main_page
AlexanderMorugin May 23, 2024
27e4a64
fix-HeroBlock enhancement_350_adaptive_main_page
AlexanderMorugin May 23, 2024
f389c8e
fix after review-1 enhancement_350_adaptive_main_page
AlexanderMorugin May 24, 2024
2c54226
fix-Advantages enhancement_350_adaptive_main_page
AlexanderMorugin May 24, 2024
499c4a2
fix-NewsBlock enhancement_350_adaptive_main_page
AlexanderMorugin May 24, 2024
56a46a4
fix-StoriesBlock enhancement_350_adaptive_main_page
AlexanderMorugin May 25, 2024
5a7ee33
fix-BannerBlock enhancement_350_adaptive_main_page
AlexanderMorugin May 25, 2024
d614f97
fix-BrandBlock enhancement_350_adaptive_main_page
AlexanderMorugin May 26, 2024
306fe67
fix-BlogBlock enhancement_350_adaptive_main_page
AlexanderMorugin May 26, 2024
2cbf2af
Merge pull request #397 from Studio-Yandex-Practicum/enhancement-360-…
JuliaAvramenko May 27, 2024
24326f1
fix-after-review-2 enhancement_350_adaptive_main_page
AlexanderMorugin May 27, 2024
b3111e7
Merge pull request #396 from Studio-Yandex-Practicum/enhancement_350_…
AlexanderMorugin May 28, 2024
3c6e299
skeletonNewsBlock
May 20, 2024
55f5095
enhancement-newsBlock-skeleton
Jun 2, 2024
044bd3c
skeleton-StoriesBlock
Jun 2, 2024
35e115c
Resolved merge conflict in NewsBlock.tsx
Jun 2, 2024
c6df98b
StoriesBlockSkeleton, StoriesBlock & styles
Jun 6, 2024
29fc04c
style
Jun 12, 2024
46e430e
style StoriesBlockSkeleton
Jun 13, 2024
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
5 changes: 5 additions & 0 deletions src/app/router/AppRouter/ui/AppRouter.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import CartPage from '@/pages/CartPage/CartPage'
import { CategoryPage } from '@/pages/CategoryPage/CategoryPage'
import ComparePage from '@/pages/ComparePage/ComparePage'
import ContactsPage from '@/pages/ContactsPage/ContactsPage'
import CreateAccountPage from '@/pages/CreateAccountPage/CreateAccountPage'
import DeliveryPage from '@/pages/DeliveryPage/DeliveryPage'
import ErrorPage from '@/pages/ErrorPage/ErrorPage'
import { FavoritesPage } from '@/pages/FavoritesPage/FavoritesPage'
Expand Down Expand Up @@ -118,6 +119,10 @@ export const AppRouter = createBrowserRouter([
{
path: Routes.CONTACTS,
element: <ContactsPage />
},
{
path: Routes.REGISTRATION,
element: <CreateAccountPage />
}
/* {
path: Routes.CERTIFICATE,
Expand Down
2 changes: 1 addition & 1 deletion src/app/styles/base/_reset.scss
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
body {
margin: 0 auto;
max-width: 100vw;
min-width: 375px;
font-family:
Roboto,
Arial,
Expand All @@ -18,6 +17,7 @@ body {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
}

h1,
Expand Down
4 changes: 4 additions & 0 deletions src/assets/icons/IconArrowRight.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/images/banner/banner_small.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/images/subscribe/img-subsc-small.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
20 changes: 4 additions & 16 deletions src/components/WrapperForMainContent/wrapper.module.scss
Original file line number Diff line number Diff line change
@@ -1,22 +1,10 @@
@use '../../shared/styles/utils/mixins' as media;

.wrapper {
max-width: 1470px;
width: 100%;
margin: 0 auto;
padding: 24px;
display: flex;
flex-direction: column;
align-items: center;
gap: 48px;

@include media.respond-to('middle') {
max-width: 768px;
width: 100%;
}

@include media.respond-to('small') {
width: 390px;
gap: 20px;
}
width: 100%;
max-width: 1470px;
margin: 0 auto;
padding: 25px;
}
2 changes: 2 additions & 0 deletions src/entities/AdvantageCard/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
import AdvantageCard from './ui/AdvantageCard'
export default AdvantageCard
36 changes: 36 additions & 0 deletions src/entities/AdvantageCard/ui/AdvantageCard.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import type { Meta, StoryObj } from '@storybook/react'

import { advantagesData } from '@/mockData/advantagesData'

import AdvantageCard from './AdvantageCard'

const meta = {
title: 'entities/AdvantageCard',
component: AdvantageCard,
parameters: {
layout: 'centered'
},
tags: ['autodocs']
} satisfies Meta<typeof AdvantageCard>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = () => {
const image = advantagesData[0].image
const alt = advantagesData[0].alt
const name = advantagesData[0].name

return (
<div style={{ width: '220px' }}>
<AdvantageCard image={image} alt={alt} name={name} route="#" />
</div>
)
}

Default.args = {
image: advantagesData[0].image,
alt: advantagesData[0].alt,
name: advantagesData[0].name,
route: '#'
}
Original file line number Diff line number Diff line change
@@ -1,28 +1,31 @@
import { FC } from 'react'

import Link from '@/shared/ui/Link/Link'
import Span from '@/shared/ui/Span/Span'

import styles from './advantageCard.module.scss'

export type TAdvantageCardProps = {
image: string
alt: string
name: string
route: string
}

/**
* Компонент AdvantageCard - это карточка достоинства магазина. Входит в компонент Advantages
* @param {string} image - картинка для преимущества
* @param {string} alt - описание картинки
* @param {string} name - название преимущества
* @param {string} route - ссылка для перехода
*/
const AdvantageCard: FC<TAdvantageCardProps> = ({ image, alt, name }) => {

const AdvantageCard: FC<TAdvantageCardProps> = ({ image, alt, name, route }) => {
return (
<div className={`${styles.card}`}>
<Link to="#" className={styles.link}>
<img src={image} alt={alt} className={styles.image} />
<p className={styles.text}>{name}</p>
</Link>
</div>
<Link to={route} className={styles.advantageCard}>
<img src={image} alt={alt} className={styles.image} />
<Span className={styles.span}>{name}</Span>
</Link>
)
}

Expand Down

This file was deleted.

50 changes: 50 additions & 0 deletions src/entities/AdvantageCard/ui/advantageCard.module.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
@use '@/shared/styles/utils/mixins' as media;
@use '@/shared/styles/utils/variables' as var;

.advantageCard {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
width: 100%;
max-width: 220px;
min-height: 70px;
border-radius: 10px;
background: var.$white;
padding: 13px 18px;
transition: 0.3s ease-in-out;

&:hover {
box-shadow: 0 0 5px var.$body-color-light-grey;
}

&:active {
box-shadow: 0 0 5px var.$body-color-light-grey;
}

@include media.respond-to('large') {
gap: 24px;
max-width: 100%;
}

@include media.respond-to('middle') {
justify-content: flex-start;
padding-left: 30px;
padding-right: 30px;
}
}

.image {
width: 36px;

@include media.respond-to('large') {
width: 44px;
}
}

.span {
font-size: 13px;
font-weight: 700;
line-height: 20px;
color: var.$body-color;
}
119 changes: 64 additions & 55 deletions src/entities/BannerCard/BannerCard.module.scss
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;
}
Loading
Loading