atls-academy / Mirved64.github.io

BSD 3-Clause "New" or "Revised" License
0 stars 0 forks source link

feat/landing-second-step #11

Closed Mirved64 closed 1 year ago

Mirved64 commented 1 year ago

Close #10

Mirved64 commented 1 year ago

Всё ты никак с карточками не разберёшься. Ещё раз: компонент - это тупая визуальная сущность, просто кусок отвечающий за рендер себя любимого, все частности типа курсов, миникурсов и прочих переменных - выносятся в частную область проекта. Ну вот скажи, завтра я тебе скажу сделать ещё с пяток страниц где будут другие курсы, что, будешь под каждый курс делать дочернюю сущность для карточки? Прекращай.

@TorinAsakura

Другими словами, ui/card должен отрисовывать стилизованный контейнер? И используем его в компоненте fragments/sources/courses.component.tsx как обертку, плюсом компоненту приписываем пропсы, для конкретного места макета?

Вот здесь прочитал. Я правильно понял?

Если не так, то прошу созвониться.

TorinAsakura commented 1 year ago

@Mirved64 Браво. Именно так. Жаль, что ты единственный, кто прочёл это. Всё ещё не понятно для кого писал. Повторюсь - следуйте конвенции, я её не просто так писал.

Mirved64 commented 1 year ago

@TorinAsakura

Сделал ui/card по сути Box занимающий всего родителя и меняющий курсор на поинтер. Пока такие стили, в следующих степах буду добавлять.

Теперь не могу понять куда вставлять кастомные карточки, т.е. три вида карточек проекта (курсы, миникурсы, материалы) уже с версткой.

Создавать директорию landing/fragments/sources куда уже поместить директории кастомных карточек? И от туда импортировать в landing/fragments/landing-courses/courses.component.tsx как элементы CardCourse, CardMiniCourse, CardMaterials и вставлять уже контент в них? image

TorinAsakura commented 1 year ago

@TorinAsakura

Сделал ui/card по сути Box занимающий всего родителя и меняющий курсор на поинтер. Пока такие стили, в следующих степах буду добавлять.

Теперь не могу понять куда вставлять кастомные карточки, т.е. три вида карточек проекта (курсы, миникурсы, материалы) уже с версткой.

Создавать директорию landing/fragments/sources куда уже поместить директории кастомных карточек? И от туда импортировать в landing/fragments/landing-courses/courses.component.tsx как элементы CardCourse, CardMiniCourse, CardMaterials и вставлять уже контент в них? image

  1. Что такое sources?
  2. Почему оно во фрагментах?

@oksssvv помоги человеку

Mirved64 commented 1 year ago

@TorinAsakura

Скоуп макет

Описание В макете в карточках в десктопной версии font-size и line-height у категории, тайтла и текста у всех карточек одинаковые. В мобильной версии font-size и line-height у тайтла карточек курса и мини-курса одинаковые, а карточек материалов отличаются на пару пикселей. image image

Вопрос Так и должно быть, или же размеры текста в карточках должны быть одинаковы?

TorinAsakura commented 1 year ago

@Mirved64 Делай как в дизайне

oxiqod commented 1 year ago

@Mirved64

Тут я сделал кастомную карточку, которую можно настроить и для больших (курс, мини-курс), так и маленькие (учебные материалы). В маленьких карточках еще и размеры шрифта в мобильной версии отличается от размеров шрифта мобилки других карточек (курс, мини-курс).

да, ее действительно можно настроить хоть из космоса, ведь у нее 12 пропсов ты даешь ей жесткие установки отступов еще и флексШринки выставляешь она должна быть адаптивной, а ты прибиваешь ее размеры гвоздями, у тебя есть пример реализации, никто не запрещает подсмотреть туда

у тебя есть примеры если прям все объяснить нужно - созвон

Mirved64 commented 1 year ago

@Mirved64

Тут я сделал кастомную карточку, которую можно настроить и для больших (курс, мини-курс), так и маленькие (учебные материалы). В маленьких карточках еще и размеры шрифта в мобильной версии отличается от размеров шрифта мобилки других карточек (курс, мини-курс).

да, ее действительно можно настроить хоть из космоса, ведь у нее 12 пропсов ты даешь ей жесткие установки отступов еще и флексШринки выставляешь она должна быть адаптивной, а ты прибиваешь ее размеры гвоздями, у тебя есть пример реализации, никто не запрещает подсмотреть туда

у тебя есть примеры если прям все объяснить нужно - созвон

@oksssvv

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

TorinAsakura commented 1 year ago

@Mirved64 так в том-то и проблема - лэйауты не должны вести себя как падинги, они дают гарантию иммутабельности, а ты ломаешь их задавая гибкости

Mirved64 commented 1 year ago

@TorinAsakura

Ход моих мыслей с лейаутами такой: Нельзя пользоваться марджинами и паддингами, значит буду вместо них ставить лейауты и запрещать им менять размеры (т.е. они будут иммутабельны). Растягиваться они, как флекс элементы по умолчанию не могут, а сжиматься запрещу им флексшринком. Адаптивная верстка будет за счёт изменения размеров контентной части (картинок, иконок, текста и т.д.) блока, её я помещаю в бокс и разрешаю расти (ставлю гроу), а сжиматься она может как флекс элемент по-умолчанию.

TorinAsakura commented 1 year ago

@Mirved64 они и так не смогут сжиматься если родитель имеет установленный базис и направляющие…

TorinAsakura commented 1 year ago

@Mirved64 Воспринимай лэйауты как строительные блоки

oxiqod commented 1 year ago

@Mirved64

так поправил, что аж стандартная верстка слетела

Снимок экрана от 2023-08-04 14-48-15

oxiqod commented 1 year ago

@Mirved64

насчет faq и courses - всё теперь красиво, поправь About и перезапроси