diff --git a/package-lock.json b/package-lock.json index e06b95f..1d09ff9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,6 +27,7 @@ "firebase": "^9.9.1", "rxjs": "~7.5.0", "tslib": "^2.3.0", + "uuid": "^8.3.2", "zone.js": "~0.11.4" }, "devDependencies": { @@ -39,6 +40,7 @@ "@angular/cli": "~14.1.0", "@angular/compiler-cli": "^14.1.0", "@types/jasmine": "~4.0.0", + "@types/uuid": "^8.3.4", "@typescript-eslint/eslint-plugin": "5.29.0", "@typescript-eslint/parser": "5.29.0", "angular-cli-ghpages": "^1.0.3", @@ -4179,6 +4181,12 @@ "@types/node": "*" } }, + "node_modules/@types/uuid": { + "version": "8.3.4", + "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.4.tgz", + "integrity": "sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw==", + "dev": true + }, "node_modules/@types/ws": { "version": "8.5.3", "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz", @@ -8142,6 +8150,7 @@ "version": "2.3.2", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "dev": true, "hasInstallScript": true, "optional": true, "os": [ @@ -15236,7 +15245,6 @@ "version": "8.3.2", "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", - "dev": true, "bin": { "uuid": "dist/bin/uuid" } @@ -18863,6 +18871,12 @@ "@types/node": "*" } }, + "@types/uuid": { + "version": "8.3.4", + "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.4.tgz", + "integrity": "sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw==", + "dev": true + }, "@types/ws": { "version": "8.5.3", "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz", @@ -21724,6 +21738,7 @@ "version": "2.3.2", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "dev": true, "optional": true }, "function-bind": { @@ -26920,8 +26935,7 @@ "uuid": { "version": "8.3.2", "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", - "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", - "dev": true + "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==" }, "v8-compile-cache": { "version": "2.3.0", diff --git a/package.json b/package.json index 503a5d8..d6c63f3 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "firebase": "^9.9.1", "rxjs": "~7.5.0", "tslib": "^2.3.0", + "uuid": "^8.3.2", "zone.js": "~0.11.4" }, "devDependencies": { @@ -44,6 +45,7 @@ "@angular/cli": "~14.1.0", "@angular/compiler-cli": "^14.1.0", "@types/jasmine": "~4.0.0", + "@types/uuid": "^8.3.4", "@typescript-eslint/eslint-plugin": "5.29.0", "@typescript-eslint/parser": "5.29.0", "angular-cli-ghpages": "^1.0.3", diff --git a/src/app/app.module.ts b/src/app/app.module.ts index edc88ea..8843942 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -13,6 +13,7 @@ import { AngularFireAuthModule } from '@angular/fire/compat/auth'; import { ErrorModule } from './error/error.module'; import { DemoBoardComponent } from './home/demo-board/demo-board.component'; import { KanbanModule } from './kanban/kanban.module'; +import { UserModule } from './user/user.module'; @NgModule({ declarations: [AppComponent, HomeComponent, DemoBoardComponent], diff --git a/src/app/error/error.scss b/src/app/error/error.scss index 907afb9..fef89c3 100644 --- a/src/app/error/error.scss +++ b/src/app/error/error.scss @@ -2,7 +2,7 @@ display: flex; justify-content: center; align-items: center; - margin: 200px; + margin: 5vw; } .icon { diff --git a/src/app/home/demo-board/demo-board.component.html b/src/app/home/demo-board/demo-board.component.html index 879c911..bc8a208 100644 --- a/src/app/home/demo-board/demo-board.component.html +++ b/src/app/home/demo-board/demo-board.component.html @@ -1 +1,10 @@ -

It works

+
+
+ +
+

Kanban Board of Foo Bar

+

example@demo.com

+
+
+ +
diff --git a/src/app/home/demo-board/demo-board.component.scss b/src/app/home/demo-board/demo-board.component.scss index 710cecc..7637fe5 100644 --- a/src/app/home/demo-board/demo-board.component.scss +++ b/src/app/home/demo-board/demo-board.component.scss @@ -1 +1,24 @@ -/* Empty */ +.container { + margin: 30px; +} + +.header { + display: flex; + align-items: center; +} + +.avatar { + margin-right: 10px; + border-radius: 50%; + max-height: 60px; +} + +.title { + margin-bottom: 0; +} + +.subtitle { + margin-top: 0; + font-size: medium; + color: gray; +} diff --git a/src/app/home/demo-board/demo-board.component.ts b/src/app/home/demo-board/demo-board.component.ts index 4a1a8bb..ffbc61e 100644 --- a/src/app/home/demo-board/demo-board.component.ts +++ b/src/app/home/demo-board/demo-board.component.ts @@ -1,6 +1,7 @@ import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop'; import { Component, OnInit } from '@angular/core'; import { Board } from 'src/app/kanban/model/board.model'; +import * as uuid from 'uuid'; @Component({ selector: 'app-demo-board', @@ -10,39 +11,49 @@ import { Board } from 'src/app/kanban/model/board.model'; export class DemoBoardComponent { boards: Board[] = [ { - id: '0', + id: uuid.v4(), title: 'Todo', priority: 0, tasks: [ { - description: 'Plan my next awesome project', - label: 'yellow' + description: 'Define architecture 🏛', + label: 'blue' + }, + { + description: 'Call back investor 💰', + label: 'purple' }, - { description: 'Reschedule my meeting', label: 'blue' } + { + description: 'Set up cloud infrastructure ☁️', + label: 'green' + } ] }, { - id: '1', + id: uuid.v4(), title: 'In progress', priority: 1, tasks: [ { - description: 'Plan my next awesome project', + description: 'Plan my next awesome project 🔥', label: 'yellow' }, - { description: 'Reschedule my meeting', label: 'blue' } + { + description: 'Get more coffee ☕️', + label: 'red' + } ] }, { - id: '2', + id: uuid.v4(), title: 'Done', priority: 2, tasks: [ { - description: 'Plan my next awesome project', - label: 'yellow' + description: 'Get some coffee ☕️', + label: 'gray' }, - { description: 'Reschedule my meeting', label: 'blue' } + { description: 'Reschedule my meeting 🗓', label: 'gray' } ] } ]; diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index a5847f9..39e2bd6 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -1,3 +1,19 @@ -
-

This is the Home Page

-
+
+ +

Welcome to Kanban 看板

+

+ The Kanban storyboard app inspired by Trello.
+ Based on the course by + Fireship. +

+

Built with Angular and Firebase 🔥.

+ +
+
+

Play with the demo!

+
+ +
+
diff --git a/src/app/home/home.component.scss b/src/app/home/home.component.scss index 291da0f..841b10e 100644 --- a/src/app/home/home.component.scss +++ b/src/app/home/home.component.scss @@ -1,3 +1,17 @@ -header { - text-align: center; +.layout { + max-width: 80vw; + margin: 5vh auto; +} + +.logo { + max-height: 200px; +} + +.header { + min-height: 20vh; +} + +.demo-board-container { + display: flex; + justify-content: center; } diff --git a/src/app/kanban/kanban-board/kanban-board.component.scss b/src/app/kanban/kanban-board/kanban-board.component.scss index 94a3710..7637fe5 100644 --- a/src/app/kanban/kanban-board/kanban-board.component.scss +++ b/src/app/kanban/kanban-board/kanban-board.component.scss @@ -4,12 +4,13 @@ .header { display: flex; + align-items: center; } .avatar { margin-right: 10px; border-radius: 50%; - height: min-content; + max-height: 60px; } .title { diff --git a/src/app/kanban/kanban.module.ts b/src/app/kanban/kanban.module.ts index 0902ead..d2cc9d1 100644 --- a/src/app/kanban/kanban.module.ts +++ b/src/app/kanban/kanban.module.ts @@ -26,6 +26,6 @@ import { KanbanBoardComponent } from './kanban-board/kanban-board.component'; FormsModule, DragDropModule ], - exports: [BoardComponent] + exports: [BoardListComponent, BoardComponent] }) export class KanbanModule {} diff --git a/src/app/user/login-page/login-page.component.scss b/src/app/user/login-page/login-page.component.scss index cc2337b..66812e0 100644 --- a/src/app/user/login-page/login-page.component.scss +++ b/src/app/user/login-page/login-page.component.scss @@ -7,8 +7,7 @@ } mat-card { - min-width: 150px; max-width: 500px; width: 100%; - margin: 100px auto; + margin: 5vw auto; } diff --git a/src/assets/app-logo.png b/src/assets/app-logo.png new file mode 100644 index 0000000..3df8ff1 Binary files /dev/null and b/src/assets/app-logo.png differ diff --git a/src/assets/default-user.svg b/src/assets/default-user.svg new file mode 100644 index 0000000..86a4ab0 --- /dev/null +++ b/src/assets/default-user.svg @@ -0,0 +1 @@ + \ No newline at end of file