feat/landing-third-step #13

Mirved64 · 2023-08-09T06:20:32Z

Close #12

…ions, wrap in ui/backgroung navigation, hero and about sections in index.page

… in index.page

…, check layout, check typography in process section

… sections

…ider sections, change layout, font color in slider section

…json

…ection,

…s in project

Mirved64 · 2023-08-11T14:32:45Z

@Nelfimov

Скоуп
Анимация параллакса в проекте

Описание
Не могу понять как сделать эффект параллакса как в макете.
Не понимаю до конца саму анимацию параллакса (как секция при прокрутке наезжает на предыдущую секцию).

Мои действия

Смотрел примеры - там нет этой анимации.
Пробовал использовать @atls-ui-proto/parallax, застопорился на настройке провайдера - не получилось разобраться с ui, забросил.
Решил использовать библиотеку react-scroll-parallax.
Подключил библиотеку, обернул App в ParallaxProvider, использовал компонент Parallax - работает.
Пробовал настроить анимацию, но не до конца понимаю как сделать нужную анимацию.
Читал документацию к библиотеке, нагуглил статью про библиотеку.
Не смог найти нужную анимацию (как секция при скролле наезжает на предыдущую секцию).

Вопросы
Какие параметры меняются при анимации? (translateY? тогда получается, что контент секции наезжает на предыдущую, но потом идет очень большой gap до следующей)

Какой механизм анимации?

BREAKING CHANGE: incorrect parallax props

Nelfimov · 2023-08-11T17:33:49Z

Давай пока начнем с очевидных фиксов:

перейди на % параметры в translateY
параллакс должен распространяться на элементы внутри background
параллакс как эффект по дизайну применяется только там, где есть фон - в нашем случае это синий. То есть будто белый наезжает на синий.

…, parallax only in desktop

…ess css props, rework button component

landing/fragments/landing-courses/src/courses.component.tsx

landing/fragments/landing-process/src/process.component.tsx

ui/card/src/card.component.tsx

landing/fragments/landing-courses/src/courses.component.tsx

landing/fragments/landing-navigation/src/navigation.component.tsx

landing/fragments/landing-hero/src/hero.component.tsx

landing/fragments/landing-faq/src/faq.component.tsx

…ption in process component

landing/fragments/landing-navigation/src/navigation.component.tsx

landing/fragments/landing-about/src/about.component.tsx

landing/fragments/landing-courses/src/courses.component.tsx

landing/fragments/landing-slider/src/slider.component.tsx

ui/button/src/button.interfaces.ts

Nelfimov

Есть UI баги:

верхний навбор ушел за вьюпорт:

Карточки не адаптивны - текст выходит за пределы:

Список не выравнен по центру вертикали:

Карточки, которые в мобильном виде прокручиваются свайпом, вплотную прилегают к вьюпорту слева и справа. Должны быть выровнены по верхним статичным

Mirved64 · 2023-08-15T16:16:15Z

@Nelfimov

Странно, у меня кроме адаптивности карточек всё хорошо. Смотрел в хроме и мозиле, точно ветка третьего степа.

навбар на месте

Details

список правильно отображается

Details

Карточки, которые в мобильном виде прокручиваются свайпом с зазорами по бокам

Details

Screencast.from.15.08.2023.19.59.59.webm

Screencast.from.15.08.2023.20.00.39.webm

Nelfimov

Необходимы правки.

landing/entrypoints/renderer/package.json

Nelfimov · 2023-08-15T17:22:03Z

landing/fragments/landing-courses/src/courses.component.tsx

+
+          <Box flexDirection={['column', 'row']}>
+            <Column order={[3, 0]} flexBasis={[335, 1160]} flexGrow='1'>
+              <Card


Давай все карточки перепишем через .map. Создаешь список/объект из данных карточек, и его мапишь с return (<Card ... />). Иначе ты под каждую карточку повторяешь код.

Nelfimov · 2023-08-15T17:23:46Z

landing/fragments/landing-faq/src/faq.component.tsx

-          <Item question={intl.formatMessage({ id: 'faqQuestion' })} divider={1} />
-          <Item question={intl.formatMessage({ id: 'faqQuestion' })} divider={1} />
-        </Column>
+        <Item question={intl.formatMessage({ id: 'faq.question' })} />


Давай сделаем отдельно выше список из 6 элементов, его размапим и вернем <Item ... />.

Nelfimov · 2023-08-15T17:24:45Z

tsconfig.json

@@ -34,5 +34,5 @@
      }
    ]
  },
-  "include": ["auth/**/*", "landing/**/**/*", "ui/**/**/*"]
+  "include": ["auth/**/*", "landing/**/**/*", "ui/**/**/**/**/*"]


А зачем такая вложенность в паттерне?

…the ability to handle cards data

TorinAsakura · 2023-08-17T12:28:07Z

landing/fragments/landing-courses/src/courses.component.tsx

+import { CardsMaterials }   from './cards'
+import { CardsSwiper }      from './cards'
+import { CardsLearning }    from './cards'


я, как и ранее - не рекомендовал бы косметические отличия выдавать за новую сущность, на 7 этапе будет бобо)

У меня тут три разных компановки карточек.

Т.е. сущность одна - карточка, просто в одном случае показывает карточки с категорией учебный материал, в другом карточки собираются в свайпер, в третьем карточки с категорией обучение или мини-курс.

а должна быть одна карточка, которая где-либо расширяется и переиспользуется

TorinAsakura · 2023-08-17T12:28:43Z

landing/fragments/landing-courses/src/info/info.component.tsx

+    <Box display='inline' maxWidth={[335, 710]}>
      <Text
-        color='text.black'
+        display='inline'
+        color='text.primary'
        fontSize={['small', 'ordinary']}
-        fontWeight='normal'
        lineHeight={['normal', 'regular']}
      >
-        <FormattedMessage id='coursesSubtitleAtlantisPowerBroker' />
+        <FormattedMessage id='courses.subtitle.power-broker' />
+      </Text>
+
+      <Space count={2} />
+
+      <Text
+        display='inline'
+        color='text.accent'
+        fontSize={['small', 'ordinary']}
+        lineHeight={['normal', 'regular']}
+      >
+        <FormattedMessage id='courses.subtitle.atlantis' />
+      </Text>
+
+      <Space count={1} />
+
+      <Text
+        display='inline'


зачем тут везде инлайны выставленны?

TorinAsakura · 2023-08-17T12:29:18Z

landing/fragments/landing-faq/src/faq-list/faq-list.ts

+    id: 0,
+    question: 'Подойдёт ли мне профессия?',
+  },
+  {
+    id: 1,
+    question: 'Подойдёт ли мне профессия?',
+  },
+  {
+    id: 2,
+    question: 'Подойдёт ли мне профессия?',
+  },
+  {
+    id: 3,
+    question: 'Подойдёт ли мне профессия?',
+  },
+  {
+    id: 4,
+    question: 'Подойдёт ли мне профессия?',
+  },
+  {
+    id: 5,


к чему копипаста? можно ведь прогнать через цикл один объект

landing/fragments/landing-hero/src/social-link/social-link.interface.ts

landing/fragments/landing-process/src/item/item.component.tsx

Mirved64 added the enhancement New feature or request label Aug 9, 2023

Mirved64 self-assigned this Aug 9, 2023

Mirved64 changed the title ~~Feat/landing third step~~ feat/landing-third-step Aug 9, 2023

feat: change backgroundColor in navigation, hero and about sections

02857a2

Mirved64 changed the base branch from master to feat/landing-second-step August 9, 2023 06:54

Mirved64 added 17 commits August 9, 2023 14:46

feat: add text color, rework text in courses section

cc3fc67

feat: add ui/background

d8d2bdb

feat: add background color, font color in ui/card

2b70568

feat: add background color, font colors in courses section

92a1393

refactor: remove backgroun color from navigation, hero and about sect…

7b92cfb

…ions, wrap in ui/backgroung navigation, hero and about sections in index.page

feat: wrap in ui/backgroung process, technologies and slider sections…

54a397d

… in index.page

feat: change color of divider, add background color in number of step…

aaeff33

…, check layout, check typography in process section

refactor: change divider color in technologies section

d5cada6

refactor: change color of background process, technologies and slider…

3a4131c

… sections

refactor: remove prop backgroundColor in process, technologies and sl…

714d6a9

…ider sections, change layout, font color in slider section

refactor: change divider color. text color in faq section

39254d9

refactor: change layout and colorize IT in hero section, refactor ru.…

9688b7f

…json

refactor: edit ru.json, edit formatMessage id in navigation section

d462e48

refactor: edit ru.json, edit formatMessage id, edit layout in about s…

5064e01

…ection,

feat: add ui/utills/repeater, add run-line in technologies section

8851992

feat: rebuild ui/button, add color and shape in button, change button…

8d7baa1

…s in project

refactor: change border color in slider section

0ba8a08

feat: add react-scroll-parallax

326263b

BREAKING CHANGE: incorrect parallax props

Mirved64 added 2 commits August 12, 2023 13:03

fix: correct parallax props, remove needless wrapper in about section…

6ccc8db

…, parallax only in desktop

refactor: tune parallax props, remove needless wrappers, remove needl…

ec85d39

…ess css props, rework button component

Mirved64 requested a review from oxiqod August 12, 2023 13:56

oxiqod suggested changes Aug 13, 2023

View reviewed changes

refactor: change divider color in courses section, change item descri…

11718a4

…ption in process component

Mirved64 added 2 commits August 14, 2023 13:34

refactor: rework item component in process section

0e66cb4

style: replace weight='1' to weight={1}

c4b3cf5

Mirved64 requested a review from oxiqod August 14, 2023 09:44

oxiqod suggested changes Aug 14, 2023

View reviewed changes

Mirved64 added 6 commits August 15, 2023 09:20

refactor: add left and right gap in swiper in courses section

7e1917e

refactor: rename logo props, rework layout in navigation section

404ec85

refactor: rework text in mobile in about section

186f5f4

refactor: rework slider component

749f1c1

refactor: remove state prop in ui/button

fc4dc26

refactor: rework text in mobile in hero section

28f3dad

Mirved64 requested a review from oxiqod August 15, 2023 08:08

oxiqod approved these changes Aug 15, 2023

View reviewed changes

oxiqod requested a review from Nelfimov August 15, 2023 08:40

Nelfimov suggested changes Aug 15, 2023

View reviewed changes

fix: make courses section is adaptive

c53323b

Mirved64 requested a review from Nelfimov August 15, 2023 16:19

Nelfimov suggested changes Aug 15, 2023

View reviewed changes

Mirved64 added 5 commits August 16, 2023 09:09

fix: rework nestings in tsconfig.json

be9641a

fix: use typescript 4.6.2

67397c3

fix: use react-intl 6.0.8

7ebb097

refactor: add faq-list, map faq-list in faq section

4571f4f

feat: rework courses component, add cards list, cards component, add …

5b1b264

…the ability to handle cards data

Mirved64 requested a review from Nelfimov August 16, 2023 12:21

Nelfimov approved these changes Aug 17, 2023

View reviewed changes

TorinAsakura reviewed Aug 17, 2023

View reviewed changes

TorinAsakura approved these changes Aug 17, 2023

View reviewed changes

Base automatically changed from feat/landing-second-step to master August 17, 2023 18:09

TorinAsakura merged commit b33f75f into master Aug 21, 2023
6 checks passed

TorinAsakura deleted the feat/landing-third-step branch August 21, 2023 10:18

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat/landing-third-step #13

feat/landing-third-step #13

Mirved64 commented Aug 9, 2023

Mirved64 commented Aug 11, 2023

Nelfimov commented Aug 11, 2023

Nelfimov left a comment

Mirved64 commented Aug 15, 2023

Nelfimov left a comment

Nelfimov Aug 15, 2023

Nelfimov Aug 15, 2023

Nelfimov Aug 15, 2023

TorinAsakura Aug 17, 2023

Mirved64 Aug 21, 2023

TorinAsakura Aug 21, 2023

TorinAsakura Aug 17, 2023

TorinAsakura Aug 17, 2023

feat/landing-third-step #13

feat/landing-third-step #13

Conversation

Mirved64 commented Aug 9, 2023

Mirved64 commented Aug 11, 2023

Nelfimov commented Aug 11, 2023

Nelfimov left a comment

Choose a reason for hiding this comment

Mirved64 commented Aug 15, 2023

Nelfimov left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment