Предрелизные баги

Nelfimov commented 6 months ago

Описание бага

[x] навбар должен полностью пропадать при скролле вниз
[x] нестабильный ховер на ценник

https://github.com/torin-asakura/drum-in/assets/44067768/2cd90235-73bd-4e7b-94a8-0d7aac66b9c7
[x] прогресс бар должен заполняться вплоть до "палочек", в том числе закрашивать их

Воспроизведение

https://drumin.pro/feeling-of-time

Ожидаемое поведение

Баги пофикшены

Материалы

См. выше

Данные окружения

Любое

oxiqod commented 6 months ago

@Nelfimov

насчет хедера при скроле - есть пара проблем с фиксом этого бага:

можно его сделать таким же как и его бэкграунд, но при этом в начальном состоянии (когда пользователь не листнул вниз еще ни разу) хедера не будет, он повляется только при листании строго вверх
попытавшись решить эту проблему - я столкнулась со следующей, не могу получить стандартными методами положение прокрутки на сайте, обычный window.scrollY всегда показывает 0, так понимаю из-за использования useLocomotiveScroll а useLocomotiveScroll дает данные о прокрутке только при листании наверх

решение: по-хорошему нужно каким то образом получать данные о том, что пользователь еще не скролил страницу, и при этом состоянии показывать Header, а уже потом подключить логику как у черного бэкграунда хедера

Вопрос: Есть еще методы получить офсет по Y?

oxiqod commented 6 months ago

@Nelfimov

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

вот какие баги сейчас есть:

присутствие белой полоски (которая как раз является заполнителем прогресса)
на вьюпорте шириной 1440, видно окончание изображения программы и этого белого треугольника ^

recording (1).webm

если изображение барабанных паолчек в круге в конце должно закарышиваться, то это тоже нужно продумать, ведь я получаю программу как изображение, и палочки там уже фиолетовые, вот пикча:

![image](https://github.com/torin-asakura/drum-in/assets/126156026/ec2782f8-eeb7-4e50-94f1-596f8c9dc9a4)

возможное решение:

переработать данный блок, продумав как еще можно реализовать заполнение прогресс бара при скролле

oxiqod commented 6 months ago

Что сделано:

пофиксила мерцание и движение ховера в блоке price всех курсов
исправила отображение header на странице (при начальном состоянии - видимый, при скролле вниз - пропадает, при скролле вверх - появляется)

что осталось:

переработать блок program у индивидуальных курсов

TorinAsakura commented 6 months ago

присутствие белой полоски (которая как раз является заполнителем прогресса)

это можно решить только через draw svg, рисованием/заполнением векторного объекта (по сути дорисовкой), белый кусок на подложке - это костыль от неумения сделаный твоими предшественниками

https://css-tricks.com/svg-line-animation-works/ для понимания общей картины
https://www.cassie.codes/posts/creating-my-logo-animation/ - это уже ближе к нашему делу

oxiqod commented 5 months ago

@Nelfimov

при решении бага с программой курса я встретилась с проблемой получения процента скролла

предыстория:

реализовала функционал для заполнения SVG исходя из пропса progress, он приходит ввиде числа от 0 до 100, линия прогресса заполняется исходя из него как и элементы на этапах и круглые иконки палочек
сперва смоделировала пустой компонент и стандартными методами сделала скролл и получение его процента (определила скролл зону overflowX, повесила реф на этот элемент, сделала хук для получения прогресса прокрутки по ref) вот что получилось:

[recording.webm](https://github.com/torin-asakura/drum-in/assets/126156026/94bd2a3d-6a02-45e0-8452-3832aa49675c)

затем добавила на одну из страниц где есть программа:
- в боксах при текущем методе скролла нет ифонрмации о перемещении при попытке получить через ref (я так поняла из за локомотивСкролла)
- получение скролла через useLocomotiveScroll выдает данные о прокрутке только полностью всей страницы

вопрос: возможно ли получить прогресс прокрутки конкретного бокса (например обертки для блока программа) если в проекте используется locomotiveScroll? если нет, то предполагаю что выходом, возможно, может стать отдельно создание locomotive scroll provider для каждой программы курсов, еще не пробовала, как ты думаешь?

Nelfimov commented 5 months ago

@oksssvv посмотри как работает мобильный вид - там этого бага нет.

Прогресс можно узнать через пример в доке:

https://www.npmjs.com/package/react-locomotive-scroll#specific-cases

torin-asakura / drum-in