From c216dab22684fb8f7a0cd5ae455798ee30ace479 Mon Sep 17 00:00:00 2001 From: sulianova Date: Fri, 5 Apr 2024 13:32:59 +0200 Subject: [PATCH 1/5] WIP --- src/pages/Catalogue.tsx | 7 -- src/pages/Catalogue/Card/Card.module.scss | 120 ++++++++++++++++++++++ src/pages/Catalogue/Card/Card.tsx | 34 ++++++ src/pages/Catalogue/Catalogue.module.scss | 37 +++++++ src/pages/Catalogue/Catalogue.tsx | 26 +++++ src/pages/Catalogue/List/List.module.scss | 21 ++++ src/pages/Catalogue/List/List.tsx | 37 +++++++ src/pages/My/Profile/Profile.tsx | 12 ++- src/router/index.tsx | 2 +- src/services/course.service/index.ts | 12 +-- src/ui/Page/Page.module.scss | 4 + 11 files changed, 293 insertions(+), 19 deletions(-) delete mode 100644 src/pages/Catalogue.tsx create mode 100644 src/pages/Catalogue/Card/Card.module.scss create mode 100644 src/pages/Catalogue/Card/Card.tsx create mode 100644 src/pages/Catalogue/Catalogue.module.scss create mode 100644 src/pages/Catalogue/Catalogue.tsx create mode 100644 src/pages/Catalogue/List/List.module.scss create mode 100644 src/pages/Catalogue/List/List.tsx diff --git a/src/pages/Catalogue.tsx b/src/pages/Catalogue.tsx deleted file mode 100644 index 08a3f15d..00000000 --- a/src/pages/Catalogue.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import Page, { EFooter } from 'ui/Page/Page'; - -export default Catalogue; - -function Catalogue() { - return (This is a Catalogue page); -} diff --git a/src/pages/Catalogue/Card/Card.module.scss b/src/pages/Catalogue/Card/Card.module.scss new file mode 100644 index 00000000..560fa0be --- /dev/null +++ b/src/pages/Catalogue/Card/Card.module.scss @@ -0,0 +1,120 @@ +@import 'styles/index'; + +.__ { + grid-column: span 4; + margin-bottom: set-calc(24); + + will-change: transform; +} + + +.preview { + position: relative; + + width: 100%; + margin-bottom: set-calc(16); + overflow: hidden; + + background-color: $beige; + border-radius: set-calc(20); + + transition: opacity 0.35s ease; + + aspect-ratio: 1.4 / 1; + + @include set-media(md) { + margin-bottom: set-calc(8); + } + + img { + position: absolute; + inset: 0; + + display: block; + width: 100%; + height: 100%; + object-fit: contain; + } + + &:hover { + transform: translateY(set-calc(-3)); + } +} + +.previewLink { + position: absolute; + inset: 0; + + z-index: 1; +} + +.content { +display: flex; +flex-direction: column; +box-sizing: border-box; +padding-right: set-calc(24); +} + +.title { + font-family: $font-family-serif; + margin-bottom: set-calc(16); + + @include set-media(md) { + margin-bottom: set-calc(8); + } + + &:hover { + color: $orange; + } +} + +.info { + margin-bottom: set-calc(16); +} + + +.description { + margin-bottom: set-calc(24); + padding-right: set-calc(48); + overflow-y: hidden; +} + +.tags { + display: flex; + flex-wrap: wrap; + align-items: flex-start; +} + +.tag { + background-image: linear-gradient(to bottom, $grey 0, $grey 100%); + background-position: 0 90%; + background-repeat: repeat-x; + background-size: set-calc(1) set-calc(1); + color: $grey; + width: fit-content; + + margin-right: set-calc(6); + cursor: pointer; + + &:hover { + background-image: linear-gradient(to bottom, $black 0, $black 100%); + background-position: 0 90%; + background-repeat: repeat-x; + background-size: set-calc(1) set-calc(1); + + color: $grey-inactive; + } +} + +.hashTag { + display: inline-block; + vertical-align: top; + line-height: set-calc(22); + margin-right: set-calc(6); + + color: $grey-inactive; + + @include set-media(md) { + line-height: set-calc(19); + } +} \ No newline at end of file diff --git a/src/pages/Catalogue/Card/Card.tsx b/src/pages/Catalogue/Card/Card.tsx new file mode 100644 index 00000000..6850f64c --- /dev/null +++ b/src/pages/Catalogue/Card/Card.tsx @@ -0,0 +1,34 @@ +import classNames from 'classnames/bind'; +import classes from './Card.module.scss'; + +import Link from 'ui/Link/Link'; + +export default function Card() { + return ( +
+
+ + +
+
+ Как рисовать +
+
29 апреля – 19 мая | 3 недели
+
+
Базовый курс по иллюстрации. За 3 недели научимся уверенно рисовать любые сюжеты. Узнаем, как управлять вниманием зрителя
+
+ # + композиция + рисование по фото + наброски + персонаж +
+
+
+ ); +} + + +// function renderTags () { +// return props.map((d, index) => ( )); +// } diff --git a/src/pages/Catalogue/Catalogue.module.scss b/src/pages/Catalogue/Catalogue.module.scss new file mode 100644 index 00000000..c25003b8 --- /dev/null +++ b/src/pages/Catalogue/Catalogue.module.scss @@ -0,0 +1,37 @@ +@import 'styles/index'; + +.headerWrapper { + position: relative; + display: block; + + padding-bottom: set-calc(24); + + @include set-media(md) { + padding-bottom: set-calc(16); + } +} + +.headerTitle { + @include s-text-88; +} + +.descriptionWrapper { + position: relative; + + display: grid; + grid-column-gap: set-calc(1.5 * $s-gap); + grid-template-columns: repeat(8, minmax(0, 1fr)); + padding-bottom: set-calc(40); + + @include set-media(md) { + display: flex; + flex-direction: column; + padding-bottom: set-calc(40); + } +} + +.description { + position: relative; + + grid-column: span 3; +} \ No newline at end of file diff --git a/src/pages/Catalogue/Catalogue.tsx b/src/pages/Catalogue/Catalogue.tsx new file mode 100644 index 00000000..56eb66ff --- /dev/null +++ b/src/pages/Catalogue/Catalogue.tsx @@ -0,0 +1,26 @@ +import classNames from 'classnames/bind'; +import { useEffect, useState } from 'react'; +import { ICourseData, courseService } from 'services/course.service'; +import Page, { EFooter } from 'ui/Page/Page'; + +import List from './List/List'; + +import classes from './Catalogue.module.scss'; + +export default Catalogue; + +function Catalogue() { + return ( + +
+

Программы обучения

+
+
+
Познакомимся с иллюстрацией, погрузимся в конкретные темы, потренируемся в цифровом и обычном рисовании
+
+ + + ); +} + + diff --git a/src/pages/Catalogue/List/List.module.scss b/src/pages/Catalogue/List/List.module.scss new file mode 100644 index 00000000..aff9938d --- /dev/null +++ b/src/pages/Catalogue/List/List.module.scss @@ -0,0 +1,21 @@ +@import 'styles/index'; + +.wrapper { + @include is-grid-12; + grid-gap: set-calc($s-gap * 2); + margin-top: set-calc(24); +} + +.wrapperShowMore { + grid-column: span 12; + margin: 0 0 set-calc(140); + padding: set-calc(8) 0 0; + + border-top: set-calc(calc($s-gap / 2)) solid $black-new; + + &Btn { + grid-column: 3 / 4; + margin-right: 0; + margin-left: auto; + } +} \ No newline at end of file diff --git a/src/pages/Catalogue/List/List.tsx b/src/pages/Catalogue/List/List.tsx new file mode 100644 index 00000000..579b64d5 --- /dev/null +++ b/src/pages/Catalogue/List/List.tsx @@ -0,0 +1,37 @@ +import classNames from 'classnames/bind'; +import { useEffect, useState } from 'react'; +import { ICourseData, courseService } from 'services/course.service'; + +import Card from '../Card/Card'; + +import classes from './List.module.scss'; + +export default function List() { + const [courses, setCourses] = useState(null); + useEffect(() => { + let cancelled = false; + const s = courseService.getCourseBS() + .subscribe(o => { + if (!o || o instanceof Error || cancelled) { + return; + } + setCourses(o.courses); + }); + return () => { + s.unsubscribe(); + cancelled = true; + }; + }, []); + + return ( +
+ + + +
+ ); +} + +// function renderCards(props: ) { +// return props.map((d, index) => ()); +// } \ No newline at end of file diff --git a/src/pages/My/Profile/Profile.tsx b/src/pages/My/Profile/Profile.tsx index 933ccaad..f47ef103 100644 --- a/src/pages/My/Profile/Profile.tsx +++ b/src/pages/My/Profile/Profile.tsx @@ -31,11 +31,10 @@ function Profile(props: IProps) { const userId = props.user.id; useEffect(() => { - let subscription: Subscription; - courseService + let cancelled = false; + const s = courseService .getCourseBS({ filter: { userId }}) - .then(bs => { - subscription = bs.subscribe(action => { + .subscribe(action => { if (action && !(action instanceof Error)) { setCourses(action.courses); setCourseState({ type: 'idle' }); @@ -43,8 +42,11 @@ function Profile(props: IProps) { setCourses(undefined); setCourseState({ type: 'error', error: action, errorType: action.ErrorType }); } - }) }); + return () => { + s.unsubscribe(); + cancelled = true; + }; }, [userId]); const fallback = useFallback({ courseState }); diff --git a/src/router/index.tsx b/src/router/index.tsx index 39a2ba51..de40b7b2 100644 --- a/src/router/index.tsx +++ b/src/router/index.tsx @@ -4,7 +4,7 @@ import { IRootState, IUserState, URLSections } from 'types'; import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom'; // import FreeZone from 'pages/FreeZone'; -import Catalogue from 'pages/Catalogue'; +import Catalogue from 'pages/Catalogue/Catalogue'; import Course from 'pages/Course/Landing/Course'; import Lesson from 'pages/Course/Lesson/Lesson'; import Lessons from 'pages/Course/Lessons/Lessons'; diff --git a/src/services/course.service/index.ts b/src/services/course.service/index.ts index df4a6a7a..a9b51465 100644 --- a/src/services/course.service/index.ts +++ b/src/services/course.service/index.ts @@ -8,8 +8,8 @@ import { ECommonErrorTypes } from 'types'; export { type ICourseData, type ICourseDataDB, type TCourseState } from './types'; class CourseService { - public async getCourseBS(props: { - filter: { id?: string, ids?: string[], userId?: string } + public getCourseBS(props?: { + filter?: { id?: string, ids?: string[], userId?: string } }) { try { const mainSubject = new BehaviorSubject(null); @@ -68,14 +68,14 @@ class CourseService { return errorType; } - private async _fetch(props: { - filter: { id?: string, ids?: string[], userId?: string }, + private async _fetch(props?: { + filter?: { id?: string, ids?: string[], userId?: string }, }) { try { - if (props.filter.id) { + if (props?.filter?.id) { return [await dataService.course.get(props.filter.id)]; } - return await dataService.course.getAll({ ids: props.filter.ids, userId: props.filter.userId }); + return await dataService.course.getAll({ ids: props?.filter?.ids, userId: props?.filter?.userId }); } catch (error) { // tslint:disable-next-line console.log(`Failed to fetch courses`, { props, error }); diff --git a/src/ui/Page/Page.module.scss b/src/ui/Page/Page.module.scss index 282e3714..b3a1856e 100644 --- a/src/ui/Page/Page.module.scss +++ b/src/ui/Page/Page.module.scss @@ -27,7 +27,11 @@ } .Catalogue-wrapper { + padding: 0 set-calc($padding-x-desk-page) 0; + @include set-media(md) { + padding: 0 set-calc($padding-x-mob-page); + } } .FreeZone-wrapper { From 45008903c33ab49dfef7db9edf42787fe88b144b Mon Sep 17 00:00:00 2001 From: sulianova Date: Fri, 5 Apr 2024 14:26:58 +0200 Subject: [PATCH 2/5] add props --- src/assets/translations/ru.json | 7 +++ src/pages/Catalogue/Card/Card.tsx | 34 ------------- src/pages/Catalogue/Catalogue.tsx | 8 ++- .../{ => List}/Card/Card.module.scss | 0 src/pages/Catalogue/List/Card/Card.tsx | 49 +++++++++++++++++++ src/pages/Catalogue/List/List.tsx | 14 +++--- src/services/course.service/types.ts | 4 ++ src/services/utils/course/DB2FR.ts | 22 ++++++++- src/services/utils/course/FR2DB.ts | 10 ++++ src/store/actions/sagas/fetchCourse.ts | 10 ++++ 10 files changed, 110 insertions(+), 48 deletions(-) delete mode 100644 src/pages/Catalogue/Card/Card.tsx rename src/pages/Catalogue/{ => List}/Card/Card.module.scss (100%) create mode 100644 src/pages/Catalogue/List/Card/Card.tsx diff --git a/src/assets/translations/ru.json b/src/assets/translations/ru.json index 675ea2d4..71010d1a 100644 --- a/src/assets/translations/ru.json +++ b/src/assets/translations/ru.json @@ -250,6 +250,13 @@ } } }, + "catalogue": { + "title": "Программы обучения", + "description": "Познакомимся с иллюстрацией, погрузимся в конкретные темы, потренируемся в цифровом и обычном рисовании", + "card": { + "info": "{{startDate}} – {{endDate}} | {{duration}}" + } + }, "day": { "p_one": "день", "p_few": "дня", diff --git a/src/pages/Catalogue/Card/Card.tsx b/src/pages/Catalogue/Card/Card.tsx deleted file mode 100644 index 6850f64c..00000000 --- a/src/pages/Catalogue/Card/Card.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import classNames from 'classnames/bind'; -import classes from './Card.module.scss'; - -import Link from 'ui/Link/Link'; - -export default function Card() { - return ( -
-
- - -
-
- Как рисовать -
-
29 апреля – 19 мая | 3 недели
-
-
Базовый курс по иллюстрации. За 3 недели научимся уверенно рисовать любые сюжеты. Узнаем, как управлять вниманием зрителя
-
- # - композиция - рисование по фото - наброски - персонаж -
-
-
- ); -} - - -// function renderTags () { -// return props.map((d, index) => ( )); -// } diff --git a/src/pages/Catalogue/Catalogue.tsx b/src/pages/Catalogue/Catalogue.tsx index 56eb66ff..2283da0a 100644 --- a/src/pages/Catalogue/Catalogue.tsx +++ b/src/pages/Catalogue/Catalogue.tsx @@ -1,11 +1,9 @@ -import classNames from 'classnames/bind'; -import { useEffect, useState } from 'react'; -import { ICourseData, courseService } from 'services/course.service'; import Page, { EFooter } from 'ui/Page/Page'; import List from './List/List'; import classes from './Catalogue.module.scss'; +import { i18n } from 'shared'; export default Catalogue; @@ -13,10 +11,10 @@ function Catalogue() { return (
-

Программы обучения

+

{i18n.t('catalogue.title')}

-
Познакомимся с иллюстрацией, погрузимся в конкретные темы, потренируемся в цифровом и обычном рисовании
+
{i18n.t('catalogue.description')}
 diff --git a/src/pages/Catalogue/Card/Card.module.scss b/src/pages/Catalogue/List/Card/Card.module.scss similarity index 100% rename from src/pages/Catalogue/Card/Card.module.scss rename to src/pages/Catalogue/List/Card/Card.module.scss diff --git a/src/pages/Catalogue/List/Card/Card.tsx b/src/pages/Catalogue/List/Card/Card.tsx new file mode 100644 index 00000000..701e66df --- /dev/null +++ b/src/pages/Catalogue/List/Card/Card.tsx @@ -0,0 +1,49 @@ +import type { ICourseData } from 'services/course.service'; +import { i18n } from 'shared'; +import { URLSections } from 'types'; +import { formatDate } from 'utils'; + +import Img from 'ui/Img/Img'; +import Link from 'ui/Link/Link'; + +import classes from './Card.module.scss'; + +interface IProps { + course: ICourseData +} + +export default function Card({ course }: Readonly) { + return ( +
+
+ + {course.cardImage?.imageAlt +
+
+ + {course.title} + +
+
+ {i18n.t('catalogue.card.info', { + startDate: formatDate(course.startDate, { timeZone: 'Europe/Moscow' }), + endDate: formatDate(course.endDate, { timeZone: 'Europe/Moscow' }), + duration: i18n.t(`duration.${course.duration.unit}`, { count: course.duration.value }), + })} +
+
+
{course.introDescription}
+
+ # + {course.tags?.map(tag => ({tag}))} +
+
+
+ ); +} diff --git a/src/pages/Catalogue/List/List.tsx b/src/pages/Catalogue/List/List.tsx index 579b64d5..a07c79e8 100644 --- a/src/pages/Catalogue/List/List.tsx +++ b/src/pages/Catalogue/List/List.tsx @@ -2,7 +2,7 @@ import classNames from 'classnames/bind'; import { useEffect, useState } from 'react'; import { ICourseData, courseService } from 'services/course.service'; -import Card from '../Card/Card'; +import Card from './Card/Card'; import classes from './List.module.scss'; @@ -23,15 +23,13 @@ export default function List() { }; }, []); + if (!courses) { + return null; + } + return (
- - - + {courses.map(course => )}
); } - -// function renderCards(props: ) { -// return props.map((d, index) => ()); -// } \ No newline at end of file diff --git a/src/services/course.service/types.ts b/src/services/course.service/types.ts index ba0e747a..d85d1040 100644 --- a/src/services/course.service/types.ts +++ b/src/services/course.service/types.ts @@ -13,11 +13,13 @@ export interface ICourseData { homeworksNumber: number videosNumber: number feild: 'Иллюстрация' | 'Adobe' + tags?: string[] title: string introImageId: string introDescription: string introImageSrc: string introImageAlt: string + cardImage?: TImageData discontAmount: number discontDeadline: Date | null creditWas: number @@ -52,10 +54,12 @@ export interface ICourseDataDB { homeworksNumber: number videosNumber: number feild: 'Иллюстрация' | 'Adobe' + tags?: string[] title: string introImageId: string introDescription: string introImageAlt: string + cardImage?: TImageDataDB discontAmount: number discontDeadline: string | null creditWas: number diff --git a/src/services/utils/course/DB2FR.ts b/src/services/utils/course/DB2FR.ts index bbf2a22b..a635425f 100644 --- a/src/services/utils/course/DB2FR.ts +++ b/src/services/utils/course/DB2FR.ts @@ -1,6 +1,6 @@ import type { ICourseData, ICourseDataDB } from 'services/course.service'; import { firebaseService } from 'services/firebase.service'; -import { dateDB2FR } from '../shared'; +import { addImageSrc, dateDB2FR } from '../shared'; export async function courseDataDB2FR(courseDB: ICourseDataDB): Promise { const courseId = courseDB.id; @@ -8,6 +8,7 @@ export async function courseDataDB2FR(courseDB: ICourseDataDB): Promise { + if (!cardImageData) { + return undefined; + } + + const imageSrc = typeof cardImageData.imageId === 'string' ? + (await firebaseService.getImageURL({ courseId, folder: 'landing', imageId: cardImageData.imageId })) ?? '' + : { + desktop: (await firebaseService.getImageURL({ courseId, folder: 'landing', imageId: cardImageData.imageId.desktop })) ?? '', + mobile: (await firebaseService.getImageURL({ courseId, folder: 'landing', imageId: cardImageData.imageId.mobile })) ?? '', + }; + + return { + ...cardImageData, + imageSrc: imageSrc + } as ICourseData['cardImage']; +} diff --git a/src/services/utils/course/FR2DB.ts b/src/services/utils/course/FR2DB.ts index be23b31b..a0f4106a 100644 --- a/src/services/utils/course/FR2DB.ts +++ b/src/services/utils/course/FR2DB.ts @@ -7,6 +7,7 @@ export function courseDataFR2DB(course: ICourseData): ICourseDataDB { return { ...courseRest, + cardImage: cardImageFR2DB(course.cardImage), startDate: dateFR2DB(course.startDate), endDate: dateFR2DB(course.endDate), accessDeadline: dateFR2DB(course.accessDeadline), @@ -96,3 +97,12 @@ function courseStudyProcessItemFR2DB(studyProcessItem: NonNullable Date: Fri, 5 Apr 2024 15:46:41 +0200 Subject: [PATCH 3/5] fix layout --- src/pages/Catalogue/Catalogue.module.scss | 4 +-- .../Catalogue/List/Card/Card.module.scss | 26 +++++++++++++------ src/pages/Catalogue/List/Card/Card.tsx | 4 +-- src/pages/Catalogue/List/List.tsx | 2 +- src/store/actions/sagas/fetchCourse.ts | 12 ++++----- src/ui/Page/Header/Header.tsx | 13 +++++----- src/ui/Page/Header/header.module.scss | 2 +- 7 files changed, 37 insertions(+), 26 deletions(-) diff --git a/src/pages/Catalogue/Catalogue.module.scss b/src/pages/Catalogue/Catalogue.module.scss index c25003b8..8bf9370b 100644 --- a/src/pages/Catalogue/Catalogue.module.scss +++ b/src/pages/Catalogue/Catalogue.module.scss @@ -26,12 +26,12 @@ @include set-media(md) { display: flex; flex-direction: column; - padding-bottom: set-calc(40); + padding-bottom: set-calc(24); } } .description { position: relative; - grid-column: span 3; + grid-column: span 5; } \ No newline at end of file diff --git a/src/pages/Catalogue/List/Card/Card.module.scss b/src/pages/Catalogue/List/Card/Card.module.scss index 560fa0be..611115af 100644 --- a/src/pages/Catalogue/List/Card/Card.module.scss +++ b/src/pages/Catalogue/List/Card/Card.module.scss @@ -17,13 +17,14 @@ background-color: $beige; border-radius: set-calc(20); - + + box-shadow: 0 set-calc(4) set-calc(8) rgb(0 0 0 / 10%); transition: opacity 0.35s ease; - aspect-ratio: 1.4 / 1; + aspect-ratio: 1.1 / 1; @include set-media(md) { - margin-bottom: set-calc(8); + margin-bottom: set-calc(16); } img { @@ -33,7 +34,7 @@ display: block; width: 100%; height: 100%; - object-fit: contain; + object-fit: cover; } &:hover { @@ -60,7 +61,7 @@ padding-right: set-calc(24); margin-bottom: set-calc(16); @include set-media(md) { - margin-bottom: set-calc(8); + margin-bottom: set-calc(16); } &:hover { @@ -70,19 +71,28 @@ padding-right: set-calc(24); .info { margin-bottom: set-calc(16); + + @include set-media(md) { + margin-bottom: set-calc(8); + } } .description { - margin-bottom: set-calc(24); + margin-bottom: set-calc(48); padding-right: set-calc(48); overflow-y: hidden; + + @include set-media(md) { + margin-bottom: set-calc(24); + } } .tags { display: flex; flex-wrap: wrap; align-items: flex-start; + margin-bottom: set-calc(24); } .tag { @@ -90,14 +100,14 @@ padding-right: set-calc(24); background-position: 0 90%; background-repeat: repeat-x; background-size: set-calc(1) set-calc(1); - color: $grey; + color: $grey-inactive; width: fit-content; margin-right: set-calc(6); cursor: pointer; &:hover { - background-image: linear-gradient(to bottom, $black 0, $black 100%); + background-image: linear-gradient(to bottom, $grey-inactive 0, $grey-inactive 100%); background-position: 0 90%; background-repeat: repeat-x; background-size: set-calc(1) set-calc(1); diff --git a/src/pages/Catalogue/List/Card/Card.tsx b/src/pages/Catalogue/List/Card/Card.tsx index 701e66df..731e9643 100644 --- a/src/pages/Catalogue/List/Card/Card.tsx +++ b/src/pages/Catalogue/List/Card/Card.tsx @@ -24,13 +24,13 @@ export default function Card({ course }: Readonly) {
{course.title}
-
+
{i18n.t('catalogue.card.info', { startDate: formatDate(course.startDate, { timeZone: 'Europe/Moscow' }), endDate: formatDate(course.endDate, { timeZone: 'Europe/Moscow' }), diff --git a/src/pages/Catalogue/List/List.tsx b/src/pages/Catalogue/List/List.tsx index a07c79e8..3d5039f5 100644 --- a/src/pages/Catalogue/List/List.tsx +++ b/src/pages/Catalogue/List/List.tsx @@ -15,7 +15,7 @@ export default function List() { if (!o || o instanceof Error || cancelled) { return; } - setCourses(o.courses); + setCourses(o.courses.filter(course => !['illustration', 'how-to-draw-free'].includes(course.id))); }); return () => { s.unsubscribe(); diff --git a/src/store/actions/sagas/fetchCourse.ts b/src/store/actions/sagas/fetchCourse.ts index ec4284b1..e4292536 100644 --- a/src/store/actions/sagas/fetchCourse.ts +++ b/src/store/actions/sagas/fetchCourse.ts @@ -90,13 +90,13 @@ const courseDB1: ICourseDataDB = { homeworksNumber: 3, videosNumber: 3, feild: 'Иллюстрация', - tags: ['композиция', 'рисование по фото'], + tags: ['композиция', 'рисование по фото', 'наброски', 'персонаж'], introImageId: 'LineCat6.jpg', introDescription: 'Базовый курс по иллюстрации. За 3 недели научимся уверенно рисовать любые сюжеты. Узнаем, как управлять вниманием зрителя', introImageAlt: 'SpotCat27', cardImage: { - imageId: 'LineCat6.jpg', - imageAlt: 'SpotCat27', + imageId: 'SpotCat7.jpg', + imageAlt: 'SpotCat7', }, discontAmount: 20, discontDeadline: '2024.04.11 20:59:00 GMT', @@ -421,13 +421,13 @@ const courseDB2: ICourseDataDB = { homeworksNumber: 1, videosNumber: 3, feild: 'Иллюстрация', - tags: ['наброски', 'персонаж'], + tags: ['иллюстрация', 'присование по воображению', 'серия'], introImageId: 'introImage.jpg', introDescription: 'Разберемся, из чего состоит авторский стиль и сделаем серию графических работ для портфолио', introImageAlt: 'introImage', cardImage: { - imageId: 'introImage.jpg', - imageAlt: 'introImage', + imageId: 'SofiUlianova4.jpg', + imageAlt: 'SofiUlianova4', }, discontAmount: 30, discontDeadline: '2024.04.10 21:00:00 GMT', diff --git a/src/ui/Page/Header/Header.tsx b/src/ui/Page/Header/Header.tsx index 5895cea4..f1e628d6 100644 --- a/src/ui/Page/Header/Header.tsx +++ b/src/ui/Page/Header/Header.tsx @@ -46,17 +46,18 @@ function Header(props: IConnectedProps) {
- {i18n.t('logo')} + {/* {i18n.t('logo')} */} + {i18n.t('logo')}
{/*
{t('my')} -
-
+
*/} + {/*
{t('freeZone')} -
-
+
*/} + {/*
{t('catalogue')}
*/}
@@ -84,7 +85,7 @@ function Header(props: IConnectedProps) {
setIsOpened(false)} > {t('catalogue')} diff --git a/src/ui/Page/Header/header.module.scss b/src/ui/Page/Header/header.module.scss index c858133f..b478971c 100644 --- a/src/ui/Page/Header/header.module.scss +++ b/src/ui/Page/Header/header.module.scss @@ -86,7 +86,7 @@ position: relative; a:hover { - opacity: 0.5; + color: $orange; cursor: pointer; } } From 4a6aaf9013adc0ae78f068cc7b4e5cac90ef1eb8 Mon Sep 17 00:00:00 2001 From: sulianova Date: Fri, 5 Apr 2024 18:58:15 +0200 Subject: [PATCH 4/5] fix layout in catalogue --- src/pages/Catalogue/Catalogue.module.scss | 9 +++++---- src/pages/Catalogue/List/Card/Card.module.scss | 7 ++++++- src/pages/My/Profile/CourseCard.module.scss | 2 ++ src/pages/My/Profile/Profile.tsx | 4 ++-- src/router/index.tsx | 2 +- src/store/actions/sagas/fetchCourse.ts | 16 ++-------------- 6 files changed, 18 insertions(+), 22 deletions(-) diff --git a/src/pages/Catalogue/Catalogue.module.scss b/src/pages/Catalogue/Catalogue.module.scss index 8bf9370b..0877520a 100644 --- a/src/pages/Catalogue/Catalogue.module.scss +++ b/src/pages/Catalogue/Catalogue.module.scss @@ -12,7 +12,8 @@ } .headerTitle { - @include s-text-88; + font-family: $font-family-serif; + @include s-text-56; } .descriptionWrapper { @@ -21,17 +22,17 @@ display: grid; grid-column-gap: set-calc(1.5 * $s-gap); grid-template-columns: repeat(8, minmax(0, 1fr)); - padding-bottom: set-calc(40); + padding-bottom: set-calc(54); @include set-media(md) { display: flex; flex-direction: column; - padding-bottom: set-calc(24); + padding-bottom: set-calc(32); } } .description { position: relative; - grid-column: span 5; + grid-column: span 4; } \ No newline at end of file diff --git a/src/pages/Catalogue/List/Card/Card.module.scss b/src/pages/Catalogue/List/Card/Card.module.scss index 611115af..1d2395a9 100644 --- a/src/pages/Catalogue/List/Card/Card.module.scss +++ b/src/pages/Catalogue/List/Card/Card.module.scss @@ -17,7 +17,7 @@ background-color: $beige; border-radius: set-calc(20); - + box-shadow: 0 set-calc(4) set-calc(8) rgb(0 0 0 / 10%); transition: opacity 0.35s ease; @@ -93,6 +93,11 @@ padding-right: set-calc(24); flex-wrap: wrap; align-items: flex-start; margin-bottom: set-calc(24); + padding-right: set-calc(64); + + @include set-media(md) { + padding-right: 0; + } } .tag { diff --git a/src/pages/My/Profile/CourseCard.module.scss b/src/pages/My/Profile/CourseCard.module.scss index f735da7b..a7239844 100644 --- a/src/pages/My/Profile/CourseCard.module.scss +++ b/src/pages/My/Profile/CourseCard.module.scss @@ -48,6 +48,8 @@ box-shadow: 0 set-calc(4) set-calc(8) rgb(0 0 0 / 10%); border-radius: set-calc(20); + aspect-ratio: 1.1 / 1; + @include set-media(md) { width: 100%; } diff --git a/src/pages/My/Profile/Profile.tsx b/src/pages/My/Profile/Profile.tsx index f47ef103..18eb0cdc 100644 --- a/src/pages/My/Profile/Profile.tsx +++ b/src/pages/My/Profile/Profile.tsx @@ -103,8 +103,8 @@ function renderCourses(courses: ICourseData[]) {
{course.introImageAlt}
diff --git a/src/router/index.tsx b/src/router/index.tsx index de40b7b2..67181064 100644 --- a/src/router/index.tsx +++ b/src/router/index.tsx @@ -38,7 +38,7 @@ function MyRouter({ userState }: IProps) { - } /> + } /> } /> } /> } /> diff --git a/src/store/actions/sagas/fetchCourse.ts b/src/store/actions/sagas/fetchCourse.ts index e4292536..1286a23b 100644 --- a/src/store/actions/sagas/fetchCourse.ts +++ b/src/store/actions/sagas/fetchCourse.ts @@ -559,25 +559,13 @@ const courseDB2: ICourseDataDB = { imageAlt: 'SofiUlianova2', }, { - imageId: 'SofiUlianova3.jpg', - imageAlt: 'SofiUlianova3', + imageId: 'SofiUlianova6.jpg', + imageAlt: 'SofiUlianova6', }, { imageId: 'SofiUlianova4.jpg', imageAlt: 'SofiUlianova4', }, - { - imageId: 'SofiUlianova7.jpg', - imageAlt: 'SofiUlianova7', - }, - { - imageId: 'SofiUlianova10.jpg', - imageAlt: 'SofiUlianova10', - }, - { - imageId: 'SofiUlianova6.jpg', - imageAlt: 'SofiUlianova6', - }, ], studentResults: { content: 'Вы создадите серию графических работ из 3-5 иллюстраций, которая продемонстрирует ваши хард-скилы и подчеркнет ценности. Тема серии свободная: от лягушки до автопортрета.', From d75997864333c29c4356536d8bb9505d45618bd3 Mon Sep 17 00:00:00 2001 From: sulianova Date: Fri, 5 Apr 2024 19:09:07 +0200 Subject: [PATCH 5/5] fix mistype --- src/store/actions/sagas/fetchCourse.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/store/actions/sagas/fetchCourse.ts b/src/store/actions/sagas/fetchCourse.ts index 1286a23b..412dbbde 100644 --- a/src/store/actions/sagas/fetchCourse.ts +++ b/src/store/actions/sagas/fetchCourse.ts @@ -421,7 +421,7 @@ const courseDB2: ICourseDataDB = { homeworksNumber: 1, videosNumber: 3, feild: 'Иллюстрация', - tags: ['иллюстрация', 'присование по воображению', 'серия'], + tags: ['иллюстрация', 'рисование по воображению', 'серия'], introImageId: 'introImage.jpg', introDescription: 'Разберемся, из чего состоит авторский стиль и сделаем серию графических работ для портфолио', introImageAlt: 'introImage',