Сравнение с одним лотом на маленьком телефоне: первая «+ сравнить» на первом экранеCompare with one lot on a small phone: the first «+ compare» on the first screen
· Открыть на сайтеOpen on the site
ЦельGoal
Инвестор отметил один лот и открыл «Сравнение» на телефоне, чтобы добавить второй. Кнопка «+ сравнить» должна быть видна сразу, без прокрутки.An investor has marked one lot and opened Compare on a phone to add a second one. The «+ compare» button should be visible at once, without scrolling.
ЗадачаProblem
На телефоне 320×568 первая кнопка «+ сравнить» оказывалась ниже экрана у всех четырёх проверенных лотов: её нижний край был на 642–709 px при высоте экрана 568. Место занимали три вещи: заголовок выбранного лота шёл в 4–6 строк, потому что рядом стояла кнопка «× Убрать» шириной 93 px; в строках подборщика кнопка «+ сравнить» стояла по центру строки, а не у её верха; подсказка «Сначала — тот же проект, потом по цене.» и заголовок «Добавьте ещё хотя бы один лот» занимали по две строки.On a 320×568 phone the first «+ compare» button was below the screen for all four lots checked: its bottom edge was at 642–709 px with a 568 px screen. Three things took the space: the chosen lot's title ran to 3–5 lines because the 98 px «× Remove» button sat beside it (4–6 lines in Russian); in picker rows «+ compare» sat in the middle of the row, not at its top; the hint «Same project first, then by price.» and the heading «Add at least one more lot» took two lines each (Russian).
Как решилиHow it was solved
- На экранах до 480 px «Убрать» у выбранного лота — квадратная кнопка «×» 44×44 px; слово «Убрать» остаётся для экранных чтецов. Заголовку лота достаётся на 49 px больше ширины: 3–4 строки вместо 4–6.On screens up to 480 px the chosen lot's «Remove» is a square 44×44 px «×» button; the word «Remove» stays for screen readers. The lot title gets 54 px more width: 3–4 lines instead of 3–5 (4–6 in Russian).
- В строках подборщика «+ сравнить» стоит у верха строки, рядом с первой строкой названия лота.In picker rows «+ compare» sits at the top of the row, next to the first line of the lot name.
- Заголовок подборщика и подсказка о порядке на телефоне чуть мельче и помещаются в одну строку на 320 px.On phones the picker heading and the order hint are slightly smaller and fit on one line at 320 px.
- Нижний край первой «+ сравнить» на 320×568: 642–709 → 519–542 px (кнопка целиком на первом экране; по-английски 570–626 → 519–542). На 360×740: 559–604 → 497–519 px, на 390×844: 536–592 → 497–519 px. На компьютере и в таблице сравнения из двух и более лотов ничего не изменилось.Bottom edge of the first «+ compare» at 320×568: 642–709 → 519–542 px (the whole button on the first screen; in English 570–626 → 519–542). At 360×740: 559–604 → 497–519 px, at 390×844: 536–592 → 497–519 px. Nothing changed on desktop or in the comparison table of two or more lots.
До и послеBefore and after
