UI-компоненты №2. Сетка карточек и фиксированный фильтр

[@alexandrgusletsov2567]

спасибо за ваши уроки , Макс, смотреть одно удовольствие , круто что ты это всё делаешь! component UI - круто , поддежриваю , grid , javascript ! Невероятно

[@ОлегАрхипов-ю3с]

Большое спасибо за видео!

[@ХамзатДобриев-ч5е]

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

[@aleksius7819]

блин просто царь, а то как раз надо сверстать эти карточки и что бы оно не сыпалось при любом количестве карточек, а гриды все лень учить. вообще шикарный канал, Спасибо тебе за работу. Единственное, сделай вступление свое потише, иногда вечером смотрю и ОЧЕНЬ громкое оно, а голос после него тихий

[@maxgraph]

У меня по уровням в программе примерно ровно) но проверю. Спасибо)

[@dmitriykarabasov1440]

Отличный контент! Спасибо!

[@maxgraph]

Пожалуйста)

[@nikitaskin6511]

Хороший контент! лайк!

[@maxgraph]

Спасибо)

[@michailnovos9136]

Большое спасибо за такой полезный контент :)

[@maxgraph]

Пожалуйста))

[@alexandrgusletsov2567]

Было бы круто немного рассказать про код javascript который ты пишешь - в том плане какие сущности стоит прочитать для получения теории , чтобы самому написать что то подобное! И я про прошлый первый выпуск тоже самое бы попросил! Буду благодарен , жаль что уже в видео не добавить это

[@vitalb7907]

класс) спасибо больше за видео) когда планируются следующие серии?))

[@maxgraph]

Завтра))

[@vitalb7907]

@@maxgraph ждемс)

[@AlexanderShutter]

Наверное, можно было сделать так: спозиционировать фильтр абсолютом, запихнуть в одну переменную позицию родительского блока и во вторую общую высоту родительского блока. Ну а потом просто слушать скрол и менять значение top фильтра в соответствии со значениями в тех двух переменных. Тогда и fixed не нужен. По аналогии получится эдакий вертикальный прогрессбар внутри родительского блока фильтра.

[@vyacheslavvasilev1776]

Отличное видео, спасибо! Вопрос по поводу использования position: sticky. Он так и не вошел в обиход?

[@vyacheslavvasilev1776]

Сразу же попалось на глаза ваше видео про position: sticky, поэтому вопрос неактуален :)

[@AlexanderShutter]

В продолжение к своему предыдущему комментарию набросал вот такой код, где переменная slide - это по аналогии ваш фильтр, переменная slideBox - общий контейнер, а переменная offset - значение отступа от верхнего края экрана, когда начинает срабатывать перемещение фильтра. Ну и два дополнительных if для того, чтобы фильтр всегда магнитился к верху или низу, потому что первый if немного глючноват при быстром скролле. И да, наверняка возможно написать проще и лучше, но я еще не умею так, поэтому буду рад правкам и замечаниям : let slide = document.querySelector('.slide') let slideBox = document.querySelector('.services__item'); window.addEventListener('scroll', function() { let offset = 200 if (window.scrollY >= slideBox.offsetTop - offset && window.scrollY ((slideBox.offsetTop + slideBox.offsetHeight) - slide.offsetHeight) - offset) { slide.setAttribute('style', `top: ${slideBox.offsetHeight - slide.offsetHeight}px`) return } })

[@mister_robot01]

Было бы интересно посмотреть как бы вы сделали ползунок) и пользуетесь ли вы position sticky ? чем писать столько кода на js

[@maxgraph]

Как его сделать покажу Про sticky будет отдельное видео)

[@АлександрМелянюк-ц9ю]

Спасибо! А анонс UI-компоненты №3 когда будет?

[@maxgraph]

В моем плане - 4 ноября. Если ничего не поменяется :)

[@evshushkov]

Приветствую! grid-gap же вроде не актуален больше(по крайне мере мне вскод об этом говорит), просто же gap теперь

[@maxgraph]

Привет! Я не сильно много верстаю на гридах) возможно. Главное, что работает, да и вс код у меня не ругается.

[@evshushkov]

@@maxgraph На mdn посмотрел, пишет, что устарело) А мне нравятся гриды, очень удобно, а главное адаптировать быстро)

[@maxgraph]

@@evshushkov ну я думаю потихоньку к ним переезжать :)

[@АндрейГолованов-н1о]

После планируешь делать адаптив всего этого дела?

[@maxgraph]

Возможно)

[@ivanlitovchenko1840]

Я вот только не понял, зачем мы .fixed добавили left:0;, без него не нужно было бы высчитывать отступ от окна к container, блок с фильтром никуда бы не улетели.

[@maxgraph]

Ну, возможно и так)

[@npc6110]

Хотелось бы увидеть как делается блок сравнение в интернет магазинах

[@maxgraph]

А что там?) по клику на кнопку улетает в сравнение, а дальше?

[@npc6110]

@@maxgraph Я имел ввиду страницу сравнение.

[@maxgraph]

Ну там же просто табличка будет, я верно понимаю суть?)

[@youngejuk]

как относишься к буцтрап сетке ?)

[@maxgraph]

Да никак)

[@mexxi302]

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

[@maxgraph]

Сделаю, когда будет несколько компонентов :)

[@daniilthegunner843]

Друг , не забудь пожалуйста про фиксированный блок в корзине сделать) уже писал об этом в прошлом видосе

[@maxgraph]

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

[@daniilthegunner843]

@@maxgraph аа все, я еще не досмотрел, думал тут не фиксируется снизу этот блок. Спасибо

[@maxgraph]

@@daniilthegunner843 ну отлично :)

[@podoprigoraisv]

Ох и намучался с подобной проблемой, сделал отдельный компонент: github.com/Podoprigora/sport-area-shop-front/tree/master/src/ui/Sticky Вот мой пример: podoprigora.github.io/sport-area-shop-front/#/accessories/backpacks/everyday_backpacks

[@Максим-щ8к6и]

сюда бы еще прикрутить сортировку по стоимость (например)