Дорожная карта и меню для школы имиджа и стиля
Это был один из первых проектов, которыми я занимался на платформе геткурс, поэтому эта работа принесла мне много опыта в плане оформления личных кабинетов на этой платформе.
Здесь я впервые рискнул сделать верхнее меню, что получилось весьма успешно.
Также для этого проекта я написал код дорожной карты в виде "змейки", которая так понравилась многим, и задала новый тренд в онлайн-школах.
Боковое меню
Стандартное левое меню изменено практически полностью. От него остался только главный контейнер, который стал шире. Поэтому пришлось сдвигать контент всех страниц правее, чтобы меню его не перекрывало.
В левом меню были скрыты все стандартные значки, и вместо них добавлены новые, с подписями.
Так как стандартные значки скрыты, это может мешать сотрудникам и администраторам этого проекта нормально работать. Поэтому для них добавлена возможность скрытия кастомного меню (т.е. у них показывается стандартное).
Но определить, является ли пользователь сотрудником, оказалось не просто. Из-за ограничений платформы геткурс, мы не можем JavaScript'ом напрямую определять, в каком сегменте пользователь. Зато мы можем определить это по косвенным признакам.
Так, с помощью отдельной "технической" страницы сайта, на которой по сегменту "Сотрудники" показывается единственный текстовый блок, мы можем узнать что пользователь в этом сегменте. Скрипт в фоновом режиме загружает эту техническую страницу и определяет, видно ли текущему пользователю текстовый блок на странице. Если этого блока не видно, тогда пользователь находится в сегменте "Сотрудники", и для него показывается обычное меню геткурса.
UPDATE: Сейчас, чтобы узнать, является ли пользователь админом или сотрудником, есть способ попроще.
Верхнее меню
Код этого меню полностью самописный, т.е. никакие стандартные блоки геткурса не использовались.
Аватарка перемещается из стандартного бокового меню геткурса в правую часть кастомного верхнего меню. Делалось это с помощью специального скрипта, но опять же сейчас заполучить аватарку пользователя можно проще, она всегда доступна в свойстве window.accountUserThumbnail.
При нажатии на аватарку появляется выпадающее меню. Это меню тоже полностью самописное, а показ и скрытие этого меню происходит через JavaScript.
Количество новых уведомлений теперь показывается около значка колокольчика в верхнем меню, что тоже было довольно не просто сделать. Изначально я планировал вытягивать эти данные с помощью скрипта из стандартного меню, но оказалось, что когда стандартное боковое меню загружается, значение количества уведомлений в нём появляется не сразу.
Ставить задержку в скрипте было слишком не надёжно, да и к тому же важно, чтобы вся страница отобразилась, как можно быстрее. Поэтому было решено перехватить ответ ajax-запроса, который посылает геткурс прежде, чем показать меню. Этот ответ, кроме всего прочего, содержит заветное значение количества новых уведомлений.
Ну и, наконец, чтобы кастомное меню отображалось везде, стандартные страницы Профиль и Chatium пришлось подменить, т.к. на по умолчанию на них не работают скрипты.
Дорожная карта
Другим интересным моментом в этом проекте было создание дорожных карт, а если точнее, создание самой "дороги".
Видно, задачу создать дорожную карту дизайнер понял буквально, и решил нарисовать настоящую асфальтированную дорогу с разметкой 😂
Загвоздка в том, что такую дорогу очень сложно изобразить на сайте, если не использовать картинки. Но в этом случае вариант с картинкой не прокатывал по трём причинам:
- Одна из дорожных карт была настолько длинной, что занимала аж 4 экрана. А как мы с вами знаем, большие картинки могут сильно тормозить страницы.
- Картинка не адаптивна. Она не может просто так растягиваться под разные разрешения экрана, не портя при этом вёрстку страницы.
- Я бы был не я, если бы не заморочился созданием адаптивной дороги)
Если говорить по правде, то именно в этом проекте мобильная версия не требовалась, поэтому стили под мобильный вид я не делал. Но это сделать вполне реально. Но на "полноэкранных" девайсах эта дорога красиво растягивается по ширине под нужный размер.
Сама дорога нарисована обычными <div> блоками, а точнее бордерами этих блоков. Пришлось вставить пару блоков один в другой и использовать псевдоэлементы :after и :before, чтобы сделать 4-х ярусную границу.
Но результат стоит этих усилий. Так как теперь эту дорогу можно довольно легко сделать любой длинны, и окружить её любым контентом со всех сторон.
Кстати, в дорожной карте используется вот эта диаграмма — тоже моя разработка. Она показывает сколько уроков ученик прошёл в модуле. Правда пришлось её немного переделать, чтобы можно было её использовать на обычной странице сайта (вне тренинга) 😊