smart-home

Smart Home UIKit

Design & Mockups

https://yandex-shri-2018.github.io/entrance-task-2-2/

Description

Компоновка страницы

В верхней части страницы есть шапка. В ней находится логотип и главное меню. Для адресов ссылок используйте заглушку #.

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

Вертикальный скролл есть только в мобильной версии, при прокрутке шапка остаётся на месте. Главное меню прячется за иконку ☰.

Содержимое страницы

На странице отображаются три блока: «Главное», «Избранные сценарии», «Избранные устройства».

Главное

Блок «Главное» находится слева и занимает половину экрана. В нём в виде текста отображается состояние окон и дверей, температура в доме и на улице. Справа находится список ближайших запланированных сценариев, который можно листать по вертикали. На мобильных устройствах блок занимает всю ширину экрана, а список ближайших сценариев листается по горизонтали. Избранные сценарии Правую половину экрана занимает блок «Избранные сценарии». Сами сценарии отображаются в виде панелей фиксированного размера, которые расположены в три ряда. Цвет иконки показывает, активен ли сценарий сейчас.

Если все сценарии не помещаются в три ряда, то справа сверху появляются кнопки для постраничного листания.

Переход между страницами должен быть анимированным. Вид и параметры анимации выберите самостоятельно.

Избранные устройства

Устройства, как и сценарии, отображаются в виде панелей фиксированного размера. Они расположены в один ряд по всей ширине экрана. Если устройства не помещаются, справа над списком появляются кнопки для постраничного листания — как в списке сценариев. На мобильных устройствах вместо постраничного листания используется горизонтальная прокрутка списка. Список устройств можно фильтровать по комнатам и типам устройств. В мобильной версии фильтр отображается в виде меню. Для меню нет макета — реализуйте его на свое усмотрение.

При клике на устройство должен открываться попап управления им. Открытие попапа должно сопровождаться анимацией. Пример анимации есть в репозитории с макетами.

Яркость ламп и температура теплого пола выбираются при помощи слайдера. Термостатом можно управлять при помощи крутилки.

Project setup

yarn install

Compiles and hot-reloads for development

yarn run serve

Compiles and minifies for production

yarn run build

Lints and fixes files

yarn run lint

Run your unit tests

yarn run test:unit

Run your end-to-end tests

yarn run test:e2e