Для запуска нужно выполнить команду npm run watch, либо npm run build и открыть папку dist как корень сервера. Это связано с тем, что в js идет запрос к стаическим файлам с карточками через fetch, либо можно запустить браузер с флагом.
Из средств автоматизации применялись: препроцессор SASS, шаблонизатор Pug и сборка через webpack.
Для компоновки элементов на странице использовались CSS Grid и CSS FlexBox. Разметка html была организована по образу БЭМ, для каждого блока был создан свой шаблон pug и свой набор стилей sass. Для лучшего соответствия верстки исходному макету я использовал расширение для Chrome - PerfectPixel.
При верстке я старался создавать универсальные стили и функции js. В том числе и для карточек я решил создать универсальные стили, а вид карточки (большая, как в "главное" или маленькая, как в "избранные сценарии") указывать модификатором. Для вертикального расположения блоков карточек я использовал flexbox и для указания высоты я исопльзловал min-height, чтобы при переполнении карточка просто увеличивала свою высоту. На мобильной версии текст в карточках идет от нижнего края блока вверх, для реализации этого поведения я использовал display: table-cell для текстового блока, чтобы применить вертикальное выравнивание по нижнему краю vertical-align: bottom.
Для слайдеров, чтобы не тратить время на написание велосипедов я использовал готовый стайлер tiny-slider., который в целом позволяет реализовать необходимые функции.
Анимацию всплывающих окон я создал при помощи css3 переходов. Чтобы сделать код переиспользуемым, я использовал модификаторы и примеси для стилизации модальных окон. Для стилизации range-input во всплывающих окнах я использовал нативную реализацию <input type="range">. Для реализации индикатора температуры пола "Xiaomi Warm Floor" я использовал svg, пути в котором отрисовываются и рассчитываются функцией в js.
Для тумблера, регулирующего температуру пола (Xiaomi Warm Floor), создана разметка и индикатор рисуется при помощи svg path вычисляемых в js. Чтобы добавить возможность взаимодействия используется скрытый input range, нужно добавить aria атрибуты на html элемент его замещающий. Взаимодействие реализовано благодаря объекту Draggable из библиотеки greensock. В момент вращения вычисляется процент от пройденного сектора и изменяется значение input и меняется значени на тумблере и пересчитывать кривые svg (также можно было бы заранее отрисовать два индикатора активный и неакивный и скрывать/отображать их частично при помощи svg масок). Я решил применить библиотеку gsap поскольку она позволяет удобно решить задачу анимации и применить отлаженное решение более опытных разработчиков не создавая свой велосипед.
Для реализции фильтрации я использовал data атрибуты, в которых находится список категорий к которым относится карточка. Чтобы скрывать и показывать элементы создан специальный массив в котором сохранено соответствие индексов узлов элементов в родительском контейнере и их позицию в массиве. При фильтрации программа будет прходит массив элементов и по индексам, после чего ненужные элементы скрываются добавлением модификатора, а нужные отображаются или остаются видимыми.
Далее я описал свои выводы и планы по дальнейшему развитию ответа на задание и пути их реализации (то, что хотел бы успеть внедрить).
Для верстки сценариев я использовал flexbox в master, чтобы расположить элементы сверху вниз, в обновленном коде для этого использована сетка grid layout, в которой элементы заполняют конейнер слева направо, чтобы можно было заполнять контейнер бесконечно. Для того, чтобы элементы располагались группами, как я предполагаю их нужно объединить отдельными контейнерами, которые на десктопе будут элементами слайдера, при этом нужно будет поставить условие, при котором через каждые 9 элементов будет закрываться и открываться новый контейнер и на мобильной версии их нужно рсположить в одну строку. Мне кажется, что лучше обойтись без лишних оберток, пэтому мне больше нравится вариант с разметкой grid, но ближе к макету применение flexbox и отдльных контейнеров для каждых 9 элементов.
В процессе выполнения этого задания я пришел к выводу, что все-таки при работе с данными поступающими из json для карточек лучше использовать какой-либо фреймворк, чтобы работать с шаблонами и заполнять их данными. Я решил не хардкодить данные карточек, а брать их из файла, чтобы была возможность тестировать верстку на разных данных изменяя json, а также в реальном приложении данные точно будут приходить с сервера, скорее всего в формате json.
Слайдер я планирую либо написать самостоятельно, либо найти дургой подходящий под задачи вариант, потому, что tiny-slider не позволяет менять направление с вертикального на горизонтальное при масштабировании экрана, а только при инициализации слайдера. Также мной было замечего нестабильное поведение слайдера при изменении разрешения окна. Поэтому слайдер определенно надо изменить в будущем.
Можно изменить внешний вид меню появляющегося из бургера, добавить анимацию. И немного поменять выпадающий список фильтров на мобильной версии, чтобы он выглядел красивее, для этого я думаю при открытиии списка менять выравниевание текста на выравнивание по левому краю и желтая кнопка будет заполнять всю ширину выпадающего меню.
Спасибо за внимание!
В этом репозитории находятся материалы тестового задания по вёрстке для 14-й Школы разработки интерфейсов (осень 2018, Москва, Санкт-Петербург, Симферополь).
Это задание проверяет, насколько хорошо вы умеете верстать и знаете особенности браузеров.
Вам нужно сверстать панель управления «умным домом». Она показывает информацию о текущем состоянии дома и позволяет управлять устройствами вручную и по сценариям. Дизайнер подготовил для вас отдельные макеты для большого экрана и мобильных телефонов.
В верхней части страницы есть шапка. В ней находится логотип и главное меню. Для адресов ссылок используйте заглушку #.
В нижней части находится подвал. Он должен примыкать к нижней границе экрана, вне зависимости от количества контента на странице.
Вертикальный скролл есть только в мобильной версии, при прокрутке шапка остаётся на месте. Главное меню прячется за иконку ☰.
На странице отображаются три блока: «Главное», «Избранные сценарии», «Избранные устройства».
Блок «Главное» находится слева и занимает половину экрана. В нём в виде текста отображается состояние окон и дверей, температура в доме и на улице. Справа находится список ближайших запланированных сценариев, который можно листать по вертикали. На мобильных устройствах блок занимает всю ширину экрана, а список ближайших сценариев листается по горизонтали.
Правую половину экрана занимает блок «Избранные сценарии». Сами сценарии отображаются в виде панелей фиксированного размера, которые расположены в три ряда. Цвет иконки показывает, активен ли сценарий сейчас.
Если все сценарии не помещаются в три ряда, то справа сверху появляются кнопки для постраничного листания.
Переход между страницами должен быть анимированным. Вид и параметры анимации выберите самостоятельно. На мобильных устройствах вместо постраничного листания используется горизонтальная прокрутка списка.
Устройства, как и сценарии, отображаются в виде панелей фиксированного размера. Они расположены в один ряд по всей ширине экрана. Если устройства не помещаются, справа над списком появляются кнопки для постраничного листания — как в списке сценариев. На мобильных устройствах вместо постраничного листания используется горизонтальная прокрутка списка. Список устройств можно фильтровать по комнатам и типам устройств. В мобильной версии фильтр отображается в виде меню. Для меню нет макета — реализуйте его на свое усмотрение.
При клике на устройство должен открываться попап управления им. Открытие попапа должно сопровождаться анимацией. Пример анимации есть в репозитории с макетами.
Яркость ламп и температура теплого пола выбираются при помощи слайдера. Термостатом можно управлять при помощи крутилки.
В первую очередь мы будем проверять, свёрстаны ли страницы в точном соответствии с макетами. Если какие-то части макетов покажутся вам непонятными, обязательно задавайте уточняющие вопросы — пишите на адрес [email protected]. Вёрстка должна корректно выглядеть:
На десктопе — в последних версиях Google Chrome, Яндекс.Браузера, Mozilla Firefox, Safari, Microsoft Edge. На мобильных устройствах — в Safari (iOS) и Google Chrome (Android). В этом задании мы проверяем ваши навыки вёрстки. Вы можете использовать JavaScript, если посчитаете это нужным, но старайтесь, чтобы код был как можно проще. Пожалуйста, не используйте JavaScript-фреймворки.
По возможности используйте приёмы безопасной деградации CSS.
Уделите внимание организации и оформлению кода. Оптимизация производительности и автоматизация будут плюсом.