Макет режима встраивания fullApp

Внести вклад Ошибка
,
1

Привет, команда!

Когда появился виджет fullApp, я быстро попробовал внедрить его на свой сайт и столкнулся с несколькими проблемами верстки. Решил поделиться ими здесь — возможно, вам будет интересно:

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

  2. После того как я исправил это, справа появилась другая пустая область.

  3. Оказалось, что по умолчанию высота секции равна высоте контента выше неё. При длинном содержимом под секцией виджета образуется ещё одна пустая область, которая может занимать от 2 до 3 экранов.

  4. После того как я исправил все три вышеуказанные проблемы, коллега заметил, что секция комментариев «мигает» на 1 пиксель вверх/вниз в Ubuntu Chrome (на Mac это не наблюдается) — ещё один кастомный CSS устранил эту проблему.

В конечном итоге все проблемы были решены с помощью следующего фрагмента кода:

body.embed-mode #main-outlet-wrapper { 
  display: block !important;
}
body.embed-mode {
  --topic-body-width: 100%;
}

// высота
body.embed-mode .topic-post:first-child {
    display: none !important;
}
.post-stream--cloaked { min-height: 0 !important; }

… применённого к теме Default.

Я с радостью предоставлю полный HTML для воспроизведения проблемы.

Спасибо!

1 лайк