MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

styling fixes

This commit is contained in:
Sofia Papacharalampous 2024-05-23 10:52:13 +03:00
parent 4a5735c8ba
commit 34f471fb30
4 changed files with 69 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
dmp-frontend/src/app/ui/description/editor/description-editor.component.html
View File

@ -77,7 +77,7 @@
</div>
</div>
<div class="row editor-content">
<div class="col-12 col-md-3 pr-md-0">
<div style="width: 22em;" class="d-flex flex-column">
<div class="stepper-back row">
<div class="col-auto d-flex align-items-center back-to-dmp" (click)="backToDmp(this.formGroup.get('dmpId').value)">
<mat-icon class="back-icon pointer">chevron_left</mat-icon>
@ -106,35 +106,40 @@
</div>
</div>
</div>
<div class="row mt-3 stepper-actions justify-content-around">
<div class="col-auto mb-1">
<div mat-raised-button type="button" class="previous stepper-btn mr-2" [ngClass]="{'previous-disabled': this.step === 0}" (click)="previousStep()">
<span class="material-icons">chevron_left</span>
<div>{{'DESCRIPTION-EDITOR.TOC.PREVIOUS' | translate}}</div>
</div>
</div>
<div *ngIf="this.step < this.maxStep" class="col-auto mb-1">
<div mat-raised-button type="button" class="stepper-btn description-next ml-auto" (click)="nextStep()">
<div>{{'DESCRIPTION-EDITOR.TOC.NEXT' | translate}}</div>
<span class="material-icons">chevron_right</span>
</div>
</div>
<div *ngIf="!formGroup.get('descriptionTemplateId').value" class="col-auto mb-1">
<div mat-raised-button type="button" class="stepper-btn description-next next-disabled ml-auto">
<div>{{'DESCRIPTION-EDITOR.TOC.NEXT' | translate}}</div>
<span class="material-icons">chevron_right</span>
</div>
</div>
<div *ngIf="(step === maxStep) && !isLocked && formGroup.get('descriptionTemplateId').value && !viewOnly" class="col-auto mb-1">
<button [disabled]="saving" (click)="saveAndClose()" mat-raised-button type="button" class="col-auto stepper-btn add-description-btn ml-auto">
{{ 'DESCRIPTION-EDITOR.ACTIONS.SAVE-AND-CLOSE' | translate }}
</button>
</div>
</div>
<div class="row">
<div class="row mb-4">
<div class="col-12">
<app-form-progress-indication class="mt-2" *ngIf="formGroup && !viewOnly" [formGroup]="formGroup" [checkVisibility]="true"></app-form-progress-indication>
<div class="row mt-3 stepper-actions justify-content-center">
<div class="col-auto mb-1">
<div mat-raised-button type="button" class="previous stepper-btn mr-2" [ngClass]="{'previous-disabled': this.step === 0}" (click)="previousStep()">
<span class="material-icons">chevron_left</span>
<div>{{'DESCRIPTION-EDITOR.TOC.PREVIOUS' | translate}}</div>
</div>
</div>
<div *ngIf="this.step < this.maxStep" class="col-auto mb-1">
<div mat-raised-button type="button" class="stepper-btn description-next ml-auto" (click)="nextStep()">
<div>{{'DESCRIPTION-EDITOR.TOC.NEXT' | translate}}</div>
<span class="material-icons">chevron_right</span>
</div>
</div>
<div *ngIf="!formGroup.get('descriptionTemplateId').value" class="col-auto mb-1">
<div mat-raised-button type="button" class="stepper-btn description-next next-disabled ml-auto">
<div>{{'DESCRIPTION-EDITOR.TOC.NEXT' | translate}}</div>
<span class="material-icons">chevron_right</span>
</div>
</div>
<div *ngIf="(step === maxStep) && !isLocked && formGroup.get('descriptionTemplateId').value && !viewOnly" class="col-auto mb-1">
<button [disabled]="saving" (click)="saveAndClose()" mat-raised-button type="button" class="col-auto stepper-btn add-description-btn ml-auto">
{{ 'DESCRIPTION-EDITOR.ACTIONS.SAVE-AND-CLOSE' | translate }}
</button>
</div>
</div>
<div class="row mb-4 mt-4">
<div class="col-12">
<app-form-progress-indication class="mt-2" *ngIf="formGroup && !viewOnly" [formGroup]="formGroup" [checkVisibility]="true"></app-form-progress-indication>
</div>
</div>
</div>
</div>
</div>

23
dmp-frontend/src/app/ui/description/editor/form-progress-indication/form-progress-indication.component.scss
View File

@ -1,23 +1,14 @@
// .percentage {
// color: #212121;
// opacity: 0.7;
// font-weight: 400;
// font-size: 0.875rem;
// }
// .progress-bar {
// border-radius: 20px;
// height: 11px;
// }
// ::ng-deep .mat-progress-bar .mat-progress-bar-fill::after {
// border-radius: 20px !important;
// }
.percentage {
color: #212121;
opacity: 0.7;
font-weight: 400;
font-size: 0.875rem;
}
// Bar container
.progress-bar {
--mdc-linear-progress-active-indicator-height: 11px !important;
height: 11px;
border-radius: 20px;
}

39
dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.component.html
View File

@ -79,7 +79,7 @@
<div class="row">
<!-- <div class="col-auto dmp-stepper" *ngIf="this.step != 0"> -->
<div class="col-12 col-md-3 pr-md-0" *ngIf="this.step != 0">
<div *ngIf="this.step != 0" style="width: 22em;" class="d-flex flex-column justify-content-center">
<div class="row stepper-title">
<div class="col-12 pl-0 mb-1">
<span class="font-weight-bold">{{'DMP-EDITOR.TITLE' | translate}}</span>
@ -120,23 +120,28 @@
</ol>
</div>
</div>
<div class="row justify-content-around" *ngIf="this.step !== 0">
<div class="col-auto mb-1">
<div mat-raised-button type="button" class="previous stepper-btn mr-2" [ngClass]="{'previous-disabled': this.step === 1}" (click)="previousStep()">
<span class="material-icons">chevron_left</span>
<div>{{'DMP-EDITOR.ACTIONS.PREVIOUS-STEP' | translate}}</div>
</div>
</div>
<div *ngIf="this.step < this.maxSteps" class="col-auto mb-1">
<div mat-raised-button type="button" class="stepper-btn" [ngClass]="{ 'next-disabled': this.step === this.maxSteps, 'next': this.step < selectedBlueprint?.definition?.sections?.length, 'description-next': this.step >= selectedBlueprint?.definition?.sections?.length }" (click)="nextStep()">
<div>{{'DMP-EDITOR.ACTIONS.NEXT-STEP' | translate}}</div>
<span class="material-icons">chevron_right</span>
</div>
</div>
</div>
<div class="row" *ngIf="this.step !== 0">
<div class="row mt-auto">
<div class="col-12">
<app-dmp-form-progress-indication class="col-12" *ngIf="formGroup && !formGroup.disabled && !lockStatus" [formGroup]="formGroup"></app-dmp-form-progress-indication>
<div class="row justify-content-center" *ngIf="this.step !== 0">
<div class="col-auto mb-1">
<div mat-raised-button type="button" class="previous stepper-btn mr-2" [ngClass]="{'previous-disabled': this.step === 1}" (click)="previousStep()">
<span class="material-icons">chevron_left</span>
<div>{{'DMP-EDITOR.ACTIONS.PREVIOUS-STEP' | translate}}</div>
</div>
</div>
<div *ngIf="this.step < this.maxSteps" class="col-auto mb-1">
<div mat-raised-button type="button" class="stepper-btn" [ngClass]="{ 'next-disabled': this.step === this.maxSteps, 'next': this.step < selectedBlueprint?.definition?.sections?.length, 'description-next': this.step >= selectedBlueprint?.definition?.sections?.length }" (click)="nextStep()">
<div>{{'DMP-EDITOR.ACTIONS.NEXT-STEP' | translate}}</div>
<span class="material-icons">chevron_right</span>
</div>
</div>
</div>
<div class="row" *ngIf="this.step !== 0">
<div class="col-12">
<app-dmp-form-progress-indication class="col-12" *ngIf="formGroup && !formGroup.disabled && !lockStatus" [formGroup]="formGroup"></app-dmp-form-progress-indication>
</div>
</div>
</div>
</div>
</div>

23
dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/form-progress-indication/dmp-form-progress-indication.component.scss
View File

@ -1,24 +1,15 @@
// .percentage {
// color: #212121;
// opacity: 0.7;
// font-weight: 400;
// font-size: 0.875rem;
// }
// .progress-bar {
// border-radius: 20px;
// height: 11px;
// }
// ::ng-deep .mat-progress-bar .mat-progress-bar-fill::after {
// border-radius: 20px !important;
// }
.percentage {
color: #212121;
opacity: 0.7;
font-weight: 400;
font-size: 0.875rem;
}
// Bar container
.progress-bar {
--mdc-linear-progress-active-indicator-height: 11px !important;
height: 11px;
border-radius: 20px;
}