В этом репозитории находится моё решение первого задания в 17 Школу разработки Интерфейсов.
Основной задачей сервера было слушать порт 8080 и отдавать нужную часть data/data.json в зависимости от параметров адресной строки.
Для этого я использовал фреймворк express.js - с ним удобнее и быстрее.
Пригодился шаблонизатор EJS, используется для удобства формирования index.html, возвращаемого сервером.
Файл index.html, который возвращает сервер, содержит вызов функции window.renderTemplate(alias, data).
Её аргументы прописываются с помощью шаблонизатора прямо в html файл.
Файл stories.js написан 'руками', содержит только код функции window.renderTemplate(alias, data), которая формирует html слайда по данным с сервера.
Файл stories.css формируется сборщиком gulp.
Все исходники находятся в папке src в корне проекта.
Gulp компилирует SCSS стили в обычный CSS, добавляет вендорные префиксы, группирует медиа-запросы и благодаря browserSync автоматически обновляет страницу.
Для удобного переключения с темы на тему, я использовал кастомные свойства CSS. Все цвета и параметры задаются для тёмного интерфейса, а если задан класс theme_light, то переопределяются. Таким образом код выглядит чисто, а всё что касается темы собрано в одном месте.
Для того, чтобы стандартные стили браузера не мешали разработке, gulp при компиляции вставляет null.scss в stories.scss.
Шрифты сконвертированы в форматы woff и woff2, подключаются конструкцией font-face.
Адаптивность плохо проработана :( . Если успею всё сделать и будет лишняя минутка - обязательно исправлю.
В макете vote вопрос с малым количеством участников на странице решён следующим образом: имеющиеся участники заполняются слева направо, сверху вниз, а оставшиеся места остаются пустыми
Судя по макетам, нужно выводить не все данные из json, а только 9 столбцов. Взял диапазон с текущим значением, двумя следующими (нулевыми получается) и сколько осталось - предыдущие.
Диаграмма сделана с помощью svg круга + обводка с dasharray и dashoffset. Градиенты плохо получилось перенести, а тени и скругления вообще не получилось.
В Легенде оставил только численные обозначения с помощью регулярного выражения (не +32 комита, а просто +32). Так оно помещается, красиво смотрится и совпадает с макетом.
В макете activity есть тепловая карта, состоящая из большого количества стобцов. SVG файлы этих столбцов закодированы с помощью URL-encoder и вставлены в CSS файлы. Теперь можно в разметке задать нужный класс, а CSS вставит соответствующую картинку, а с помощью кастомных свойств вопрос со светлой темой решается в два счёта.