stlyling fixes on dashboard > activity cards

This commit is contained in:
Sofia Papacharalampous 2024-04-08 18:03:26 +03:00
parent a6b1a371a1
commit a556aef2cd
4 changed files with 202 additions and 171 deletions

View File

@ -1,23 +1,32 @@
<div class="container-fluid">
<div class="row">
<div class="col-md-12 d-flex justify-content-center" *ngIf="listingItems == null"> <div class="col-md-12 d-flex justify-content-center" *ngIf="listingItems == null">
<span class="empty-list">{{'DMP-LISTING.EMPTY-LIST' | translate}}</span> <span class="empty-list">{{'DMP-LISTING.EMPTY-LIST' | translate}}</span>
</div> </div>
<div *ngIf="listingItems != null" id="results" #results> <div *ngIf="listingItems != null" id="results" class="col-12" #results>
<div class="d-flex flex-direction-row pt-4"> <div class="row pt-4">
<!-- Sort by --> <!-- Sort by -->
<span class="d-flex align-items-center">{{'DMP-LISTING.SORT-BY' | translate}}:</span> <div class="col-12 col-xl-auto d-flex align-items-center">
<mat-form-field appearance="outline" class="sort-form col-auto"> <span class="mb-4">{{'DMP-LISTING.SORT-BY' | translate}}:</span>
</div>
<div class="col-12 col-xl-auto">
<mat-form-field appearance="outline" class="sort-form w-100">
<mat-select placeholder="{{'GENERAL.CRITERIA.LIKE'| translate}}" [formControl]="formGroup.get('order')"> <mat-select placeholder="{{'GENERAL.CRITERIA.LIKE'| translate}}" [formControl]="formGroup.get('order')">
<mat-option [value]="order.UpdatedAt">{{enumUtils.toRecentActivityOrderString(order.UpdatedAt)}}</mat-option> <mat-option [value]="order.UpdatedAt">{{enumUtils.toRecentActivityOrderString(order.UpdatedAt)}}</mat-option>
<mat-option [value]="order.Label">{{enumUtils.toRecentActivityOrderString(order.Label)}}</mat-option> <mat-option [value]="order.Label">{{enumUtils.toRecentActivityOrderString(order.Label)}}</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
</div>
<!-- End of Sort by --> <!-- End of Sort by -->
<!-- Search Filter--> <!-- Search Filter-->
<mat-form-field appearance="outline" class="search-form ml-auto col-auto pr-0" floatLabel="never"> <div class="col-12 col-xl-auto ml-auto">
<mat-form-field appearance="outline" class="search-form w-100" floatLabel="never">
<mat-icon matSuffix>search</mat-icon> <mat-icon matSuffix>search</mat-icon>
<input matInput placeholder="{{'GENERAL.CRITERIA.LIKE'| translate}}" name="likeCriteria" [formControl]="formGroup.get('like')"> <input matInput placeholder="{{'GENERAL.CRITERIA.LIKE'| translate}}" name="likeCriteria" [formControl]="formGroup.get('like')">
<mat-error *ngIf="formGroup.get('like').hasError('backendError')">{{formGroup.get('like').getError('backendError').message}}</mat-error> <mat-error *ngIf="formGroup.get('like').hasError('backendError')">{{formGroup.get('like').getError('backendError').message}}</mat-error>
</mat-form-field> </mat-form-field>
</div>
<!-- End of Search Filter --> <!-- End of Search Filter -->
</div> </div>
<div *ngIf="listingItems && listingItems.length > 0 && pageSize > pageLessSize" class="d-flex justify-content-center"> <div *ngIf="listingItems && listingItems.length > 0 && pageSize > pageLessSize" class="d-flex justify-content-center">
@ -34,3 +43,5 @@
<button type="button" class="btn-load-more" (click)="loadMore()">{{'GENERAL.ACTIONS.LOAD-MORE' | translate}}</button> <button type="button" class="btn-load-more" (click)="loadMore()">{{'GENERAL.ACTIONS.LOAD-MORE' | translate}}</button>
</div> </div>
</div> </div>
</div>
</div>

View File

@ -6,10 +6,10 @@
<div *ngIf="listingItems != null" id="results" class="col-12" #results> <div *ngIf="listingItems != null" id="results" class="col-12" #results>
<div class="row pt-4"> <div class="row pt-4">
<!-- Sort by --> <!-- Sort by -->
<div class="col-12 col-xl-auto"> <div class="col-12 col-xl-auto d-flex align-items-center">
<span class="mb-1">{{'DMP-LISTING.SORT-BY' | translate}}:</span> <span class="mb-4">{{'DMP-LISTING.SORT-BY' | translate}}:</span>
</div> </div>
<div class="col-12 col-xl"> <div class="col-12 col-xl-auto">
<mat-form-field appearance="outline" class="w-100 sort-form"> <mat-form-field appearance="outline" class="w-100 sort-form">
<mat-select placeholder="{{'GENERAL.CRITERIA.LIKE'| translate}}" [formControl]="formGroup.get('order')"> <mat-select placeholder="{{'GENERAL.CRITERIA.LIKE'| translate}}" [formControl]="formGroup.get('order')">
<mat-option *ngIf="!publicMode" [value]="order.UpdatedAt">{{enumUtils.toRecentActivityOrderString(order.UpdatedAt)}}</mat-option> <mat-option *ngIf="!publicMode" [value]="order.UpdatedAt">{{enumUtils.toRecentActivityOrderString(order.UpdatedAt)}}</mat-option>
@ -21,8 +21,8 @@
</div> </div>
<!-- End of Sort by --> <!-- End of Sort by -->
<!-- Search Filter--> <!-- Search Filter-->
<div class="col-12 col-xl"> <div class="col-12 col-xl-auto ml-auto">
<mat-form-field appearance="outline" class="w-100 search-form ml-auto pr-0" floatLabel="never"> <mat-form-field appearance="outline" class="w-100 search-form pr-0" floatLabel="never">
<mat-icon matSuffix>search</mat-icon> <mat-icon matSuffix>search</mat-icon>
<input matInput placeholder="{{'GENERAL.CRITERIA.LIKE'| translate}}" name="likeCriteria" [formControl]="formGroup.get('like')"> <input matInput placeholder="{{'GENERAL.CRITERIA.LIKE'| translate}}" name="likeCriteria" [formControl]="formGroup.get('like')">
<mat-error *ngIf="formGroup.get('like').hasError('backendError')">{{formGroup.get('like').getError('backendError').message}}</mat-error> <mat-error *ngIf="formGroup.get('like').hasError('backendError')">{{formGroup.get('like').getError('backendError').message}}</mat-error>

View File

@ -1,8 +1,13 @@
<div *ngIf="listingItems != null" id="descriptions" #descriptions> <div class="container-fluid">
<div class="d-flex flex-direction-row pt-4"> <div class="row">
<div *ngIf="listingItems != null" id="descriptions" class="col-12" #descriptions>
<div class="row pt-4">
<!-- Sort by --> <!-- Sort by -->
<span class="d-flex align-items-center">{{'DMP-LISTING.SORT-BY' | translate}}:</span> <div class="col-12 col-xl-auto d-flex align-items-center">
<mat-form-field appearance="outline" class="sort-form col-auto"> <span class="mb-4">{{'DMP-LISTING.SORT-BY' | translate}}:</span>
</div>
<div class="col-12 col-xl-auto">
<mat-form-field appearance="outline" class="sort-form w-100">
<mat-select placeholder="{{'GENERAL.CRITERIA.LIKE'| translate}}" [formControl]="formGroup.get('order')"> <mat-select placeholder="{{'GENERAL.CRITERIA.LIKE'| translate}}" [formControl]="formGroup.get('order')">
<mat-option *ngIf="!publicMode" [value]="order.UpdatedAt">{{enumUtils.toRecentActivityOrderString(order.UpdatedAt)}}</mat-option> <mat-option *ngIf="!publicMode" [value]="order.UpdatedAt">{{enumUtils.toRecentActivityOrderString(order.UpdatedAt)}}</mat-option>
<!-- <mat-option *ngIf="publicMode" [value]="order.DATASETPUBLISHED">{{enumUtils.toRecentActivityOrderString(order.DATASETPUBLISHED)}}</mat-option> --> <!-- <mat-option *ngIf="publicMode" [value]="order.DATASETPUBLISHED">{{enumUtils.toRecentActivityOrderString(order.DATASETPUBLISHED)}}</mat-option> -->
@ -11,13 +16,16 @@
<!-- <mat-option [value]="order.CREATED">{{enumUtils.toRecentActivityOrderString(order.CREATED)}}</mat-option> --> <!-- <mat-option [value]="order.CREATED">{{enumUtils.toRecentActivityOrderString(order.CREATED)}}</mat-option> -->
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
</div>
<!-- End of Sort by --> <!-- End of Sort by -->
<!-- Search Filter--> <!-- Search Filter-->
<mat-form-field appearance="outline" class="search-form ml-auto col-auto pr-0" floatLabel="never"> <div class="col-12 col-xl-auto ml-auto">
<mat-form-field appearance="outline" class="search-form w-100" floatLabel="never">
<mat-icon matSuffix>search</mat-icon> <mat-icon matSuffix>search</mat-icon>
<input matInput placeholder="{{'GENERAL.CRITERIA.LIKE'| translate}}" name="likeCriteria" [formControl]="formGroup.get('like')"> <input matInput placeholder="{{'GENERAL.CRITERIA.LIKE'| translate}}" name="likeCriteria" [formControl]="formGroup.get('like')">
<mat-error *ngIf="formGroup.get('like').hasError('backendError')">{{formGroup.get('like').getError('backendError').message}}</mat-error> <mat-error *ngIf="formGroup.get('like').hasError('backendError')">{{formGroup.get('like').getError('backendError').message}}</mat-error>
</mat-form-field> </mat-form-field>
</div>
<!-- End of Search Filter --> <!-- End of Search Filter -->
</div> </div>
<div *ngIf="listingItems && listingItems.length > 0 && pageSize > pageLessSize" class="d-flex justify-content-center"> <div *ngIf="listingItems && listingItems.length > 0 && pageSize > pageLessSize" class="d-flex justify-content-center">
@ -33,3 +41,5 @@
<button type="button" class="btn-load-more" (click)="loadMore()">{{'GENERAL.ACTIONS.LOAD-MORE' | translate}}</button> <button type="button" class="btn-load-more" (click)="loadMore()">{{'GENERAL.ACTIONS.LOAD-MORE' | translate}}</button>
</div> </div>
</div> </div>
</div>
</div>

View File

@ -1,8 +1,13 @@
<div *ngIf="listingItems != null" id="dmps" #dmps> <div class="container-fluid">
<div class="d-flex flex-direction-row pt-4"> <div class="row">
<div *ngIf="listingItems != null" id="dmps" class="col-12" #dmps>
<div class="row pt-4">
<!-- Sort by --> <!-- Sort by -->
<span class="d-flex align-items-center">{{'DMP-LISTING.SORT-BY' | translate}}:</span> <div class="col-12 col-xl-auto d-flex align-items-center">
<mat-form-field appearance="outline" class="sort-form col-auto"> <span class="mb-4">{{'DMP-LISTING.SORT-BY' | translate}}:</span>
</div>
<div class="col-12 col-xl-auto">
<mat-form-field appearance="outline" class="sort-form w-100">
<mat-select placeholder="{{'GENERAL.CRITERIA.LIKE'| translate}}" [formControl]="formGroup.get('order')"> <mat-select placeholder="{{'GENERAL.CRITERIA.LIKE'| translate}}" [formControl]="formGroup.get('order')">
<mat-option *ngIf="!publicMode" [value]="order.UpdatedAt">{{enumUtils.toRecentActivityOrderString(order.UpdatedAt)}}</mat-option> <mat-option *ngIf="!publicMode" [value]="order.UpdatedAt">{{enumUtils.toRecentActivityOrderString(order.UpdatedAt)}}</mat-option>
<!-- <mat-option *ngIf="publicMode" [value]="order.PUBLISHED">{{enumUtils.toRecentActivityOrderString(order.PUBLISHED)}}</mat-option> --> <!-- <mat-option *ngIf="publicMode" [value]="order.PUBLISHED">{{enumUtils.toRecentActivityOrderString(order.PUBLISHED)}}</mat-option> -->
@ -11,13 +16,16 @@
<!-- <mat-option [value]="order.CREATED">{{enumUtils.toRecentActivityOrderString(order.CREATED)}}</mat-option> --> <!-- <mat-option [value]="order.CREATED">{{enumUtils.toRecentActivityOrderString(order.CREATED)}}</mat-option> -->
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
</div>
<!-- End of Sort by --> <!-- End of Sort by -->
<!-- Search Filter--> <!-- Search Filter-->
<mat-form-field appearance="outline" class="search-form ml-auto col-auto pr-0" floatLabel="never"> <div class="col-12 col-xl-auto ml-auto">
<mat-form-field appearance="outline" class="search-form w-100" floatLabel="never">
<mat-icon matSuffix>search</mat-icon> <mat-icon matSuffix>search</mat-icon>
<input matInput placeholder="{{'GENERAL.CRITERIA.LIKE'| translate}}" name="likeCriteria" [formControl]="formGroup.get('like')"> <input matInput placeholder="{{'GENERAL.CRITERIA.LIKE'| translate}}" name="likeCriteria" [formControl]="formGroup.get('like')">
<mat-error *ngIf="formGroup.get('like').hasError('backendError')">{{formGroup.get('like').getError('backendError').message}}</mat-error> <mat-error *ngIf="formGroup.get('like').hasError('backendError')">{{formGroup.get('like').getError('backendError').message}}</mat-error>
</mat-form-field> </mat-form-field>
</div>
<!-- End of Search Filter --> <!-- End of Search Filter -->
</div> </div>
<div *ngIf="listingItems && listingItems.length > 0 && pageSize > pageLessSize" class="d-flex justify-content-center"> <div *ngIf="listingItems && listingItems.length > 0 && pageSize > pageLessSize" class="d-flex justify-content-center">
@ -105,3 +113,5 @@
<button type="button" class="btn-load-more" (click)="loadMore()">{{'GENERAL.ACTIONS.LOAD-MORE' | translate}}</button> <button type="button" class="btn-load-more" (click)="loadMore()">{{'GENERAL.ACTIONS.LOAD-MORE' | translate}}</button>
</div> </div>
</div> </div>
</div>
</div>