В этой инструкции вы узнаете как создать мобильную версию страницы проекта, перенести на неё виджеты с десктопного макета и настроить оформление под узкий экран.
Мобильная версия нужна, когда дашборд смотрят с телефона: вместо сжатого десктопного листа пользователь получает отдельный макет под узкий экран. Настройки мобильной и десктопной версий хранятся раздельно; после «Сохранить» они действуют для всех ролей, которые открывают этот проект.
Что появляется в конструкторе
У каждой десктопной страницы можно завести связанную мобильную версию. Это отдельная страница с особыми правилами видимости:
- в меню управления страницами и на панели навигации вы видите только страницы «своего» режима — либо все десктопные, либо все мобильные;
- у зрителя на компьютере всегда показываются десктопные страницы;
- у зрителя на телефоне — только мобильные, если в проекте есть хотя бы одна мобильная версия; если мобильных страниц нет, проект открывается как обычно (десктопные листы).
В режиме мобильной версии область макета по умолчанию 360×5000 px (размеры можно изменить в настройках страницы). Фон-картинка страницы снимается, вокруг листа рисуется подложка в виде корпуса телефона — по ней удобно держать границы экрана при раскладке.
Создание и переход между версиями
Переключение выполняется в меню управления страницами (список страниц проекта).
- Откройте меню управления страницами.
- Наведите курсор на нужную десктопную страницу — рядом с названием появится иконка мобильного устройства.
- Нажмите на иконку:
- если мобильной версии ещё нет — система создаст её, перенесёт виджеты десктопной страницы во вкладку «Перенос виджетов» и откроет мобильный макет;
- если мобильная версия уже есть — откроется она.
- Чтобы вернуться на десктопную страницу, в том же меню нажмите иконку экрана рядом с названием мобильной страницы.
При каждом таком переходе Fastboard проверяет несохранённые изменения. Если правки есть, появится тот же запрос о сохранении, что и при выходе из проекта: сохраните работу или продолжите без сохранения — по своему выбору.
Пока вы редактируете мобильную версию, в навигации и в меню страниц видны только другие мобильные листы. Когда вернётесь на десктоп — снова только десктопные. Сами мобильные страницы не дублируются в «обычном» списке десктопных листов.
Перенос виджетов на мобильный макет
Сразу после входа в мобильную версию слева открывается вкладка «Перенос виджетов». На ней — виджеты с десктопной страницы: название и уменьшенный превью-кадр один под другим. Пока виджет лежит на этой вкладке, он не числится среди объектов на мобильной странице.
Чтобы разместить виджет на мобильном макете:
- Откройте вкладку «Перенос виджетов» (если она не открылась сама).
- Перетащите виджет на страницу drag-and-drop или нажмите на его превью — виджет появится в верхней левой точке макета (как при добавлении нового объекта).
- Ширина подстроится под ширину экрана мобильной страницы; при необходимости скорректируйте высоту и положение вручную.
- При необходимости добавьте на мобильную страницу и новые виджеты из обычной палитры — они живут только в мобильной версии и не возвращаются на вкладку переноса.
Чтобы убрать перенесённый виджет обратно на вкладку «Перенос виджетов»:
- Откройте контекстное меню виджета на странице.
- Выберите «Вернуть» (пункт под «Удалить»).
То же действие: сочетания Ctrl + Delete или Alt + Delete.
Пункт «Вернуть» есть только у виджетов, перенесённых с десктопа. У копий и у виджетов, созданных уже в мобильной версии, этого пункта нет — их нельзя «отправить» на вкладку переноса.
Настройки: что общее, что только для мобильной
Общие действия конструктора в мобильной версии доступны как обычно: добавлять и удалять виджеты, править настройки страницы, работать с данными. При этом:
- раскладка и правки, сделанные в мобильной версии, не подменяют десктопный макет;
- настройки, которые вы меняете у перенесённого виджета в мобильной версии, помечаются в панели настроек специальной иконкой — у самой настройки, у подсекции, секции и у меню (в том числе внутри модальных окон);
- при наведении на иконку показывается подсказка: «Данная настройка изменена в мобильной версии проекта»;
- отметка не ставится на изменение ширины, высоты и положения контейнера на странице — это «местные» размеры макета;
- отметка появляется и при изменениях вне правой панели (например, блокировка элемента из контекстного меню или применение стиля с другого виджета) — рядом с затронутыми настройками.
Если на десктопе меняют перенесённый виджет:
- изменения подтягиваются в мобильную версию для настроек без иконки (ещё не переопределённых на мобильном);
- настройки с иконкой остаются как вы задали в мобильной версии и с десктопа не перезаписываются.
Настройки в панели настроек сохраняются в проект кнопкой «Сохранить» и затем действуют для любой роли. Верхняя панель конструктора / режима просмотра по-прежнему относится к сессии и не заменяет сохранённые настройки мобильного или десктопного макета.
Что видит зритель
Зритель с компьютера видит только десктопные страницы. Прямая ссылка на мобильную страницу всё равно откроет десктопный контур.
Зритель с телефона, если в проекте есть хотя бы одна мобильная версия, видит только мобильные страницы. Прямая ссылка на десктопную страницу откроет мобильный контур.
Зритель с телефона, если в проекте мобильных версий нет, видит обычный режим: десктопные страницы, как до появления фичи.
Имеет смысл заводить мобильную версию для каждой страницы, которую нужно показывать с телефона. Страница без мобильной пары в «мобильном» режиме навигации зрителю не попадёт.