diff options
Diffstat (limited to 'Timeline/ClientApp/src/app')
9 files changed, 83 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() { + } + +} |