|
@@ -1,45 +1,104 @@
|
|
<section
|
|
<section
|
|
- class="task-managament h-100"
|
|
|
|
|
|
+ class="task-managament"
|
|
fxLayout="row wrap"
|
|
fxLayout="row wrap"
|
|
fxLayoutAlign="start start"
|
|
fxLayoutAlign="start start"
|
|
>
|
|
>
|
|
<div fxFlex.lt-md="100" fxFlex.gt-sm="20">
|
|
<div fxFlex.lt-md="100" fxFlex.gt-sm="20">
|
|
<h1 class="bold">Task Management</h1>
|
|
<h1 class="bold">Task Management</h1>
|
|
- <div class="projects">
|
|
|
|
- <p class="bold">Projects</p>
|
|
|
|
- <ul>
|
|
|
|
- <li>Dashboard Project</li>
|
|
|
|
- <li>Mobile App</li>
|
|
|
|
- <li>Web Platform</li>
|
|
|
|
- <li>Dashboard Design</li>
|
|
|
|
- </ul>
|
|
|
|
- </div>
|
|
|
|
- <div class="team-members">
|
|
|
|
- <p class="bold">Team Members</p>
|
|
|
|
- <ul>
|
|
|
|
- <li class="gap-10" fxLayout="row" fxLayoutAlign="start start">
|
|
|
|
|
|
+ <app-projeccts></app-projeccts>
|
|
|
|
+ <app-teams-member></app-teams-member>
|
|
|
|
+ </div>
|
|
|
|
+ <div
|
|
|
|
+ fxFlex.lt-md="100"
|
|
|
|
+ fxFlex.gt-sm="80"
|
|
|
|
+ fxLayout="column"
|
|
|
|
+ fxLayoutAlign="space-between stretch"
|
|
|
|
+ class="gap-20"
|
|
|
|
+ >
|
|
|
|
+ <main fxLayout="row" fxLayoutAlign="space-between center">
|
|
|
|
+ <div
|
|
|
|
+ class="task-managament__dashboard"
|
|
|
|
+ fxFlex.lt-md="100"
|
|
|
|
+ fxFlex.gt-sm="50"
|
|
|
|
+ >
|
|
|
|
+ <p>Dashboard Project</p>
|
|
|
|
+ <app-progess [color]="'white'" [showSpan]="true"></app-progess>
|
|
|
|
+ </div>
|
|
|
|
+ <ul fxLayout="row" fxLayoutAlign="start center">
|
|
|
|
+ <li>
|
|
<img src="../../../../assets/images/avatar.png" alt="" title="" />
|
|
<img src="../../../../assets/images/avatar.png" alt="" title="" />
|
|
- <div>
|
|
|
|
- <p>User name</p>
|
|
|
|
- <span>Online</span>
|
|
|
|
- </div>
|
|
|
|
</li>
|
|
</li>
|
|
- <li class="gap-10" fxLayout="row" fxLayoutAlign="start start">
|
|
|
|
|
|
+ <li>
|
|
<img src="../../../../assets/images/avatar.png" alt="" title="" />
|
|
<img src="../../../../assets/images/avatar.png" alt="" title="" />
|
|
- <div>
|
|
|
|
- <p>User name</p>
|
|
|
|
- <span>Online</span>
|
|
|
|
- </div>
|
|
|
|
</li>
|
|
</li>
|
|
- <li class="gap-10" fxLayout="row" fxLayoutAlign="start start">
|
|
|
|
|
|
+ <li>
|
|
<img src="../../../../assets/images/avatar.png" alt="" title="" />
|
|
<img src="../../../../assets/images/avatar.png" alt="" title="" />
|
|
- <div>
|
|
|
|
- <p>User name</p>
|
|
|
|
- <span>Online</span>
|
|
|
|
- </div>
|
|
|
|
</li>
|
|
</li>
|
|
|
|
+ <li class="count">+15</li>
|
|
</ul>
|
|
</ul>
|
|
|
|
+ </main>
|
|
|
|
+ <div class="task-managament__tasks">
|
|
|
|
+ <div
|
|
|
|
+ fxLayout="row"
|
|
|
|
+ fxLayoutAlign="space-between center"
|
|
|
|
+ class="border-bottom-white pb-0-5"
|
|
|
|
+ >
|
|
|
|
+ <p class="bold">
|
|
|
|
+ Total Tasks
|
|
|
|
+ <span>30</span>
|
|
|
|
+ </p>
|
|
|
|
+
|
|
|
|
+ <ul fxLayout="row" fxLayoutAlign="end center">
|
|
|
|
+ <li
|
|
|
|
+ [ngClass]="{ 'active-tab': acctiveNumber === 0 }"
|
|
|
|
+ (click)="onCChangeTab(0)"
|
|
|
|
+ >
|
|
|
|
+ <img src="" alt="" title="" />
|
|
|
|
+ <span>Board</span>
|
|
|
|
+ </li>
|
|
|
|
+ <li
|
|
|
|
+ (click)="onCChangeTab(1)"
|
|
|
|
+ [ngClass]="{ 'active-tab': acctiveNumber === 1 }"
|
|
|
|
+ >
|
|
|
|
+ <img src="" alt="" title="" /> <span>Table</span>
|
|
|
|
+ </li>
|
|
|
|
+ <li
|
|
|
|
+ (click)="onCChangeTab(2)"
|
|
|
|
+ [ngClass]="{ 'active-tab': acctiveNumber === 2 }"
|
|
|
|
+ >
|
|
|
|
+ <img src="" alt="" title="" /> <span>List</span>
|
|
|
|
+ </li>
|
|
|
|
+ </ul>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <div
|
|
|
|
+ fxLayout="row"
|
|
|
|
+ fxLayoutAlign="start start"
|
|
|
|
+ class="task-managament__tasks__type"
|
|
|
|
+ >
|
|
|
|
+ <div class="to-do" fxFlex.gt-md="25" fxFlex.lt-md="100">
|
|
|
|
+ <h3 class="bold"><span class="to-to-span"></span> To Do</h3>
|
|
|
|
+ <app-task></app-task>
|
|
|
|
+ <app-task></app-task>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="in-progress" fxFlex.gt-md="25" fxFlex.lt-md="100">
|
|
|
|
+ <h3 class="bold"><span class="inprogress-span"></span>In Progress</h3>
|
|
|
|
+ <app-task></app-task>
|
|
|
|
+ <app-task></app-task>
|
|
|
|
+ <app-task></app-task>
|
|
|
|
+ <app-task></app-task>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="need-rivew" fxFlex.gt-md="25" fxFlex.lt-md="100">
|
|
|
|
+ <h3 class="bold"><span class="review-span"></span> Need Review</h3>
|
|
|
|
+ <app-task></app-task>
|
|
|
|
+ <app-task></app-task>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="done" fxFlex.gt-md="25" fxFlex.lt-md="100">
|
|
|
|
+ <h3 class="bold"><span class="done-span"></span>Done</h3>
|
|
|
|
+ <app-task></app-task>
|
|
|
|
+ <app-task></app-task>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <div fxFlex.lt-md="100" fxFlex.gt-sm="80"></div>
|
|
|
|
</section>
|
|
</section>
|