Форма чекауту
Найбільший файл системи, і під одним іменем у ньому дві адреси: чекаут .co-* на п'яти екранах design/checkout*.html і картка профілю .pfcard, яка є рівно на одному - design/account-profile.html. Перевірено в обидва боки: на design/account-profile.html немає жодного класу .co-*, на design/checkout.html - жодного .pf*. Збирач складу взяв за корінь саме .pfcard, тож таблиця нижче описує картку профілю, а демо під нею знято з чекауту.
Виміряний корінь - .pfcard на design/account-profile.html, тому нижче склад картки профілю, а не форми замовлення.
| Файл | Класів | Які саме |
|---|---|---|
field.css | --container-page --container-text |
Розмітка тут - не переписана від руки. Її знято з design/checkout.html у цій же сесії, обробники зняті, посилання підняті на рівень.
Показано в рамці шириною 1180, і ширина названа не для краси: це ширина, на якій цей організм у продукті стоїть. Медіа-умова читає в'юпорт, а не контейнер, тож жодне правило самого стенда цього не вирішує - тільки справжній в'юпорт, а він є лише в рамки. Сам організм у рамці обмежено до 620px - це ширина, яку він займає в продукті на 1280. Витягнутий зі своєї колонки, він розтягнувся б на всю рамку, і кнопка на 294 стала б кнопкою на 1490.
Увійдіть для оформлення замовлення - код підтвердження надійде у SMS, акаунт створиться автоматично. Пароль не потрібен.
.co-grid - одна колонка, від 860 minmax(0, 1fr) 360px. Не 1fr: у авто-доріжки підлога береться з min-content того, що в ній стоїть, і один нестисливий рядок задавав ширину всієї сторінки. Межу перенесли з 900 на 860 кроком 7.70, замір записаний просто у файлі.co-money - від 860 position: sticky з top: 78px. 78 - сире число, воно є в переліку значень поза шкалою.co-line - flex, а до 559 grid 60px minmax(0, 1fr), у якому .li-right стає на власний рядок. З п'яти меж файлу це єдина, що змінює тип розкладки, а не розмір.co-sw - --size-38 на 22px, кулька 18x18 їде зліва з 2px на 18px: розмір коробки з токена, решта чисел сирі.co-city - несе .btn--field: рядок форми не має міняти висоту від того, що змінився ВИД контрола. Стоїть у .co-sub, колонці з двох контролів, і другий у ній - .field з номером відділення, тож усі чотири щаблі беруться з нього: 44, ріг 12, паддінг 8/12, читається зліва. Слово плоске 16 і знак плоский 20 - обидва пандуси 10.4 знято на 12.14, бо вони везли кегль, що не збігався з полем поруч на жодній ширині. .note при цьому --fs-12: підпис дії, а не значення.pfcard - друга половина файлу: .pf-lbl, .pf-row, .pf-val, .pf-note, .pf-delcheck, .pf-danger. Усередині неї в розмітці є ще .pf-actbtn, у якого власного правила немає в жодному файлі: крок 6.4 віддав його цілком .btn--textРахунок за типом збився на одиницю, і це видно вирішувачем
У<section class="co-sec"> перед трьома div.co-line стоїть ще один DIV - заголовок секції .co-sec-h. :nth-of-type і :first-of-type рахують за ТЕГОМ серед сусідів, тому перший рядок замовлення має по-типу номер 2, а не 1. Обидва наслідки заміряні на сорока кольорових екранах у дві ширини. Перший: .co-line:first-of-type{ border-top: none; padding-top } - чотири оголошення, які не збігаються з жодним елементом, тож перший рядок малює верхню рамку, якої йому написали не мати. Другий: .co-line .li-img{ background-image } з короткого запису збігається 18 разів і не виграє жодного - його б'ють три правила :nth-of-type(3n+1), (3n+2) і (3n) у цьому ж файлі, по шість перемог кожне, тож на design/checkout.html перший рядок отримує креатин, другий передтрен, третій протеїн. Порівняйте з restock-note.css: там той самий прийом з :nth-of-type у картці, яка теж тримає заголовок, чергування так само зсунуте - і тримається випадково, бо картинок там дві і зсув просто міняє їх місцями. Один прийом, два результати, і жоден з них не був рішенням.Рамка вгорі показує форму чекауту, знятої з design/checkout.html. Це приблизно третина файлу. Решта - окремі екрани і друга адреса під тим самим іменем компонента, і жоден із цих класів не є варіантом оформлення: кожен існує рівно там, де існує його екран.
.co-head з .co-logo і .co-support, .co-h1, і .co-foot унизу. Вона обрізана навмисно - ні меню, ні пошуку, ні каталогу: на екрані, де платять, має бути один вихід і жодного шляху вбік.co-me (для кого це замовлення) з .co-edit, збережена адреса .co-saved, і бонусний рядок .bv / .disc / .co-accrual - скільки це замовлення дає і скільки витрачає.co-noaddr, .co-confirm-note і .req: акаунт є, адреси ще немає. Замість збереженої адреси - поля, і примітка про те, що буде після підтвердження.co-err-box з .co-err-mark, .co-err-h, .co-err-s, .co-err-acts, а під ним .co-keep - замовлення збережено, поки платіж повторюють, із рядками .kr / .kv і приміткою .knote.co-proc-box зі .co-spin: екран, який каже «говоримо з банком» і дає рівно одну дію - чекати. Без зворотного таймера, і це принцип 4, а не забутий елемент.pfcard є рівно на одному екрані, design/account-profile.html, і з чекаутом у неї нуль спільного коду. Один це компонент чи два - питання етапу 09; показати обидва - робота цієї сторінки в будь-якому разі.pf-resend є лише на другому кроці діалогу зміни номера. Рамка викликає openProfPhone() і profStep('pf-phone','code') - те саме, що робить натискання «Надіслати код».pf-delcheck - єдине місце продукту, де руйнівну дію відмикає явне «розумію». Доки чекбокс порожній, кнопка вимкнена| Стан | Що робить | Чому так |
|---|---|---|
| спокій | секція .co-sec і коробка .co-money - --bg-page, --elevation-1, --radius-12 | дві однакові картки: ліва веде, права рахує |
| наведення | .co-line .li-acts button йде з --text-secondary у --text-body, .pf-act - у --text-action | єдині два :hover у всьому файлі |
| обов'язкове поле | .co-input.req - рамка --line-warning | попередження, а не небезпека: --line-danger у файлі теж є, і його носить знак на екрані відмови, а не поле |
| увімкнено | .co-sw.on - --bg-action і кулька вправо; .li-acts button.on - --text-action зі знаком у заливці | жоден з цих двох станів не намальовано на жодному кольоровому екрані: 12 із 18 оголошень файлу, які не збігаються ні з чим, - це вони |
| відмова | .co-err-box зі знаком у рамці --line-danger, під ним .co-keep з підсумком кошика | оплата впала, замовлення лишилось: сторінка відмови показує, що саме збережено |
| обробка | .co-proc-box зі спінером .co-spin; при prefers-reduced-motion: reduce обертання вимкнене | саме обертання не заміряне: драйвер вимірювання зупиняє анімації в усьому документі, тож про рух цієї сторінки сказано нічого |
У файлі 4 медіа-умови, і кожна з них - межа, якої стандартні ширини перепису (360 / 390 / 720 / 1280) не бачать зсередини смуги. Заміряти їх треба власними ширинами, по одній з кожного боку.
@media (min-width: 860px)@media (max-width: 619px)@media (min-width: 620px)@media (prefers-reduced-motion:reduce)
Підсумок оформлення показує обране: спосіб, адресу, оплату. Поки людина не обрала, рядок не зникає і не бреше нулем - він каже словами, що тут поки порожньо, і .pf-val--empty це той самий рядок тихішим чорнилом. .pf-val--label - коли значення це назва, а не число, тож воно не мусить бути 16.
Сторінка звіряє себе з файлом: 92 власні класи і 2 стани.
Було 93. .smeths переїхав у auth-dialog.css на 8.36: стос кнопок соцвходу пише wfAuthPanel(), і він є лише в діалозі входу - у розмітці design/ і wireframes/ нуль входжень. Правило лежало не в тому файлі, і помітилось це рівно тоді, коли ця сторінка мусила показати клас, якого на її п'яти екранах немає. Значення переїхали побайтно, обидва оголошення лишились у своїх блоках.
.added стоїть у станах, а не в класах: його дописує classList.add на картку полиці допродажу в мить натискання, і той-таки обробник відразу вставляє рядок у замовлення. Клас каже «цей товар уже в цьому замовленні», тобто це слід дії, а не вигляд компонента, - намалювати його в спокої означало б показати наслідок без причини.
ПОВЕДІНКА НА ШИРИНІ - етап 10, крок 4
Від яких порогів:619 і 620. Що саме міняється: нижче точки рядок замовлення перекладається в сітку 60px + решта; від точки два контроли помилки стають рядом. Файл писав ОБИДВІ сторони однієї межі двома числами, 479 і 480, і жодного не було в реєстрі. І два розміри стрибали: .co-city мала --fs-14 і гліф 18px нижче 479 проти 16 і 20 вище (зміряно на checkout) - 10.4 зробив з них пандуси, бо кегль, перемкнутий на точці, це те, що етап забороняє прямо. На 12.14 обидва пандуси знято зовсім: питання було не «як їхати від 14 до 16», а «чому контрол читається не так, як поле поруч» - слово 16 і знак 20 плоскі на кожній ширині. Бічний паддінг .co-proc-box пішов тим самим шляхом, 16 → 24.Робота: ВІДПОВІДЬ. Рухається: колір посилань і кроків, фон і позиція перемикача. Тривалість --dur-fast (150ms), крива --ease-standard. Значення читаються через var(): підміна токена в браузері веде за собою кожне з них. При prefers-reduced-motion рух зникає, а стан лишається.
Обертун очікування (uivspin .9s linear infinite) НЕ переведений: цикл не виражається жодним із трьох щаблів, і четвертий заводиться лише окремим рішенням власника. Позиція повзунка їде через left - РОЗКЛАДКА, перегляд на кроці 5.
Крок 4: обертун оформлення взяв ту саму пару --dur-cycle / --ease-cycle, що й обертун авторизації, і ті самі 200мс різниці. @keyframes uivspin тепер оголошено в base.css - раніше він жив у auth-dialog.css, тобто цей рядок читав кейфрейм із чужого компонентного файлу і працював лише тому, що імена кейфреймів глобальні.
Прочитані з checkout-form.css: 29 семантичних ролей і 39 примітивів.
| Семантичні ролі (29) | Примітиви (43) |
|---|---|
--bg-action --bg-action-soft --bg-inverse --bg-notice --bg-page --bg-rule --bg-surface --bg-track --bg-warning --elevation-1 --elevation-knob --line-action --line-danger --line-hair --line-inverse --line-notice --line-strong --line-warning --mark-rating --text-action --text-body --text-bonus --text-danger --text-muted --text-oninverse --text-primary --text-secondary --text-success --text-warning | --container-page --container-text --font-display --font-mono --fs-10 --fs-12 --fs-14 --fs-16 --fs-20 --fs-24 --fs-30 --fs-display --fw-black --fw-bold --fw-medium --fw-semibold --lh-airy --lh-flat --lh-snug --ls-caps --ls-display --ls-eyebrow --ls-lead --radius-12 --radius-16 --radius-8 --radius-circle --radius-pill --size-24 --size-26 --size-38 --size-46 --size-52 --space-12 --space-16 --space-2 --space-24 --space-32 --space-4 --space-40 --space-8 |
| – | --dur-cycle --dur-fast --ease-cycle --ease-standard |
36 оголошень збігаються з елементами й не виграють жодного разу, і вони діляться на три купи. 33 - це один і той самий шов етапу 08: структурний блок пише короткий border, а колірний нижче перезаписує його border-color або border-style тим самим селектором. Так поводяться .pf-note, .co-saved, .co-noaddr, .co-accrual, .co-err-box, .co-err-mark і .co-spin. Це не дефект, це той самий розділ, у якому колір іде другим і виграє навмисне. 1 - .co-line .li-img{ background-image }, розібраний вище, і це єдина справжня знахідка серед 36. 2 - animation-delay і animation-play-state спінера, і б'є їх не файл системи, а сам прилад: драйвер вставляє в документ *, *::before, *::after{ animation-play-state: paused !important }, щоб зняти перший кадр. Це артефакт заміру, а не знахідка, і без цього рядка про анімацію не можна було б сказати навіть того, що вона є.
Окремо вирішувач знайшов 18 оголошень, які не збігаються з жодним елементом на сорока кольорових екранах. 12 з них - два стани .on з таблиці вище, 4 - :first-of-type, збитий заголовком секції, і 2 - .co-upsell .pcard.added .cartbtn .uiv-ic svg, тобто .added, єдиний власний клас файлу, якого немає на жодному кольоровому екрані.
Чого бракує
- Один файл, дві адреси -
.co-*на п'яти екранах чекауту і.pfcardна одному екрані профілю. Ділити наcheckout.cssіprofile-card.cssчи лишити як є - рішення власника, і воно про найбільший файл системи - Рахунок за типом - заголовок секції зсуває
:nth-of-typeі зовсім вимикає:first-of-type. Три виходи: власний клас першому рядку, заголовок за межі секції, або:nth-childзамість:nth-of-type. Це рішення про розмітку - Два стани
.onніде не намальовані - перемикач бонусів і «в обраному» в рядку замовлення. Або екран, який їх показує, або зняття правил .cartbtnбез свого файлу - карта власності приписує його цьому файлу через єдиний селектор.co-upsell .pcard.added .cartbtn .uiv-ic svg, який не збігається ні з чим. У розмітці клас стоїть на 17 кольорових екранах, правила про нього немає ніде
Не домальовано наперед і не замовчано: етап 09 стартує з цього списку, зведеного в design/kit/docs/architecture.md.