Как часто вы пользуетесь HTML-блоками в Геткурсе? 🤨

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

Если знать некоторые особенности Геткурса и Bootstrap (в частности 3.3.5 версии), на котором сделан сам Геткурс, можно эту адаптацию частично привить к вашим самописным блокам. Если поставить HTML-блок на лендинг, то зайдя в него мы увидим, что там уже стоит <div class="container text-center"></div>. Исходя из названий классов мы уже можем понять, что этот див вполне себе можно использовать как обёртку для наших блоков, которые мы будем делать внутри. Класс container ограничит нам ширину контейнера, подгоняя его под формат многих блоков ГК, ведь эти контейнеры так же есть внутри них. Класс text-center даст нам центрированный текст внутри этого контейнера.

К примеру, если мы делаем какие-то свои роскошные карточки в HTML-блоке, то можно всем карточкам задать класс lt-tsr-block, что в свою очередь задаст минимальный размер данным блокам (min-width: 250px). Даже если вы поставите больше, при сужении экрана ваши блоки будут сжиматься до ширины 250px, не ниже. Так же этот класс даст относительное позиционирование (position: relative) для расположения своих псевдоэлементов внутри блока.

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

#размышления_пост #лайфхак

Какой же лендинг без кнопок?

На любом лендинге так или иначе есть кнопка, ведущая куда-нибудь дальше. И зачастую их надо красиво выделять, чтобы на них хотелось нажать. Настроить стиль кнопки мы с вами можем из настроек. Проблема начинается тогда, когда мы хотим в названии кнопки поставить какую-либо картинку. У многих наступает паника, что это очень много непонятного CSS + "найди класс кнопки и поставь куда надо" 🤨

Но не все знают, или по крайней мере не догадываются, что кнопка может принимать дополнительную разметку внутри себя. Каким образом? Прямо в названии кнопки можно вполне себе поставить div или span, а может и дополнительную большую вёрстку.

В нашем случае это прекрасная возможность без лишнего CSS поставить иконку внутрь с помощью FontAwesome 4.7, которая уже интегрирована в Геткурс. Нам остаётся найти нужную иконку, зайти внутрь и скопировать тег, отвечающий за её отображение, например: <i class="fa fa-envelope-open" aria-hidden="true"></i>

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

P.S. Бонусом прикладываю стилизацию и эффект, которые есть на гифке 😎

.btn {
    background: transparent !important;
    color: #000 !important;
    border: 2px solid #000;
    border-radius: 20px;
    transition: 0.3s;
}

.btn:hover {
    font-size: 1.2em;
}

P.P.S. Вставлять в "Стили" блока в "Подробные настройки"

#лайфхак #лёгкая_кастомизация

Проводите марафоны? Есть открытые уроки для всех зарегистрировавшихся? 😏

Тогда наверняка у вас есть красный значок уведомлений, который появляется каждый день, и там скапливается от 100 до 1000 а то и больше. И всё из-за открытых марафонов/уроков/вебинаров, где люди оставляют свою отметку, особенно если потом вам нужно всё это проверить и долго, нудно, утомительно протыкивать кнопку "Принять".

Поделюсь с вами небольшим лайфхаком, как сэкономить себе кучу времени, чтобы почистить ленту ответов. Всё благодаря кнопочке "Принять всё", которую я для вас подготовил. Она принимает все ответы, которые есть на текущей страницу ответов. Т.е. если у вас 8 страниц ответов, то по одному нажатию кнопки, вся текущая страница будет принята. Итого останется нажать её ещё 7 раз, т.к. ГК автоматически подтянет следующую страницу.

Устанавливать кнопку следует в Настройки аккаунта, в раздел "Счётчики и скрипты для BODY":

<script>
$(function() {
    if(window.location.href.indexOf('/teach/control/answers/unanswered') > -1) {
        $('.container').append(`
            <button class="btn btn-success accept-all" style="position: fixed; top: 20px; right: 20px;">Принять всё</button>
        `);
        
        $(function() {
            var acceptBtns = document.querySelectorAll('.btn[value="accepted"]');
    
            $('.accept-all').on('click', function() {
                acceptBtns.forEach(e => e.click());
            });
        });
    }
})
</script>

Кнопочка появится в вашей Ленте ответов справа сверху, примерно через 10 минут (зависит от загруженности сервера ГК, на котором располагается ваш проект) ✔️

#лайфхак #полезная_фишка

Вот представьте ситуацию: вам прилетает макет с красивым дизайном, сделанным в Фигме. Всё очень круто, вы начинаете потихоньку верстать первый экран и осознаёте, что элементы попросту в него не помещаются, а в Фигме всё ровненько и красиво. 🤬

Не многие обращают внимание на то, что ширина самого контейнера, содержащего контент в Фигме, зачастую существенно отличается от ширины контейнера Геткурса, у которого есть ограничение в 1170px (плюс по 15 пикселям маргина/паддинга по бокам). И тут встаёт вопрос: как всё это уместить в пределы Геткурса?

Некоторые люди сдадутся и будут делать всё в соответствии с контейнером ГК. Но мы-то с вами не такие, правда же? 😉 Мы попросту изменим ширину контейнера и сделаем её такой же на всей странице, как и в макете. Делается это сверхпросто и быстро.

Предположим, что в Фигме контейнер самого контента имеет ширину в 1400px. А мы помним, что контейнеры Геткурса под контент составляют 1170px в ширину. Ставим CSS-блок в самый верх вашей страницы и просто добавляем туда следующее:

.my-container,
.container {
max-width: 1400px !important;
}

У Геткурса есть два селектора его контейнеров, которые по сути мы просто переназначили. И всё, ваши контейнеры растянулись как надо и теперь готовы попиксельно вместить весь дизайн, который был отрисован в Фигме.

#лайфхак

Прилипающий контент. Смотрится отлично, практичен и дружелюбен в плане UX. К тому же и делается достаточно просто.

Нужно прописать контейнеру буквально одно свойство:

position: sticky;

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

Во-первых, обязательно должна присутствовать координата отступа, например top: 10px. Она будет означать что контент прилипнет при прокрутке сверху и будет отступать от края окна браузера 10px. Итого у плавающего контейнера свойства будут выглядеть примерно так:

position: sticky;
top: 10px;

И второй важный момент я покажу на скриншоте к посту. У блока родителя, который содержит контейнер со свойством position: sticky должно хватать высоты, по которой как раз будет ездить внутренний блок как лифт. Лучше всего чтобы это было автоматическое расстояние основанное на растянутости вашего контента. Ну или же до определённого момента — решать вам 😉

P.S. Скрин и гифка чуть ниже)

#лайфхак #полезная_фишка

Существует такая проблема как "слишком много полей в форме регистрации". Да, я и сам с такой сталкивался, и зачастую превращали страницу, как я люблю называть, в рулон туалетной бумаги 😦

Подготовил для вас небольшой лайфхак с тем, как я решал эту проблему. Достаточно простенько, но элегантно 😉

В CSS стили блока с формой ставим:

.form-content .builder {
display: flex;
flex-wrap: wrap;
gap: 10px;
}

.part-userField {
flex: 1 0 49%;
}

.part-header, .part-button {
flex-basis: 100%;
}

И вуаля, наши поля теперь расположены в 2 ряда. Если у вас нечётное количество полей, то может быть такое, что у вас останется лишнее некрасивое место. Чтобы решить эту проблему так же элегантно, то назовите поле вашим собственным классом, и добавьте ваш класс в последнее правило, где применяется свойство flex-basis: 100%;

Должно выглядеть так:

.part-header, .part-button, .вашкласс {
flex-basis: 100%;
}

#лайфхак #полезная_фишка