Сделать верстку по готовому дизайну с использованием Angular

20 000 руб. за проект • наличный расчёт, безналичный расчёт
22 ноября 2018, 16:46 • 8 откликов • 68 просмотров
Подготовлено несколько дизайн-макетов основных интерфейсов. Необходимо помочь с версткой, то есть сделать только разметку страниц, использую компоненты Angular Material.

Проект на платформе ASP.NET Core 2.1 + Postgres Pro.
Клиентские инструменты:
1. Angular 7.0.2 CLI
2. Angular Material 7.0.2
При сборке веб-приложения используем SCSS.
Для Material подключается тема со стилями:
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css' ;
Требуется взять за основу вот эту стандартную тему Material и модифицировать её под требуемый дизайн, т.е. свести к минимуму применение кастомных стилей.

Теперь кратко о дизайн-макетах.
Все они основаны на единой концепции – есть верхнее меню (лента с логотипом, кнопками и управлением пользователем), небольшой блок ниже (с отображением агрегатов, информации или фильтров) и ниже основное тело страницы.
1) Макет "Реестр". Попадаем в этот раздел при нажатии на кнопку "Реестр" из главного меню. Блок с информацией – фильтры. Тело – грид с пагинацией, выгрузкой, печатью и с возможностью добавления новой записи в грид через кнопку "Создать".
2) Макет "Карточка". Попадаем в этот раздел по двойному нажатию на строку из реестра. Блок с информацией – ФИО, класс и уровень (на макете "индикаторы 2" отражена цветовая легенда). Тело – сверху кнопки (Общая информация, индикаторы и т.д.) и отображение информации в табличном виде
3) Макет "Индикаторы 1". Попадаем в этот раздел при нажатии на кнопку "Индикаторы" из тела "Карточка". Блок с информацией – остается как на "Карточка". В теле сохраняются кнопки, ниже отображается таймлайн (он разделен на равные временные отрезки, которые подкрашиваются по легенде, как из блока выше, по нему можно перемещаться влево/вправо и все эти отрезки должны быть кликабельными), а ниже размещен грид (пагинация, выгрузка и т.д.) с информацией. В зависимости от клика на определенный участок таймлайна данные в гриде меняются. Также есть кнопка "Редактировать", которая нам откроет раздел "Индикаторы 2"
4) Макет "Индикаторы 2". Блок с информацией – остается как на "Карточка". Тело – отображается грид с возможностью отметки каждой строки (CheckBox). В столбце "Комментарий" должна быть возможность ввода информации. При нажатии на кнопку "Сохранить" мы возвращаемся в раздел "Индикаторы 1"
5) Макет "Залповый ввод 1". Попадаем в этот раздел при нажатии на кнопку "Массовый ввод" в главном меню. Блок с информацией – отображаются фильтры. В теле – грид, причем в разных режимах (в зависимости от кнопки Редактировать/Сохранить). В данном случае у нас грид с просмотром информации, для удобства должно быть выделение строки и столбца при ведении курсором по гриду. В верхнем левом меню квадратика фикcируется пометка, что там есть комментарий. При наведении на квадратик комментарий должен всплывать. Сверху грида предусмотрен выбор даты, с помощью которой мы отображаем ту или иную информацию в гриде.
6) Макет "Залповый ввод 2". Переходим при нажатии на кнопку "Редактировать" из предыдущего макета 5. Здесь тот же грид, но с добавлением к каждой строке CheckBox для отметки. И добавляется зеленый комментарий на внесенную дату, сверху грида. Также сверху грида появляется кнопка для добавления комментария. При нажатии на нужную ячейку, а затем на кнопку "Комментарий" всплывает popup для ввода комментария.
7) Макет "Залповый ввод 3". Демонстрирует, что все фильтры должны быть с контекстным поиском.
8) Макет "Справочник 02". Попадаем в этот раздел при нажатии на кнопку "Справочники" из Главного меню. Блок с информацией – фильтры. Тело – грид с информацией. Выбор справочника из фильтра осуществляется по ComboBox