Часть 6: В предпоследней части этой серии мы собираемся доработать приложение перед запуском.

На прошлой неделе мы разрешили нашим пользователям создавать новые игровые страницы, когда игра, которую они ищут, отсутствует в базе данных. Это предпоследняя часть этой серии, поэтому мы собираемся доработать последние детали веб-приложения перед запуском.

Если вы хотите сразу перейти к коду, вы можете найти его здесь.

Взаимодействие с панелью поиска

Чтобы улучшить взаимодействие с пользователем, мы добавим две небольшие функции.

Панель поиска сбрасывается, когда пользователь переходит на страницу создания, и, чтобы избежать случайного перехода при нажатии на панель поиска, она будет отключена. Если пользователь заполняет данные для новой записи и щелкает или вкладки в строку поиска, он потеряет все заполненные данные, что ухудшит впечатление.

Поскольку основная цель веб-приложения заключается в том, чтобы пользователи выполняли поиск игр, когда они нажимают на панель поиска, они переходят к списку, и ввод будет сфокусирован.

Адаптивный дизайн

Tailwind CSS упрощает процесс создания адаптивного дизайна. Библиотека применяет подход, ориентированный на мобильные устройства, поэтому нам нужно сначала продумать дизайн для минимального размера экрана, который мы хотим поддерживать, и изменить ограничения или классы по мере увеличения размера экрана.

Tailwind CSS поставляется с набором точек останова, которые можно изменить в файле конфигурации. По умолчанию считается, что xs является sm следующей большей точкой останова.

Панель навигации

Для мобильных меняем порядок. Сначала будет логотип и ссылки для навигации, а затем панель поиска займет всю ширину.

Для настольных компьютеров он останется прежним: логотип - панель поиска - ссылки в указанном порядке, а панель поиска занимает ограниченное пространство.

Макет

Для мобильных устройств зарезервированные для рекламы места будут располагаться сверху и снизу на максимальной высоте.

Для настольных компьютеров зарезервированные для рекламы места будут расположены в виде боковых столбцов с максимальной шириной.

Список

Когда игр не было, я не заметил, что текст смещен по центру.

.no-game {
  /* added text-center */
  @apply flex flex-col items-center text-center pt-20;
}

Контакт

Для мобильных устройств прокладки будут немного меньше, а для настольных компьютеров - немного больше.

Создавать

На мобильных устройствах нам нужно адаптировать позиционирование, чтобы элементы располагались один под другим.

На рабочем столе он останется таким, каким был в настоящее время, с использованием горизонтального пространства.

Деталь

Для страницы с подробностями мы вносим аналогичные корректировки.

Заключение

Теперь наше веб-приложение готово к работе! Спасибо, что прочитали предпоследнюю запись этой серии. На следующей неделе финал!

Вы можете увидеть весь код до этого момента в https://github.com/omirobarcelo/retro-ps5/tree/part6.

Больше контента на plainenglish.io