s329416/todo-app-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

styling

Browse Source
This commit is contained in:
JakubWalkowiak 2022-02-08 22:22:43 +01:00
parent 7b07c57fd5
commit afe40a8fea
6 changed files with 18 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
todo-app/todo-app/src/app/todo/components/todo-list/todo-list.component.html
View File

@ -1,5 +1,5 @@
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="todo-item-list col-4 m-2 p-2 border rounded"> <div class="todo-item-list col-4 m-2 p-2 border rounded bg-white">
<h2>TODO:</h2> <h2>TODO:</h2>
<app-todo-item *ngFor="let todoItem of todoItemList" <app-todo-item *ngFor="let todoItem of todoItemList"
[id]="todoItem.id" [id]="todoItem.id"
@ -9,7 +9,7 @@
(delete)="onDelete($event)" (delete)="onDelete($event)"
(doneChange)="onDone($event)"></app-todo-item> (doneChange)="onDone($event)"></app-todo-item>
</div> </div>
<div class="done-item-list col-4 m-2 p-2 border rounded"> <div class="done-item-list col-4 m-2 p-2 border rounded bg-white">
<h2>DONE:</h2> <h2>DONE:</h2>
<app-todo-item *ngFor="let todoItem of doneItemList" <app-todo-item *ngFor="let todoItem of doneItemList"
[id]="todoItem.id" [id]="todoItem.id"

4
todo-app/todo-app/src/app/user/components/base/base.component.html
View File

@ -2,8 +2,8 @@
<div class="col-4"></div> <div class="col-4"></div>
<div class="col-4"><h1 class="text-center">TODO LIST</h1></div> <div class="col-4"><h1 class="text-center">TODO LIST</h1></div>
<div class="col-4 d-flex justify-content-end"> <div class="col-4 d-flex justify-content-end">
<div class="d-flex justify-content-center flex-column mr-3">{{ userName }} ({{ fullName }})</div> <div *ngIf="userName" class="d-flex justify-content-center flex-column mr-3">{{ userName }} ({{ fullName }})</div>
<button (click)="onLogout()" class="btn btn-primary">Log out</button> <button *ngIf="userName" (click)="onLogout()" class="btn btn-primary">Log out</button>
</div> </div>
</div> </div>
<router-outlet></router-outlet> <router-outlet></router-outlet>

1
todo-app/todo-app/src/app/user/components/login/login.component.html
View File

@ -1,4 +1,3 @@
<h1 class="text-center">TODO LIST</h1>
<div class="login-form-container d-flex justify-content-center"> <div class="login-form-container d-flex justify-content-center">
<div class="d-flex flex-column"> <div class="d-flex flex-column">
<form [formGroup]="loginForm" class="login-form d-flex flex-column mt-5"> <form [formGroup]="loginForm" class="login-form d-flex flex-column mt-5">

1
todo-app/todo-app/src/app/user/components/register/register.component.html
View File

@ -1,4 +1,3 @@
<h1 class="text-center">TODO LIST</h1>
<div class="register-form-container d-flex justify-content-center"> <div class="register-form-container d-flex justify-content-center">
<div class="d-flex flex-column"> <div class="d-flex flex-column">
<form [formGroup]="registerForm" class="register-form d-flex flex-column mt-5"> <form [formGroup]="registerForm" class="register-form d-flex flex-column mt-5">

8
todo-app/todo-app/src/app/user/user-routing.module.ts
View File

@ -1,13 +1,19 @@
import { BaseComponent } from './components/base/base.component';
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router'; import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './components/login/login.component'; import { LoginComponent } from './components/login/login.component';
import { RegisterComponent } from './components/register/register.component'; import { RegisterComponent } from './components/register/register.component';
const routes: Routes = [ const routes: Routes = [
{
path: '',
component: BaseComponent,
children: [
{ path: '', redirectTo: 'login', pathMatch: 'full'}, { path: '', redirectTo: 'login', pathMatch: 'full'},
{ path: 'login', component: LoginComponent }, { path: 'login', component: LoginComponent },
{ path: 'register', component: RegisterComponent } { path: 'register', component: RegisterComponent }
]
}
]; ];
@NgModule({ @NgModule({

4
todo-app/todo-app/src/styles.scss
View File

@ -5,3 +5,7 @@ body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
/* Importing Bootstrap SCSS file. */ /* Importing Bootstrap SCSS file. */
@import '~bootstrap/scss/bootstrap'; @import '~bootstrap/scss/bootstrap';
body {
background-color: #FFFFE8;
}