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

styling changes 

*faq dialog, user-fields, dmp-upload dialog in progress
This commit is contained in:
Sofia Papacharalampous 2024-03-15 13:01:42 +02:00
parent 5d24a38472
commit c0b197b645
7 changed files with 36 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
dmp-frontend/src/app/ui/dmp/new/upload-dialogue/dmp-upload-dialog.component.html
View File

@ -1,5 +1,5 @@
<div class="confirmation-dialog">
<div class="row">
<div class="d-flex justify-content-between">
<div class="confirmation-message col align-self-center">
<h4>{{'DMP-UPLOAD.TITLE' | translate}}</h4>
</div>
@ -7,7 +7,7 @@
<mat-icon>close</mat-icon>
</div>
</div>
<div class="row">
<div class="">
<div class="upload-form col-12">
<mat-form-field>
<input class="uploadInput" [(ngModel)]="dmpTitle" matInput placeholder="{{'DMP-UPLOAD.PLACEHOLDER' | translate}}" name="uploadFileInput">
@ -39,8 +39,8 @@
</mat-form-field>
</div> -->
</div>
<div class="row mt-3">
<div class="col-auto ml-auto">
<div class="d-flex justify-content-between">
<div class="col-auto">
<button mat-button type="button" class="cancel-btn" (click)="cancel()">{{'DMP-UPLOAD.ACTIONS.CANCEL' | translate}}</button>
</div>
<div class="col-auto">

2
dmp-frontend/src/app/ui/dmp/new/upload-dialogue/dmp-upload-dialog.component.scss
View File

@ -1,4 +1,6 @@
.confirmation-dialog {
padding: 1.0rem;
.confirmation-message {
padding-bottom: 20px;
}

36
dmp-frontend/src/app/ui/dmp/user-field/user-field.component.html
View File

@ -1,27 +1,31 @@
<div *ngIf="enableSorting==true; else sortingDisabled" class="col-12" cdkDropList (cdkDropListDropped)="dropUsers($event)">
hello!
<ng-container *ngTemplateOutlet="userForm"></ng-container>
</div>
<ng-template class="col-12" #sortingDisabled>
<ng-container *ngTemplateOutlet="userForm"></ng-container>
</ng-template>
<div class="invite-users-dialog-wrapper">
<div *ngIf="enableSorting==true; else sortingDisabled" class="col-12" cdkDropList (cdkDropListDropped)="dropUsers($event)">
<ng-container *ngTemplateOutlet="userForm"></ng-container>
</div>
<div class="row">
<div class="col">
<button mat-icon-button (click)="addUser()" [disabled]="form.disabled">
<mat-icon>add</mat-icon>
</button>
<ng-template class="col-12" #sortingDisabled>
<ng-container *ngTemplateOutlet="userForm"></ng-container>
</ng-template>
<div class="row">
<div class="col">
<button mat-icon-button (click)="addUser()" [disabled]="form.disabled">
<mat-icon>add</mat-icon>
</button>
</div>
</div>
</div>
<ng-template #userForm>
<div *ngFor="let user of form.get('users').controls; let userIndex=index;" cdkDrag class="user-fields-wrapper" [cdkDragDisabled]="form.disabled">
<div class="">
<div *ngFor="let user of form.get('users').controls; let userIndex=index;" cdkDrag class="mb-4 user-fields-wrapper" [cdkDragDisabled]="form.disabled">
<!-- <div class="pb-2 col-auto">
<span style="font-size: 15px;">{{userIndex + 1}}</span>
</div> -->
<div class="pb-2 mb-1 col-auto">
<span class="col-auto" style="font-size: 18px;">{{userIndex + 1}}</span>
</div>
<div *ngIf="enableSorting==true" class="col-auto d-flex"><mat-icon [ngClass]="{'drag-handle-disabled': form.disabled}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon></div>
<div class="col-auto">
<div class="pb-4 col-auto">
<mat-button-toggle-group name="fontStyle" aria-label="Font Style" [formControl]="user.get('userType')">
<div *ngFor="let userType of dmpUserTypeEnumValues">
<mat-button-toggle class="lang-button" [value]="userType">{{enumUtils.toDmpUserTypeString(userType)}}</mat-button-toggle>

6
dmp-frontend/src/app/ui/dmp/user-field/user-field.component.scss
View File

@ -1,3 +1,9 @@
.invite-users-dialog-wrapper {
display: flex;
flex-direction: column;
align-items: baseline;
}
.drag-handle {
cursor: move;
color: var(--primary-color);

4
dmp-frontend/src/app/ui/faq/dialog/faq-dialog.component.html
View File

@ -1,5 +1,5 @@
<div class="faq">
<div class="row d-flex flex-row">
<div class="d-flex flex-row">
<div mat-dialog-title class="col-auto">
{{'FAQ.TITLE' | translate}}
</div>
@ -7,7 +7,7 @@
<mat-icon class="clear-icon">close</mat-icon>
</div>
</div>
<div mat-dialog-content class="row pr-0">
<div mat-dialog-content class="row pr-4">
<app-faq-content [isDialog]="isDialog"></app-faq-content>
</div>
<div mat-dialog-actions class="row">

1
dmp-frontend/src/app/ui/faq/faq-content/faq-content.component.html
View File

@ -1,5 +1,6 @@
<div class="container-fluid">
<div class="row">
<div *ngIf="faqHTMLUrl==null">hello!</div>
<iframe *ngIf="faqHTMLUrl" class="iframe" [src]="faqHTMLUrl"></iframe>
</div>
</div>

2
dmp-frontend/src/app/ui/faq/faq-content/faq-content.component.scss
View File

@ -9,7 +9,7 @@ img {
.iframe {
width: 100%;
height: 65vh;
height: 58vh;
margin: 0px;
border: none;
max-width: 100%;