aboutsummaryrefslogtreecommitdiff
path: root/Timeline/ClientApp/src
diff options
context:
space:
mode:
authorcrupest <crupest@outlook.com>2019-02-15 16:08:08 +0800
committercrupest <crupest@outlook.com>2019-02-15 16:08:08 +0800
commit3517512c4a6fa7eb61b8c5e5eca38c52c5577631 (patch)
tree1a5bf9be6a45b91f5b770c1ed0935246df93346a /Timeline/ClientApp/src
parent7024bc9666e62cc33f651e7a060235d17bd51f25 (diff)
downloadtimeline-3517512c4a6fa7eb61b8c5e5eca38c52c5577631.tar.gz
timeline-3517512c4a6fa7eb61b8c5e5eca38c52c5577631.tar.bz2
timeline-3517512c4a6fa7eb61b8c5e5eca38c52c5577631.zip
Develop front end.
Diffstat (limited to 'Timeline/ClientApp/src')
-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
11 files changed, 91 insertions, 32 deletions
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-29 11:40:37 +0000