О, кстати

ась

Я просто вспомнил, что сделал такую штуку уже, в добавок ещё на своей либе)

Я просто вспомнил, что сделал такую штуку уже, в добавок ещё на своей либе)

О, я помню ты тут с кем то батл устраивал, вроде по этой теме? что-то вы там пробрасывали

Один обсервер на приложение, компоненты обычные и стайлед миксины

Я просто вспомнил, что сделал такую штуку уже, в добавок ещё на своей либе)

шта

завернул ресайзобсервер в эффектор?

Я абстрагировал наборы медиареквестов до трех кейсов — phone, tablet, desktop в двух положениях экрана landscape и portrait

Я абстрагировал наборы медиареквестов до трех кейсов — phone, tablet, desktop в двух положениях экрана landscape и portrait

го вно

я как раз в посте написал, что нужно абстрагировать от экранов

и привел пример дефолтный, когда это нужно

я как раз в посте написал, что нужно абстрагировать от экранов

В пользу чего?

У тебя экраны есть просто по факту существования print и прочих эдж кейсов

В пользу чего?

в пользу container queries

собственно, во Vue у меня идентичная конструкция https://itnext.io/making-adaptive-vue-components-with-resizeobserver-123b5ebb20ae

https://caniuse.com/#feat=resizeobserver полифилом что ль?

https://caniuse.com/#feat=resizeobserver полифилом что ль?

угу

в пользу container queries

а "экран" выразить через body контейнер

в пользу container queries

а?

В посте такого слова, чсх, вообще нет

А что это поменяло

В посте такого слова, чсх, вообще нет

container queries - это все хотят в css сделать

А что это поменяло

теперь у тебя 3 в ряд, но экран все еще большой

будешь писать новый стиль?

Ты не понял?

Стилей нет

Компонент просто не показывается

это как в бутстрапе

окей, выражусь по-другому

ток реакт компоненты

будешь пилить новый брейкпоинт?

Чтобы что? Компоненты вкладываются друг в друга

у тебя есть 2 компонента поста - маленький и большой

на отдельной странице ты их завернешь в desktop + mobile

а на странице, где они 3 в ряд, во что заворачивать будешь?

чтобы они не сломались

В десктоп

ну вот и получишь вот такое

Ты по прежнему не понимаешь)

нет, это ты не понимаешь, в чем проблема

Если не проходит матч по медиареквесту компонент просто не рендерится

Какие стили вообще

алло, причем здесь рендер

я тебе про медиареквест говорю

именно

Ну здорово, познавательно

на отдельной странице граница, чтоб показать маленький пост - это твой "mobile" брейкпоинт на странице, где 3 в ряд - в 3 раза меньше

алло, причем здесь рендер

ээээ, container queries - это подход предпологающий брейкпоинты для конкретно взятого блока?

на отдельной странице граница, чтоб показать маленький пост - это твой "mobile" брейкпоинт на странице, где 3 в ряд - в 3 раза меньше

Я такой херней не страдаю

в зависимости от размеров родителя?

Если нужно сделать именно узкую колонку просто сделай узкую

Я такой херней не страдаю

значит, тебе повезло не иметь таких тасков

Если нужно сделать именно узкую колонку просто сделай узкую

ты все еще не понял, видимо

css grids возьму

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

css grids возьму

здорово, один из миллиарда вариантов шаблона ты покрыл

Ты юзал css grids?

ээээ, container queries - это подход предпологающий брейкпоинты для конкретно взятого блока?

основывается на размерах конкретного блока

Ты юзал css grids?

да

основывается на размерах конкретного блока

?

он не понимает сути и все пытается рассказать о том, что у него компонент не рендерится

да

И не нашёл как их применить чаще чем в одном случае из тысячи?

И не нашёл как их применить чаще чем в одном случае из тысячи?

окей, у тебя абсолютно разные компоненты для маленького и большого поста удачи сделать это на css и трех брейкпоинтах

ERROR: S client not available

Ща

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

<Device desktop tablet> <BigLayout /> </Device> <Device phone> <SingleColumn /> </Device>

окей, у тебя абсолютно разные компоненты для маленького и большого поста удачи сделать это на css и трех брейкпоинтах

Ну react media query + render prop И все

<Device desktop tablet> <BigLayout /> </Device> <Device phone> <SingleColumn /> </Device>

Теперь это же в блоке 3/4 размером (была фулл страница, стала страница с сайдбаром)

Теперь это же в блоке 3/4 размером (была фулл страница, стала страница с сайдбаром)

Можно на уровне темплейтов атомик решать

И это же в блоке размером в 2 раза меньше (менеджер захотел 2 блока в ряд вставить)

Можно на уровне темплейтов атомик решать

ага

И это же в блоке размером в 2 раза меньше (менеджер захотел 2 блока в ряд вставить)

Рендер с условием

точнее не ага

Рендер с условием

какое условие

точнее не ага

Я именно так и решаю

Любое

Я один 90% кейсов флексами покрываю? ?

У тебя что, нельзя прокинуть данные о статусе сайдбара?)

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

Я один 90% кейсов флексами покрываю? ?

В флексах не хватает только определения на какой строке \ колонке элемент при flex-wrap

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

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

И как ты это решил

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

Какой элемент?

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

Ну сам придумал условие сам с доблестью решил

Рекурсивно как то

И как ты это решил

ResizeObserver, который смотрит на размер элемента

Это который медленный ппц

ResizeObserver, который смотрит на размер элемента

Ты ресайзишь элемент за которым наблюдаешь?

@kelin2025 https://github.com/d6u/react-container-query -- я так понимаю что то такое требуется?

Ну сам придумал условие сам с доблестью решил

герой нашего DOMa

@kelin2025 https://github.com/d6u/react-container-query -- я так понимаю что то такое требуется?

да

именно оно

Это который медленный ппц

не заметил лагов на бюджетном телефоне, не знаю, о чем речь

То есть я правильно понял, у тебя одни и те же компоненты на всё, и любое измение его медиа реквестов отражается сразу во всех контекстах его использования, так?

Меня напрягает с каким наездом ты сейчас разговариваешь, если честно