Аня про Геткурс. Верстка, скрипты и решения
2.12K subscribers
107 photos
23 videos
1 file
20 links
Нужна интеграция, скрипты или верстка на Геткурсе? Пишите — @araviw

В этом канале публикую советы по верстке на Геткурсе, обзоры собственных решений и скриптов, решение "логических" задачек на платформе

🔥Разработчик года🔥 GetTechAwards'2022-2023
Download Telegram
Флекс-всемогущий или как простые хитрости помогают жить

Выравнивание элементов в блоке "Плитка" одно из самых коварных :)) потому что может потребоваться и то и се и прочее.

Сейчас разберем несколько простых ситуаций, которые у вас могут возникнуть при работе с этим блоком. Что не разобрала - спросите в комментариях.

1. Прибить кнопку к низу, оставив весь остальной контент на месте.

Самый простой вариант - объявить .lt-tsr-content флексовым элементом с 100% высотой и сделать отступ кнопке. А точнее - автоматический отступ, который будет считать сам расстояние. Поскольку отступ нужен сверху, то и будет margin-top. Обратите внимание, что работает мы здесь не с кнопкой как таковой, а именно с блоком, в котором она лежит. Это макет уже с определенными стилями, но и в "чистом" виде работать будет.

Собираем все вместе

.lt-tsr-content {
display: flex;
flex-direction: column;
height: 100%;
}


.lt-tsr-content .button {
margin-top: auto;
}
2. Внешне аналогичный случай, но

тут в description размещены еще две кнопки, которые вставлены через html
Задача прежняя - поставить все кнопки в один ряд (по горизонтали).

Но метод решения будет немного иным

Шаг первый по объявлению .lt-tsr-content флексовым элементом с 100% высотой мы оставляем. К нему добавляем еще такое же описание и для .description. Это позволит "получить" все свободное пространство внутри блока. Теперь задача в том, чтобы опустить кнопки в низ контейнера.

Список, который вы видите - это ul, работать будем с ним, а не с кнопками. Потому что по сути двинуть кнопки вниз это или дать им отступ сверху или дать отступ элементу перед ними снизу. Авто у margin-bottom даст нам полное отсутствие воздуха между списком и кнопкой, поэтому добавим еще и паддинг, чтобы вернуть промежуток между элементами

Все в сборе

.lt-tsr-content,
.lt-tsr-content .description {
display: flex;
flex-direction: column;
height: 100%;
}


.lt-tsr-content .lt-tsr-text-part.description ul {
margin-bottom: auto;
padding-bottom: 20px;
}

ps почему там три кнопки на покупку - не спрашивайте меня, не знаю 😂

хотя вполне может быть такая ситуация
- покупка 100%
- частичная оплата в 50%
- частичная оплата, фиксация цены через оплату 1-2тр

но это уже задача про внесение суммы через скрипт в одно предложение
Так, чем ближе др Клуба, тем активнее идет работа над тем, чтобы появлялись новые фишки внутри него. Пока что в старом оформлении :))

Как думаете, что принципиально изменилось в сетке уроков?

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

Кто первый верно догадается и даст полный ответ - 30 монет на клубный счет.

В самом коде есть только частичное преобразование (на тот случай, если будете там искать ответ)
НАКОНЕЦ-ТО!!

Ура, товарищи, ура!

и оно даже работает! 😂
Forwarded from GetCourse Update
​​Как выбрать учеников с дипломом?

Добавили условие «Выдан диплом» с возможностью указать, какой именно диплом выдан и в какой период.

Детали в статье в блоге 👈
Ну вот. Всё.

Теперь могу показывать.

Оригинальная версия верстки для Клуба, которая была сегодня продемонстрирована на конференции GETC.

Без рекламы, поэтому часть элементов пришлось вырезать или заменить для эфира

Автор этого распрекрасия - чудесная Аня Галанцева @AliannaG

Протипировал кстати Петя @petipak

А я чего.. А я "всего лишь" собрала 😂
И по ходу дела комменты вставляла 😅
🔥 Мини-апдейт от ГК по селектору внутри разметки поля с домашним заданием

Сейчас LessonAnswer_answer_text

Было Lessonanswer-answer_text

Не видите разницу? Я помогу: было знак "дефиса", а стал - "нижнего подчеркивания"

Если вы использовали этот id textarea для стилизации в блоке дз для ученика (ведь это именно оно, поле ввода ответа) или для работы скрипта по данному полю, то вам необходимо обновить стили и скрипты. Ибо — отвалилось 🥸

Апдейт произошел где-то на неделе

—- в комментариях вы найдете скрипт, который вам точно нужно обновить у себя в проекте - автоматическая отправка ответа, если была заполнена анкета в уроке
Все, бонусы открылись для Гетц5

Выложила два решения

1. Создание недоступных тренингов (замочек, фальш тренинги)

Это решение лечит давний баг ГК, когда тренинги в статусе "Тем у кого нет доступа: Показать в списке тренингов" выдают доступы ученикам, чем их путают.

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

2. Вытягивание данных с другой страницы

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

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

👇
Вопросы, комментарии можно оставлять тут или под уроками

зы первое решение есть в Клубе, второе в той сборке, что оно в бонусе - отсутствует
🤬 отрубают t.me
Или... Понеслась душа в рай (тех, кто это придумал в другое место)!!!

Даёшь перебивку ссылок короткого вида.

Скорее всего Телеграм в ближайшее время выкатит обновление и обойдет красиво эту блокировку.

Но пока в этом сообщении будет скоро апдейт по применению ссылок на ГК (надо только доехать до дома, а то я за рулём)

ЗЫ
Или все же не отрубают?
Таймкоды для Геткурса

Мне это решение нравится своей технологичностью и удобству для пользователя, хотя да... без минусов не обошлось

1. Таймкоды формируются почти в автоматическом режиме (вы задаете время в разметке и текст, который соответствует данному таймлайну, а скрипт подхватывает и переводит в нужный временной формат)

2. Все это попадает сразу на временную шкалу, где переход к новой главе визуально отмечен белой точкой

3. Блок сворачивается и разворачивается (занимает мало место на странице значит, компактный)

4. Работает и в декстопе и в Чатиуме.

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

6. И конечно исполняет хотелку "Хочу, чтобы работали таймкоды как на Ютубе"

7. Можно гибко настроить стилизацию под проект.

8. Работает с любым форматом видео

Но есть минусы
1. Для работы плеера видео должно быть в блоке html, значит его нужно вынести из видео из плеера, где оно сейчас. В среднем на эту процедуру уходит от 2 до 3 минут. Перезаливать видео не нужно, только переуказать его урл.

2. Все же сами таймкоды нужно скормить скрипту.
И хоть вы не закладываете разметку (она будет создана автоматически), но время и название раздела должно быть создано вами. Иначе скрипт просто не сможет понять где время для перехода

апд Цена 10тр. Купить можно в личке
Видео про комплексный метод сбора донатов для проекта в стилистике ххх сайта :)

ххх - это просто название скрыто, не подумайте чего 😂
Сбор донатов в ГК, комплексное решение

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

На видео вы можете увидеть, что используется обычная форма с платежом. Да, это так. Конечно, можно туда прикрутить произвольное пополнение от рубля или ста рублей или фиксированные суммы, но это не суть важно и является "делом вкуса".

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

Нижние подписи можно убрать, если они не нужны :)

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

Все фразы согласованы (это когда 2 раза, 15 дней и тп).

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

Как выглядит настройка для админа
1. в готовом блоке нужно изменить - дату начала, дату окончания
2. задать максимальную сумму сбора

Все. никакие изменения в самом скрипте не вносятся.

Стилизация под проект разумеется