Рефакторинг меню (#1191)

* Пытается улучшить разметку

* Продолжает исправлять стили

* Фиксирует оба меню

* Продолжает возиться со стилями

* Делает одинаковую высоту у меню

* Убирает выпадающее меню под комбобокс

* Удаляет ARIA-атрибуты

* Задаёт правильную ширину

* Удаляет анимацию тени

* Удаляет лишние свойства

* Наводит порядок в отступах

* Борется с гридами

* Пытается починить мобилки

* Изменяет комментарий

* Удаляет лишнее

* Изменяет разметку поиска

* Разбирается со стилями

* Упрощает разметку

* Устраняет недостатки

* Возится с шорткатами

* Продолжает всё ломать

* Пытается навести порядок в стилях

* Наводит порядок в разметке/стилях гамбургера

* Добавляет `aria-controls` к гамбургеру

* Комментирует лишнее, правильно фиксирует меню

* Скрывает esc на мобилках

* Переименовывает класс

* Заменяет дивы на спаны в ссылке

* Делает шапку материала ниже

* Меняет соотношение

* Добавляет правильные отступы в дропдауне

* Разбирается с gap в списках

* Добавляет рамку к лого

* Изменяет отступы у списка разделов

* Удаляет комментарий

* Оставляет комментарии

* Добавляет skip link

* Правит значение

* Переиспользует хедер на странице поиска

* Добавляет условия в хедер

* Чинит затемнение фона у участников

* Начинает переносить анимацию

* Комментирует в скрипте ненужное

* Продолжает переносить анимацию

* package-lock.json

* package-lock.json

* Раскомментирует, ставит пустую строку

* Возится с форматированием и другими мелочами

* Переносит ещё больше стилей

* Чинит анимацию

* Преносит оставшееся в один файл

* Изменяет блок с содержанием на мобилках

* Чинит отступы в меню разделов

* Отступы от меню

* Дорабатывает скрипт

* Пытается починить отступы в меню

* Добавляет нужные классы

* Добавляет отступ

* Вносит правки

* Запрещает копировать шорткаты

* Удаляет неактуальные TODO

* Чинит рассчёт отступов от хедера

* Добавляет поддержку aria-expanded

* Разбирается с работой /

* Мучает скрипты

* Дорабатывает скрипты закрытия/раскрытия меню

* Откатывает обратно /

* Добавляет isStatic()

* Чинит фокус на поиске

* Устанавливает фокус на последнем элементе

* Окончательно чинит управление фокусом

* Не закрывает содержание по клику

* Добавляет `aria-keyshortcuts` для поиска

* Скрывает рамку хоткея

* Исправляет рассчёт scroll-margin

* Удаляет лишние комментарии

* Верстает содержание правильно

* Шлифует поле поиска

Придумала назвать горячую клавишу словом клавиша, вау

* Улучшает доступность тогла

* Возвращает Esc

* Явно задаёт высоту поиска

Для консистентности с firefox

* Выравнивает межбуквенные расстояния между поиском и хлебными крошками

* Приводит хоткеи к одному знаменателю

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

* Прячет парящие кнопки под затемнение дропдауна

* Добавляет `aria-expanded`

* Довёрстывает кнопку

* Добавляет рамку для стики меню на белых страницах

* Возвращает горизонтальные паддинги

* Паддинги

* Чинит паддинги

* Сжимает хедер сразу

* Убирает мерцание черты, скрывает когда нужно

* Очень криво опять фиксирует хедер

* Прячет подписочный попап под затемнение дропдауна

1. На мобильных этот попап закрывает дропдаун, это нехорошо 2. Вызывая какую-то функцию в интерфейсе, пользователь отдаёт ей максимальный приоритет в своём внимании и ждёт, что она будет прямо перед ним. Странно прятать только что вызванное меню под попапом

* Микротвикает цвета бэкдропа

* Добавляет условие для кнопок

* Раскомментирует правило

* Округляет высоту подчёркиваний

Потому что они сводили меня с ума

* Неэлегантно прописывает левый паддинг у разделов в дропдауне (зато ровно)

* Скрывает крошки на мобильных

* Удаляет метод с последним элементом

* Возвращает скип-линк, тюнит его размеры

* Изобретает бэкспейс

Заменяет иконку с крестиком на иконку с бэкспейсом на странице поиска

* Синхронизирует затемнения

* Сражается за консистентность шторок с фильтрами

* Шебуршит в оглавлении

* Одалживает анимацию для кнопки

* анимирует оглавление (вжж)

* Переименовывает файл с гамбургером

* Принимает предложение с высотой хедера

* Добавляет формирование правильной ссылки на страницу поиска

* Переносит управление фокусом в `header.js`

* Дорабатывает события открытия меню и переименовывает класссы

* Удаляет TODO

* Удаляет ненужные комментарии

* Удаляет закоментированный селектор

* Удаляет ненужное в стилях

* Удаляет ненужное в стилях

* Удаляет ненужное в стилях

* Обновляет прицельный браузер (#1277)

* Допекает пирожки

* Подталкивает печеньки на верх

* Подталкивает попап наверх

* Делает меню невосприимчивым к попапу про подписку и баннеру про печеньки

* Запрещает контенту прыгать

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

* Задаёт левый паддинг кнопке содержания

* Фиксит паддинг в индексе разделов и убирает шальной марджин на сдачу

---------

Co-authored-by: Igor Korovchenko <[email protected]>
Co-authored-by: Alena Batitskaia <[email protected]>
Co-authored-by: Svetlana Korobtseva <[email protected]>

src/includes/blocks/header.njk

@@ -1,91 +1,137 @@
 {% from "blocks/logo.njk" import logo %}
 
-{% macro divider(isLarge) %}
- <span class="header__divider {% if isLarge %}header__divider--large{% endif %} font-theme font-theme--code" aria-hidden="true"></span>
+{% macro devider() %}
+ <span
+ class="header__divider font-theme font-theme--code"
+ aria-hidden="true"
+ >
+ </span>
 {% endmacro %}
 
-{% macro header(pageCategoryId, category, title, link, isLogoContrastColor, hasAccentColor, isMainPage = false, isCategoryVisible = false, isLogoImageHidden = false) %}
+{% macro header(
+ pageCategoryId,
+ category,
+ title,
+ link,
+ isLogoContrastColor,
+ hasAccentColor,
+ isMainPage=false,
+ isSearchPage=false,
+ isCategoryVisible=false,
+ isLogoImageHidden=false)
+%}
  {% set articleIndexes = collections.articleIndexes %}
+
+ {% include "blocks/skip-link.njk" %}
+
  <header
- class="
- header
- {% if isMainPage %}header--main header--open{% endif %}
- {% if not hasAccentColor %}header--simple{% endif %}
- "
+ class="header {% if isMainPage or isSearchPage %}header--static{% else %}header--sticky{% endif %}"
+ aria-label="Главный"
  >
- <div class="header__inner header__inner--main font-theme font-theme--code">
+ <div class="header__controls font-theme font-theme--code">
  <ul class="header__breadcrumbs breadcrumbs base-list">
  <li class="breadcrumbs__item header__logo">
- {{ logo(isLink=not isMainPage, isContrastColor=isLogoContrastColor, isImageHidden=isLogoImageHidden, letters=logoLetters) }}
- {% if not isMainPage %}{{ divider() }}{% endif %}
+ {{ logo(
+ isLink=not isMainPage,
+ isContrastColor=isLogoContrastColor,
+ isImageHidden=isLogoImageHidden,
+ letters=logoLetters)
+ }}
+ {{ devider() }}
  </li>
 
  {% if category %}
  {% if title %}
- <li class="breadcrumbs__item header__category {% if isCategoryVisible %}header__category--visible{% endif %}">
+ <li
+ class="breadcrumbs__item header__category {% if isCategoryVisible %}header__category--visible{% endif %}"
+ >
  <a class="breadcrumbs__text link" href="/{{ pageCategoryId }}/">
  {{ category }}
  </a>
- {{ divider() }}
+ {{ devider() }}
  </li>
  {% else %}
- <li class="breadcrumbs__item header__category {% if isCategoryVisible %}header__category--visible{% else %}header__category--standalone{% endif %}">
+ <li
+ class="breadcrumbs__item header__category {% if isCategoryVisible %}header__category--visible{% else %}header__category--standalone{% endif %}"
+ >
  <span class="breadcrumbs__text">
  {{ category }}
  </span>
  </li>
  {% endif %}
  {% endif %}
-
- {% if title %}
- <li class="breadcrumbs__item breadcrumbs__item--shrink header__title">
- <span class="breadcrumbs__text" title="{{ title | replace('`', '') }}">
- {{ title | descriptionMarkdown | safe }}
- </span>
- </li>
- {% endif %}
  </ul>
 
- <div class="header__toggle">
- <button class="menu-toggle" type="button">
- <span class="visually-hidden">Открыть меню</span>
- <span class="menu-toggle__inner menu-toggle__inner--open">
- <kbd class="hotkey font-theme font-theme--code">/</kbd>
- <span class="menu-toggle__icon menu-toggle__icon--open">
- <span class="menu-toggle__dot"></span>
- <span class="menu-toggle__dot"></span>
- <span class="menu-toggle__dot"></span>
- </span>
- </span>
- </button>
- </div>
- </div>
+ {% include "blocks/search.njk" %}
 
- <div class="header__inner header__inner--menu">
- <div class="header__logo">
- {{ logo(
- isLink=not isMainPage
- ) }}
- {{ divider(isLarge=true) }}
- </div>
+ {% if (not isMainPage) and (not isSearchPage) %}
+ <div class="header__buttons">
+ <span class="hotkey hotkey--search font-theme font-theme--code">
+ Клавиша <kbd class="hotkey__key">/</kbd>
+ </span>
+ <span class="hotkey hotkey--close font-theme font-theme--code">
+ <kbd class="hotkey__key">esc</kbd>
+ </span>
 
- {% include "blocks/search.njk" %}
- {% include "blocks/nav-list.njk" %}
+ <button
+ class="header-button"
+ type="button"
+ aria-expanded="false"
+ aria-controls="dropdown-menu"
+ >
+ <span class="header-button-content header-button-content--open">
+ <span class="visually-hidden">Открыть меню</span>
+ <span class="header-button-icon header-button-icon--open">
+ <span class="header-button-icon__dot"></span>
+ <span class="header-button-icon__dot"></span>
+ <span class="header-button-icon__dot"></span>
+ </span>
+ </span>
 
- {% if not isMainPage %}
- <div class="header__toggle">
- <button class="menu-toggle" type="button">
- <span class="visually-hidden">Закрыть меню</span>
- <span class="menu-toggle__inner menu-toggle__inner--close">
- <kbd class="hotkey font-theme font-theme--code">esc</kbd>
- <svg class="menu-toggle__icon menu-toggle__icon--close" width="45" height="45" viewBox="0 0 45 45">
- <circle cx="22.5" cy="22.5" r="22.5" fill="var(--color-text)" />
+ <span class="header-button-content header-button-content--close">
+ <span class="visually-hidden">Закрыть меню</span>
+ <svg
+ class="header-button-icon header-button-icon--close"
+ width="45"
+ height="45"
+ viewBox="0 0 45 45"
+ >
+ <circle cx="22.5" cy="22.5" r="22.5" fill="var(--color-text)"/>
  <path fill="var(--color-background)" d="M30.3 32.1c-.5 0-1-.2-1.4-.6l-6.5-6.6-6.5 6.5c-.5.5-1 .7-1.5.7-.4 0-.8-.1-1-.4-.3-.3-.5-.6-.5-1 0-.6.3-1.1.7-1.6l6.5-6.5-6.5-6.4c-.4-.5-.7-1-.7-1.5s.2-.8.4-1.1c.3-.3.7-.4 1.1-.4.5 0 1 .2 1.5.7l6.5 6.5 6.5-6.6c.5-.5 1-.7 1.5-.7.3 0 .7.2 1 .5.3.4.5.8.5 1.1 0 .5-.2 1-.7 1.4l-6.5 6.5 6.5 6.6c.5.5.7 1 .7 1.4 0 .4-.1.7-.5 1-.4.4-.7.5-1 .5z"/>
  </svg>
  </span>
  </button>
  </div>
  {% endif %}
+
+ {% if isSearchPage %}
+ <button
+ class="search__reset-button header-button"
+ type="reset"
+ form="search-form"
+ >
+ <span class="visually-hidden">
+ Очистить
+ </span>
+ <svg
+ class="header-button-icon header-button-icon--close"
+ width="45"
+ height="45"
+ viewBox="0 0 45 45"
+ aria-hidden="true"
+ >
+ <path fill="var(--color-text)" fill-rule="evenodd" d="m1.828 18.331 9.222-8.476a5.613 5.613 0 0 1 3.799-1.483H31c3.108 0 5.627 2.53 5.627 5.651v16.954c0 3.12-2.52 5.65-5.627 5.65H14.849a5.613 5.613 0 0 1-3.8-1.482L1.829 26.67c-2.437-2.24-2.437-6.098 0-8.338Z" clip-rule="evenodd"/>
+ <path fill="var(--color-background)" d="M18.527 15.814a1.565 1.565 0 0 0-2.22 0 1.58 1.58 0 0 0 0 2.229l4.44 4.457-4.44 4.457a1.58 1.58 0 0 0 0 2.23 1.566 1.566 0 0 0 2.22 0l4.44-4.458 4.44 4.457a1.566 1.566 0 0 0 2.22 0 1.58 1.58 0 0 0 0-2.229l-4.44-4.457 4.44-4.457a1.58 1.58 0 0 0 0-2.229 1.565 1.565 0 0 0-2.22 0l-4.44 4.457-4.44-4.457Z"/>
+ <path fill="var(--color-background)" d="M18.527 15.814a1.565 1.565 0 0 0-2.22 0 1.58 1.58 0 0 0 0 2.229l4.44 4.457-4.44 4.457a1.58 1.58 0 0 0 0 2.23 1.566 1.566 0 0 0 2.22 0l4.44-4.458 4.44 4.457a1.566 1.566 0 0 0 2.22 0 1.58 1.58 0 0 0 0-2.229l-4.44-4.457 4.44-4.457a1.58 1.58 0 0 0 0-2.229 1.565 1.565 0 0 0-2.22 0l-4.44 4.457-4.44-4.457Z"/>
+ </svg>
+ </button>
+ {% endif %}
  </div>
+
+ {% if not isSearchPage %}
+ <div class="header__menu" id="dropdown-menu">
+ {% include "blocks/nav-list.njk" %}
+ </div>
+ {% endif %}
  </header>
 {% endmacro %}

src/includes/blocks/linked-article.njk

@@ -1,7 +1,10 @@
 {% macro linkedArticle(article, type = 'previous') %}
  {% set icon = '←' if type === 'previous' else '→' %}
 
- <div class="linked-article linked-article--{{ type }}" style="--accent-color: var(--color-{{ article.section }})">
+ <div
+ class="linked-article linked-article--{{ type }}"
+ style="--accent-color: var(--color-{{ article.section }})"
+ >
  <div class="linked-article__icon font-theme font-theme--code" aria-hidden="true">
  {{ icon }}
  </div>

src/includes/blocks/logo.njk

@@ -1,4 +1,10 @@
-{% macro logo(isLink, isContrastColor, class, letters, isImageHidden=false) %}
+{% macro logo(
+ isLink,
+ isContrastColor,
+ class,
+ letters,
+ isImageHidden = false)
+%}
  {% set logoWrapper = linkLogo if isLink else simpleLogo %}
  {% set tag = 'a' if isLink else 'div' %}
  {% set attrs = 'href=/' if isLink %}
@@ -17,15 +23,21 @@
 
  <{{tag}} class="{{ classes }}" {{ attrs }}>
  {% if (not isImageHidden) %}
- <div class="logo__image {{ 'logo__image--contrast' if not isContrastColor else '' }}" aria-hidden="true">
- <div class="logo__symbols logo__symbols--main">
+ <span
+ class="logo__image {{ 'logo__image--contrast' if not isContrastColor else 'logo__image--custom' }}"
+ aria-hidden="true"
+ >
+ <span class="logo__symbols logo__symbols--main">
  {{ letters | safe }}
- </div>
- <div class="logo__symbols logo__symbols--search">
+ </span>
+ <span class="logo__symbols logo__symbols--search">
  U<span class="logo__eye">ˇ</span><span class="logo__nose">ᴥ</span><span class="logo__eye">ˇ</span>U
- </div>
- </div>
+ </span>
+ </span>
  {% endif %}
- <div class="logo__text {{ 'link' if isLink else '' }} {{ 'logo__text--contrast' if not isContrastColor else '' }}">Дока</div>
+ <span
+ class="logo__text {{ 'link' if isLink else '' }} {{ 'logo__text--contrast' if not isContrastColor else 'logo__image--custom' }}">
+ Дока
+ </span>
  </{{tag}}>
 {% endmacro %}

src/includes/blocks/nav-list.njk

@@ -1,4 +1,4 @@
-<ul class="header__menu nav-list base-list">
+<ul class="header__menu-list nav-list base-list">
  {% for sectionIndex in articleIndexes %}
  <li class="nav-list__item" style="--accent-color: var(--color-base-{{ sectionIndex.fileSlug }})">
  <a class="nav-list__link" href="/{{ sectionIndex.fileSlug }}/">

src/includes/blocks/search-category.njk

@@ -3,7 +3,7 @@
  <div class="search-category__legend" aria-hidden="true">Фильтровать по:</div>
 
  {% for category in collections.articleIndexes %}
- <label class="search-category__item tag-filter" style="--accent-color: var(--color-{{ category.fileSlug }})">
+ <label class="search-category__item tag-filter" style="--accent-color: var(--color-base-{{ category.fileSlug }})">
  <input class="tag-filter__control" type="checkbox" name="category" value="{{ category.fileSlug }}" form="search-form">
  <span class="tag-filter__text">
  {{ category.data.name }}

src/includes/blocks/search.njk

@@ -1,10 +1,37 @@
-<form class="header__search search font-theme font-theme--code" method="get" name="search-form" action="/search/" id="search-form">
+<form
+ class="header__search search font-theme font-theme--code"
+ method="get"
+ name="search-form"
+ action="/search/"
+ id="search-form"
+>
  <div class="search__control">
- <label class="visually-hidden" for="search-field">Поиск</label>
- <input class="search__input" type="text" name="query" id="search-field" placeholder="Поиск" autocomplete="off" {% if permalink == "/search/" %}aria-describedby="search-hint"{% endif %}>
+ <label
+ class="visually-hidden"
+ for="search-field"
+ >
+ Поиск
+ </label>
+ <input
+ class="search__input"
+ id="search-field"
+ type="text"
+ name="query"
+ placeholder="Поиск"
+ aria-keyshortcuts="&#47;"
+ autocomplete="off"
+ {% if permalink == isSearchPage %}aria-describedby="search-hint"{% endif %}
+ >
 
- <kbd class="hotkey search__key search__key--activate">/</kbd>
- <kbd class="hotkey search__key search__key--enter">↲</kbd>
+ {% if isMainPage %}
+ <span class="search__key hotkey hotkey--search">
+ Клавиша <kbd class="hotkey__key">/</kbd>
+ </span>
+ {% endif %}
+
+ <span class="search__key hotkey search__key--enter">
+ <kbd class="hotkey__key">Enter</kbd>
+ </span>
  </div>
 
  <div class="search__suggestion search__suggestion--hide">
@@ -16,5 +43,4 @@
  Расширенный поиск
  </a>
  </div>
-
 </form>

src/includes/blocks/skip-link.njk

@@ -0,0 +1,3 @@
+<a class="link skip-link" href="#main-content">
+ К контенту
+</a>

src/includes/contributors.njk

@@ -11,7 +11,7 @@
 {% macro personsList(list, personType, maxPersons = 3) %}
  {% set totalPersonsCount = list.length %}
  {% set extraPersonsCount = totalPersonsCount - maxPersons %}
- {% set divider = "," %}
+ {% set devider = "," %}
 
  <div class="persons-list">
  <ul class="persons-list__items base-list">
@@ -24,7 +24,7 @@
  >
  {{ person(name=personItem.data.name, url='/people/' + personItem.fileSlug + '/') }}
  {% if not loop.last %}
- {{ divider }}
+ {{ devider }}
  {% endif %}
  </li>
  {% endfor %}

src/scripts/modules/article-nav.js

@@ -5,19 +5,14 @@ function init() {
  return
  }
 
- const button = nav.querySelector('.article-nav__button')
- const content = nav.querySelector('.article-nav__content')
+ const button = nav.querySelector('.toggle-button')
 
  button.addEventListener('click', () => {
  nav.classList.toggle('article-nav--open')
- })
-
- content.addEventListener('click', (event) => {
- const link = event.target.closest('a')
 
- if (link) {
-  nav.classList.remove('article-nav--open')
- }
+ let isExpanded = button.getAttribute('aria-expanded')
+ isExpanded = isExpanded === 'true' ? 'false' : 'true'
+ button.setAttribute('aria-expanded', isExpanded)
  })
 }
 

src/scripts/modules/cookie-notification.js

@@ -26,7 +26,7 @@ function init() {
  banner.hidden = true
  localStorage.setItem(storageKey, true)
  },
- { once: true }
+ { once: true },
  )
 }