Техническое задание:
Средствами Vue.js реализуйте функционал для отображения превью списка фотографий.
Приложение состоит из одной страницы с попапом в центре, в котором отображается список фотографий. Размер попапа имеет фиксированную высоту. Ячейки с названиями фото выводятся внутри попапа в 4 равные колонки. Если высота колонки больше высоты попапа - следует реализовать внутренний скролл.
Реализация в 2 этапа
1 этап
Необходимо вывести список фотографий на странице в соответствии с макетом. По-умолчанию список фото выводится в алфавитном порядке. Все названия начинающиеся с одинаковой буквы формируются в блоки, где первым элементом является первая буква. Не допускается разрыв блока по разным колонкам.
Каждый элемент списка должен содержать миниатюру изображения, название файла, символ добавления в избранное или символ удаления из избранного в зависимости от текущего состояния.
####2 этап В header попапа отображаются 2 названия фильтров
- “В алфавитном порядке”
- “Избранное"
При выбранном фильтре “В алфавитном порядке” - в попапе отображается список фотографий объединенных в блоки по альбомам. Первый элемент блока - название альбома. Блоки с альбомами выводятся по алфавиту.
При выбранном фильтре “Избранное” - в попапе отображается список фотографий, добавленных в избранное без группировки.
Списки фото, а также их миниатюры доступны тут. Для удобства использования список следует обрезать до 100 штук.
Требования к функционалу:
- Все действия на сайте должны происходить без перезагрузки страницы.
- После перезагрузки страницы состояние списка должно сохраняться.
Технические требования:
- В качестве языка разработки используется JavaScript библиотека Vue.js;
- В качестве препроцессора SCSS;
- Верстка должна быть выполнена в соответствии с данным шаблоном. Без использования UI библиотек;
- Адаптивность не обязательна, но приветствуется;
- Логика приложения должна быть разбита на разумное количество самодостаточных Vue-компонентов;
- Код должен соответствовать code style декларированному в соответствующих файлах (.eslintrc.js и stylelint.config.js)
Тестовое задание должно быть представлено в следующем виде:
- Ссылка на публичный репозиторий (GitHub, BitBucket, GitLab) с исходным кодом.
- Ссылка на сайт для тестирования функционала будет плюсом.
Особое внимание стоит обратить на следующие моменты:
- Код должен быть написан понятно и аккуратно, с соблюдением табуляции и прочих элементов написания, без лишних элементов и функций, не имеющих отношения к функционалу тестового задания.
- Читабельность и наличие элементарной архитектуры.