Для старта проекта выполните npm i && npm start, перейдите по адресу http://localhost:4200
Выбирайте те пункты и то количество, которое считаете нужным для демонстрации своих возможностей. Приветствуется полное выполнение задания.
В заданни нет точных макетов, используйте собственное наработанное чуство вкуса. SVG тело иконок можно заменит на свое. Изображения можно заменить, но сохранить пропорции. Используйте пример src/assets/example1.png для предстваления страницы в desktop. Используйте пример src/assets/example2.png для предстваления страницы в mobile.
Необходимы только поверхностные знания Angular, все основные механизмы уже настроены. Ниже представлены список статей, которые помогут angular новичкам решить все задачи:
- https://angular.io/guide/component-styles
- https://habr.com/ru/companies/infowatch/articles/353150/
- https://www.pluralsight.com/guides/querying-the-dom-with-@viewchild-and-@viewchildren
- https://decodedscript.com/ways-of-binding-css-variables-in-angular/
Тем не менее знание Angular селекторов работы со стилями необходимо знать.
Не допускается(задача будет автоматически отклонена) снимать инкапсуляцию компонентов или использовать ng-deep селектор проброса стилей сверху вниз, для этого есть другие возможности.
Не допускается использовать стилевые фреймворки, только кастом или возможности Angular(Animation, Renderer2, etc)
-
Приведите цвета, отступы, расположение элементов в эстетический вид, см src/assets/example1.png как пример
-
Добавьте mobile версию ниже 1000px, содержимое ячеек можно собрать справа от фото в виде списка, см src/assets/example2.png, как пример
-
Четные элементы списка должны иметь другой фон. Не допускается снимать инкапсуляцию компонентов или использовать ng-deep селектор. Не дорпускается убирать
display: contents;компоненты Item -
При наведении на элемент, фон и элементы должны инвертироваться. Например, фон - темный, текст и иконка светлые.
-
Избегайте px единицу. Будьте готовы, что styles.scss -> html -> font-size будет меняться проверяющим c 13px до 16px, а так же с 12pt до 14pt в печатном виде.
-
Inactive строка имеет блеклый вид, но не за счет прозрачности
-
Иконка удаления в верхней кнопке Delete и та же иконка в Item action строке должны отличаться цветом. Для этой реализации нельзя использовать angular @Input проброс параметров внутри Icon компоненты, иначе пункт не засчитается
-
Текст описания может быть слишком длинный. Ограничьте описание максимум в 10 строк(независимо от ширины его ячейки, в идеале, но не обязательно, обрабатывать resize события). UX методам дайте знать, что обрезанный текст описания не закончен. Дайте возможность его дочитать click/tap или hover событием.
-
Печатная версия страницы должна подготовится под Letter формат бумаги. В печатном виде нужно убрать все action элементы, убрать колоку status, объединить содержимое ячеек Foto и Label. Стараться не разрывать Item контент между страницами.
-
Добавить анимацию появления/исчезания строки. Тип анимации и способ ее реализации на ваш выбор.
-
Добавьте элемент текстового поиска без функционала поиска. Достаточно сделать элемент в html/css внутри компонента MainPage
-
Адаптируйте страницу под дневной и ночной режим. Флаг режима получать от браузера/ОС или добавить свой элемент переключения. Идеальная ситуация, когда наступает вечер и страница поменяла цветовой режим без перезагрузки страницы.
-
При появлении элементов app-item уберите заглушку empty-item толко с помощью css