文件列表:

.editorconfig (272, 2023-12-06)
.vscode/ (0, 2023-12-06)
.vscode/extensions.json (156, 2023-12-06)
.vscode/settings.json (497, 2023-12-06)
LICENSE (11357, 2023-12-06)
angular.json (1877, 2023-12-06)
package-lock.json (411631, 2023-12-06)
package.json (683, 2023-12-06)
src/ (0, 2023-12-06)
src/app/ (0, 2023-12-06)
src/app/app.module.ts (540, 2023-12-06)
src/app/consts/ (0, 2023-12-06)
src/app/consts/icons.enum.ts (40, 2023-12-06)
src/app/consts/statuses.enum.ts (69, 2023-12-06)
src/app/icon/ (0, 2023-12-06)
src/app/icon/icon.component.html (432, 2023-12-06)
src/app/icon/icon.component.scss (0, 2023-12-06)
src/app/icon/icon.component.ts (369, 2023-12-06)
src/app/item/ (0, 2023-12-06)
src/app/item/item.component.html (271, 2023-12-06)
src/app/item/item.component.scss (76, 2023-12-06)
src/app/item/item.component.ts (1012, 2023-12-06)
src/app/main-page/ (0, 2023-12-06)
src/app/main-page/main-page.component.html (781, 2023-12-06)
src/app/main-page/main-page.component.scss (254, 2023-12-06)
src/app/main-page/main-page.component.ts (1913, 2023-12-06)
src/app/models/ (0, 2023-12-06)
src/app/models/item.model.ts (164, 2023-12-06)
src/assets/ (0, 2023-12-06)
src/assets/example 2.png (79211, 2023-12-06)
src/assets/example1.png (240313, 2023-12-06)
src/assets/items/ (0, 2023-12-06)
src/assets/items/foto1.jpg (152512, 2023-12-06)
src/assets/items/foto2.png (101757, 2023-12-06)
src/favicon.ico (948, 2023-12-06)
src/index.html (307, 2023-12-06)
src/main.ts (214, 2023-12-06)
... ...

# Тестовое задание на знание верстки, анимации в рамках Angular Для старта проекта выполните `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

近期下载者：

相关文件：

评论：[我要评论] [举报此文件]

收藏者：