Компонент · рівень 2

Нотатка про поповнення

«За вашим ритмом купівлі ці товари скоро закінчаться». Робота 3 цілком: постійний покупець не має перевідкривати каталог, щоб купити те саме вчетверте. Файл маленький і чистий - і всередині нього знайшовся селектор, який не збігається ні з чим.

рівень 2design/system/components/restock-note.css163 рядки22 селектори44 оголошення2 екрани

Анатомія

Розмітка звідси - та сама, що на account.html.

↻ Час поповнити запаси

Усі покупки →

За вашим ритмом купівлі ці товари скоро закінчаться. Додайте в кошик в один дотик.

фото

Optimum Nutrition Gold Standard 100% Whey 2270 г

Купували 34 дні тому · зазвичай вистачає на ~30 днів

фото

Optimum Nutrition Micronized Creatine 317 г

Купували 58 днів тому · зазвичай вистачає на ~60 днів

1Плитка 46×46 з фото товару. Малюється тим самим правилом, що плитки замовлення - до 7.52 воно жило тут одним рядком на три імені, а тепер кожен має своє

2Назва 14/700 і --lh-snug: у два рядки поміщається повна назва з вагою, і скорочувати нічого не треба

3Цикл - єдине число на екрані, яке [?]. «Зазвичай вистачає на ~30 днів» рахується з історії покупок, якої ще немає, тож моношрифтом виділено саме його

4Дія - margin-left: auto, кнопка притиснута до правого краю. Одна на рядок, і вона акцентна: тут немає вибору «переглянути чи купити», є тільки «купити»

Це не рекомендація, а нагадування. Товар уже купували, склад і дозування вже перевірені, тож блок не пояснює товар - він називає ритм: скільки днів минуло і на скільки зазвичай вистачає. Принцип 5: звичайні слова згори, глибина знизу.

Селектор, що не збігається ні з чим

.rk-item:last-child { border-bottom: none; padding-bottom: var(--space-2) } .rk-item:first-of-type { padding-top: var(--space-2) }

Два сусідні рядки, написані як пара: перший елемент притиснути згори, останній знизу. Працює один.

Що заміряно в браузері	Значення
діти картки, по порядку	`DIV.ah` · `P.rk-lead` · `DIV.rk-item` · `DIV.rk-item`
`.rk-item:last-child` збігів	1
`.rk-item:first-of-type` збігів	0
відступи позицій, згори / знизу	12 / 12 і 12 / 2

:first-of-type означає «перший серед братів свого тега», а не «перший із таких». Перший DIV у картці - це .ah, шапка. Тому правило шукає елемент, який одночасно .rk-item і перший div, а такого немає.

І та сама помилка тримає чергування фото

.rk-item:nth-of-type(odd) і (even) теж рахують .ah. Перша позиція виходить парною, друга непарною: перша показує креатин, друга протеїн. Візуально байдуже, яке фото на якому рядку - але порядок тримається випадково, і третій елемент, доданий у шапку, зсуне все.

Не виправляю цим кроком. Оживити padding-top: 2px означає стиснути першу позицію на 10px - це видима зміна, і вона не була оголошена перед кроком. Видалити мертвий рядок теж не рішення: сусідній :last-child доводить, що симетрія була задумана. Записано з трьома варіантами, рішення про значення - етап 09, як сім'я бровки. (1.5px із того ж списку закрито на 7.62.)

Дві роботи в одному файлі

Сім'я	Що каже	Екран	Екземплярів
`.restock` `.rk-lead` `.rk-item` `.rk-ph` `.rk-tx` `.rk-nm` `.rk-cy` `.rk-add`	ваш протеїн закінчується, повторіть	`account.html`	1 картка, 2 позиції
`.notifyrow` `.oosbtn` `.oosnote` `.oosback`	товару немає, повідомимо коли з'явиться	`product-oos.html`	по 1

Обидві про поповнення, і це різні поповнення: перше - ваш запас, друге - наш склад. Друга сім'я приїхала на етапі 08 кроці 5 з блока <style> на сторінці товару, під тим самим заголовком «moved off the screen», під яким на 7.51 знайшовся третій ведмідь.

Товару немає на складі. Повідомимо, щойно він з'явиться - або оберіть аналог нижче.

← Повернутись до колекції

до 419 поле й кнопка стають одне під одним: разом їхні мінімальні ширини не влазять, а звужувати поле не можна - нижче 16px iOS зумить сторінку на фокусі

Одного з чотирьох класів тут немає, і це виправлення

До кроку 7.91 кнопка цього рядка несла oosbtn, а в продукті вона його не несе: product-oos.html ставить .oosbtn на акцентну «🔔 Повідомити про надходження» у рядку покупки, а сабміт рядка контакту там - btn--outline btn--l btn--full btn і без імені. Стенд показував контурну кнопку під іменем акцентної. Клас знято; самоперевірка внизу чесно казала, що .oosbtn на цій сторінці не намальовано - його місце в .buyrow, а не тут.

Тепер він намальований там, де стоїть у продукті - 8.33, коли холостий контроль почали читати гейтом. .oosbtn - одне оголошення, flex: 1, і працює воно лише всередині .bb .buyrow, флекс-рядка з buy-box.css: кнопка забирає весь залишок, а обране лишається квадратом поруч. Це і є та єдина помаранчева заливка на сторінці, про яку каже коментар у файлі; сабміт рядка вище - її контурний двійник, а не друга головна дія.

Розмітка з design/product-oos.html. .bb тут не для вигляду: без свого скоупа .buyrow не флекс, і flex: 1 не має на чому діяти

Що з ними робити - записано, не зроблено

Ці чотири класи не мають компонента-власника: у реєстрі 27 молекул і рядка «немає в наличии» серед них немає. Три виходи: лишити й записати (обрано), рознести по власниках (field.css, button.css, empty-state.css) або завести 28-му молекулу. Перше обрано тому, що число «27» опубліковане на обзорі, і міняти його посеред проходу означає переписувати те, на що дивляться. Рішення - етап 09.

Одну частину цієї сім'ї цей крок усе ж віддав. .oosgal .gmain img поїхало в gallery.css, де половина того самого рішення вже стояла з кроку 3: .oosgal .gthumb. Знебарвлення недоступного товару було написане у двох файлах, а .gmain і .gthumb - обидва власні імена галереї.

Знебарвлення, і чому воно двома різними способами

Що	Як приглушено	Чому не однаково
велике фото `.gmain img`	`filter: grayscale(.75)` + `opacity: .85`	це справжній `img`, фільтр на ньому нічого більше не зачіпає
мініатюри `.gthumb`	`background-blend-mode: luminosity`	фото тут - фон, і фільтр висушив би разом із ним помаранчеве кільце «обране», яке мусить лишитись акцентом навіть у недоступного товару

Дві техніки для одного рішення - і саме тому вони мусять лежати в одному файлі: інакше наступний, хто змінить одну, не побачить другої.

Стани

Стан	Що робить	Чому так
спокій	позиції розділені лінією-волосиною	це список, а не картки: між ними найтонше, що є в системі
остання позиція	`:last-child`: лінія знята, відступ знизу 2	лінія в кінці списку відрізала б його від краю картки
перша позиція	нічого: `:first-of-type` не збігається ні з чим	задумана симетрія, яка не спрацювала. Розібрано вище
чергування фото	`:nth-of-type(odd/even)` дають два різні фото	працює, але зі зсувом на одиницю, бо рахує й шапку
до 419	поле й кнопка сповіщення стають одне під одним	разом їхні мінімальні ширини штовхають сторінку на 8px ширше за екран
наведення	немає власного	натискають кнопку, і вона відповідає своїм фінішем

Правило і антиправило

Правило

Нагадування називає ритм, а не властивості товару. «Купували 34 дні тому · зазвичай вистачає на ~30» - це все, що потрібно тому, хто вже купував. Склад, дозування й сертифікат він читав минулого разу.

Антиправило

Не роби з цього терміновість. Ні «залишилось 2 дні», ні лічильника, ні червоного. Принцип 4: спокійно й упевнено. Людина сама вирішує, коли купувати, а блок лише не дає забути.

Холостий контроль

Сторінка звіряє себе з файлом: 12 власних класів і 4 стани оголошено в restock-note.css.

ПОВЕДІНКА НА ШИРИНІ - етап 10, крок 4

Від якого порогу: жодного - запит зник, і разом з ним відкрився дефект. Було @media (max-width: 419px) із коментарем кроку 7.64, який відмовлявся його складати: «на 420, 440, 460 і 479 цей ряд НЕ переноситься, його двоє дітей виходять 26 + 350». 26 + 350 це і є дефект: кнопка носить btn--full, її width: 100% вигравала на флекс-лінії, і поле e-mail було 26 пікселів завширшки від 420 і до 1600 - зміряно на product-oos: 26 + 410 на 480, 26 + 650 на 720. Запит нижче 419 це ховав. Тепер flex-wrap стоїть у базі, обидві дитини мають підлогу 13rem, і ряд ламає свою лінію сам. На 419 і нижче не зрушило нічого (311.2, 328, 387 - однакові до пікселя).

Токени

Прочитані з restock-note.css: 3 семантичні ролі і 10 примітивів.

Семантичні ролі (3)	Примітиви (10)
`--line-hair` `--text-body` `--text-secondary`	`--container-text` `--font-mono` `--fs-12` `--fs-14` `--fw-bold` `--lh-airy` `--lh-snug` `--space-12` `--space-2` `--space-4`

Повз шкалу тут майже нічого: 1px лінія, 78% розмір фото в плитці, 12px і 14px двома відступами, які мали б бути --space-12 і --space-16, та 419px - точка перелому не з набору 480 / 720 / 1180. Найчистіший файл із розібраних досі.

A/B

Три проходи по 40 екранах на чотирьох ширинах: HEAD, HEAD ще раз і робоче дерево. Нульовий прохід 0, різниця 0.

Знебарвлення переїхало на 8 імпортів раніше по каскаду й намалювалось так само: нічого між gallery.css і restock-note.css не змагається за .oosgal .gmain img.

Вирішувач по всіх 18 селекторах: одне оголошення не виграє ніде - .rk-ph{ background-image }, і воно так і задумане (скорочення ставить none, чергування ставить фото). Один селектор не збігається ні з чим, і це знахідка кроку.

Немає в коді -> етап 09

Чого бракує

:first-of-type замість «першої позиції» - мертвий селектор і зсув чергування на одиницю. Три варіанти, рішення про значення
Чотири класи без власника - блок «немає в наличии» на product-oos.html
Точка перелому 419 повз набір 480 / 720 / 1180. Приєднується до 559, 620, 640, 820 і 860 з трьох попередніх кроків
Два відступи повз шкалу: 12px і 14px написані числом там, де решта файлу бере токен
Немає стану «історії покупок ще немає» - у нового покупця блок не має що показати, і хто його ховає, у коді не сказано
Цикл споживання це [?] - «~30 днів» вигадане число, і воно єдине на екрані, яке треба буде замінити реальними даними

Не домальовано наперед і не замовчано: етап 09 стартує з цього списку, зведеного в design/kit/docs/architecture.md.