Хвіст-закладка до решти сайту

Що було не так

Хто приходив на вісь із пошуку чи за посиланням, не бачив ні назви сайту, ні шляху на головну. Єдине посилання «На головну» стояло в рядку під смугою. Лінії, граф, методологія й журнал з осі не відкривалися зовсім: спершу на головну, потім у її підвал (issue #34). Панель угорі місця не мала: на 412 px у неї вже не влазять слова. Рядок під смугою не можна робити вищим: на 320×640 смуга втратила б свою частку екрана.

Що обрав «6 в 1»

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

Скільки місця там насправді

За знімками «6 в 1» ліворуч лишалося близько 80 px на десктопі й близько 40 px на телефоні. Задача веліла рахувати з відступів у коді, а не з пікселів знімків, і не дарма. Горизонтальна вісь справді починається за 56 px від краю, і хвосту-закладці там просторо. А на вертикальній підписи десятиліть стоять за 20 px від краю: це 40 пікселів знімка з подвійною щільністю. Смуга на телефоні гортається, і підписи пропливали б під хвостом-закладкою.

Тому хвіст-закладка має найменшу ширину, яку дозволяла задача, — 24 px, а заввишки 44 px, під палець. Підписи на вертикальній осі відступили на 10 px, до 30 px, а лічильник десятиліття зсунувся з ними. На 320 px це забрало останній запас рядка. У Verdana, шрифті раннера CI, лічильник і раніше закінчувався на тому пікселі, де починається мітка найновішого десятиліття. Тож на екранах, вужчих за 360 px, лічильник десятиліття втрачає стрілку «↗». Це лише малюнок, і лічильник дня вже робить так само. Тепер у Verdana між лічильником і міткою 8 px.

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

Як воно поводиться

Це кнопка, яка каже, відкрита вона чи ні, і панель простих посилань, а не меню. Клік, дотик, Enter і Space відкривають і закривають її. Миша, що зупинилася на хвості-закладці, відкриває його за мить. Панель не закривається, поки курсор іде з хвоста-закладки в неї. Esc закриває панель і повертає фокус на хвіст-закладку. Закривають її й клік деінде та Tab за її межі. Хто просив менше руху, бачить панель одразу, без виїзду.

Esc ловиться лише на самому хвості-закладці й панелі, не на сторінці. На осі голі клавіші — команди, а в полі пошуку вони мусять мовчати. Поле пошуку цей обробник не чує, а Esc у панелі далі не йде і не закриває заразом пошук чи тур. Нової гарячої клавіші немає. Картка запису — модальний діалог: браузер малює її над усім і робить решту сторінки неактивною, тож хвіст-закладка крізь неї не пробивається.

Один перелік

Розділи тепер лежать в одному модулі, src/ui/site-sections.ts: ключ словника, шлях і де показувати. З нього читають і підвал головної, і хвіст-закладка на осі. Коментарі, чому який пункт там стоїть, переїхали туди з головної. Перевірка словників виводить ключі з коду й типів, тож перелік оголошено константою: тип кожного ключа — його власний текст.

Що перевірено

npm run verify:code пройшов. Спека осі в Chromium пройшла повністю, разом із новим тестом. Він відкриває вісь на 320×640 і 1280×800 і перевіряє, що хвіст-закладка стоїть під панеллю, біля краю, не менший за 24×44. Жодна мітка, підпис, лічильник чи перелік термінів не лежить лівіше за його правий край. Клік відкриває шість посилань, а їхні адреси тест бере з того самого модуля, а не вписує сам. Далі тест проходить Enter, Tab, Esc із поверненням фокуса, Space і клік деінде. На широкому екрані ще наведення, перехід у панель і Esc при відкритому пошуку, після якого пошук лишається. Висота смуги не змінилась. Повний прогін браузерних тестів робить CI після пушу.