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

Makes dmp/dataet editors mobile responsive

This commit is contained in:
apapachristou 2019-10-08 14:20:22 +03:00
parent e0c0f4ec09
commit 7b53346703
12 changed files with 113 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-editor/dataset-editor.component.html
View File

@ -2,21 +2,21 @@
<div class="row dataset-editor" [formGroup]="formGroup"> <div class="row dataset-editor" [formGroup]="formGroup">
<div class="col-12"> <div class="col-12">
<div class="row"> <div class="row">
<mat-form-field class="col-6"> <mat-form-field class="col-sm-12 col-md-6">
<input matInput placeholder="{{'DATASET-EDITOR.FIELDS.NAME' | translate}}" type="text" name="label" formControlName="label" required> <input matInput placeholder="{{'DATASET-EDITOR.FIELDS.NAME' | translate}}" type="text" name="label" formControlName="label" required>
<mat-error *ngIf="formGroup.get('label').hasError('backendError')">{{formGroup.get('label').getError('backendError').message}}</mat-error> <mat-error *ngIf="formGroup.get('label').hasError('backendError')">{{formGroup.get('label').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="formGroup.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="row"> <div class="row">
<mat-form-field class="col-6"> <mat-form-field class="col-sm-12 col-md-6">
<input matInput placeholder="{{'DATASET-EDITOR.FIELDS.URI' | translate}}" type="text" name="uri" formControlName="uri"> <input matInput placeholder="{{'DATASET-EDITOR.FIELDS.URI' | translate}}" type="text" name="uri" formControlName="uri">
<mat-error *ngIf="formGroup.get('uri').hasError('backendError')">{{formGroup.get('uri').getError('backendError').message}}</mat-error> <mat-error *ngIf="formGroup.get('uri').hasError('backendError')">{{formGroup.get('uri').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('uri').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="formGroup.get('uri').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="row"> <div class="row">
<mat-form-field class="col-6"> <mat-form-field class="col-sm-12 col-md-6">
<textarea matInput class="description-area" placeholder="{{'DATASET-EDITOR.FIELDS.DESCRIPTION' | translate}}" formControlName="description"></textarea> <textarea matInput class="description-area" placeholder="{{'DATASET-EDITOR.FIELDS.DESCRIPTION' | translate}}" formControlName="description"></textarea>
<mat-error *ngIf="formGroup.get('description').hasError('backendError')">{{formGroup.get('description').getError('backendError').message}}</mat-error> <mat-error *ngIf="formGroup.get('description').hasError('backendError')">{{formGroup.get('description').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="formGroup.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>

83
dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.html
View File

@ -1,48 +1,51 @@
<div class="main-content"> <div class="main-content">
<div class="container-fluid"> <div class="container-fluid">
<div class="card dataset-wizard"> <div class="card dataset-wizard">
<div class="card-header card-header-plain d-flex"> <div class="row card-header card-header-plain d-flex">
<div class="card-desc d-flex flex-column justify-content-center"> <div class="col-12 card-desc d-flex flex-column justify-content-center">
<h4 *ngIf="!isNew" class="card-title">{{datasetWizardModel?.label}} <div class="row">
<span *ngIf="this.formGroup && this.formGroup.dirty"> - <div class="col d-flex align-items-center flex-wrap-nowrap">
{{ 'GENERAL.STATUSES.EDIT' | translate }}</span> <h4 *ngIf="!isNew" class="card-title">{{datasetWizardModel?.label}}
</h4> <span *ngIf="this.formGroup && this.formGroup.dirty"> -
<div *ngIf="isNew" class="card-desc new-dataset d-flex flex-column justify-content-center"> {{ 'GENERAL.STATUSES.EDIT' | translate }}</span>
<h4 class="card-title">{{ 'DATASET-WIZARD.TITLE.NEW' | translate }}</h4> </h4>
<div *ngIf="isNew" class="card-desc new-dataset d-flex flex-column justify-content-center">
<h4 class="card-title">{{ 'DATASET-WIZARD.TITLE.NEW' | translate }}</h4>
</div>
<button mat-icon-button [matMenuTriggerFor]="actionsMenu" class="ml-auto more-icon" *ngIf="!publicMode" (click)="$event.stopImmediatePropagation();">
<mat-icon class="more-horiz">more_horiz</mat-icon>
</button>
<mat-menu #actionsMenu="matMenu">
<button mat-menu-item (click)="openDmpSearchDialogue()" class="menu-item">
<mat-icon>file_copy</mat-icon>{{'DATASET-WIZARD.ACTIONS.COPY-DATASET' | translate}}
</button>
<button mat-menu-item *ngIf="!viewOnly && !isCopy" (click)="openConfirm(formGroup.get('label').value, formGroup.get('id').value)" class="menu-item">
<mat-icon>delete</mat-icon>{{ 'DATASET-WIZARD.ACTIONS.DELETE' | translate }}
</button>
<button mat-menu-item *ngIf="needsUpdate()" class="menu-item" (click)="openUpdateDatasetProfileDialogue();">{{ 'DATASET-WIZARD.ACTIONS.UPDATE-DATASET-PROFILE' | translate }}</button>
</mat-menu>
</div>
<div class="col-auto d-flex flex-wrap p-2" *ngIf="datasetWizardModel && !isNew">
<button mat-raised-button [matMenuTriggerFor]="exportMenu" color="primary" class="lightblue-btn ml-2 export-btn">
{{ 'DMP-LISTING.ACTIONS.EXPORT' | translate }} <mat-icon>arrow_drop_down</mat-icon>
</button>
<mat-menu #exportMenu="matMenu" xPosition="before">
<button mat-menu-item (click)="downloadPDF()">
<i class="fa fa-file-pdf-o pr-2"></i>
<span>{{'GENERAL.FILE-TYPES.PDF' | translate}}</span>
</button>
<button mat-menu-item (click)="downloadDOCX()">
<i class="fa fa-file-word-o pr-2"></i>
<span>{{'GENERAL.FILE-TYPES.DOC' | translate}}</span>
</button>
<button mat-menu-item (click)="downloadXML()">
<i class="fa fa-file-code-o pr-2"></i>
<span>{{'GENERAL.FILE-TYPES.XML' | translate}}</span>
</button>
</mat-menu>
</div>
</div> </div>
</div> </div>
<div class="d-flex ml-auto p-2" *ngIf="datasetWizardModel && !isNew">
<button mat-icon-button [matMenuTriggerFor]="actionsMenu" class="ml-auto more-icon" *ngIf="!publicMode" (click)="$event.stopImmediatePropagation();">
<mat-icon class="more-horiz">more_horiz</mat-icon>
</button>
<mat-menu #actionsMenu="matMenu">
<button mat-menu-item (click)="openDmpSearchDialogue()" class="menu-item">
<mat-icon>file_copy</mat-icon>{{'DATASET-WIZARD.ACTIONS.COPY-DATASET' | translate}}
</button>
<button mat-menu-item *ngIf="!viewOnly && !isCopy" (click)="openConfirm(formGroup.get('label').value, formGroup.get('id').value)" class="menu-item">
<mat-icon>delete</mat-icon>{{ 'DATASET-WIZARD.ACTIONS.DELETE' | translate }}
</button>
<button mat-menu-item *ngIf="needsUpdate()" class="menu-item" (click)="openUpdateDatasetProfileDialogue();">{{ 'DATASET-WIZARD.ACTIONS.UPDATE-DATASET-PROFILE' | translate }}</button>
</mat-menu>
<button mat-raised-button [matMenuTriggerFor]="exportMenu" color="primary" class="lightblue-btn ml-2 export-btn">
{{ 'DMP-LISTING.ACTIONS.EXPORT' | translate }} <mat-icon>arrow_drop_down</mat-icon>
</button>
<mat-menu #exportMenu="matMenu" xPosition="before">
<button mat-menu-item (click)="downloadPDF()">
<i class="fa fa-file-pdf-o pr-2"></i>
<span>{{'GENERAL.FILE-TYPES.PDF' | translate}}</span>
</button>
<button mat-menu-item (click)="downloadDOCX()">
<i class="fa fa-file-word-o pr-2"></i>
<span>{{'GENERAL.FILE-TYPES.DOC' | translate}}</span>
</button>
<button mat-menu-item (click)="downloadXML()">
<i class="fa fa-file-code-o pr-2"></i>
<span>{{'GENERAL.FILE-TYPES.XML' | translate}}</span>
</button>
</mat-menu>
</div>
</div> </div>
<form *ngIf="formGroup" (ngSubmit)="formSubmit()"> <form *ngIf="formGroup" (ngSubmit)="formSubmit()">
<div class="d-flex flex-column"> <div class="d-flex flex-column">

23
dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.scss
View File

@ -1,3 +1,22 @@
@media (max-width: 768px) {
.main-content {
padding: 30px 0px;
}
::ng-deep .mat-expansion-panel-header {
min-height: 48px;
height: auto !important;
}
::ng-deep .mat-expansion-panel-body {
padding: 0 0px 16px !important;
}
::ng-deep .mat-vertical-content {
padding: 0 14px 24px 14px !important;
}
}
.dataset-wizard { .dataset-wizard {
.step-container { .step-container {
margin-top: 1em; margin-top: 1em;
@ -40,7 +59,7 @@
text-transform: uppercase; text-transform: uppercase;
} }
.export-btn { .export-btn {
padding-right: 6px; padding-right: 6px;
} }
.downloadPDF { .downloadPDF {
margin-top: 15px; margin-top: 15px;
@ -101,6 +120,6 @@
} }
::ng-deep .mat-ink-bar { ::ng-deep .mat-ink-bar {
background-color: #00b29f !important; background-color: #00b29f !important;
// background-color: #0070c0 !important; // background-color: #0070c0 !important;
} }

2
dmp-frontend/src/app/ui/dmp/editor/datasets-tab/datasets-tab.component.html
View File

@ -10,7 +10,7 @@
</div> </div>
</div> </div>
<div class="row pt-2 pb-4 pl-3 pr-3" *ngIf="dmp.datasets"> <div class="row pt-2 pb-4 pl-3 pr-3" *ngIf="dmp.datasets">
<div *ngFor="let dataset of dmp.datasets" class="col-3"> <div *ngFor="let dataset of dmp.datasets" class="col-md-3">
<div class="dataset-card" (click)="datasetClicked(dataset.id)"> <div class="dataset-card" (click)="datasetClicked(dataset.id)">
<mat-icon *ngIf="isDraft(dataset)" class="draft-bookmark">bookmark</mat-icon> <mat-icon *ngIf="isDraft(dataset)" class="draft-bookmark">bookmark</mat-icon>
<mat-icon *ngIf="!isDraft(dataset)" class="finalized-bookmark">bookmark</mat-icon> <mat-icon *ngIf="!isDraft(dataset)" class="finalized-bookmark">bookmark</mat-icon>

6
dmp-frontend/src/app/ui/dmp/editor/datasets-tab/datasets-tab.component.scss
View File

@ -1,3 +1,9 @@
@media (max-width: 768px) {
button {
font-size: smaller;
}
}
.draft-bookmark { .draft-bookmark {
color: #e7e6e6; color: #e7e6e6;
display: inline; display: inline;

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

@ -95,7 +95,7 @@
</mat-tab> --> </mat-tab> -->
</mat-tab-group> </mat-tab-group>
<div *ngIf="!isFinalized" class="d-flex justify-content-end pt-2 pb-4 pl-2 pr-2"> <div *ngIf="!isFinalized" class="d-flex justify-content-end pt-2 pb-4 pl-2">
<div *ngIf="!isNew"> <div *ngIf="!isNew">
<button mat-raised-button color="primary" (click)="cancel(dmp.id)" type="button" class="text-uppercase mr-2"> <button mat-raised-button color="primary" (click)="cancel(dmp.id)" type="button" class="text-uppercase mr-2">
{{'DMP-EDITOR.ACTIONS.CANCEL' | translate}} {{'DMP-EDITOR.ACTIONS.CANCEL' | translate}}

10
dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.scss
View File

@ -1,3 +1,13 @@
@media (max-width: 768px) {
.main-content {
padding: 30px 0px;
}
button {
font-size: small;
}
}
.menu-item { .menu-item {
width: 248px; width: 248px;
} }

18
dmp-frontend/src/app/ui/dmp/editor/general-tab/general-tab.component.html
View File

@ -1,8 +1,8 @@
<div class="container-fluid"> <div class="container-fluid">
<div class="row" [formGroup]="formGroup"> <div class="row" [formGroup]="formGroup">
<div class="col-9 pt-4 pb-4 pl-4"> <div class="col-sm-12 col-md-9 pt-4 pb-4 pl-4">
<div class="row pt-2"> <div class="row pt-2">
<mat-form-field class="col-8"> <mat-form-field class="col-sm-12 col-md-8">
<input matInput placeholder="{{'DMP-EDITOR.FIELDS.NAME' | translate}}" type="text" name="label" formControlName="label" required> <input matInput placeholder="{{'DMP-EDITOR.FIELDS.NAME' | translate}}" type="text" name="label" formControlName="label" required>
<mat-error *ngIf="formGroup.get('label').hasError('backendError')"> <mat-error *ngIf="formGroup.get('label').hasError('backendError')">
{{formGroup.get('label').getError('backendError').message}}</mat-error> {{formGroup.get('label').getError('backendError').message}}</mat-error>
@ -11,7 +11,7 @@
</mat-form-field> </mat-form-field>
</div> </div>
<div class="row pt-2"> <div class="row pt-2">
<mat-form-field class="col-8"> <mat-form-field class="col-sm-12 col-md-8">
<!-- <textarea matInput class="description-area" --> <!-- <textarea matInput class="description-area" -->
<textarea rows="3" matInput class="description-area" placeholder="{{'DMP-EDITOR.FIELDS.DESCRIPTION' | translate}}" formControlName="description"> <textarea rows="3" matInput class="description-area" placeholder="{{'DMP-EDITOR.FIELDS.DESCRIPTION' | translate}}" formControlName="description">
</textarea> </textarea>
@ -24,7 +24,7 @@
</mat-form-field> </mat-form-field>
</div> </div>
<div class="row pt-2"> <div class="row pt-2">
<mat-form-field class="col-8"> <mat-form-field class="col-sm-12 col-md-8">
<app-multiple-auto-complete required='true' [formControl]="formGroup.get('profiles')" placeholder="{{'DMP-EDITOR.FIELDS.DATASET-TEMPLATES' | translate}}" [configuration]="profilesAutoCompleteConfiguration"> <app-multiple-auto-complete required='true' [formControl]="formGroup.get('profiles')" placeholder="{{'DMP-EDITOR.FIELDS.DATASET-TEMPLATES' | translate}}" [configuration]="profilesAutoCompleteConfiguration">
</app-multiple-auto-complete> </app-multiple-auto-complete>
<mat-error *ngIf="formGroup.get('profiles').hasError('backendError')"> <mat-error *ngIf="formGroup.get('profiles').hasError('backendError')">
@ -38,7 +38,7 @@
<!-- <button mat-button (click)="availableProfiles()">View All</button> --> <!-- <button mat-button (click)="availableProfiles()">View All</button> -->
</div> </div>
<div class="row pt-1"> <div class="row pt-1">
<mat-form-field class="col-8"> <mat-form-field class="col-sm-12 col-md-8">
<app-multiple-auto-complete [formControl]="formGroup.get('organisations')" placeholder="{{'DMP-EDITOR.FIELDS.ORGANISATIONS' | translate}}" [configuration]="organisationsAutoCompleteConfiguration"> <app-multiple-auto-complete [formControl]="formGroup.get('organisations')" placeholder="{{'DMP-EDITOR.FIELDS.ORGANISATIONS' | translate}}" [configuration]="organisationsAutoCompleteConfiguration">
</app-multiple-auto-complete> </app-multiple-auto-complete>
<mat-error *ngIf="formGroup.get('organisations').hasError('backendError')"> <mat-error *ngIf="formGroup.get('organisations').hasError('backendError')">
@ -49,7 +49,7 @@
</mat-form-field> </mat-form-field>
</div> </div>
<div class="row pt-3"> <div class="row pt-3">
<mat-form-field class="col-8"> <mat-form-field class="col-sm-12 col-md-8">
<app-multiple-auto-complete [formControl]="formGroup.get('researchers')" placeholder="{{'DMP-EDITOR.FIELDS.RESEARCHERS' | translate}}" [configuration]="researchersAutoCompleteConfiguration"> <app-multiple-auto-complete [formControl]="formGroup.get('researchers')" placeholder="{{'DMP-EDITOR.FIELDS.RESEARCHERS' | translate}}" [configuration]="researchersAutoCompleteConfiguration">
</app-multiple-auto-complete> </app-multiple-auto-complete>
<mat-error *ngIf="formGroup.get('researchers').hasError('backendError')"> <mat-error *ngIf="formGroup.get('researchers').hasError('backendError')">
@ -63,7 +63,7 @@
<!-- <h4 mat-subheader class="col-12">{{'DMP-EDITOR.FIELDS.PROFILE' | translate}}</h4> --> <!-- <h4 mat-subheader class="col-12">{{'DMP-EDITOR.FIELDS.PROFILE' | translate}}</h4> -->
</div> </div>
<div class="row pt-2"> <div class="row pt-2">
<mat-form-field class="col-8"> <mat-form-field class="col-sm-12 col-md-8">
<app-single-auto-complete [required]="false" [formControl]="formGroup.get('profile')" placeholder="{{'DMP-EDITOR.FIELDS.TEMPLATE' | translate}}" [configuration]="dmpProfileAutoCompleteConfiguration"> <app-single-auto-complete [required]="false" [formControl]="formGroup.get('profile')" placeholder="{{'DMP-EDITOR.FIELDS.TEMPLATE' | translate}}" [configuration]="dmpProfileAutoCompleteConfiguration">
</app-single-auto-complete> </app-single-auto-complete>
</mat-form-field> </mat-form-field>
@ -73,8 +73,8 @@
</div> </div>
<!-- Versioning Container--> <!-- Versioning Container-->
<div class="col-2"> <div class="col-sm-12 col-md-2">
<div class='row version-menu'> <div class="version-menu">
<mat-form-field class="col-auto"> <mat-form-field class="col-auto">
<input matInput placeholder="Version" disabled [value]="formGroup.get('version').value == undefined ?0 :formGroup.get('version').value"> <input matInput placeholder="Version" disabled [value]="formGroup.get('version').value == undefined ?0 :formGroup.get('version').value">
</mat-form-field> </mat-form-field>

2
dmp-frontend/src/app/ui/dmp/editor/people-tab/people-tab.component.html
View File

@ -7,7 +7,7 @@
<mat-icon>add</mat-icon><span>{{'DMP-LISTING.ACTIONS.INVITE' | translate}}</span> <mat-icon>add</mat-icon><span>{{'DMP-LISTING.ACTIONS.INVITE' | translate}}</span>
</div> </div>
</div> </div>
<div class="table-container"> <div class="table-container table-responsive">
<table *ngIf="formGroup.get('users')"> <table *ngIf="formGroup.get('users')">
<tr> <tr>
<th>{{'USERS.LISTING.NAME' | translate}}</th> <th>{{'USERS.LISTING.NAME' | translate}}</th>

11
dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-field/form-composite-field.component.scss
View File

@ -1,5 +1,6 @@
.copositeField{ .copositeField {
font-weight:bold; font-weight: bold;
color: #3a3737; color: #3a3737;
max-width:100%; max-width: 100%;
} margin-top: 1em;
}

2
dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description-form.component.html
View File

@ -2,7 +2,7 @@
<div class="dynamic-form-editor"> <div class="dynamic-form-editor">
<app-form-progress-indication class="col-12" *ngIf="form" [formGroup]="form"></app-form-progress-indication> <app-form-progress-indication class="col-12" *ngIf="form" [formGroup]="form"></app-form-progress-indication>
<div class="col-12" id="form-container"> <div class="col-12 form-container" id="form-container">
<mat-vertical-stepper #stepper [linear]="false"> <mat-vertical-stepper #stepper [linear]="false">
<div *ngFor="let pageFormGroup of form.get('pages')['controls']; let z = index;"> <div *ngFor="let pageFormGroup of form.get('pages')['controls']; let z = index;">
<div *ngFor="let sectionFormGroup of pageFormGroup.get('sections')['controls']; let i = index;"> <div *ngFor="let sectionFormGroup of pageFormGroup.get('sections')['controls']; let i = index;">

16
dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description-form.component.scss
View File

@ -1,7 +1,15 @@
@media (max-width: 768px) {
.dynamic-form-editor {
.form-container {
padding: 0px;
}
}
}
.dynamic-form-editor { .dynamic-form-editor {
mat-vertical-stepper { mat-vertical-stepper {
background-color: #ffffff; background-color: #ffffff;
} }
} }
// .ng-sidebar { // .ng-sidebar {
@ -43,12 +51,10 @@
// text-align: center; // text-align: center;
// } // }
// .demo-progress-bar-container { // .demo-progress-bar-container {
// width: 100%; // width: 100%;
// } // }
// .form-progress-bar { // .form-progress-bar {