From 87ffbfb880688434312f8e4dc36d344f17c4165e Mon Sep 17 00:00:00 2001
From: Sofia Papacharalampous <spapacharalampous@cite.gr>
Date: Fri, 12 Apr 2024 11:46:53 +0300
Subject: [PATCH] ui fixes on dmp and description listing

---
 .../description-listing.component.html        | 56 +++++++++++--------
 .../description-listing.component.scss        | 10 ++--
 .../ui/dmp/listing/dmp-listing.component.html | 45 ++++++++-------
 .../ui/dmp/listing/dmp-listing.component.scss | 10 ++--
 4 files changed, 68 insertions(+), 53 deletions(-)

diff --git a/dmp-frontend/src/app/ui/description/listing/description-listing.component.html b/dmp-frontend/src/app/ui/description/listing/description-listing.component.html
index 3be3468cf..7037b6c1a 100644
--- a/dmp-frontend/src/app/ui/description/listing/description-listing.component.html
+++ b/dmp-frontend/src/app/ui/description/listing/description-listing.component.html
@@ -33,32 +33,40 @@
 		<div>
 			<div class="listing row pb-2">
 				<div *ngIf="listingItems && listingItems.length > 0 || this.lookup.like" class="col-md-12">
-					<div class="d-flex flex-direction-row pt-4">
+					<div class="row pt-4">
 						<!-- Sort by -->
-						<span class="d-flex align-items-center">{{'DMP-LISTING.SORT-BY' | translate}}:</span>
-						<mat-form-field class="sort-form col-auto pr-0">
-							<mat-select placeholder="{{'GENERAL.CRITERIA.LIKE'| translate}}" [formControl]="formGroup.get('order')" (selectionChange)="orderByChanged()">
-								<mat-option *ngIf="!isPublic" [value]="order.UpdatedAt">{{enumUtils.toRecentActivityOrderString(order.UpdatedAt)}}</mat-option>
-								<!-- <mat-option *ngIf="isPublic" [value]="order.DATASETPUBLISHED">{{enumUtils.toRecentActivityOrderString(order.DATASETPUBLISHED)}}</mat-option> -->
-								<mat-option [value]="order.Label">{{enumUtils.toRecentActivityOrderString(order.Label)}}</mat-option>
-								<mat-option *ngIf="!isPublic" [value]="order.Status">{{enumUtils.toRecentActivityOrderString(order.Status)}}</mat-option>
-								<!-- <mat-option [value]="order.CREATED">{{enumUtils.toRecentActivityOrderString(order.CREATED)}}</mat-option> -->
-							</mat-select>
-						</mat-form-field>
-						<!-- End of Sort by -->
-						<div class="d-flex flex-row ml-auto">
-							<!-- Guided Tour -->
-							<div *ngIf="!isPublic" class="center-content" (click)="restartTour()">
-								{{ 'DESCRIPTION-LISTING.ACTIONS.TAKE-A-TOUR'| translate }}
-							</div>
-							<!-- End of Guided Tour -->
-							<!-- Search Filter-->
-							<mat-form-field class="search-form ml-auto col-auto" floatLabel="never">
-								<mat-icon matSuffix>search</mat-icon>
-								<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>
+						<div class="col-12 col-xl-auto d-flex align-items-center">
+							<span class="mb-1 mb-xl-4">{{'DMP-LISTING.SORT-BY' | translate}}:</span>
+						</div>
+						<div class="col-12 col-xl-auto">
+							<mat-form-field class="sort-form w-100">
+								<mat-select placeholder="{{'GENERAL.CRITERIA.LIKE'| translate}}" [formControl]="formGroup.get('order')" (selectionChange)="orderByChanged()">
+									<mat-option *ngIf="!isPublic" [value]="order.UpdatedAt">{{enumUtils.toRecentActivityOrderString(order.UpdatedAt)}}</mat-option>
+									<!-- <mat-option *ngIf="isPublic" [value]="order.DATASETPUBLISHED">{{enumUtils.toRecentActivityOrderString(order.DATASETPUBLISHED)}}</mat-option> -->
+									<mat-option [value]="order.Label">{{enumUtils.toRecentActivityOrderString(order.Label)}}</mat-option>
+									<mat-option *ngIf="!isPublic" [value]="order.Status">{{enumUtils.toRecentActivityOrderString(order.Status)}}</mat-option>
+									<!-- <mat-option [value]="order.CREATED">{{enumUtils.toRecentActivityOrderString(order.CREATED)}}</mat-option> -->
+								</mat-select>
 							</mat-form-field>
-							<!-- End of Search Filter -->
+						</div>
+						<!-- End of Sort by -->
+						<div class="col-12 col-xl-auto ml-auto">
+							<div class="row">
+								<!-- Guided Tour -->
+								<div class="col-12 col-xl-auto d-flex align-items-center">
+									<span *ngIf="!isPublic" class="center-content mb-1 mb-xl-4" (click)="restartTour()">{{ 'DESCRIPTION-LISTING.ACTIONS.TAKE-A-TOUR'| translate }}</span>
+								</div>
+								<!-- End of Guided Tour -->
+								<!-- Search Filter-->
+								<div class="col-12 col-xl-auto">
+									<mat-form-field class="search-form w-100" floatLabel="never">
+										<mat-icon matSuffix>search</mat-icon>
+										<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-form-field>
+								</div>
+								<!-- End of Search Filter -->
+							</div>
 						</div>
 					</div>
 				</div>
diff --git a/dmp-frontend/src/app/ui/description/listing/description-listing.component.scss b/dmp-frontend/src/app/ui/description/listing/description-listing.component.scss
index 081037c23..3e272773e 100644
--- a/dmp-frontend/src/app/ui/description/listing/description-listing.component.scss
+++ b/dmp-frontend/src/app/ui/description/listing/description-listing.component.scss
@@ -142,11 +142,11 @@
 }
 
 .center-content {
-  width: 100%;
-  min-width: 10rem;
-  margin: auto;
-  padding: 0 15px;
-  text-align: right;
+  // width: 100%;
+  // min-width: 10rem;
+  // margin: auto;
+  // padding: 0 15px;
+  // text-align: right;
   font-size: 0.875rem;
   font-weight: 600;
   letter-spacing: 0.02rem;
diff --git a/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.html b/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.html
index 411032d18..2562f6634 100644
--- a/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.html
+++ b/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.html
@@ -22,28 +22,35 @@
 		<div>
 			<div class="listing row pb-2">
 				<div *ngIf="listingItems && listingItems.length > 0 || this.lookup.like" class="col-md-12">
-					<div class="d-flex flex-direction-row pt-4">
+					<div class="row pt-4">
 						<!-- Sort by -->
-						<span class="d-flex align-items-center">{{'DMP-LISTING.SORT-BY' | translate}}:</span>
-						<mat-form-field class="sort-form col-auto">
-							<mat-select placeholder="{{'GENERAL.CRITERIA.LIKE'| translate}}" [formControl]="formGroup.get('order')" (selectionChange)="orderByChanged()">
-								<mat-option *ngIf="!isPublic" [value]="order.UpdatedAt">{{enumUtils.toRecentActivityOrderString(order.UpdatedAt)}}</mat-option>
-								<!-- <mat-option *ngIf="isPublic" [value]="order.PUBLISHED">{{enumUtils.toRecentActivityOrderString(order.PUBLISHED)}}</mat-option> -->
-								<mat-option [value]="order.Label">{{enumUtils.toRecentActivityOrderString(order.Label)}}</mat-option>
-								<mat-option *ngIf="!isPublic" [value]="order.Status">{{enumUtils.toRecentActivityOrderString(order.Status)}}</mat-option>
-							</mat-select>
-						</mat-form-field>
-						<div class="d-flex flex-row ml-auto">
-							<div *ngIf="!isPublic" class="center-content" (click)="restartTour()">{{ 'GENERAL.ACTIONS.TAKE-A-TOUR'| translate }}</div>
-							<mat-form-field class="search-form ml-auto col-auto pr-0"
-								floatLabel="never">
-								<mat-icon matSuffix>search</mat-icon>
-								<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>
+						<div class="col-12 col-xl-auto d-flex align-items-center">
+							<span class="mb-1 mb-xl-4">{{'DMP-LISTING.SORT-BY' | translate}}:</span>
+						</div>
+						<div class="col-12 col-xl-auto">
+							<mat-form-field class="sort-form w-100">
+								<mat-select placeholder="{{'GENERAL.CRITERIA.LIKE'| translate}}" [formControl]="formGroup.get('order')" (selectionChange)="orderByChanged()">
+									<mat-option *ngIf="!isPublic" [value]="order.UpdatedAt">{{enumUtils.toRecentActivityOrderString(order.UpdatedAt)}}</mat-option>
+									<!-- <mat-option *ngIf="isPublic" [value]="order.PUBLISHED">{{enumUtils.toRecentActivityOrderString(order.PUBLISHED)}}</mat-option> -->
+									<mat-option [value]="order.Label">{{enumUtils.toRecentActivityOrderString(order.Label)}}</mat-option>
+									<mat-option *ngIf="!isPublic" [value]="order.Status">{{enumUtils.toRecentActivityOrderString(order.Status)}}</mat-option>
+								</mat-select>
 							</mat-form-field>
 						</div>
+						<div class="col-12 col-xl-auto ml-auto">
+							<div class="row">
+								<div class="col-12 col-xl-auto d-flex align-items-center">
+									<span *ngIf="!isPublic" class="center-content mb-1 mb-xl-4" (click)="restartTour()">{{ 'GENERAL.ACTIONS.TAKE-A-TOUR'| translate }}</span>
+								</div>
+								<div class="col-12 col-xl-auto">
+									<mat-form-field class="search-form w-100" floatLabel="never">
+										<mat-icon matSuffix>search</mat-icon>
+										<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-form-field>
+								</div>
+							</div>
+						</div>
 					</div>
 				</div>
 				<div class="col-md-12 col-sm-12 col-md-9">
diff --git a/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.scss b/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.scss
index 8faaa0244..625643962 100644
--- a/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.scss
+++ b/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.scss
@@ -248,11 +248,11 @@
 }
 
 .center-content {
-  width: 100%;
-  min-width: 10rem;
-  margin: auto;
-  padding: 0 15px;
-  text-align: right;
+  // width: 100%;
+  // min-width: 10rem;
+  // margin: auto;
+  // padding: 0 15px;
+  // text-align: right;
   font-size: 0.875rem;
   font-weight: 600;
   letter-spacing: 0.02rem;