Требования:
Исходные данные:
На странице есть возможность просматривать контакты представителей компании относительно выбранных региона и страны. Существует регион, в котором нет стран, но есть контакты. При выборе региона/страны, в которых есть контакты открывается модальное окно, в котором выводится список контактов в формате: Имя, email, телефон. Все данные загружаются в формате json из data/contacts.json. Дизайн страницы находится в папке layout.
Верстка:
-
Фон должен быть сделан с помощью CSS
-
Select-ы должны быть центрированы по высоте и по ширине. Их ширина должна быть:
- desktop: 6/12
- tablet: 9/12
- mobile: 12/12
- Размер модала контактов:
- desktop: ширина = 6/12, высота = высоте контента
- tablet: ширина = 9/12, высота = высоте контента
- mobile: ширина = ширине экрана, высота = высоте экрана, контент скроллится
-
Модал центрирован по ширине и высоте.
-
Когда модал открыт, страница не активна.
Функциональность:
-
Select-ы связанные, то есть при выборе региона меняется страна.
-
В select-ах нет пустых option. При выборе региона выбирается первая страна. Начальные - Europe/Germany.
-
Если в регионе нет стран, то select стран не выводится
-
Модал закрывается при нажатии на иконку закрытия или при нажатии на область вне модала.
Дополнительно:
- Модал появляется и исчезает с помощью CSS анимации.
- Сборка и минификация проекта с помощью Grunt в папку dist.
- Использование ui-router.
Был создан starter template, который используется в нашей компании. Для начала работы запустите:
- npm install
- bower install
- grunt