Оформление личного кабинета для онлайн-школы Alteco

Ещё один мега-крутой ЛК родился на свет, благодаря нашей командной работе с дизайнером @daniilpostnov. Предлагаю посмотреть, что в нём особенного.

Левое меню тут просто космическое)) Верите или нет, сделано оно из стандартного бокового меню геткурса. Но, конечно, пришлось немало пошаманить и внести целую кучу изменений, чтобы оно стало таким:

Демонстрация работы меню

Главная фишка этого меню в том, что оно может быть как компактным, так и развёрнутым (по умолчанию оно широкое). Пользователи сами выбирают, как им будет удобнее. Для этого внизу есть кнопка "свернуть/развернуть". Выбор пользователя запоминается при переходах между страницами. Т.е. если пользователь ранее выбрал компактный вариант, то ему откроется страница сразу со свёрнутым меню.

Подменю больше не открывается как раньше, все пункты подменю перенесены "внутрь" кнопок меню и разворачиваются, при нажатии на них.

Главная страница тренингов

Здесь карточки тренингов застилизованы так, что попасть внутрь тренинга можно только при нажатии на кнопку "Начать обучение". Кстати, эти карточки - не кастомные блоки, это настоящий список тренингов) Т.е. если в онлайн-школе появится новый тренинг, то его карточка будет автоматически выглядеть так же.

А как же картинки? - спросите вы, ведь их же нет в стандартном списке тренингов. Верно) Картинки подтягиваются прямиком из чатиума. В настройках тренинга на вкладке "В приложении" можно установить картинку тренинга, и, обычно, её видно только в чатиуме. Но я придумал скрипт, который вытаскивает картинку из чатиума и ставит её на обложку тренинга в декстопной версии сайта. Таким скриптом я уже поделился в Клубе Магии, и наши ученики успели протестировать насколько это круто)

Так же на этой странице есть блок "Магазин", где по сути отображаются недоступные тренинги, которые можно приобрести:

Список модулей

Прежде всего обратите внимание на шапку страницы. Она тоже генерируется автоматически, картинка и описание модуля подтягиваются так же из чатиума, а кол-во уроков в тренинге и кол-во заданий определяется скриптом.

Внутри каждого тренинга есть модули, и они выглядят иначе, чем обычные тренинги. У модулей есть 3 состояния: обычное, закрытое и пройденное. Пройденные модули определяются скриптом, и на такие карточки автоматически ставится зелёная галочка. На закрытых модулях вместо галочки будет замочек. Также карточки модулей автоматически нумеруются.

Ещё одна забавная штука - это то, что тут ученики видят бейджики, которые они ещё не получили (они выглядят полупрозрачными), что мотивирует их двигаться дальше. В геткурсе такое поведение бейджей не предусмотрено, поэтому этот момент тоже, конечно, сделан через скрипт.

Страница модуля

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

Список уроков тоже переделан и очень упрощён визуально. Но в целом, работает он так же, как мы с вами привыкли)

И ещё одна максимально простая, но такая удобная штука - это кнопки переключения модулей. С помощью них можно перейти на следующий или предыдущий модуль. Это просто маст-хэв)

Страница урока

У уроков внутри похожая шапка, как и на страницах тренингов. Кнопки следующий и предыдущий урок, так же перемещены в неё.

В целом, контент самих уроков почти не трогался. В основном добавились скругления у элементов и заменены шрифты. Но некоторые блоки всё же были сильно застилизованы, хотя и не попали на этот скриншот. Среди них "список файлов", "форма", "анкета", "тестирование" и некоторые другие.

Но сложнее всего стилизовать оказалось блок комментариев, впрочем, как обычно) В нём очень много разных элементов, а его вёрстка оставляет желать лучшего, поэтому стили приходилось порой забивать костылями))

Остальные страницы

На самом деле в этой онлайн-школе застилизованы почти все страницы, куда может попасть рядовой пользователь. Скринить их все я не стал, т.к. их реально много, но все красивые) Кто не верит на слово, пишите в ЛС))

И напоследок, вот, подборка самых интересных страниц. Все они были стилизованы на основе стандартных. Думаю, описывать каждую нет необходимости. Но если у вас появились вопросы, пишите в комменты, всем отвечу :)