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

styling changes 

*dmp-blueprint-editor
This commit is contained in:
Sofia Papacharalampous 2024-03-21 12:48:36 +02:00
parent 0dffbec480
commit 279a7f97d2
3 changed files with 35 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.scss
View File

@ -28,7 +28,8 @@
// text-overflow: ellipsis; // text-overflow: ellipsis;
// white-space: nowrap; // white-space: nowrap;
// overflow: hidden; // overflow: hidden;
white-space: normal; // white-space: normal;
white-space: nowrap;
word-break: break-word; word-break: break-word;
} }
@ -128,3 +129,16 @@
color: transparent; color: transparent;
} }
} }
:host ::ng-deep .mdc-evolution-chip-set__chips {
max-width: 100%;
text-overflow: ellipsis;
flex-flow: nowrap;
overflow-x: scroll;
}
:host ::ng-deep .mat-mdc-standard-chip .mdc-evolution-chip__cell--primary,
:host ::ng-deep .mat-mdc-standard-chip .mdc-evolution-chip__action--primary,
:host ::ng-deep .mat-mdc-standard-chip .mat-mdc-chip-action-label {
overflow: hidden;
}

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

@ -89,11 +89,10 @@
<div class="col-auto mb-3"> <div class="col-auto mb-3">
<button mat-button class="action-btn" type="button" (click)="addField(sectionIndex)" [disabled]="formGroup.disabled">{{'DMP-BLUEPRINT-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button> <button mat-button class="action-btn" type="button" (click)="addField(sectionIndex)" [disabled]="formGroup.disabled">{{'DMP-BLUEPRINT-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button>
</div> </div>
</div>
<div class="row">
<div cdkDropList class="col-12 mt-3" (cdkDropListDropped)="dropFields($event, sectionIndex)"> <div cdkDropList class="col-12 mt-3" (cdkDropListDropped)="dropFields($event, sectionIndex)">
<ng-container *ngFor="let field of section.get('fields').controls; let fieldIndex=index;" cdkDrag class="" [cdkDragDisabled]="formGroup.disabled"> <div *ngFor="let field of section.get('fields').controls; let fieldIndex=index;" cdkDrag class="section-fields-wrapper row" [cdkDragDisabled]="formGroup.disabled" (mouseenter)="onSectionHover(fieldIndex)" (mouseleave)="clearHoveredSection()">
<div class="section-fields-wrapper row" (mouseenter)="onSectionHover(fieldIndex)" (mouseleave)="clearHoveredSection()">
<div class="col-auto section-options-vertical"> <div class="col-auto section-options-vertical">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-auto"> <div class="col-auto">
@ -107,11 +106,9 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-auto section-field section-options-horizontal"> <div class="col-auto pr-0 section-field section-options-horizontal">
<div class="w-1">
<span *ngIf="!isSectionSelected(fieldIndex)" style="font-size: 18px; box-sizing: border-box; display: inline-block; padding: 0.85rem 0.45rem;">{{fieldIndex + 1}}</span> <span *ngIf="!isSectionSelected(fieldIndex)" style="font-size: 18px; box-sizing: border-box; display: inline-block; padding: 0.85rem 0.45rem;">{{fieldIndex + 1}}</span>
<mat-icon *ngIf="isSectionSelected(fieldIndex)" [ngClass]="{'drag-handle-disabled': formGroup.disabled}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon> <mat-icon *ngIf="isSectionSelected(fieldIndex)" [ngClass]="{'drag-handle-disabled': formGroup.disabled}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon>
</div>
</div> </div>
<div class="col"> <div class="col">
<div class="row"> <div class="row">
@ -164,7 +161,7 @@
<mat-error *ngIf="field.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="field.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="col-4 section-field" *ngIf="field.get('category').value != null"> <div class="col-4 section-field" *ngIf="field.get('category').value != null">
<mat-form-field class="mt-3 w-100"> <mat-form-field class="mt-3 w-100">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.FIELD-PLACEHOLDER' | translate}}</mat-label> <mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.FIELD-PLACEHOLDER' | translate}}</mat-label>
<input matInput type="text" name="placeholder" [formControl]="field.get('placeholder')"> <input matInput type="text" name="placeholder" [formControl]="field.get('placeholder')">
@ -205,24 +202,25 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</ng-container>
<mat-error *ngIf="section.get('fields').dirty && section.get('fields').hasError('required')">{{'DMP-BLUEPRINT-EDITOR.FIELDS-REQUIRED' | translate}}</mat-error> <mat-error *ngIf="section.get('fields').dirty && section.get('fields').hasError('required')">{{'DMP-BLUEPRINT-EDITOR.FIELDS-REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="section.get('fields').hasError('backendError')">{{section.get('fields').getError('backendError').message}}</mat-error> <mat-error *ngIf="section.get('fields').hasError('backendError')">{{section.get('fields').getError('backendError').message}}</mat-error>
</div> </div>
</div> </div>
<div class="col-12"> <div class="row">
<div class="row d-flex flex-column"> <div class="col-12">
<div class="col-auto pl-2"> <div class="row d-flex flex-column">
<mat-checkbox [formControl]="section.get('hasTemplates')" (change)="removeAllDescriptionTemplates($event, sectionIndex)"> <div class="col-auto">
{{'DMP-BLUEPRINT-EDITOR.FIELDS.DESCRIPTION-TEMPLATES' | translate}} <mat-checkbox [formControl]="section.get('hasTemplates')" (change)="removeAllDescriptionTemplates($event, sectionIndex)">
</mat-checkbox> {{'DMP-BLUEPRINT-EDITOR.FIELDS.DESCRIPTION-TEMPLATES' | translate}}
<mat-error *ngIf="section.get('hasTemplates').hasError('backendError')">{{section.get('hasTemplates').getError('backendError').message}}</mat-error> </mat-checkbox>
<mat-error *ngIf="section.get('hasTemplates').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="section.get('hasTemplates').hasError('backendError')">{{section.get('hasTemplates').getError('backendError').message}}</mat-error>
</div> <mat-error *ngIf="section.get('hasTemplates').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<div class="col-auto" *ngIf="section.get('hasTemplates').value == true"> </div>
<button mat-button class="action-btn" type="button" (click)="addDescriptionTemplate(sectionIndex)" [disabled]="formGroup.disabled">{{'DMP-BLUEPRINT-EDITOR.ACTIONS.ADD-DESCRIPTION-TEMPLATE' | translate}}</button> <div class="col-auto" *ngIf="section.get('hasTemplates').value == true">
<button mat-button class="action-btn" type="button" (click)="addDescriptionTemplate(sectionIndex)" [disabled]="formGroup.disabled">{{'DMP-BLUEPRINT-EDITOR.ACTIONS.ADD-DESCRIPTION-TEMPLATE' | translate}}</button>
</div>
</div> </div>
</div> </div>
</div> </div>

30
dmp-frontend/src/app/ui/admin/dmp-blueprint/editor/dmp-blueprint-editor.component.scss
View File

@ -149,36 +149,8 @@
.section-options-horizontal { .section-options-horizontal {
display: initial; display: initial;
} }
@media (min-width: 2060px) and (max-width:2215px) {
.section-field {
padding-left: 0;
}
}
@media (min-width: 2000px) and (max-width: 2060px) {
.section-field {
padding-left: 0;
padding-right: 0.6rem;
}
}
@media (min-width: 1950px) and (max-width: 2000px) {
.section-field {
padding-left: 0;
padding-right: 0.3rem;
}
}
// @media (min-width: 1900px) and (max-width: 1950px) {
// .section-field {
// padding-left: 0;
// padding-right: 0.05rem;
// }
// }
@media (max-width: 1200px) {
@media (max-width: 1900px) {
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;