Блок покупки
Блок покупки стоїть на чотирьох екранах товару, по одному на екран: 125 елементів усередині кореня .bb, 358x1422 на 390 і 580x1103 на 1280. Мітка нижче каже про двадцять екранів - це екрани, де трапляється хоч один клас файлу, бо сім своїх імен він ділить із price.css, rating.css, product-card.css, stepper.css, restock-note.css і client-row.css. Файл описує два різні блоки покупки - покупця і тренера, - і жоден екран не показує обидва.
Найскладніший склад у наборі: десять чужих файлів усередині кореня. Найбільший внесок дає меню, якого в розмітці немає - uivPatchMenus() будує всі дванадцять його класів на завантаженні з одного <select> у виборі клієнта.
| Файл | Класів | Які саме |
|---|---|---|
menu.css | 12 | .menu .menu--field .menu-act .menu-list .menu-opt .menu-pop .menu-scrim .menu-sep ... |
button.css | 4 | .btn--full .btn--icon .btn--l .btn--s |
restock-note.css | 3 | .notifyrow .oosback .oosnote |
radio.css | 2 | .vopt .vopts |
rating.css | 2 | .st .uiv-star |
skeleton.css | 2 | .l .skline |
field.css | 1 | .field |
price.css | 1 | .uiv-cur |
discount.css | 1 | .cut |
availability.css | 1 | .bbavail |
8 класів усередині кореня мають більш ніж одного власника, тож із коду не видно, чий вони: .btn--accent .btn--outline .m .off .on .out .s .uiv-trail
Розмітка тут - не переписана від руки. Її знято з design/product.html у цій же сесії, обробники зняті, посилання підняті на рівень.
Показано в рамці шириною 1180, і ширина названа не для краси: це ширина, на якій цей організм у продукті стоїть. Медіа-умова читає в'юпорт, а не контейнер, тож жодне правило самого стенда цього не вирішує - тільки справжній в'юпорт, а він є лише в рамки. Сам організм у рамці обмежено до 580px - це ширина, яку він займає в продукті на 1280. Витягнутий зі своєї колонки, він розтягнувся б на всю рамку, і кнопка на 294 стала б кнопкою на 1490.
Gold Standard 100% Whey 2270 г
.bbline - flex зі space-between, у ньому .bbmeta (наявність і артикул) ліворуч і .bbrate праворуч. .art відбивається крапкою через ::before, а не символом у тексті.priceblk - grid auto minmax(220px, 1fr): .pbl з .oldrow у першій колонці, .buyrow у другій, .perserv через обидві. До 479 колонка одна. 220 і 36 - літерали.buyrow - flex-wrap стоїть на рядку, а не всередині ширини (крок 7.64): доти він жив тільки у телефонному блоці, і в двох смугах - 480 до ~600 та 860 до ~1100 - це був єдиний бічний скрол, що лишався в продукті. .addcart тягне решту ширини, серце коробки не оголошує зовсім.dpblk - .dphead з кнопкою міста .dpcity, три рядки .dprow у сітці auto minmax(0,1fr) auto, потім .dph2 і чипи оплати .dppay / .paych. .dpic.np - логотип перевізника картинкою з font-size:0, тож літери «НП» у розмітці лишаються для тих, хто читає код, і зникають з екрана. .dpp.free - єдине місце, де ціна йде не моно, а --font-body.coachbox - у демо її немає, бо демо знято з екрана покупця. .cbh із чипом .cbtier, рядок .cbrow з .cbnew, .cbold і .cbsave, під ним .cbnote. Знак у заголовку набраний символом у розмітці, а marks.js робить із нього мітку, якій файл дає 17px.clientpick - підпис і один <select>. Обидва класи є рівно на одному кольоровому екрані, design/product-coach.html.perserv - одна назва, дві редакції, і файл це знає
Клас належить і цьому файлу, і product-card.css. Тут увесь рядок «≈ 18 ₴ / порція · +13 ₴ бонус» іде моно, слова разом із цифрами; картка пише <b>18 ₴</b> / порція і моноспейсить лише число - те, чого просить DESIGN-artifacts.md:77. Звести їх - це <b> у цій розмітці плюс рішення, чи бонусу взагалі місце на цьому рядку. Рішення IA, і файл каже це вголос у коментарі, а не мовчить. Одна з 126 неоднозначних назв шару, і єдина в наборі, де обидва власники малюють по-різному навмисно.Рамка вгорі знята з design/product.html - товарної сторінки покупця. У первинної аудиторії та сама коробка має ще один поверх: .coachbox з .cbh, .cbrow, .cbtier, .cbold, .cbnew, .cbsave, .cbnote і .clientpick під ним. Дев'ять класів, один екран - design/product-coach.html, - і поза ним їх немає ніде.
.cbsave називає різницю на штуку, .clientpick питає, кому це, а .cbtier каже, за яким тарифомТут же знявся хибний спрацьовок першої проби
.tier з цієї сторінки перша проба сортування назвала «пише JS», бо цей рядок трапляється у wireframes/_nav.js для іншого компонента - і саме цей випадок був записаний у беклог як відома хиба. Насправді .bb .tier - це пігулка гуртової ціни всередині коробки, звичайна розмітка, і сторінка була винна їй демо, як і решті десяти.| Стан | Що робить | Чому так |
|---|---|---|
| спокій | заголовок 30 --font-display, метарядок 12 моно --text-muted, ціна 36 --fw-semibold | ціна - найбільша річ на екрані, і вона одна така |
:hover | бренд у .eyebrow a йде в --text-action, посилання на відгуки в .bbrate a - у підкреслення | два ховери на весь файл, обидва на посиланнях; кнопки свої стани беруть у button.css |
| фокус | жодного оголошення | у файлі два стани всього - :hover і ::before. Кільце тут чуже, і чиє саме - питання власника |
| немає в наявності | .oosbtn з restock-note.css; до 479 він займає весь рядок flex: 1 1 100% | крок 6.8: «Повідомити про надходження» просить усі 328px телефонної колонки, і поділити рядок із 52px серцем означало розігнати блок до 371 і поїхати вбік |
| режим тренера | з'являються .coachbox і .clientpick, .perserv починається з «Роздрібна ціна», дія стає «Додати клієнту» | одна ціна жива на одному екрані: роздрібна вгорі втрачає акцент, тарифна в коробці його бере |
| до 479 | ціновий блок в одну колонку, .bbrate отримує order:-1 і йде над метарядком | на телефоні оцінка читається раніше за артикул |
У файлі 2 медіа-умови, і кожна з них - межа, якої стандартні ширини перепису (360 / 390 / 720 / 1280) не бачать зсередини смуги. Заміряти їх треба власними ширинами, по одній з кожного боку.
@media (max-width: 619px)@media (max-width:619px)
Сторінка звіряє себе з файлом: 34 власні класи і 1 стан.
Було 36. .bb .tier і .bb .qty видалено з файлу на 8.34c як третій список кроку 6 - «клас, якого ніхто не носить»: питання поставлено рендеру на всіх чотирьох екранах із .bb, відповідь 0, і в сірому шарі теж нічого. Причина кожного видалення виписана в самому buy-box.css.
ПОВЕДІНКА НА ШИРИНІ - етап 10, крок 4
Від якого порогу:--bp-grid-2col дзеркалом 619, п'ять блоків. Що саме міняється: нижче точки ціновий блок стає однією колонкою, рейтинг переїжджає нагору рядка, кнопка «Повідомити» бере всю ширину. Було 479, поза реєстром - два з п'яти блоків це пара «структура / колір» етапу 08, що повторює ті самі два правила, і вони склались разом. Шостий блок файлу вже стояв на 619 і не рухався.Прочитані з buy-box.css: 15 семантичних ролей і 29 примітивів.
| Семантичні ролі (15) | Примітиви (29) |
|---|---|
--bg-inverse --bg-page --bg-save --bg-sunken --bg-surface --line-hair --line-inverse --mark-inactive --text-action --text-body --text-danger --text-muted --text-primary --text-secondary --text-success | --container-text --font-body --font-display --font-mono --fs-10 --fs-12 --fs-14 --fs-30 --fw-black --fw-bold --fw-regular --fw-semibold --lh-airy --lh-flat --lh-snug --ls-caps --ls-display --ls-lead --radius-12 --radius-16 --radius-4 --radius-8 --size-34 --space-12 --space-16 --space-2 --space-24 --space-4 --space-8 |
Вирішувач по всіх 57 селекторах: 27 оголошень збігаються з елементами й ніде не виграють, і це три різні форми. П'ятнадцять - базове правило, яке б'є власна ж уточнена версія з того самого файлу: .bb .bbmeta проти .bb .bbline .bbmeta (7 оголошень), .bb .buyrow проти .bb .priceblk .buyrow (4), .bb .addcart проти .bb .buyrow .addcart (3), .bb .perserv проти .bb .priceblk .perserv (1). Жоден екземпляр у продукті не стоїть поза уточнювачем, тож файл описує вільніше розміщення, ніж продукт колись уживає. П'ять - той самий селектор, написаний двічі: .bb .simple віддає рамці колір угорі й гасить його transparent унизу (4), .bb .vlbl двічі каже про накреслення (1). Сім - обидва блоки @media (max-width: 479px) структурної половини, повторені слово в слово в колірній.
І ще 35 оголошень не збігаються ні з чим
.bb .tier - 30 оголошень, .bb .qty - 4, .bb .qty .qn - 1. Це не стан, який вмикає JavaScript, і не залишок сірого прототипу: такої розмітки немає ніде. Крамниця пише .ci-qty, оформлення - .co-qty, голого класу qty немає в жодному з двох шарів; tier голим є рівно на одному сірому екрані, wireframes/coach-verify-tier.html, і ніколи всередині .bb. Лічильник кількості прибрано навмисно - розмітка продукту каже це коментарем: кількість це робота кошика, а на сторінці товару вона лише відкладає одну ясну дію. А тарифну ціну тренера тепер малює .coachbox з .cbtier. Тобто 35 оголошень - це два рішення про товар, ухвалені й не прибрані з файлу.Чого бракує
- Коментар у файлі відстав від відповіді. Рядок 106 каже про 36px: «немає
--fs-36, повідомлено на етап 09».tokens.css:190-200уже відповів: вище 34 шкали немає навмисно, 36 у.bb .newлишається літералом, бо значення з одним ужитком - це значення, а не токен. Прибрати треба питання, а не число - 35 мертвих оголошень -
.bb .tierі.bb .qtyприбрати або дати їм розмітку; це рішення про товар, і воно не з css .clientpick select{ max-width:280px }виграє і не малює нічого: післяuivPatchMenus()цей <select> це.menu-srcрозміром 1x1. Вирішувач такого не бачить - правило чесно перемагає на невидимому елементі- Немає стану фокуса на жодному з власних елементів
- Межа 479 не заміряна зсередини: стандартні ширини перепису 360 / 390 / 720 / 1280 не стають по обидва боки від неї
Не домальовано наперед і не замовчано: етап 09 стартує з цього списку, зведеного в design/kit/docs/architecture.md.