Аня про Геткурс. Верстка, скрипты и решения

Все, бонусы открылись для Гетц5

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

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

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

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

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

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

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


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

зы первое решение есть в Клубе, второе в той сборке, что оно в бонусе - отсутствует

Ну вот. Всё.

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

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

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

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

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

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

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тр

но это уже задача про внесение суммы через скрипт в одно предложение

Флекс-всемогущий или как простые хитрости помогают жить

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

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

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

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

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

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


.lt-tsr-content .button {
margin-top: auto;
}