Самая простая плитка:
В какой-то момент к ней добавили название игры:
Больше инфы в подвале плитки:
Используем там блок .param обязательно с модификатором .param_outside
Плитка с оверлеем и действиями
Тут страшные замес с тем, куда запихать этот оверлей. Он должен быть поверх тела, но под подвалом. При этом подвал должен остаться прозрачным и поддерживать ссылки внутри. По-этому сначала выводим .unit__body, потом .unit__overlay и после .unit__foot. При этом весь оверлей должен быть кликабелен, вести на сам лот. По этому он часть общей ссылки.
Кнопки внутри оверлея и ссылки внутри подвала (появятся позже) отлавливать JS`ом. Ссылку в ссылку не запихать.
Сюда же надо добавлять модификатор .unit_has-overlay, чтобы сбросить дефолтный эффект наведения. Он тут не нужен ибо есть оверлей.
Еще здесь надо сделать проверку на наличие наведения в принципе. Опять же, смотри на .unit_has-overlay, ловим клик по нему. Надо проверить, показан ли в момент клика .unit__operations (например свойство display != none). Если показан, то все ок, сработало наведение и пользователь увидел возможные действия, но предпочел кликнуть в пустую область, чтобы перейти к игре/лоту. Если нет, то это тач устройтсво или он пришел сюда табуляциями. Надо отменить клик и показать ему оверлей по клику. Для того, чтобы показать оверлей добавляем класс .unit_drop.
Восстановить
Четыре кнопки в оверлее
Немного экстремальный кейс. На четыре кнопки тут места не хватает. В случае, если кнопок 4 (или больше), то добавляем модификатор .unit_has-four-actions. Он немного уменьшит расстояние между кнопками и они влезут.
Лоты
Приходит предложение с одной игрой. Тут такие же операции как выше, кнопок меньше. В подвале обещанная ссылка .unit__extra-link, которую так же нельзя делать тегом <a>. Делаем <span>, а клик ловим JS`ом.
Приходит предложение с деньгами. Тут вместо .unit__stage и всех его потомков с обложкой выводится .unit__buying
Игра с доплатой. Тут новый элемент .unit__money. Кстати, из-за того, как он позиционируется и понадобилась обертка .unit__preview.
Несколько игр.
Сюду нажен мини-слайдер. Во-первых точки навигации .unit__navigation. Во-вторых пачку кантинок .unit__boxart (раньше была только одна, сейчас много). В случае со слайдером этим картинкам нужно проставляет модификатор .unit__boxart_set (ну типа это не просто картинка, а часть множества картинок). Дальше по клику на точки дергаем классы .unit__switch_current и .unit__boxart_current.
Бейдж
