Новости

XenForo 1.2.0 - адаптивный дизайн

27.05.2013 | Romchik®

Как уже и предполагалось ранее, для лучшей поддержки устройств с маленькими экранами, таких как мобильные телефоны и планшеты, в XenForo 1.2 появится версия стиля с адаптивным дизайном.

Что такое адаптивная верстка (или адаптивный веб-дизайн)? Если попытаться объяснить совсем просто, то в стилях указывается CSS, который применяется только тогда, когда ширина экрана ниже определенного уровня. Это позволяет меняться дизайну и подстраиваться содержимому под определенные разрешения. Например, табличный или горизонтально ориентированный дизайн будет не очень хорошо смотреться на экране, который шириной всего 320 пикселей.

Итак, какие же варианты будут предоставлены в XenForo?

Настройки адаптивного дизайна

Как мы можем видеть на скриншоте, в наше распоряжение поступят три варианта ширины. В общем, они соответствуют определенным классам устройств.

  • Узкий (максимальная ширина: 480px): телефоны вертикальной ориентации, некоторые телефоны горизонтальной ориентации
  • Средний (максимальная ширина: 600px): некоторые телефоны горизонтальной ориентации, 7-дюймовые планшеты вертикальной ориентации
  • Широкий (максимальная ширина: 800px): 7-дюймовые планшеты горизонтальной ориентации, 7-дюймовые планшеты вертикальной ориентации

Адаптивный дизайн также можно полностью отключить. Конкретные страницы также можно отключить с помощью строчки .

Что касается разработчиков дополнений, то многие из ваших страниц должны будут изначально хорошо поддерживать адаптивный дизайн. Все зависит от того, сколько стиля CSS "по умолчанию" вы используете. Если ваш макет состоит из нескольких колонок (например, некоторые страницы менеджера ресурсов), вам придется писать собственную версию адаптации. Однако, если вы используете только стандартные элементы, такие как вкладки и формы, то проблем с адаптивным дизайном быть не должно.

Степень изменений на странице будет действительно зависеть от ширины устройства. Например, "широкоэкранные устройства" (601-800px по умолчанию) увидят в основном похожие страницы, но такие вещи, как боковые панели, будут перемещены в случае необходимости.

Адаптивный дизайн в XenForo - 1

Эта часть действительно заслуживает особого упоминания, поскольку она очень динамична. Если здесь не хватает места для элементов, то настройки навигации и поиска будут скрыты по мере необходимости и показаны позади меню. Оповещения пользователя и непрочитанные переписки будут сложены в меню пользователя. Если выбрана вкладка навигации, то она будет показана.

Еще несколько скриншотов можно глянуть в теме на форуме. Для удобства работы, Майк сделал их в Хроме на обычном компьютере. Как всегда, работа все еще в прогрессе и некоторые вещи могут быть изменены к релизу XenForo 1.2 в той или иной степени. Скриншоты сделаны в "узком" варианте отображения, чтобы показать изменения в полной мере.