[NORMAL 25-07-2022] Developing Creative Tim Website Using Angular Framework by karmatenzi · Pull Request #1 · karmatenzi/angular-assignment

karmatenzi · 2022-07-22T11:55:20Z

No description provided.

src/app/creative-team/dashboard/cards/cards.component.html

src/app/creative-team/dashboard/dashboard.component.html

src/app/creative-team/dashboard/graphs/graphs.component.html

src/app/shared/footer/footer.component.scss

src/app/shared/shared.module.ts

src/styles.scss

sangayt1997 · 2022-07-22T13:10:44Z

@karmatenzi , add the screenshot when you have finalise your code

src/app/creative-team/dashboard/tables/tables.component.html

src/app/creative-team/dashboard/cards/cards.component.ts

angular.json

src/app/creative-team/creative-team.component.scss

src/app/creative-team/creative-team.module.ts

src/app/creative-team/dashboard/dashboard.component.html

src/app/creative-team/dashboard/graphs/graph-icon/graph-icon.component.ts

src/app/creative-team/dashboard/graphs/graphs.component.html

src/app/creative-team/dashboard/tables/tables.component.html

src/app/shared/header/header.component.scss

sangayt1997 · 2022-07-25T18:33:06Z

@karmatenzi
To be followed:

Have utilities, overwrite and variables SCSS,
avoid using br tag instead try to used utilities helper class and flex layout
Follow BEM properly with appropriate class name
If you want to overwrite the packages class name in the particular components try to wrap with the defined class and overwrite styling or else overwrite in the overwrite styling SCSS file.
For new html files you should have the particular screenshot so that reviewer can review the particular component properly.
Try to name the image assets with underscore "_".
Code refactor needed in the Readme file like ng have to replace with yarn now and as a developer we have to do proper documentation so that other developer will understand well before they start in the new project(It's just the information).

src/app/creative-team/dashboard/graphs/graphs.component.scss

src/app/creative-team/dashboard/tables/tables.component.html

src/app/creative-team/dashboard/tables/tables.component.scss

src/app/shared/footer/footer.component.html

src/app/shared/footer/footer.component.scss

src/app/shared/header/header.component.html

karmatenzi · 2022-07-28T17:37:39Z

src/app/creative-team/dashboard/tables/tables.component.html

+          <div fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="start center">
+            <button mat-icon-button>
+              <mat-icon
+                matTooltip="Edit Task"


karmatenzi · 2022-07-28T17:40:21Z

src/app/creative-team/user-profile/user-profile.component.html

+      <div fxLayout="row" fxLayoutAlign="space-evenly center" fxLayoutGap="18px">
+        <mat-form-field fxFlex="50">
+          <mat-label>First Name</mat-label>
+          <input matInput>


karmatenzi · 2022-07-28T17:41:00Z

src/app/creative-team/table-list/table-list.component.html

+      <td mat-cell *matCellDef="let element"> {{element.name}} </td>
+    </ng-container>
+
+    <!-- Weight Column -->


src/app/creative-team/dashboard/graphs/graph-icon/graph-icon.component.html

src/app/creative-team/dashboard/tables/tables.component.html

sangayt1997 · 2022-07-28T18:24:39Z

src/app/creative-team/dashboard/tables/tables.component.html

+          <td mat-cell *matCellDef="let element"> {{element.position}} </td>
+        </ng-container>
+
+        <!-- Name Column -->


using *ngFor to pass the data from the array could have reduce the line of code

sangayt1997 · 2022-07-28T18:35:23Z

src/app/creative-team/user-profile/user-profile.component.html

+  <div fxFlex="33">
+    <mat-card fxLayout="column" fxLayoutAlign="center center" class="profile card--shadow">
+      <mat-card-header class="profile__header">
+        <div mat-card-avatar class="profile__image"></div>


rather used the image tag and pass the image src here and width and height, when you pass the in the div you are passing as background image not as avatar image

sangayt1997 · 2022-07-28T18:35:56Z

src/app/creative-team/user-profile/user-profile.component.scss

+
+  &__image {
+    background-image: url('https://demos.creative-tim.com/material-dashboard-angular2/assets/img/faces/marc.jpg');
+    background-size: cover;


please check the above comment for this styling

src/app/shared/header/header.component.scss

src/app/shared/sidebar/sidebar.component.html

sangayt1997 · 2022-07-28T18:37:43Z

src/app/shared/sidebar/sidebar.component.html

+    <mat-divider></mat-divider>
+    <div class="sidebar__content card--color mt-20 font-size-18">
+      <a mat-list-item routerLinkActive="list-item-active" routerLink="/" class="card--color">
+        <mat-icon>dashboard</mat-icon>


you could have used the angular material List component with icons

src/app/shared/sidebar/sidebar.component.scss

src/assets/styles/_mixin.scss

src/assets/styles/_utilities.scss

sangayt1997 · 2022-07-28T18:44:03Z

src/assets/styles/_utilities.scss

+}
+.button--design{
+  border: none;
+  font-weight: 300;


this two will have the separate utilities

src/assets/styles/_variables.scss

feat(assignment): dashboard, footer, sidebar and header ui

f8ac914

karmatenzi requested a review from sangayt1997 July 22, 2022 12:03

sangayt1997 reviewed Jul 22, 2022

View reviewed changes

src/app/creative-team/dashboard/cards/cards.component.html Outdated Show resolved Hide resolved

sangayt1997 reviewed Jul 22, 2022

View reviewed changes

src/app/creative-team/dashboard/cards/cards.component.html Outdated Show resolved Hide resolved

sangayt1997 reviewed Jul 22, 2022

View reviewed changes

src/app/creative-team/dashboard/dashboard.component.html Outdated Show resolved Hide resolved

sangayt1997 reviewed Jul 22, 2022

View reviewed changes

src/app/creative-team/dashboard/dashboard.component.html Outdated Show resolved Hide resolved

sangayt1997 reviewed Jul 22, 2022

View reviewed changes

src/app/creative-team/dashboard/graphs/graphs.component.html Outdated Show resolved Hide resolved

sangayt1997 reviewed Jul 22, 2022

View reviewed changes

src/app/shared/footer/footer.component.scss Outdated Show resolved Hide resolved

sangayt1997 reviewed Jul 22, 2022

View reviewed changes

src/app/shared/shared.module.ts Show resolved Hide resolved

sangayt1997 reviewed Jul 22, 2022

View reviewed changes

src/styles.scss Outdated Show resolved Hide resolved

improved layout and added charts

fe02d08

karmatenzi commented Jul 24, 2022

View reviewed changes

src/app/creative-team/dashboard/tables/tables.component.html Show resolved Hide resolved