aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--Timeline/ClientApp/angular.json1
-rw-r--r--Timeline/ClientApp/package.json57
-rw-r--r--Timeline/ClientApp/src/app/app.component.css16
-rw-r--r--Timeline/ClientApp/src/app/app.component.html18
-rw-r--r--Timeline/ClientApp/src/app/app.component.ts2
-rw-r--r--Timeline/ClientApp/src/app/app.module.ts11
-rw-r--r--Timeline/ClientApp/src/app/home/home.component.html25
-rw-r--r--Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.css0
-rw-r--r--Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.html3
-rw-r--r--Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.spec.ts25
-rw-r--r--Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.ts15
-rw-r--r--Timeline/ClientApp/src/index.html3
-rw-r--r--Timeline/ClientApp/src/styles.css5
13 files changed, 119 insertions, 62 deletions
diff --git a/Timeline/ClientApp/angular.json b/Timeline/ClientApp/angular.json
index d1381991..bf8a95ed 100644
--- a/Timeline/ClientApp/angular.json
+++ b/Timeline/ClientApp/angular.json
@@ -24,7 +24,6 @@
"src/assets"
],
"styles": [
- "node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
"scripts": []
diff --git a/Timeline/ClientApp/package.json b/Timeline/ClientApp/package.json
index 8456cb8e..205874e5 100644
--- a/Timeline/ClientApp/package.json
+++ b/Timeline/ClientApp/package.json
@@ -12,47 +12,46 @@
},
"private": true,
"dependencies": {
- "@angular/animations": "7.2.2",
- "@angular/common": "7.2.2",
- "@angular/compiler": "7.2.2",
- "@angular/core": "7.2.2",
- "@angular/forms": "7.2.2",
- "@angular/http": "7.2.2",
- "@angular/platform-browser": "7.2.2",
- "@angular/platform-browser-dynamic": "7.2.2",
- "@angular/platform-server": "7.2.2",
- "@angular/router": "7.2.2",
- "@nguniversal/module-map-ngfactory-loader": "7.1.0",
+ "@angular/animations": "^7.2.4",
+ "@angular/cdk": "^7.3.2",
+ "@angular/common": "^7.2.4",
+ "@angular/compiler": "^7.2.4",
+ "@angular/core": "^7.2.4",
+ "@angular/forms": "^7.2.4",
+ "@angular/http": "^7.2.4",
+ "@angular/material": "^7.3.2",
+ "@angular/platform-browser": "^7.2.4",
+ "@angular/platform-browser-dynamic": "^7.2.4",
+ "@angular/platform-server": "^7.2.4",
+ "@angular/router": "^7.2.4",
+ "@nguniversal/module-map-ngfactory-loader": "^7.1.0",
"aspnet-prerendering": "^3.0.1",
- "bootstrap": "^4.2.1",
"core-js": "^2.6.3",
- "jquery": "3.3.1",
- "popper.js": "^1.14.6",
"rxjs": "^6.3.3",
"zone.js": "^0.8.29"
},
"devDependencies": {
- "@angular-devkit/build-angular": "~0.12.3",
- "@angular/cli": "~7.2.3",
- "@angular/compiler-cli": "7.2.2",
- "@angular/language-service": "^7.2.2",
- "@types/jasmine": "~3.3.8",
- "@types/jasminewd2": "~2.0.6",
- "@types/node": "~10.12.19",
- "codelyzer": "~4.5.0",
- "jasmine-core": "~3.3.0",
- "jasmine-spec-reporter": "~4.2.1",
+ "@angular-devkit/build-angular": "^0.12.3",
+ "@angular/cli": "^7.3.1",
+ "@angular/compiler-cli": "^7.2.4",
+ "@angular/language-service": "^7.2.4",
+ "@types/jasmine": "^3.3.8",
+ "@types/jasminewd2": "^2.0.6",
+ "@types/node": "^10.12.19",
+ "codelyzer": "^4.5.0",
+ "jasmine-core": "^3.3.0",
+ "jasmine-spec-reporter": "^4.2.1",
"karma": "^4.0.0",
- "karma-chrome-launcher": "~2.2.0",
- "karma-coverage-istanbul-reporter": "~2.0.4",
- "karma-jasmine": "~2.0.1",
+ "karma-chrome-launcher": "^2.2.0",
+ "karma-coverage-istanbul-reporter": "^2.0.4",
+ "karma-jasmine": "^2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"tslint": "^5.12.1",
"typescript": "~3.2.4"
},
"optionalDependencies": {
"node-sass": "^4.9.3",
- "protractor": "~5.4.0",
- "ts-node": "~5.0.1"
+ "protractor": "^5.4.0",
+ "ts-node": "^5.0.1"
}
}
diff --git a/Timeline/ClientApp/src/app/app.component.css b/Timeline/ClientApp/src/app/app.component.css
index 63459382..759a30d6 100644
--- a/Timeline/ClientApp/src/app/app.component.css
+++ b/Timeline/ClientApp/src/app/app.component.css
@@ -1,6 +1,14 @@
-body {
- margin: 0;
- display: flex;
- justify-content: center;
+.fill-remaining-space {
+ flex: 1 1 auto;
+}
+
+a.icp-record {
+ color: grey;
+ text-decoration: none;
+ font-size: 0.8rem;
+ margin: 0 5vw;
}
+footer {
+ display: flex;
+}
diff --git a/Timeline/ClientApp/src/app/app.component.html b/Timeline/ClientApp/src/app/app.component.html
index ae729c0c..fc2d6cfe 100644
--- a/Timeline/ClientApp/src/app/app.component.html
+++ b/Timeline/ClientApp/src/app/app.component.html
@@ -1,5 +1,19 @@
<body>
- <div id="rootContainer">
- <router-outlet></router-outlet>
+ <mat-toolbar color="primary" class="mat-elevation-z4">
+ <a mat-button routerLink="/">Timeline</a>
+ <a mat-button routerLink="/todo">TodoList</a>
+ <span class="fill-remaining-space"></span>
+ <button mat-icon-button>
+ <mat-icon>account_circle</mat-icon>
+ </button>
+ </mat-toolbar>
+
+ <div>
+ <router-outlet></router-outlet>
</div>
+
+ <footer>
+ <span class="fill-remaining-space"></span>
+ <a class="icp-record" href="http://www.miitbeian.gov.cn/state/outPortal/loginPortal.action">鄂ICP备18030913号-1</a>
+ </footer>
</body>
diff --git a/Timeline/ClientApp/src/app/app.component.ts b/Timeline/ClientApp/src/app/app.component.ts
index 7b0f6728..bba1f59d 100644
--- a/Timeline/ClientApp/src/app/app.component.ts
+++ b/Timeline/ClientApp/src/app/app.component.ts
@@ -7,4 +7,6 @@ import { Component } from '@angular/core';
})
export class AppComponent {
title = 'app';
+
+ public isCollapse = false;
}
diff --git a/Timeline/ClientApp/src/app/app.module.ts b/Timeline/ClientApp/src/app/app.module.ts
index c16d8bae..e1f45136 100644
--- a/Timeline/ClientApp/src/app/app.module.ts
+++ b/Timeline/ClientApp/src/app/app.module.ts
@@ -3,21 +3,28 @@ import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MatMenuModule, MatIconModule, MatButtonModule, MatToolbarModule } from '@angular/material';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
+import { TodoListPageComponent } from './todo-list-page/todo-list-page.component';
@NgModule({
declarations: [
AppComponent,
- HomeComponent
+ HomeComponent,
+ TodoListPageComponent
],
imports: [
BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
HttpClientModule,
FormsModule,
+ BrowserAnimationsModule,
+ MatMenuModule, MatIconModule, MatButtonModule, MatToolbarModule,
RouterModule.forRoot([
- { path: '', component: HomeComponent, pathMatch: 'full' }
+ { path: '', component: HomeComponent, pathMatch: 'full' },
+ { path: 'todo', component: TodoListPageComponent}
])
],
providers: [],
diff --git a/Timeline/ClientApp/src/app/home/home.component.html b/Timeline/ClientApp/src/app/home/home.component.html
index 8515536b..28ab3039 100644
--- a/Timeline/ClientApp/src/app/home/home.component.html
+++ b/Timeline/ClientApp/src/app/home/home.component.html
@@ -1,26 +1,3 @@
-<h2>
+<h2 class="mat-h2">
This page is under <span class="bold">construction</span>!
</h2>
-
-<h2>
- This line to indicate that ci/cd is working well.
-</h2>
-
-<h2>
- To-do list:
-</h2>
-
-<ol>
- <li>Learn DI and Service module in Angular.</li>
- <li>Develop basic authentication module.</li>
- <li>Learn Bootstrap.</li>
-</ol>
-
-<div id="loginBox">
- <label id="usernameLabel">username</label>
- <input id="usernameInput" type="text" [(ngModel)]="loginInfo.username">
- <label id="passwordLabel">password</label>
- <input id="passwordInput" type="password" [(ngModel)]="loginInfo.password">
- <input id="loginButton" type="button" value="Login" (click)="tryLogin()">
- <div id="loginMessage">{{message}}</div>
-</div>
diff --git a/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.css b/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.css
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.css
diff --git a/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.html b/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.html
new file mode 100644
index 00000000..0d005c83
--- /dev/null
+++ b/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.html
@@ -0,0 +1,3 @@
+<p>
+ todo-list-page works!
+</p>
diff --git a/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.spec.ts b/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.spec.ts
new file mode 100644
index 00000000..a74ce3e6
--- /dev/null
+++ b/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TodoListPageComponent } from './todo-list-page.component';
+
+describe('TodoListPageComponent', () => {
+ let component: TodoListPageComponent;
+ let fixture: ComponentFixture<TodoListPageComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ TodoListPageComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(TodoListPageComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.ts b/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.ts
new file mode 100644
index 00000000..37de232b
--- /dev/null
+++ b/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'app-todo-list-page',
+ templateUrl: './todo-list-page.component.html',
+ styleUrls: ['./todo-list-page.component.css']
+})
+export class TodoListPageComponent implements OnInit {
+
+ constructor() { }
+
+ ngOnInit() {
+ }
+
+}
diff --git a/Timeline/ClientApp/src/index.html b/Timeline/ClientApp/src/index.html
index 553e9032..58959f75 100644
--- a/Timeline/ClientApp/src/index.html
+++ b/Timeline/ClientApp/src/index.html
@@ -7,6 +7,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
+
+ <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+ <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
</head>
<body>
<app-root>Loading...</app-root>
diff --git a/Timeline/ClientApp/src/styles.css b/Timeline/ClientApp/src/styles.css
index 90d4ee00..7a81e04c 100644
--- a/Timeline/ClientApp/src/styles.css
+++ b/Timeline/ClientApp/src/styles.css
@@ -1 +1,6 @@
/* You can add global styles to this file, and also import other style files */
+@import "~@angular/material/prebuilt-themes/indigo-pink.css";
+
+body {
+ margin: 0;
+}
generated by cgit v1.2.3 (git 2.46.0) at 2025-09-28 22:25:16 +0000