Улучшение интерфейса школы Zenclass

Опубликовано: 16 Декабрь 2021
на канале: DMTRVK
142
2

Достаточно добавить несколько классов и пару JS скриптов, чтобы один из лучших сервисов онлайн школ стал лучшим.

Я имел в виду вот какое-то такое поведение, но оно конфликтует с draggable элементами конструктора. Но думаю, что ваши разработчики с этим как-то справятся. В этом примере нет анкеров, мне сейчас лень это делать, но это легко делается с помощью JS и jquery, минут за полчаса.

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

Пример CSS для скролла в меню, лишь один из возможных вариантов:
.mobile-menu {
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px rgb(16 28 40 / 4%), 0 8px 12px rgb(16 28 40 / 4%);
height: calc(100vh - 250px);
position: relative;
overflow: scroll;
scrollbar-width: 5px;
scrollbar-color: black white;
}
.mobile-menu::-webkit-scrollbar {
width: 5px;
}
.mobile-menu ::-webkit-scrollbar-track {
background: white;
}
.mobile-menu ::-webkit-scrollbar-thumb {
background-color: black;
}
.lesson__name.active, .task__name.active{
color: #fff;
}
.lesson__name.active {
background-color: #222;
}


Смотрите видео Улучшение интерфейса школы Zenclass онлайн, длительностью часов минут секунд в хорошем качестве, которое загружено на канал DMTRVK 16 Декабрь 2021. Делитесь ссылкой на видео в социальных сетях, чтобы ваши подписчики и друзья так же посмотрели это видео. Данный видеоклип посмотрели 142 раз и оно понравилось 2 посетителям.