.page
Это самый старший разметочный блок, значит. Он разбивает страницу на:
.page__panel.page__panel_id_header
.page__popover.page__popover_id_%popover-id%
.page__panel.page__panel_id_sidebar
.page__body
.page__panel.page__panel_id_aside.
Панели
В этой мешанине на первом уровне есть три панели: .page__panel.
У них одинаковая динамика - это зафиксированные на 100% высоты экрана,
которые не поддаются скроллбару. Различаются они модификаторами:
.page__panel_id_header,
.page__panel_id_sidebar,
.page__panel_id_aside
Дальше в глубь этих панелей идут колонны с контентом .page__column. Соответствено всплывает проблема переполнения контентом. Если ничего не предпринять, то контент ниже 100% будет обрезан. Если предпринять скроллбар внутри колонны, то внутри будет overflow и невозможно будет использовать всякие тултипы, которые вылетают за границу колонны.
Решение следующее. По дефолту предпринимаем ничего и полагаем, что содержимое панелей всегда умещается в 100% высоты. Например шапка - там никаких проблем, там не бывает скроллбаров. С другой стороны на страницах диалогов или чата переполнение может быть. Там добавляем скроллбар. Делается это модификатором .page__column_scroll - он создает непосредственно сам скроллбар. Кастомизируем его блоком .scroll (добавляем еще и его классы .scroll и .scroll_skin_default).
В принципе - эта проблема встречается только с выпадайкой в меню пользователя: http://prntscr.com/cbamud. Больше никаких таких тултипов, которые вылетают за свою колонну у нас нет. Так что можно сказать, что шапка не обладает скроллбаром, а все остальные панели всегда обладают и можно их всегда делать со скроллбарами. Тем не менее, функционал добавления скроллбара - это отдельный модификатор и в случае чего его можно повесить на колонну в шапке или снять с колонны в сайдбаре.
Тело страницы
.page__body - оно ведет себя как обычно. Просто бесконечная лента. Она вполне себе может быть переполнена контентом. Скроллируется обычным браузерным скроллбаром. Этот, браузерный, уже не кастомизируется.
Поповер
Это элемент .page__popover, что так же на первом уровне вложенности у .page. Идет после панели шапки и перед панелью сайдбара. Поповеров может быть сколько угодно.
В каком-то смысле поповеры - это модальные окна на нашем сайте. Но и на панели описанные выше они тоже похоже. Позиционируются так же фиксированно, так же не поддаются скроллбарам. Внутри поповеров точно такойже .page__column, на который можно вешать, а можно и не вешать скроллбар. Но версточные различия тут тоже есть
По дефолту поповеры прячутся за шапкой и за левым краем экрана. Вытаскивает их модификатор .page__popover_visible, который, как видно из названия, должен проставляться непосредственно к поповеру. При его наличии поповер видим. Убираем класс - скрывается. Анимация делается версткой.
Для открытия поповера предлагаю всем кнопка и ссылкам, которые являются хендлером проставлять дату data-popover=".page__popover_id_demo", которая ссылается на селектор нужного поповера. Но это так, для демонстрации в этих доках только. При программировании делать как угодно. Соответственно все классы типа .page__popover_id_demo нужны только для этой связи. В верстке они не используются. Если при программировании идет обращения к ним как-то по другому, то эти классы не нужны.
Скрываем сайдбар и асайд
У нас есть страницы на
которых могут в принципе отсутствовать сайдбар или асайд или оба сразу. Например поиск.
Так вот там недостаточно просто удалить панели из кода (у .page есть паддинги под этими панелями).
Нужно добавлять соответствующие модификаторы (которые эти паддинги сбросят):
.page_no-sidebar
.page_no-aside
Адаптивный асайд
Еще один замес с панелью aside. Она у нас никак не вмещается в планшеты и там мы ее просто убиваем. Точнее даже так - изначально панель asid`а скрыта, но на ширине 1340+, когда на странице места для нее достаточно, она показывается. Почти везде, где у нас есть эта панель в ней какой-нибудь несущественный контент, типа "тренды сейчас" и его можно безболезнено скрывать.
Но есть проблемы с контактами. На странице профиля магазина в asid`е важная информация: http://prntscr.com/bjiaj4 и просто так версткой ее удалять нельзя. Этот случай рассматриваем индивидуально. Мы идем внутрь этой панели и ищем непосредственно блок .aside: http://prntscr.com/bjib5w. На этот блок никакой динамики, скроллбаров, ничего не завязано. Это просто статичная, разметочная обертка. Берем этот блок и копипастом помещаем его внутрь тела: http://prntscr.com/bjihaj. Добавляем модификатор .aside_tablet. Получается, что у нас в коде может быть два asid`а: один в панели для aside`ов, другой в теле страницы. Дальше я медиа-запросами скрываю / показываю нужный на нужной ширине.
Маленькие экраны
Все это хорошо работает только на больших экранах. Маленьким экранам, например телефонам, нужны горизонтальные скроллбары и тут фиксированное позиционирование все портит. В этом же его суть - не даваться скроллбарам. Еще одна проблема с ним - оно не очень хорошо работает на старых мобильниках (скачет при прокрутке). Решаю все это отменой фиксированного позиционирования, если экран недостаточно большой. Сайт становится просто статичным полотном и все скроллируется одновременно. Это не самый важный кейс, так как у нас есть мобильная версия, но на случай, когда пользователь все же как-то зашел на полную версию с мобилки (или просто сильно сузил экран) этот вариант лучше чем ничего.
Другими словами вся эта фигота с фиксирвоанным позиционированием начинается с какой-то конкретной высоты (от ширины тоже зависит, но там никаких проблем). Сейчас в верстке это 510px. Соответствено там, где мы не используем скроллбар в панелях обязательно должен умещаться контент в эти 510px высоты.
TO DO
Перетереть вот этот отступ: http://prntscr.com/cbasko