Каталог источников на телефоне — рамка фокуса видна целикомSource catalogue on a phone — the focus ring is shown in full
· Открыть на сайтеOpen on the site
ЦельGoal
Инвестор, который проходит каталог источников с клавиатуры (или с внешней клавиатурой у телефона), всегда видит, на какой кнопке или ссылке он сейчас.An investor who goes through the source catalogue with a keyboard (or an external keyboard on a phone) always sees which button or link is current.
ЗадачаProblem
На телефоне строка домена обрезает всё, что выходит за её края, а кнопка «N URL» занимает всю ширину строки. Рамка фокуса у этой кнопки рисовалась снаружи и была срезана слева и справа — оставались две линии сверху и снизу, у всех 97 доменов на 320 и 390 px в обоих языках. У адресов в раскрытом списке рамка срезалась справа: на 320 px — у 161 из 266 ссылок, на 390 px — у 147.On a phone each domain row clips whatever goes past its edges, and the «N URLs» button spans the full row width. Its focus ring was drawn outside and cut off on the left and right — only two lines above and below were left, for all 97 domains at 320 and 390 px in both languages. For the addresses in an opened list the ring was cut off on the right: at 320 px for 161 of the 266 links, at 390 px for 147.
Как решилиHow it was solved
- Рамка фокуса у кнопки «N URL» рисуется внутри кнопки и видна со всех четырёх сторон; текст кнопки сдвинут на 8 px вправо, чтобы рамка его не касалась. У адресов в списке справа оставлено 5 px — рамка видна целиком у всех 266 ссылок.The focus ring of the «N URLs» button is drawn inside the button and is visible on all four sides; the button text is moved 8 px to the right so the ring does not touch it. The address list keeps 5 px on the right — the ring is shown in full for all 266 links.
- В закрытом виде высота и ширина каталога не изменились (320, 390 и 1280 px, оба языка). В раскрытых списках из-за этих 5 px на одну строку длиннее стали 15 из 266 адресов на 320 px и 13 на 390 px. На компьютере каталог — таблица, как раньше.With the lists closed, the catalogue height and width are unchanged (320, 390 and 1280 px, both languages). In opened lists, because of those 5 px, 15 of the 266 addresses take one more line at 320 px and 13 at 390 px. On a computer the catalogue is a table as before.
До и послеBefore and after
