Small UI fixing
This commit is contained in:
@@ -1,35 +1,56 @@
|
||||
<div>
|
||||
<div class="submit-form">
|
||||
<div *ngIf="!submitted">
|
||||
<div class="form-group">
|
||||
<label for="title">Title</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="title"
|
||||
required
|
||||
[(ngModel)]="tutorial.title"
|
||||
name="title"
|
||||
/>
|
||||
</div>
|
||||
<!--<div>-->
|
||||
<!-- <div class="submit-form">-->
|
||||
<!-- <div *ngIf="!submitted">-->
|
||||
<!-- <div class="form-group">-->
|
||||
<!-- <label for="title">Title</label>-->
|
||||
<!-- <input-->
|
||||
<!-- type="text"-->
|
||||
<!-- class="form-control"-->
|
||||
<!-- id="title"-->
|
||||
<!-- required-->
|
||||
<!-- [(ngModel)]="tutorial.title"-->
|
||||
<!-- name="title"-->
|
||||
<!-- />-->
|
||||
<!-- </div>-->
|
||||
|
||||
<div class="form-group">
|
||||
<label for="description">Description</label>
|
||||
<input
|
||||
class="form-control"
|
||||
id="description"
|
||||
required
|
||||
[(ngModel)]="tutorial.description"
|
||||
name="description"
|
||||
/>
|
||||
</div>
|
||||
<!-- <div class="form-group">-->
|
||||
<!-- <label for="description">Description</label>-->
|
||||
<!-- <input-->
|
||||
<!-- class="form-control"-->
|
||||
<!-- id="description"-->
|
||||
<!-- required-->
|
||||
<!-- [(ngModel)]="tutorial.description"-->
|
||||
<!-- name="description"-->
|
||||
<!-- />-->
|
||||
<!-- </div>-->
|
||||
|
||||
<button (click)="saveTutorial()" class="btn btn-success">Submit</button>
|
||||
</div>
|
||||
<!-- <button (click)="saveTutorial()" class="btn btn-success">Submit</button>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- <div *ngIf="submitted">-->
|
||||
<!-- <h4>Tutorial was submitted successfully!</h4>-->
|
||||
<!-- <button class="btn btn-success" (click)="newTutorial()">Add</button>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!--</div>-->
|
||||
|
||||
<mat-card appearance="outlined">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Add tutorial</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content *ngIf="!submitted">
|
||||
<mat-form-field class="example-full-width">
|
||||
<mat-label>Title</mat-label>
|
||||
<input matInput required
|
||||
[(ngModel)]="tutorial.title">
|
||||
</mat-form-field>
|
||||
<kendo-editor [(ngModel)]="tutorial.description" ></kendo-editor>
|
||||
</mat-card-content>
|
||||
<mat-card-actions>
|
||||
<button matButton (click)="saveTutorial()" *ngIf="!submitted">Save</button>
|
||||
<div *ngIf="submitted">
|
||||
<h4>Tutorial was submitted successfully!</h4>
|
||||
<button class="btn btn-success" (click)="newTutorial()">Add</button>
|
||||
<button matButton (click)="newTutorial()">Add new tutorial</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
|
||||
@@ -1,4 +1,21 @@
|
||||
.submit-form {
|
||||
max-width: 400px;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
mat-card{
|
||||
margin: 20px;
|
||||
}
|
||||
mat-card-title{
|
||||
color: cyan;
|
||||
}
|
||||
|
||||
.example-form {
|
||||
min-width: 150px;
|
||||
max-width: 500px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.example-full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -2,12 +2,11 @@ import { Component, OnInit } from '@angular/core';
|
||||
import {Tutorial} from '../../models/tutorial.model';
|
||||
import {TutorialService} from '../../services/tutorial.service';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-add-tutorial',
|
||||
templateUrl: './add-tutorial.component.html',
|
||||
styleUrls: ['./add-tutorial.component.scss'],
|
||||
standalone: false
|
||||
selector: 'app-add-tutorial',
|
||||
templateUrl: './add-tutorial.component.html',
|
||||
styleUrls: ['./add-tutorial.component.scss'],
|
||||
standalone: false
|
||||
})
|
||||
export class AddTutorialComponent implements OnInit {
|
||||
|
||||
|
||||
Reference in New Issue
Block a user