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

styling changes on description template editor numbering

This commit is contained in:
Sofia Papacharalampous 2024-05-01 14:28:15 +03:00
parent 5c4292d735
commit 2dc1f2b12c
2 changed files with 37 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
dmp-frontend/src/app/ui/admin/description-template/editor/components/composite-field/description-template-editor-composite-field.component.html
View File

@ -1,15 +1,30 @@
<!-- MAIN CONTENT -->
<div class="main-content-page" [ngClass]="{'pb-2': !hasFocus}">
<!-- TITLE -->
<div class="col-12">
<div class="">
<div class="row fielset-header">
<mat-form-field class="numbering-label" [ngStyle]="calculateLabelWidth(numbering)">
<div class="col-auto">
<div class="row flex-column h-100">
<div class="col">
<div class="container h-100 numbering-container border border-primary rounded text-center">
<div class="row">
<div class="col-12 numbering"><span>{{numbering}}</span></div>
</div>
</div>
</div>
<div class="mat-mdc-form-field-subscript-wrapper mat-mdc-form-field-bottom-align">
</div>
</div>
</div>
<!-- <mat-form-field class="numbering-label" [ngStyle]="calculateLabelWidth(numbering)">
<input [ngClass]="{'text-danger':form.get('title').invalid &&form.get('title').touched}" matInput type="text" [value]="numbering" disabled>
</mat-form-field>
<mat-form-field class="col field-title" floatLabel="never">
<textarea matInput type="text" [placeholder]="('DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate)+' '+('DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.QUESTION'| translate)" #titleControl="matInput" [formControl]="this.form.get('title')"></textarea>
<mat-error *ngIf="this.form.get('title').hasError('backendError')">{{form.get('title').getError('backendError').message}}</mat-error>
</mat-form-field>
</mat-form-field> -->
<div class="col">
<mat-form-field class="w-100 field-title" floatLabel="never">
<textarea matInput type="text" [placeholder]="('DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate)+' '+('DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.QUESTION'| translate)" #titleControl="matInput" [formControl]="this.form.get('title')"></textarea>
<mat-error *ngIf="this.form.get('title').hasError('backendError')">{{form.get('title').getError('backendError').message}}</mat-error>
</mat-form-field>
</div>
</div>
</div>
<div style="position: relative;" class="col-12" *ngIf="hasFocus" [@fade-in]>

16
dmp-frontend/src/app/ui/admin/description-template/editor/components/composite-field/description-template-editor-composite-field.component.scss
View File

@ -148,4 +148,18 @@ $blue-color-light: #5cf7f2;
::ng-deep label {
margin: 0;
color: #212121;
}
}
.numbering-container {
border: 1px solid #F0F0F0!important;
.numbering {
font-size: 17px;
font-weight: 400; color: #a0a0a0;
padding-top: var(--mat-form-field-container-vertical-padding);
padding-bottom: var(--mat-form-field-container-vertical-padding);
overflow-x: hidden;
text-overflow: ellipsis;
}
}