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

Fixes responsiveness issues when using the app within a mobile phone. (Issue #178)

This commit is contained in:
apapachristou 2019-09-26 18:08:04 +03:00
parent c886b9ec07
commit 0c4c818acd
14 changed files with 166 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.html
View File

@ -1,28 +1,31 @@
<div class="main-content">
<div class="container-fluid">
<div class="card">
<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">
<h4 class="card-title">{{'DASHBOARD.DATASETS' | translate}} {{titlePrefix}}</h4>
<!-- <p class="card-category">{{'DATASET-LISTING.SUBTITLE' | translate}}</p> -->
</div>
<div class="d-flex align-items-center ml-auto p-2">
<div class="row ml-auto p-2">
<button mat-raised-button color="primary" class="text-uppercase lightblue-btn" [routerLink]="['/datasets/new']">
<mat-icon>add</mat-icon> {{'DATASET-LISTING.ACTIONS.NEW' | translate}}
</button>
</div>
</div>
<div class="card-body table-responsive">
<div class="listing row">
<div class="col-3">
<div class="listing row pb-2">
<div class="col-12 col-sm-12 col-md-3">
<app-dataset-criteria-component [status]="status" class="col-auto"></app-dataset-criteria-component>
</div>
<div class="col-9">
<div class="col-12 col-sm-12 col-md-9 pt-4">
<div *ngFor="let item of listingItems; let i = index">
<app-dataset-listing-item-component [dataset]="item"
[showDivider]="i != (listingItems.length - 1)" (onClick)="rowClicked($event)">
<app-dataset-listing-item-component [dataset]="item" [showDivider]="i != (listingItems.length - 1)" (onClick)="rowClicked($event)">
</app-dataset-listing-item-component>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-12 col-md-9 ml-auto paginator">
<mat-paginator #paginator [length]="totalCount" [pageSizeOptions]="[10, 25, 100]" (page)="pageThisEvent($event)" class="mt-2">
</mat-paginator>
</div>

16
dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.scss
View File

@ -1,3 +1,16 @@
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins/_breakpoints";
@include media-breakpoint-down(sm) {
.lightblue-btn {
font-size: 12px;
}
::ng-deep .mat-paginator-container {
height: auto !important;
}
}
::ng-deep .mat-paginator-container {
flex-direction: row-reverse !important;
justify-content: space-between !important;
@ -20,7 +33,8 @@
}
::ng-deep .mat-paginator-range-actions {
width: 55% !important;
width: auto !important;
min-width: 55% !important;
min-height: 43px !important;
justify-content: space-between;
}

24
dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.html
View File

@ -28,26 +28,34 @@
</div>
</div>
<div class="row">
<div class="col-12 about-item">
<div class="links">
<mat-icon (click)="$event.stopImmediatePropagation(); datasetClicked(dataset)" matTooltip="{{'DATASET-LISTING.TOOLTIP.DMP' | translate}}"
class="gray-icon pt-2">
<div class="col-auto about-item">
<div class="row">
<mat-icon (click)="$event.stopImmediatePropagation(); datasetClicked(dataset)" matTooltip="{{'DATASET-LISTING.TOOLTIP.DMP' | translate}}" class="col-auto gray-icon pr-0 pt-2">
storage
</mat-icon>
<h4 (click)="$event.stopImmediatePropagation(); datasetClicked(dataset)" class="mt-2 ml-1 mr-3 p-1">{{ dataset.dmp }}</h4>
<h4 (click)="$event.stopImmediatePropagation(); datasetClicked(dataset)" class="col mt-2 ml-1 mr-3 p-1">{{ dataset.dmp }}</h4>
</div>
</div>
<mat-icon (click)="$event.stopImmediatePropagation(); grantClicked(dataset)" matTooltip="{{'DATASET-LISTING.TOOLTIP.GRANT' | translate}}"
class="gray-icon pt-2">
<div class="col-auto about-item">
<div class="row">
<mat-icon (click)="$event.stopImmediatePropagation(); grantClicked(dataset)" matTooltip="{{'DATASET-LISTING.TOOLTIP.GRANT' | translate}}" class="col-auto gray-icon pr-0 pt-2">
work_outline
</mat-icon>
<h4 (click)="$event.stopImmediatePropagation(); grantClicked(dataset)" class="mt-2 ml-1 mr-3 p-1">{{ dataset.grant }}</h4>
<h4 (click)="$event.stopImmediatePropagation(); grantClicked(dataset)" class="col mt-2 ml-1 mr-3 p-1">{{ dataset.grant }}</h4>
</div>
</div>
<div class="col-auto about-item">
<mat-icon matTooltip="{{'DATASET-LISTING.TOOLTIP.TEMPLATES-INVOLVED' | translate}}" class="gray-icon pt-2">
assignment
</mat-icon>
<div class="pt-1">
<div matTooltip="{{ dataset.profile }}" class="chip ml-2 mr-2">{{ dataset.profile }}</div>
</div>
</div>
<div class="col-12 about-item">
<p *ngIf="isDraft">{{'DATASET-LISTING.COLUMNS.LAST-EDITED' | translate}} {{ dataset.modified | date: "shortDate"}}</p>
<p *ngIf="!isDraft">{{'DATASET-LISTING.COLUMNS.FINALIZED' | translate}} {{ dataset.finalizedAt | date: "shortDate"}}</p>
</div>

4
dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.scss
View File

@ -40,10 +40,6 @@ h4 > span {
flex-wrap: wrap;
}
.links {
display: flex;
}
.links :hover {
color: #00b29f;
}

18
dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.html
View File

@ -1,30 +1,34 @@
<div class="main-content">
<div class="container-fluid">
<div class="card">
<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">
<h4 class="card-title">{{'DMP-LISTING.TITLE' | translate}} {{titlePrefix}}</h4>
<!-- <p class="card-category">{{'DMP-LISTING.SUBTITLE' | translate}}</p> -->
</div>
<div class="d-flex align-items-center ml-auto p-2">
<button mat-raised-button color="primary" class="text-uppercase lightblue-btn mr-2" [routerLink]="grantId ? ['/plans/new/grant/', grantId] : ['./new']">
<div class="row ml-auto p-2">
<button mat-raised-button color="primary" class="text-uppercase lightblue-btn m-1" [routerLink]="grantId ? ['/plans/new/grant/', grantId] : ['./new']">
<mat-icon>add</mat-icon> {{'DMP-LISTING.ACTIONS.NEW' | translate}}
</button>
<button mat-raised-button color="primary" class="text-uppercase lightblue-btn" [routerLink]="['/quick-wizard']">
<button mat-raised-button color="primary" class="text-uppercase lightblue-btn m-1" [routerLink]="['/quick-wizard']">
<mat-icon>play_circle_outline</mat-icon> {{'DMP-LISTING.ACTIONS.NEW-WITH-WIZARD' | translate}}
</button>
</div>
</div>
<div class="card-body table-responsive">
<div class="listing row">
<div class="col-3">
<div class="listing row pb-2">
<div class="col-12 col-sm-12 col-md-3">
<app-dmp-criteria-component [showGrant]="showGrant" class="col-auto"></app-dmp-criteria-component>
</div>
<div class="col-9 pt-4">
<div class="col-12 col-sm-12 col-md-9 pt-4">
<!-- <mat-paginator #paginator [length]="totalCount" [pageSizeOptions]="[10, 25, 100]" (page)="pageThisEvent($event)" class="top-paginator"></mat-paginator> -->
<div *ngFor="let item of listingItems; let i = index">
<app-dmp-listing-item-component [showDivider]="i != (listingItems.length - 1)" [dmp]="item" (onClick)="rowClicked($event)"></app-dmp-listing-item-component>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-12 col-md-9 ml-auto paginator">
<mat-paginator #paginator [length]="totalCount" [pageSizeOptions]="[10, 25, 100]" (page)="pageThisEvent($event)" class="mt-2"></mat-paginator>
</div>
</div>

16
dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.scss
View File

@ -1,3 +1,16 @@
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins/_breakpoints";
@include media-breakpoint-down(sm) {
.lightblue-btn {
font-size: 12px;
}
::ng-deep .mat-paginator-container {
height: auto !important;
}
}
::ng-deep .mat-paginator-container {
flex-direction: row-reverse !important;
justify-content: space-between !important;
@ -20,7 +33,8 @@
}
::ng-deep .mat-paginator-range-actions {
width: 55% !important;
width: auto !important;
min-width: 55% !important;
min-height: 43px !important;
justify-content: space-between;
}

30
dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.html
View File

@ -26,8 +26,9 @@
</mat-menu>
</div>
</div>
<div class="row">
<div class="col-12 d-flex flex-wrap">
<div class="row d-flex flex-wrap">
<!-- <div class="col-12 d-flex flex-wrap"> -->
<div class="col-auto">
<mat-icon *ngIf="isDraft" matTooltip="{{'DMP-LISTING.TOOLTIP.DMP-STATUS.DRAFT' | translate}}" class="draft-icon">
lock_open
</mat-icon>
@ -37,10 +38,14 @@
<mat-icon *ngIf="isPublished" matTooltip="{{'DMP-LISTING.TOOLTIP.DMP-STATUS.PUBLISHED' | translate}}" class="published-icon">
radio_button_checked
</mat-icon>
<h4 class="title" *ngIf="isDraft">
<span>{{ 'TYPES.DMP.DRAFT' | translate }}:</span> {{dmp.label}}</h4>
<h4 class="title" *ngIf="!isDraft">{{dmp.label}}</h4>
</div>
<div class="col pl-0">
<h4 class="title pl-0" *ngIf="isDraft">
<span>{{ 'TYPES.DMP.DRAFT' | translate }}:</span> {{dmp.label}}
</h4>
<h4 class="title pl-0" *ngIf="!isDraft">{{dmp.label}}</h4>
</div>
<!-- </div> -->
</div>
<div class="row">
<div class="col-12">
@ -48,12 +53,13 @@
</div>
</div>
<div class="row">
<div class="col-12 about-item">
<div class="col-auto about-item">
<mat-icon class="gray-icon pt-2" matTooltip="{{'DMP-LISTING.TOOLTIP.LEVEL-OF-ACCESS' | translate}}">
settings
</mat-icon>
<h4 class="mt-1 ml-1 mr-3 p-1">{{roleDisplay(dmp.users).toUpperCase()}}</h4>
</div>
<div class="col-auto about-item">
<div class="datasets-counter">
<mat-icon (click)="$event.stopImmediatePropagation(); datasetClicked(dmp.id)" class="gray-icon pt-2" matTooltip="{{'DMP-LISTING.TOOLTIP.INVOLVED-DATASETS' | translate}}">
storage
@ -61,16 +67,20 @@
<h4 (click)="$event.stopImmediatePropagation(); datasetClicked(dmp.id)" class="mt-1 ml-1 mr-3 p-1">
{{dmp.datasets.length}}</h4>
</div>
<mat-icon class="gray-icon pt-2" matTooltip="{{'DMP-LISTING.TOOLTIP.TEMPLATES-INVOLVED' | translate}}">assignment</mat-icon>
<div *ngFor="let profile of dmp.associatedProfiles" class="pt-1">
</div>
<div class="col-auto about-item pt-2">
<mat-icon class="gray-icon" matTooltip="{{'DMP-LISTING.TOOLTIP.TEMPLATES-INVOLVED' | translate}}">assignment</mat-icon>
<div *ngFor="let profile of dmp.associatedProfiles" class="pb-1">
<div matTooltip="{{profile.label}}" class="chip ml-2 mr-2">{{profile.label}}</div>
</div>
</div>
<div class="col-12 about-item">
<p *ngIf="isDraft">{{'DMP-PROFILE-LISTING.COLUMNS.LAST-EDITED' | translate}} {{dmp.modifiedTime | date: "shortDate"}}</p>
<p *ngIf="isFinalized && !isPublished">{{'TYPES.DMP.FINALISED' | translate}} {{dmp.finalizedAt | date: "shortDate"}}</p>
<p *ngIf="isPublished">{{'DMP-PROFILE-LISTING.COLUMNS.PUBLISHED' | translate}} {{dmp.publishedAt | date: "shortDate"}}</p>
</div>
</div>
<!-- <div class="row d-flex align-items-center my-1">
<mat-icon class="col-auto gray-icon">group</mat-icon>
<div class="row" *ngFor="let user of dmp.users">

14
dmp-frontend/src/app/ui/explore-dataset/explore-dataset-listing.component.html
View File

@ -14,14 +14,18 @@
</div>
</div>
<div class="card-body table-responsive">
<div class="dmp-listing row">
<div class="col-3">
<div class="dmp-listing row pb-2">
<div class="col-12 col-sm-12 col-md-3">
<app-explore-dataset-filters-component (facetCriteriaChange)="onCriteriaChange($event)"></app-explore-dataset-filters-component>
</div>
<div class="col-9">
<div class="row" *ngFor="let item of listingItems; let i = index">
<app-explore-dataset-listing-item-component class="col-12" [dataset]="item" [showDivider]="i !== (listingItems.length - 1)" (onClick)="rowClicked($event)"></app-explore-dataset-listing-item-component>
<div class="col-12 col-sm-12 col-md-9 pt-4">
<div *ngFor="let item of listingItems; let i = index">
<app-explore-dataset-listing-item-component [dataset]="item" [showDivider]="i !== (listingItems.length - 1)" (onClick)="rowClicked($event)"></app-explore-dataset-listing-item-component>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-12 col-md-9 ml-auto paginator">
<mat-paginator #paginator [length]="totalCount" [pageSizeOptions]="[10, 25, 100]" (page)="pageThisEvent($event)"></mat-paginator>
</div>
</div>

16
dmp-frontend/src/app/ui/explore-dataset/explore-dataset-listing.component.scss
View File

@ -1,3 +1,16 @@
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins/_breakpoints";
@include media-breakpoint-down(sm) {
.lightblue-btn {
font-size: 12px;
}
::ng-deep .mat-paginator-container {
height: auto !important;
}
}
text-center {
text-align: center;
}
@ -54,7 +67,8 @@ text-center {
}
::ng-deep .mat-paginator-range-actions {
width: 55% !important;
width: auto !important;
min-width: 55% !important;
min-height: 43px !important;
justify-content: space-between;
}

22
dmp-frontend/src/app/ui/explore-dataset/listing-item/explore-dataset-listing-item.component.html
View File

@ -21,17 +21,25 @@
</div>
</div>
<div class="row">
<div class="col-12 about-item">
<mat-icon matTooltip="{{'DATASET-PUBLIC-LISTING.TOOLTIP.DMP' | translate}}" class="gray-icon pt-2">storage</mat-icon>
<h4 class="mt-2 ml-1 mr-3 p-1">{{ dataset.dmp }}</h4>
<mat-icon matTooltip="{{'DATASET-PUBLIC-LISTING.TOOLTIP.GRANT' | translate}}" class="gray-icon pt-2">work_outline</mat-icon>
<h4 class="mt-2 ml-1 mr-3 p-1">{{ dataset.grant }}</h4>
<div class="col-auto about-item">
<div class="row">
<mat-icon matTooltip="{{'DATASET-PUBLIC-LISTING.TOOLTIP.DMP' | translate}}" class="col-auto gray-icon pr-0 pt-2">storage</mat-icon>
<h4 class="col mt-2 ml-1 mr-3 p-1">{{ dataset.dmp }}</h4>
</div>
</div>
<div class="col-auto about-item">
<div class="row">
<mat-icon matTooltip="{{'DATASET-PUBLIC-LISTING.TOOLTIP.GRANT' | translate}}" class="col-auto gray-icon pr-0 pt-2">work_outline</mat-icon>
<h4 class="col mt-2 ml-1 mr-3 p-1">{{ dataset.grant }}</h4>
</div>
</div>
<div class="col-auto about-item">
<mat-icon matTooltip="{{'DATASET-PUBLIC-LISTING.TOOLTIP.TEMPLATES-INVOLVED' | translate}}" class="gray-icon pt-2">assignment</mat-icon>
<div class="pt-1">
<div matTooltip="{{ dataset.profile }}" class="chip ml-2 mr-2">{{ dataset.profile }}</div>
</div>
</div>
<div class="col-12 about-item">
<p>{{'DATASET-LISTING.COLUMNS.PUBLISHED' | translate}} {{dataset.dmpPublishedAt | date: "shortDate"}}</p>
</div>
</div>

10
dmp-frontend/src/app/ui/explore-dmp/explore-dmp-listing.component.html
View File

@ -14,14 +14,14 @@
</div>
</div>
<div class="card-body table-responsive">
<div class="explore-dmp-listing row">
<div class="col-3">
<div class="explore-dmp-listing row pb-2">
<div class="col-12 col-sm-12 col-md-3">
<app-explore-dmp-filters-component class="col-auto" (facetCriteriaChange)="onCriteriaChange($event)"></app-explore-dmp-filters-component>
<!-- <app-explore-dmp-filters-component class="col-auto" [showGrant]="showGrant" (facetCriteriaChange)="onCriteriaChange($event)"></app-explore-dmp-filters-component> -->
</div>
<div class="col-9">
<div class="row" *ngFor="let item of listingItems; let i = index">
<app-explore-dmp-listing-item-component class="col-12" [showDivider]="i !== (listingItems.length - 1)" [dmp]="item" (onClick)="rowClicked($event)"></app-explore-dmp-listing-item-component>
<div class="col-12 col-sm-12 col-md-9 pt-4">
<div *ngFor="let item of listingItems; let i = index">
<app-explore-dmp-listing-item-component [showDivider]="i !== (listingItems.length - 1)" [dmp]="item" (onClick)="rowClicked($event)"></app-explore-dmp-listing-item-component>
</div>
<mat-paginator #paginator [length]="totalCount" [pageSizeOptions]="[10, 25, 100]" (page)="pageThisEvent($event)"></mat-paginator>
</div>

16
dmp-frontend/src/app/ui/explore-dmp/explore-dmp-listing.component.scss
View File

@ -1,3 +1,16 @@
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins/_breakpoints";
@include media-breakpoint-down(sm) {
.lightblue-btn {
font-size: 12px;
}
::ng-deep .mat-paginator-container {
height: auto !important;
}
}
text-center {
text-align: center;
}
@ -54,7 +67,8 @@ text-center {
}
::ng-deep .mat-paginator-range-actions {
width: 55% !important;
width: auto !important;
min-width: 55% !important;
min-height: 43px !important;
justify-content: space-between;
}

15
dmp-frontend/src/app/ui/explore-dmp/listing-item/explore-dmp-listing-item.component.html
View File

@ -5,10 +5,12 @@
{{dmp.grantAbbreviation}}
</div>
</div>
<div class="row">
<div class="col-12 about-item">
<div class="row d-flex flex-wrap">
<div class="col-auto">
<mat-icon matTooltip="{{'DMP-PUBLIC-LISTING.TOOLTIP.PUBLISHED' | translate}}" class="published-icon">radio_button_checked</mat-icon>
<h4 class="title">{{dmp.label}}</h4>
</div>
<div class="col pl-0">
<h4 class="title pl-0">{{dmp.label}}</h4>
</div>
</div>
<div class="row">
@ -17,17 +19,20 @@
</div>
</div>
<div class="row">
<div class="col-12 about-item">
<div class="col-auto about-item">
<!-- <mat-icon class="gray-icon pt-2">settings</mat-icon> -->
<!-- <h4 class="mt-2 ml-1 mr-3 p-1">{{roleDisplay(dmp.users).toUpperCase()}}</h4> -->
<mat-icon matTooltip="{{'DMP-PUBLIC-LISTING.TOOLTIP.INVOLVED-DATASETS' | translate}}" class="gray-icon pt-2">storage</mat-icon>
<h4 class="length mt-2 ml-1 mr-3 p-1">{{dmp.datasets.length}}</h4>
</div>
<div class="col-auto about-item">
<mat-icon matTooltip="{{'DMP-PUBLIC-LISTING.TOOLTIP.TEMPLATES-INVOLVED' | translate}}" class="gray-icon pt-2">assignment</mat-icon>
<div *ngFor="let profile of dmp.associatedProfiles" class="pt-1">
<div matTooltip="{{profile.label}}" class="chip ml-2 mr-2">{{profile.label}}</div>
</div>
</div>
<div class="col-12 about-item">
<p>{{'DMP-PROFILE-LISTING.COLUMNS.PUBLISHED' | translate}} {{dmp.finalizedAt | date: "shortDate"}}</p>
</div>
</div>

10
dmp-frontend/src/app/ui/explore-dmp/listing-item/explore-dmp-listing-item.component.scss
View File

@ -52,6 +52,16 @@
// color: #92d050;
}
h4 {
display: inline;
padding-left: 1em;
line-height: 1.7em;
}
h4 > span {
text-transform: uppercase;
}
// .explore-dmp-listing-item {
// margin-top: 2em;
// margin-bottom: 2em;