Тулбар
Смуга над каталогом: скільки знайдено, як сортувати, як показувати. Їх два, і вони ніколи не бачать одне одного - до 860 працює мобільна, від 860 десктопна, і на жодній ширині немає обох.
Обидві смуги показані поруч навмисно: у продукті так не буває, а на стенді інакше видно тільки одну.
.ltool, висота 57. Ліворуч підпис, праворуч контроли, між ними .sp - порожній flex: 1Мобільна смуга показана в рамці шириною 390, і ширина названа не для краси. .mtoolbar це display: none від 860, тож у власній колонці кіта на десктопі вона малювала порожнечу - той самий пустий стенд, який власник знайшов на filter-sheet і tabbar на 7.87. Медіа-умова читає в'юпорт, а не контейнер, тож жодне правило стенда цього не вирішує; справжній в'юпорт є лише в рамки. І друга причина та сама: колонка кіта на 360 віддає смузі 278px, а телефон на 360 - 328, тож дві кнопки M у колонці не вміщались і виїжджали на 7px.
.mtoolbar, висота 77, position: sticky на 57 згори - рівно під шапкоюРозмір у цьому демо був не той, що в продукті
До 7.91 обидві кнопки ряду стояли тут якbtn--outline btn--s - S, 40px, - а в продукті це btn--outline mc, тобто M, 52px, і .mc несуть обидві, а не лише перша. Підпис над цим абзацом весь час казав «висота 77», і 77 це справжня висота смуги в listing.html; демо стільки не мало. Знайшла це не рука, а перевірка, яка звіряє кнопки стенда з кнопками продукту. Заміряно після виправлення: .mtoolbar 77, обидві .mc по 52 - і на стенді, і в design/listing.html..listing - одна колонка до 860, від 860 240px 1fr. Звузьте вікно: другий блок стає під першим.count - не контрол. Він ділив клас .ctrl із кнопкою сортування й позичав у неї коробку; крок 6.7 віддав .ctrl кнопці, і підпис мусив оголосити свою.sp - flex: 1 і більше нічого. Один рядок замість вирівнювання через justify-content, бо контролів праворуч може бути один або три.listing - одна колонка до 860, від 860 240 і решта. Рейка фільтрів фіксована: вона не мусить рости разом із каталогом.mc .b - пігулка --bg-action з чорнилом --text-body. Скільки фільтрів увімкнено; рендериться лише там, де вони єДві смуги, а не одна адаптивна. На телефоні фільтри - це аркуш знизу, на десктопі - рейка збоку; кнопка, яка відкриває аркуш, на десктопі не потрібна взагалі. Одна смуга з прихованими частинами тримала б розмітку неіснуючого контрола на кожному екрані.
| Ширина | .ltool | .mtoolbar | .listing |
|---|---|---|---|
| 360 · 620 · 720 · 760 | none | flex, 77 | 1 колонка |
| 859 | none | flex, 77 | 1 колонка, 827 |
| 860 | flex, 57 | none | 2 колонки, 240 / 572 |
| 1280 | flex, 57 | none | 2 колонки, 240 / 776 |
Три правила перемикаються на одному пікселі й жодне не запізнюється: на 859 немає десктопної смуги й немає рейки, на 860 є обидві. Це саме те, що 7.64 виправляв у картки товару, де на 620 малювалась суміш вузького й широкого правила.
860 - найуживаніша межа системи: 39 оголошень у 15 файлах, і в наборі, який DESIGN-artifacts.md нібито називає, її не було ніколи. Крок 7.70 з'ясував, що набору не існувало, і виписав усі одинадцять меж у tokens.css разом із файлами, що на них спираються.
Мобільна смуга на 20px вища за десктопну, і до 7.91 тут була не та причина
Стояло: «обидві тримаютьbtn--s, тож різниця це відступи». Неправда в мобільній половині. Заміряно в design/listing.html: 57 = 1 пунктирна волосина згори + 16 поле + 40 контрол (btn--s, і .count з такою самою min-height); 77 = 12 + 52 контрол (.mc без класу розміру, тобто M) + 12 + 1 волосина знизу. Двадцять це 12 нижнього поля + 12 більшого контрола − 4 меншого верхнього поля.
І під цим арифметикою стоїть річ, яку код робить і ніде не каже: на телефоні контроли смуги це M (52), на десктопі - S (40). Більша ціль стоїть саме на пристрої, якого торкаються, - це рішення, а не випадковість, і тепер воно записане.
| Крок | Що | Куди і чому |
|---|---|---|
| 6.3 | локальна редакція ховера контурної кнопки | у фініш, який його вже мав |
| 6.7 | .ctrl | кнопці. Підпис «Знайдено: 24 товари» після цього мусив оголосити власну коробку - до того він її позичав |
| 7.2 | .uiv-sortmenu і .uiv-sopt, шість правил | у menu.css: список, галочка й аркуш на телефоні оголошені один раз |
| 7.16 | .uiv-sort | і це було гірше за мертве: 7.2 зняв блок і лишив селектор самотнім рядком. Коментар не є правилом, тож парсер прочитав крізь нього й приклеїв сироту до наступного селектора - .uiv-sort.open .uiv-sort, нащадок, який не міг збігтися ні з чим |
Файл почав із власного меню сортування всередині й закінчив розкладкою двох смуг. Те, що лишилось, справді його: де що стоїть, і на якій ширині яка смуга.
| Стан | Що робить | Чому так |
|---|---|---|
| до 860 | мобільна смуга, липка на 57 згори | рівно під шапкою: фільтри мусять лишатись під рукою при гортанні |
| від 860 | десктопна смуга, рейка 240 збоку | рейка експерта видна вся, а не за кнопкою |
| фільтри ввімкнені | пігулка з цифрою на кнопці | рендериться на 2 екранах із 7 - там, де фільтр справді стоїть |
| нічого не знайдено | смуга виглядає так само | записано нижче: «Знайдено: 0» не відрізняється від «Знайдено: 24» нічим, крім цифри |
| наведення й фокус | немає власних | усі контроли смуги - кнопки з фінішем, і відповідає фініш |
Контраст підпису заміряно: rgb(110, 106, 98) на білому - 5.38:1 при 14/600, потрібно 4.5. Пігулка лічильника - rgb(28, 28, 28) на rgb(255, 90, 0), 5.45:1 при 12/700. Обидві проходять.
Правило
Смуга каже, скільки залишилось після фільтра. «Знайдено: 24 товари» - це відповідь на щойно натиснуте, а не заголовок. Разом із лічильниками в рейці це те, що дає тренеру звужувати впевнено.Антиправило
Не роби одну смугу з прихованими частинами. Кнопка «Фільтри» на десктопі не потрібна, а смуга зdisplay: none тримає в розмітці контрол, якого на цій ширині не існує, і рано чи пізно хтось його сфокусує табуляцією.Правила вживання, які називають саме цей компонент: U6. Автор правил один, і це architecture.html, розділ I; тут - витяг.
Одна панель інструментів на екран. .ltool - десктопна половина: на 390 її не видно ніде, там стоїть .mtoolbar.
.toolbar--all - варіант для екранів, де в панелі стоїть і поле пошуку, і вибір, і лічильник: вона перекладає їх у гнучкий рядок, а полю віддає решту ширини (flex: 1 1 15rem) з мінімумом, нижче якого воно не стискається.
Сторінка звіряє себе з файлом: 7 власних класів і 1 стан.
ПОВЕДІНКА НА ШИРИНІ - етап 10, крок 4
Від якого порогу:--bp-shell-wide, і це три запити, складені в один. Файл казав min-width: 860 тричі, кожен під своїм правилом, і читалось це як три окремі думки про число. Думка одна: на точці оболонки лістинг відрощує ліву колонку фільтрів, з'являється її тулбар, а липка смуга, яка заміняла його на телефоні, зникає. І одне сказано вголос, а не полагоджено: .listing{ grid-template-columns: 240px 1fr } це рамка ЕКРАНА лістингу, а не тулбара, і належить оболонці кроку 3. Переносити її тихо всередині раунду молекул означало б це сховати.Прочитані з toolbar.css: 6 семантичних ролей і 11 примітивів.
| Семантичні ролі (6) | Примітиви (11) |
|---|---|
--bg-action --bg-page --line-hair --line-strong --text-muted --text-onaction-ink | --fs-12 --fs-14 --fw-black --fw-semibold --radius-8 --radius-pill --size-40 --space-12 --space-16 --space-2 --space-8 |
Повз шкалу три числа: 1px лінії, 240px рейки й 57px липкої відстані. 57 - це висота шапки, тобто число з іншого компонента, переписане сюди рукою: змінити висоту хедера означає зламати липкість цієї смуги, і жоден із двох файлів про це не знає. Кандидат на токен каркаса, етап 09.
Цей файл не змінювався. Вирішувач по всіх 11 селекторах: жодного мертвого оголошення і жодного селектора без збігів. Три проходи по 40 екранах: нульовий прохід 0, різниця 0.
Межа 860 заміряна окремо, на 859 і 860, бо стандартні ширини перепису її не бачать - і саме такою перевіркою 7.75 ледь не завів хибну знахідку в іншому файлі.
Чого бракує
- «Знайдено: 0» - смуга над порожньою видачею виглядає як над повною
- 57px переписані з хедера - висота шапки числом у чужому файлі
- 77 проти 57 - мобільна смуга вища за десктопну, і причини ніде немає
- Скидання фільтрів - пігулка каже «3», і зняти всі три одним дотиком нізвідки
- Сортування у мобільній смузі дублює сортування в аркуші фільтрів; який із двох головний, не сказано
Не домальовано наперед і не замовчано: етап 09 стартує з цього списку, зведеного в design/kit/docs/architecture.md.