Замовлення тренера
Вузол 5.7 - одне замовлення тренера, відкрите. Товари згруповані по клієнтах, кожна група закривається власною сумою і власним «повторити»: Job 1 і Job 4 в одній картці. Шостий із восьми тренерських організмів.
Це найменший тренерський організм за оголошеннями (106 на 27 селекторів - по чотири), і таким він став на переїзді 8.7. Кожне видалення зміряно в браузері з правилом і без нього, обидва числа записані поруч із ним у файлі.
| Що видалено | Кому віддано | Що це виправило |
|---|---|---|
.od-status | status-pill.css | Восьма редакція тієї самої плашки. Доставлене замовлення виглядало точно як те, що ще обробляється: 112.16 x 27.19 без ґрунту → 99.91 x 25.59, чорнило rgb(28,28,28) → rgb(46,125,70) |
.cprice · .old · .wtag | price.css · client-row.css · discount.css | Четвертий екран, що віддає ці три. Дев'ята цінова поверхня |
.od-paid::before | marks.js + icon.css | Галочка була текстовим гліфом вагою 900, якої Inter не завантажено. Стала <svg>, 14.69 квадратних. Кількість міток у <main> 3 → 4 |
.od-back | нікому | 0 елементів в обох шарах. Клас без елемента - а поруч був елемент без класу: третій контрол .od-acts носив голий btn, який нічого не малює. Дві половини одного контрола |
.od-repeat1 врізано | button.css | Лишились розмір і вага; пішли колір, підкреслення - і прийшла підлога дотику, якої не дав жоден із двох файлів: 141.45 x 19.19 → 141.45 x 44 |
.btn--text оголошує min-height: 0 - фініш навмисне без коробки, - тож 44, які link-row.css поклав під кожне гучне текстове посилання на 7.98, до текстової кнопки не дотягуються. Аргумент той самий: «44 це не РОЗМІР, це наслідок того, що по контролу тиснуть», і компонент, який вирішив, що контрол 12px, не має тим самим вирішувати, що по ньому не влучити пальцем.
Розмітку знято з кольорових екранів через tools/demo.mjs, разом із класом coach на <body>. Колонка 900 - власна ширина цього екрана, вона не трапляється більше ніде: набір колонок системи це 1200 / 860 / 720.
.od-head з .od-facts · дві групи .od-grp · .od-tot і .od-acts.od-head - номер, дата, плашка стану. Той самий об'єкт, що .ocard, .ccard і .cdetails на клієнтських екранах, і радіус вона бере їхній. Тіні й ґрунту не бере: сірий оригінал не дав їх, а додати глибину це рішення про вигляд, а не переїзд.od-facts - чотири речі, які тренер перевіряє перед товарами. Одна колонка до 620, дві після: 320px на 390 і 409px 409px на 1280. Тому картка 428.67 заввишки на телефоні і 229.94 на десктопі.od-grp-h - ім'я клієнта .gc, ціль .gg, сума групи .gs. Смуга на --bg-surface з власною лінією знизу.od-line - сітка 48px 1fr auto: плитка .od-ph, назва .od-nm з варіантом .od-var, ціна. 92.59 заввишки на 390, і найвищий у ряду не рядок, а ціна - 67.59.od-grp-f з .od-repeat1 - «повторити» на одного клієнта, а не на замовлення. Підвал виріс 41.19 → 66 разом із ціллю дотику.od-tot - той самий об'єкт, що .sr.total у кошика покупця, під іншим ім'ям. Сума .od-tot .v - 24px IBM Plex Mono, бо цифри грошей моноширинні по всій системі.od-wrap дає ширину колонки, .od-grp дає рамку - тричі. Жодного .od-line в скелеті немає.od-wrap. Коробку малює error-box.css, і цей файл не додає до неї нічого, крім ширини колонкиПитання поставлено браузеру, а не файлу: кожен із 26 селекторів прогнано по всіх трьох екранах. На coach-order.html знайшли елементи 25 із 26. Не знайшов нічого один:
| Селектор | coach-order | -loading | -error |
|---|---|---|---|
.od-line:last-child | 0 | 0 | 0 |
.od-wrap | 1 | 1 | 1 |
.od-grp | 2 | 3 | 0 |
| решта 23 селектори | є | 0 | 0 |
.od-line:last-child{ border-bottom: none } написали, щоб зняти волосяну лінію з нижнього рядка списку. Останній нащадок .od-grp - це .od-grp-f, підвал із «повторити», і він був останнім відтоді, як групу написали. Правило не спрацювало жодного разу.
Лінія, яку воно мало прибрати, на екрані є, і вона там не зайва: це межа між останнім товаром і смугою дії, а смуга вгорі тієї самої картки малює свою власну. Тобто піксель правильний, а власник ні - межу над підвалом малював рядок над нею, і саме тому правило, націлене на рядок, до неї не дотягувалось.
| Було | Стало | Що воно обмежує |
|---|---|---|
.od-line{ border-bottom } | .od-line + .od-line{ border-top } | межа між двома товарами |
.od-line:last-child{ none } мертве | .od-grp-f{ border-top } | межа над смугою дії |
Перший рядок не потребує нічого: .od-grp-h уже закривається власним border-bottom тим самим 1px --line-hair. Оголошень лишилось 106: одне правило замінило одне правило.
tree-diff HEAD по всіх трьох екранах на 360 / 390 / 1280: рухається шість елементів і нічого на екрані. У кожній групі перший рядок -1, другий 0 (нижній край став верхнім), підвал +1 - а доводять це суми: .od-grp 340.28 / 303.78 на 360 і 331.13 / 303.78 на 390, документ 3034 / 2984 / 1793. Жодне з цих чисел не змінилось.
Скелет узяв .od-grp як коробку і поставив три однакові. Кількість блоків він угадав - картка фактів плюс дві групи це теж три, - а висоту кожного не вгадав утричі:
| На 390 | Скелет | Що приїде |
|---|---|---|
| перший блок | 96 | .od-head - 428.67 |
| другий блок | 96 | .od-grp - 331.13 |
| третій блок | 96 | .od-grp - 303.78 |
| плюс | – | .od-tot 71.78 і .od-acts у три ряди |
| документ | 1990 | 2984 |
288px скелета стоять замість 1064px вмісту. Це не дефект цього файлу - скелет живе в розмітці екрана, - але це перший вимір того, скільки коштує обіцянка, і він тут, бо перевірка ставилась саме до цих трьох сторінок. Родина питання - design/kit/docs/architecture.md.
«Коробка, що обрамляє фотографію товару, квадратна» - правило форми з 7.68: три фотографії 2048 x 2048, і кожна рамка малює їх contain, тож неквадратна лишає нерівне повітря навколо квадратного предмета. .od-ph була 48 x 52.
coach-session.css:498 зрівняла .cl-ph на 7.95 і назвала її «останньою неквадратною рамкою товару в продукті». Тоді це було неправдою - цей екран того дня був ще сірим. Правдою воно стало на 8.7, коли зрівняли оцю. Обхід усіх 88 кольорових екранів по десятьох іменах рамок сьогодні: 21 різний розмір, 0 неквадратних.
Зрівняно по ширині й ніколи по висоті: ширину вже називає колонка сітки вище. Безкоштовно і зміряно, а не заявлено - плитку перемикали 52 ↔ 48, і .od-line в обох станах 92.59 на 390 і 101.75 на 360: найвищий у ряду це ціна на 67.59, до неї 52 і близько не було.
Розмір при цьому не зрівняли ні з чим. 48 немає на драбині контролів (46 / 52), а сусідня плитка у власній сесії тренера - 52. Один потік, два розміри плитки. Це відкрите питання A6 в architecture.md: дев'ять імен, вісім розмірів, - і воно про ЗНАЧЕННЯ, а не про форму.
Під правилом підпису факту стояло .od-fact .fv span - нащадок, написаний для другого рядка факту («вул. Катерининська, 27, Одеса»). А .uiv-ic, коробка намальованої мітки, це теж span.
Зміряно з міткою всередині й досі вільним селектором: коробка мітки взяла display: block і width: 320, галочка стала на власний рядок над реченням, .od-paid 22.39 → 37.08, .od-facts 281.48 → 296.17, уся сторінка 2851 → 2998. Виправлення - один символ >, і воно не міняє більше нічого: обидва рядки значення це прямі нащадки .fv.
Правило екрана, яке дістає на довільну глибину, розмалює те, що покладе туди наступний прохід - і до цього кроку туди просто нічого не клали.
Власних станів компонент не має: жодного :hover, :focus-visible чи :disabled у файлі немає. Усі три інтерактивні контроли на екрані носять класи атомів і беруть стани звідти - .od-repeat1 дістав hover на --text-action і focus на --ring-focus-control саме тому, що перестав малювати себе руками. Це і є вимір переїзду: приватне правило станів не мало, публічний фініш має.
Три дії підвалу на 390: 214.61 · 119.61 · 178.86, усі 52 заввишки, flex-wrap, проміжок 10px [?]. Один акцент, один контур, один привид - рангів рівно три, і вони не сперечаються.
ПОВЕДІНКА НА ШИРИНІ - етап 10, крок 4
Від якого порогу:--bp-grid-2col, уже реєстрове. Раунд організмів нічого не складав.Прочитані з coach-order.css, не переписані руками. Сім ролей на двадцять п'ять токенів - і жодного кольору дії: ні --bg-action, ні --text-action у файлі немає. Помаранчевий на цьому екрані приносить рівно одна кнопка з button.css, а сам звіт про замовлення весь у нейтральних ролях. Для екрана, який тренер відкриває, щоб перевірити, це правильно.
| Семантичні ролі (7) | Примітиви (18) |
|---|---|
--bg-sunken --bg-surface | --fs-12 --fs-14 --fs-16 --fs-20 --fs-24 |
--line-hair --line-strong | --fw-regular --fw-semibold --fw-bold --fw-black |
--text-muted | --lh-snug --ls-caps --ls-lead |
--text-primary | --radius-8 --radius-12 --size-44 --size-52 |
--text-secondary | --space-2 --space-12 --space-16 |
8.57: --size-52 у цьому списку новий - плитка товару поїхала з 48px літералом на щабель, коли власник назвав драбину рамок у три сходинки. Це єдине геометричне значення файлу, яке перестало бути [?].
Дві лінії з двох ролей - і це весь набір країв екрана: --line-hair малює рамку картки, рамку групи, лінію під шапкою групи, межу між товарами і межу над підвалом; --line-strong - один-єдиний край над сумою. У сірому оригіналі той край був 1.5px, Chrome розв'язує півтора в один ще до розкладки, тож система має дві ваги лінії і важча просить 2 вголос.
--bg-surface тут теж одне вживання - смуга з ім'ям клієнта, - і саме воно робить групу читною: рамка сама по собі не сказала б, де закінчується один клієнт і починається наступний.
.od-status ord-status ok - додавання, ніколи перейменування: .od-status тепер не малює нічого і лишений тільки для того, щоб сірий і кольоровий шари казали про елемент те саме. Мертві btn і dark стоять поруч із фінішами з тієї ж причини.
Якорі: .od-wrap .od-head .od-head-t
3 кольорові екрани: coach-order · -loading · -error. І на двох із трьох цей файл малює тільки ширину колонки, а на одному з них ще й рамку скелета.
Чого бракує
- Прилад, який питає «чи цей селектор колись збігся».
inert.mjsпитає, чи перебите ОГОЛОШЕННЯ - інше питання, і селектор, що не збігся жодного разу, воно не бачить..od-backу цьому ж файлі знайшли рахуванням руками на 8.7, і саме тому.od-line:last-childтой крок пережив. Обхід усіх 84 компонентів - наступний крок - Скелет обіцяє 1990 замість 2984 на 390. Розмітка екрана, не цей файл, але число тепер зміряне
- 48px плитки немає на драбині (46 / 52), і сусідня в тому ж потоці 52. Питання A6
- Дев'ять геометричних літералів під
[?]: 18 · 15 (тричі) · 14 (двічі) · 11 · 10 · 3 · 9. Жоден не має щабля, і драбина відступів має два правила, які сперечаються між собою .cpriceі.oldу розмітці - імена, які вже належать іншим шарам. Скоуп.coachтримає їх сьогодні; перейменування це Крок 6- Три посилання хлібних крихт під підлогою дотику - 15.00 заввишки на всіх чотирьох ширинах. Це рішення про слід, а не про вузол 5.7: кожен екран продукту з
.crumbносить ті самі три
Не домальовано наперед і не замовчано: етап 09 стартує з цього списку, зведеного в design/kit/docs/architecture.md.
Правила вживання, які називають саме цей компонент: U9. Автор правил один, і це architecture.html, розділ I; тут - витяг.
Ряд дій замовлення береться патерном .actions; gap: 10px лишився тут як відхилення.
Сторінка звіряє себе з файлом: 24 класи і 0 станів оголошено в coach-order.css. .coach не рахується - це скоуп; .od-status, .cprice, .old і .wtag теж ні - файл їх більше не оголошує, вони лишились у розмітці і належать чужим атомам.