Small UI fixing

This commit is contained in:
liosha84
2025-06-16 01:01:56 +03:00
parent 2f673e9249
commit 7f270ced9d
15 changed files with 1269 additions and 142 deletions
@@ -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 {