Задача: Одеть готовую верстку на работающий angular6 (angular-material) скелет сайта.

Кто нужен: Верстальщик с опытом работы с angular2+.

Что есть: Верстка уже существует в виде статичных html и css файлов (http://gvozd.org/lk2/).

Сервис (сайт) находится в процессе разработки и представляет из себя стандартное angular-приложение. Используются angular-material (https://material.angular.io/) компоненты.



Что требуется: Нужно «ангуляризовать» верстку: перенести разметку и стили из статичных макетов в angular-шаблоны. А то, что уже что уже реализовано в приложении (таблицы, элементы интерфейса, интерактивность, все material компоненты) нужно просто поставить на свои места. И сделать этим компонентам стили, чтобы они более-менее вписывались в дизайн по цветам, шрифтам и размерам.

Например, это: http://212.224.113.78:2005/crawler-queue-elements-diff

Одеть в это: http://gvozd.org/lk2/page1/



Помимо всех страниц из http://gvozd.org/lk2 нужно будет что-то придумать для 404 страницы, страниц логина\логаута и прочих стандартных форм. Их нужно будет «собрать из запчастей» имеющихся шаблонов. И также одеть на соответствующие angular компоненты (когда они будут готовы).



Необходимые скиллы: 1.html5&css3

@media, css-transitions, flexbox.

2.angular6

Понимание базовых принципов angular2+, в частности: шаблонов и компонентов, как это связано и работает. Способность прочитать и написать выражение для ngFor, ngClass, ngIf, routerLink.

Понимание ngForm, formGroup, FormBuilder.

Понимание angular style scope – чем Component Styles отличается от Global Styles.

Иметь представление об angular router.



3.angular-material

Опыт работы с angular-material или способность быстро освоить https://material.angular.io/components/categories. В частности, вам должна быть понятна такая разметка:

<ng-container matColumnDef="userName">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let user"> {{user.name}} </td>
</ng-container>

4.typescript

Непосредственно код для компонентов писать не нужно – всё уже работает. Максимум, что потребуется написать в .ts самому - это добавить переменную в компонент, если вдруг задумаете добавить какой-то свой ngFor в шаблон. Однако, при необходимости, нужно уметь смотреть .ts код компонентов и понимать для чего в шаблонах существуют те или иные переменные.