1. Приветствуем Вас на неофициальном форуме технической поддержки XenForo на русском языке. XenForo - коммерческий форумный движок от бывших создателей vBulletin, написанный на PHP.

1.2.0 Адаптивный дизайн

Тема в разделе "Новости XenForo", создана пользователем Romchik®, 24.05.2013.

Загрузка
  1. Romchik®

    Romchik® The Power of Dreams Команда форума

    Регистрация:
    26.09.10
    Сообщения:
    5 746
    Симпатии:
    5 311
    Версия XF:
    1.5.18
    Как уже и предполагалось ранее, для лучшей поддержки устройств с маленькими экранами, таких как мобильные телефоны и планшеты, в XenForo 1.2 появится версия стиля с адаптивным дизайном.

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

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

    ss-2013-05-24_11-33-30.png

    Как мы можем видеть на скриншоте, в наше распоряжение поступят три варианта ширины. В общем, они соответствуют определенным классам устройств.
    • Узкий (максимальная ширина: 480px): телефоны вертикальной ориентации, некоторые телефоны горизонтальной ориентации
    • Средний (максимальная ширина: 600px): некоторые телефоны горизонтальной ориентации, 7-дюймовые планшеты вертикальной ориентации
    • Широкий (максимальная ширина: 800px): 7-дюймовые планшеты горизонтальной ориентации, 7-дюймовые планшеты вертикальной ориентации
    Адаптивный дизайн также можно полностью отключить. Конкретные страницы также можно отключить с помощью строчки <xen:container />.

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

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

    ss-2013-05-24_11-45-57.png

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

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

    Вложения:

    Nezumi, TAIFUN, martyanov12 и 8 другим нравится это.
  2. Mefodian

    Mefodian Местный

    Регистрация:
    20.01.12
    Сообщения:
    493
    Симпатии:
    220
    Версия XF:
    1.1.3
    дождались
     
  3. lepagrn

    lepagrn Местный

    Регистрация:
    06.03.13
    Сообщения:
    62
    Симпатии:
    23
    Версия XF:
    1.2.5
    ждали мобильного стиля, а сделают адаптивной, что гораздо лучше :)
     
  4. ApJIeKuHo

    ApJIeKuHo Местный

    Регистрация:
    08.03.13
    Сообщения:
    188
    Симпатии:
    28
    Версия XF:
    1.1.4
    Ну что я могу сказать. Молодцы.
     
  5. Jigsaff

    Jigsaff Местный

    Регистрация:
    15.03.13
    Сообщения:
    44
    Симпатии:
    3
    Версия XF:
    1.3.0
    Очень нужная новинка, однозначно лучше «мобильной версии»!
     
  6. vovik1646

    vovik1646 Местный

    Регистрация:
    15.12.12
    Сообщения:
    88
    Симпатии:
    12
    Версия XF:
    1.2.4
    Ну что же будем ждать релиза. Очень полезная штучка.
     
  7. Lex

    Lex Dura Lex

    Регистрация:
    27.11.10
    Сообщения:
    820
    Симпатии:
    159
    Версия XF:
    1.5.1
  8. Nevil

    Nevil Пользователь

    Регистрация:
    28.05.13
    Сообщения:
    52
    Симпатии:
    13
    Штука хорошая, но трафик жрёт так же, в отличие от мобильного стиля.
     
  9. stranger

    stranger Местный

    Регистрация:
    13.03.11
    Сообщения:
    72
    Симпатии:
    7
    Версия XF:
    1.1.5
    Чем адаптивный лучше мобильного? Это вообще разные вещи.
    Адаптивный дизайн не может заменить мобильный ни как!
     
  10. ANGEL OF FIRE

    ANGEL OF FIRE Модератор

    Регистрация:
    06.11.11
    Сообщения:
    395
    Симпатии:
    180
    Версия XF:
    1.1.3
    Тем что не нужно столько работы. Да и если кто захочет, тот сможет и отдельно прописать в этом уже стиле для маленького разрешения лого (как пример) меньше по размеру и т.д. И уже этим уменьшить траф для мобильных телефонов.
     
  11. Denel

    Denel Местный

    Регистрация:
    16.11.11
    Сообщения:
    295
    Симпатии:
    112
    Версия XF:
    1.5.9
    Если вам сто-то не нравится, используйте мобильный стиль. Ведь никто не заставляет пользоваться именно адаптивным.
     
    Витяй нравится это.
  12. stranger

    stranger Местный

    Регистрация:
    13.03.11
    Сообщения:
    72
    Симпатии:
    7
    Версия XF:
    1.1.5
    причем тут нравится или нет?!
    я говорю что адаптивный не сможет заменить полностью мобильный стиль
     
  13. OlegM

    OlegM Местный

    Регистрация:
    10.03.13
    Сообщения:
    37
    Симпатии:
    2
    Версия XF:
    1.4.3
    Не подскажете, что должна заменить адаптивная верстка и почему "не сможет"?
    Ведь адаптивные шаблоны и создаются, чтобы не париться с мобильными стилями. А при грамотной верстке еще и объем трафика минимален.
    Возможно мобильный стиль отображает не все данные, в адаптивном их можно скрыть. Ну да, трафика на 500 байт больше будет, так это "экономия на спичках".
     
  14. nuBokz

    nuBokz Местный

    Регистрация:
    11.03.13
    Сообщения:
    90
    Симпатии:
    10
    Версия XF:
    1.3.0
    не пинайте сильно, но не могу найти где это настраивается в админке :)
    --- добавлено : Aug 7, 2013 6:16 AM ---
    спасибо нашел, все включено, а на деле, что-то ничего и не работает.
     
    Последнее редактирование модератором: 15.08.2013
  15. Romchik®

    Romchik® The Power of Dreams Команда форума

    Регистрация:
    26.09.10
    Сообщения:
    5 746
    Симпатии:
    5 311
    Версия XF:
    1.5.18
    А что за стиль используется?

    Заходим в настройки стиля:
    Настройки стиля -> Основное -> Ширина страницы

    И смотрим, чтобы в поле внизу не было указанного значения width или min-width.
     
    nuBokz нравится это.
  16. nuBokz

    nuBokz Местный

    Регистрация:
    11.03.13
    Сообщения:
    90
    Симпатии:
    10
    Версия XF:
    1.3.0
    Стиль Default
     
  17. Romchik®

    Romchik® The Power of Dreams Команда форума

    Регистрация:
    26.09.10
    Сообщения:
    5 746
    Симпатии:
    5 311
    Версия XF:
    1.5.18
    Ссылку на форум дайте.
     
  18. nuBokz

    nuBokz Местный

    Регистрация:
    11.03.13
    Сообщения:
    90
    Симпатии:
    10
    Версия XF:
    1.3.0
    ссылка
    --- добавлено : 9 авг 2013 в 20:33 ---
    адаптивный заработал после пересчета кэша, но вот теперь у всех одна проблема что на яблоках, что на ведроидах, пропала (сдвинулась) ссылка "Новые сообщения" из-за того что в 1.2 версии форума появилась новая ссылка "отслеживаемые разделы". По-моему бесполезная, как ее можно убрать\отключить ?
     
    Последнее редактирование модератором: 17.08.2013
  19. Romchik®

    Romchik® The Power of Dreams Команда форума

    Регистрация:
    26.09.10
    Сообщения:
    5 746
    Симпатии:
    5 311
    Версия XF:
    1.5.18
    Не похоже на стиль по умолчанию.
    У этого зеленого стиля не включен адаптивный дизайн.

    Ищите по фразе ее название. Потом названию ищите в шаблоне и попробуйте удалить соответствующую часть кода.
     
  20. nuBokz

    nuBokz Местный

    Регистрация:
    11.03.13
    Сообщения:
    90
    Симпатии:
    10
    Версия XF:
    1.3.0
    хммм, ну как бы я взял и через настройки шаблона, разукрасил стиль Defaults
    не совсем понял, кого ЕЕ ? :)
     

Поделиться этой страницей