Окно с фильтрами, которые можно применять к списку экотроп.

Прототипы

Критерии приемки:

  1. Окно фильтра открывается по нажатию на кнопку “Фильтр” на странице Каталог .
  2. Для мобильной версии: окно фильтра открывается на весь экран.
  3. Окно фильтра закрывается по нажатию на иконку закрытия.
  4. Для планшетной и десктопной версии: окно фильтра также закрывается по нажатию в любом месте экрана вне его.
  5. Обновление списка экотроп происходит динамически, без перезагрузки страницы, при каждом при каждом изменении набора фильтров.
  6. Для мобильной версии: если фильтр не лезает в экран полностью, появлется полоса прокрутки.
  7. Для планшетной и десктопной версии: высота окна фильтра подстраивается под содержимое.
  8. Элементы окна фильтра представлены в таблице ниже.
Элемент Тип Критерии Этап реализации
1 Заголовок Заголовок Н3 1. Объем не более 60 символов.
  1. Содержит текст “Фильтр”. | MVP | | 2 | Закрыть | Иконка | 1. По нажатию на иконку закрытия окно закрывается.
  2. Иконка закрытия представлена векторным изображением. | MVP | | 3 | Фильтр региона | Раскрывающийся список | 1. Содержит список регионов Российской Федерации.
  3. По умолчанию список свернут.
  4. Свернутый список без выбранных регионов содержит текст “Выберите регион” и иконку “развернуть”.
  5. Если в каталоге есть экотропы, соответствующие местоположению пользователя, система вносит в список регион, соответствующий местоположению пользователя по умолчанию.
  6. Система позволяет выбрать только те регионы, в которых есть представленные в каталоге экотропы.
  7. Свернутый список с выбранным регионом содержит текст “Выбрано регионов - n”, где n - количество выбранных регионов.
  8. По нажатию на иконку “развернуть” система разворачивает список.
  9. Список разворачивается “поверх” содержимого фильтра”.
  10. Развернутый список содержит строку поиска и доступный для выбора перечень регионов с чекбоксами.
  11. Строка поиска содержит иконку поиска и поле для набора текста.
  12. Каретка набора текста при разворачивании фильтра сразу активна в поле для набора текста.
  13. При вводе символов строку поиска, система выводит вместо алфавитного перечня регионов список регионов, содержащих в начале названия введенную пользователем комбинацию символов.
  14. Список регионов обновляется динамически, без перезагрузки страницы, после ввода/удаления каждого следующего символа.
  15. Совпадающая комбинация символов в названии региона выделяется жирным шрифтом.
  16. Система предоставляет возможность выбрать сразу несколько вариантов регионов.
  17. При выборе хотя бы одного региона, строка поиска заменяется текстом “Выбрано регионов - n”, где n - количество выбранных регионов.
  18. По нажатию на иконку “свернуть” система сворачивает список. | MVP | | 4 | Фильтр сложности | Группа иконок | 1. Содержит заголовок с текстом “Сложность”.
  19. Фильтр сложности состоит из трех иконов с подписями: Простая, Средняя, Сложная.
  20. По умолчанию все иконки активны.
  21. Если выбраны какие-либо другие фильтры, активны только иконки доступных уровней сложности.
  22. Иконки представлены векторными изображениями.
  23. Система предоставляет возможность выбрать сразу несколько вариантов сложности.
  24. По умолчанию иконки находятя в состоянии “не выбрано”.
  25. При нажатии на иконку сложности система активирует состояние “выбрано” для соответствующего уровня сложности.
  26. В состоянии “выбрано” иконка подсвечивается и имеет иконку удаления в правом верхнем углу.
  27. При нажатии на иконку удаления система активирует состояние “не выбрано” для соответствующего уровня сложности.
  28. При нажатии на иконку сложности в состоянии “выбрано” система активирует состояние “не выбрано” для соответствующего уровня сложности. | MVP | | 5 | Фильтр длины | Ползунок | 1. Содержит заголовок с текстом “Длина (км)”.
  29. По умолчанию выбран весь диапазон значений.
  30. Диапазон значений ползунка - от 0 до 150 км.
  31. Шаг значений ползунка - 0,5 км.
  32. Если выбраны какие-либо другие фильтры, диапазон значений фильтра сжимается до доступных значений. | MVP | | 6 | Фильтр продолжительности | Ползунок | 1. Содержит заголовок с текстом “Время в пути (ч)”.
  33. Заголовок имеет значок всплывающей подсказки.
  34. При нажатии на значок всплывающей подсказки или наведении на него курсора система выводит сообщение с текстом “Из расчёта скорости движения 3 км/ч”.
  35. При нажатии в любом месте экрана вне сообщения или отведении курсора со значка всплывающей подсказки система скрывает сообщение.
  36. По умолчанию выбран весь диапазон значений.
  37. Диапазон значений ползунка - от 0 до 72 ч.
  38. Шаг значений ползунка - 0,5 ч.
  39. Если выбраны какие-либо другие фильтры, диапазон значений фильтра сжимается до доступных значений. | MVP | | 7 | Показать | Кнопка | 1. Кнопка всегда активна.
  40. Кнопка содержит тест “Показать n”, где n - количество доступных к показу экотроп с сочетанием выбранных параметров фильтра.
  41. Количество доступных к показу экотроп обновляется динамически, без перезагрузки страницы, при каждом изменении набора фильтров.
  42. По нажатию на кнопку система закрывает модальное окно фильтра и демонстрирует пользователю отфильтрованный список экотроп на странице Каталог . | MVP | | 8 | Очистить | Кнопка | 1. Кнопка всегда активна.
  43. По нажатию на кнопку система очищает набор примененных фильтров. | MVP |