Магия CSS/HTML/JS на GetCourse, Prodamus.XL и вообще
1.07K subscribers
23 photos
5 videos
1 file
8 links
Канал клуба Магии CSS/HTML/JS. Подписка по ссылке https://gcwithme.ru/getmagic. Промокод спрашивайте в @getmagic_chat
Download Telegram
КНОПКИ В УРОКАХ «СЛЕДУЮЩИЙ» и «ПРЕДЫДУЩИЙ»

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

Этого решения нет в уроках, но есть в закрытом клубном чате. А теперь и прямо здесь.

Копируйте код и вставляйте в настройки аккаунта как есть.

<style>
.lesson-navigation td .hidden-xs {
display:none;
}

.lesson-navigation td a {
background:#3192d6;
color:white;
padding:5px 10px;
border-radius:20px;
transition:all 0.3s;
}

.lesson-navigation td:first-child a:before {
content:"←"
}

.lesson-navigation td:last-child a:after {
content:"→"
}

.lesson-navigation td a {
text-decoration:none;
}

@media (max-width:400px) {
.lesson-navigation td a {
font-size:12px;
}
}

.lesson-navigation td a:hover {
box-shadow:0 0 4px #3192d6;
}

.text-center.hidden-xs span {
display:none;
}
</style>


#уроки #стилизация
СБРОС ВЫПОЛНЕННЫХ УРОКОВ В ТРЕЙ

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

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

В качестве бонуса к данному решению @araviw сделала новую визуализацию статусов урока - теперь иконки располагаются справа, и их, включая цветовые подложки, вы можете настраивать как душе угодно :)

🔎 Где искать урок?
Тренинги → Практика

🕘 Сколько требуется времени на установку?
20 минут

🔥Что принесет проекту?
Идеальное решение, если вы хотите "освежить" внешний вид тренинга

#стилизация #уроки #тренинги
аккардеон.gif
10.9 MB
АККОРДЕОН В СПИСКЕ УРОКОВ

Если вы сторонник аккуратных списков вместо "простыней", то это клубное решение для вас.

Урок рассказывает о том, как большие (да и не очень) списки уроков можно собрать в аккуратные плашки аккордеона, при этом задав им стилизацию под проект по цветам. При этом количество конечных аккордеонов на странице не ограничено. И конечно, как и полагается приличному аккордеону 😆 - в момент сворачивания и разворачивания меняется иконка, символизирующая текущий статус (открыт или закрыт).

Данное решение от @araviw может быть так же использовано и для создания FAQ (блок "вопрос-ответ/частые вопросы") на сайте, как альтернатива стандартному блоку от самого Геткурса.

🔎 Где искать урок?
Тренинги → Практика

🕘 Сколько требуется времени на установку?
10 минут

🔥Что принесет проекту?
Вы сможете с легкостью стилизовать большой список текста (или уроков), разбив его на заголовок и внутреннюю область.

#стилизация #уроки #тренинги
ТОЧНОЕ КОЛИЧЕСТВО ДОСТУПНЫХ УРОКОВ В ТРЕНИНГЕ

Один из самых популярных багов у Геткурса в подсчете уроков решен @Isagaya.

Что было раньше? Геткурс выводит под название тренинга количество уроков, которые вообще есть внутри этого тренинга, при этом считая также и скрытые от пользователя. Поэтому обязательно найдется на курсе пользователь, который сосчитает сам и будет спрашивать о том, почему же ему выдали уроков меньше, чем заявлено.

Поэтому приходилось или скрывать эту строчку или не допускать скрытые уроки. Или отвечать :)

А с уроком Максима вы сможете сделать пересчет и вывести правильное количество уроков! Долой ужасные баги платформы!

🔎 Где искать урок?
Тренинги → Практика

🕘 Сколько требуется времени на установку?
20 минут

🔥Что принесет проекту?
Уберете давний баг, сохраните нервы свои и пользователя.

#уроки #тренинги
СТИЛИЗАЦИЯ БЛОКА "АКТУАЛЬНЫЕ СОБЫТИЯ"

Есть два основных метода работы с событиями на Геткурсе в плане их представления пользователю - визуализация через системный блок актуальных событий и календарь.
Календарь есть в клубе как полноценное решение, но иногда оно избыточно. Поэтому, если вам хочется просто немного "освежить" вид блока от самого ГК - смотрите урок от @araviw.

С помощью этого решения вы сможете понять основу стилизации блока или полностью повторить макетный вариант.

Так же из урока вы узнаете как переименовать заголовок блока или вырезать лишние текстовые элементы из описаний событий.

🔎 Где искать урок?
Тренинги → Практика

🕘 Сколько требуется времени на установку?
10 минут

🔥Что принесет проекту?
Сможете сделать быструю стилизацию важного блока

#расписание #уроки