Рефакторинг меню (#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]>
doka-guide · Aug 30, 2024 · dfaf14f · dfaf14f
1 parent d140702
commit dfaf14f
Show file tree

Hide file tree

Showing 68 changed files with 1,065 additions and 1,076 deletions.
diff --git a/src/includes/blocks/header.njk b/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 %}
diff --git a/src/includes/blocks/linked-article.njk b/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>

diff --git a/src/includes/blocks/logo.njk b/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 %}
diff --git a/src/includes/blocks/nav-list.njk b/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 }}/">

diff --git a/src/includes/blocks/search-category.njk b/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 }}

diff --git a/src/includes/blocks/search.njk b/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>
diff --git a/src/includes/blocks/skip-link.njk b/src/includes/blocks/skip-link.njk
@@ -0,0 +1,3 @@
+<a class="link skip-link" href="#main-content">
+  К контенту
+</a>
diff --git a/src/includes/contributors.njk b/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 %}

diff --git a/src/scripts/modules/article-nav.js b/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)
   })
 }
 

diff --git a/src/scripts/modules/cookie-notification.js b/src/scripts/modules/cookie-notification.js
@@ -26,7 +26,7 @@ function init() {
       banner.hidden = true
       localStorage.setItem(storageKey, true)
     },
-    { once: true }
+    { once: true },
   )
 }