Шаблон кнопок попередньої і наступної статті за допомогою Flexbox

16

Від автора: головною метою веб-дизайну і розробки є створення «прилипають» веб-сторінок, щоб максимізувати середнє час перебування на них. Залучення користувача переконливим контентом підвищує лояльність до бренду, а також підвищує ймовірність того, що користувач продовжить роботу з сайтом і його рекламодавцями.

Існує безліч способів створити цікавий контент і сервіс, але можливо самий надійний – це посилання на супутні сторінки. У випадку з сайтом такі посилання розміщуються в трьох місцях: панель у верхній частині сторінки, релевантні посилання з основного тексту сторінки, а також меню «попередня – наступна стаття» в нижній частині сторінки, яка направляє користувача логічного продовження після прочитання поточної статті. На сайті The New Code шаблон попередньої і наступної статті реалізований через flexbox.

Механізм

Не у всіх статей на The New Code є логічні зв’язку з наступної і попередньої статті: приміром, у першій статті зі списку для читання буде наступна, але не буде попередньої, а в останньої буде попередня, але не буде наступною. Модуль навігації повинен адаптуватися під такі умови, зберігаючи просторову зв’язок з користувачем: наступна стаття завжди знаходиться праворуч, а попередня – зліва.

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

Почну з найпростішого прикладу попередньої і наступної статті. Кожна посилання містить по два тега span: перший span служить обгорткою для превью зображень статті, у другій span загортається назва статті. Зверніть увагу на те, що елементи розташовані в протилежному порядку, спочатку йде посилання на наступну статтю.


Шаблон кнопок попередньої і наступної статті за допомогою Flexbox


Shuffling and Sorting JavaScript Arrays


JavaScript Fundamentals: Object Literals and Nested Arrays


Шаблон кнопок попередньої і наступної статті за допомогою Flexbox

Розмітка використовує безліч технік, про яких я розповідав у попередніх статтях:

атрибути rel і скорочення accesskey для доступності та SEO;

атрибут srcset для графіки на ретина дисплеях;

ряд класів, які будуть направляти елементи CSS.

Модуль навігації очищається, щоб йому нічого не заважало:

#prevnext {
margin-top: 1rem;
clear: both;
}

Після того, як я почав використовувати flexbox по всьому сайту, я створив два загальних класу-помічника, які ставили елементів властивість display: flex і відштовхували контент двох блоків один від одного. Для досягнення зворотної підтримки вам потрібно прописати вендорные префікси.

.flex {
display: flex;
}
.apart {
justify-content: space between;
}

У посилань також прописаний клас flex, тобто посиланнями задається властивість display: flexbox. Код нижче робить так, щоб посилання займали однакове горизонтальне простір і були вирівняні по центру:

#prevnext a {
font-size: smaller;
align-items: center;
}
a.prev-one {
flex: 1;
}
a.next-one {
flex: 1;
justify-content: flex-end;
}

Властивість justify-content: flex-end означає, що посилання «наступна стаття» завжди буде з’являтися в кінці доступного простору. У посилань загальні стилі, які також належать до основного тексту:

a {
text-decoration: none;
color: rgba(0,0,0,0.8);
border-bottom: 1px solid #edd;
}

Розмір тегів span заданий, а зображення всередині них перероблені у гуртки за допомогою властивості border-radius:

#prevnext a span.thumb img {
border-radius: 50%;
overflow: hidden;
width: 125px;
min-width: 125px;
height: 100%;
border: 1px solid #ccc;
}

Назви статей відокремлені від зображень з допомогою margin’а з відповідної сторони. Текст правою посилання за замовчуванням вирівнюється по лівому краю, нам потрібно поміняти вирівнювання на протилежне:

a.prev-one span.articlename {
margin-left: 1rem;
}
a.next-one span.articlename {
margin-right: 1rem;
text-align: right;
}

Стрілки в обидві сторони генеруються за допомогою псевдокласів:

a.prev-one span.articlename:before {
content: «\2190 «;
}
a.next-one span.articlename:after {
content: «\2192»;
}

Якщо немає посилання на наступну статтю, з’явиться посилання на попередню. Якщо немає попередньої, праворуч з’явиться посилання на наступну статтю.

Залишається невелика проблема. Якщо текст посилання перестрибує на другу або більше рядків, втрачається вертикально вирівнювання тексту в інший посилання. Flexbox’ом таку проблему не вирішити: він добре справляється з вирівнюванням елемента по центру, але він не може заглядати в майбутнє і посувати другий елемент вгору, якщо текст займає два рядки. Однак цю проблему можна вирішити за допомогою JavaScript, про що я розповім вже в наступній статті.