Кастомизация hochufilm по дизайну

Выполнено в рамках работы в агенстве Zavod (team.zavod-agency.ru)

Задача: кастомизировать дизайн интерфейса GetCourse для школы hochufilm

Сроки: 3 дня

Великолепный дизайн: https://www.figma.com/file/An4qxpTPPijElMgS3Cn7su/Untitled?node-id=106%3A189

Для меня эта кастомизацией стала первым реальным проектом такого объема, в связи с чем по ходу дела выяснялись интересные нюансы.

Боковое меню было изменено с помощью псевдоэлементов (один из способов смены иконок).

Код прокидывается по стандарту через "настройки и прочие скрипты"

Главная сложность кастомизации — делать унифицированное решение, которое одинаково учитывает характеристики разных уроков\модулей и по их общему критерию делает свою работу.

Вот так выглядит стандартная страница уроков:

Вот так — страница уроков hochufilm

Как видите, уроки выглядят АБСОЛЮТНО ПО-РАЗНОМУ. Вернее, для ученика уроки выглядят в едином стиле, а записи в своем едином стиле, но для GetCourse-то и то и то единый элемент — урок. Реализовано такое разделение с помощью скрипта, который просматривает названия уроков. Если в названии есть слово "Записи", то ему присуждается отдельный класс со своим визуалом.

p.s. в дизайне "записи видео-встреч" выполнены с переносом после слова "записи", но это нереализуемо в виде универсального решения. Нужно либо заставлять техспециалиста в дальнейшем называть урок "Записи<br> видео-встреч", либо сооружать костыль с непременно дизайнерским переносом, т.к. по умолчанию перенос выполняется только после слова "видео-". Поэтому вот такое вот различие от дизайна, увы.

Со страницей тренингов технически та же история, что и с уроками. Скрипт парсит наличие уроков (если уроков нет, удаляет информацию об этом), парсит имя спикера (в дизайне его не нужно упоминать на плашках с модулями) и удаляет его, а также проставляет номера только до 5 модулей (т.к. в оригинальной структуре модуля на 1 элемент меньше, и его дописывает как раз скрипт)

К сожалению, гифка с демонстрацией тренингов не помещается из-за большого веса, поэтому посмотреть, как стали выглядеть тренинги, можно тут:

https://www.youtube.com/watch?v=W6VZXN6YNbA

Да, это отдельная категория, согласно дизайну. Выглядит так (желтое — анимация наведения)

Где какой дизайн определяет скрипт по адресной строке. Если она соответствует корневой папке тренингов — накидывает ее дизайн, если соответствует обычным тренингам — их дизайн. Для уроков накидывается третий вариант.

Одна из самых главных головных болей — расписание.

Выглядит так:

Стандартно выглядит так:

Заметили? По стандарту на три урока выводится всего одна надпись даты. Посему кастомизированное расписание отслеживает число уроков внутри одного элемента с датой, и если их больше 1, то извлекает урок, дублирует оболочку и вставляет туда урок. Саму надпись парсит по названиям месяцов на русском или английском языке и видоизменяет на формат дд/мм. Если эта дата — сегодняшняя, то красит фон даты в жёлтый цвет.

Кастомизация hochufilm — интересный пример изменения внешнего вида платформы, который был реализован без технических упущений и недочетов в кратчайшие сроки. Результат работы оказался реиспользуемым для любых других модулей и уроков в рамках школы