Merge branch 'maqueta_ux' into 'develop'

Estilos catalogo y ficha See merge request upm-inesdata/inesdata-public-portal-frontend!7
oeg-upm · Jul 2, 2024 · 0796915 · 0796915
2 parents 38c467e + 5f96db2
commit 0796915
Show file tree

Hide file tree

Showing 11 changed files with 248 additions and 37 deletions.
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -30,6 +30,7 @@ import { SharedModule } from './shared/shared.module';
 import { LoggerModule } from 'ngx-logger';
 import { WriteLoggerService } from './shared/logger/writer.logger.service';
 import { ServerLoggerService } from './shared/logger/server.logger.service';
+import { ASSET_TYPES } from "./shared/utils/app.constants";
 
 /**
  * Ng module: App module
@@ -85,6 +86,10 @@ import { ServerLoggerService } from './shared/logger/server.logger.service';
       useFactory: (configService: AppConfigService) => () => configService.loadConfig(),
       deps: [AppConfigService],
       multi: true
+    },
+    {
+      provide: 'ASSET_TYPES',
+      useFactory: () => [{id: ASSET_TYPES.dataset, name: ASSET_TYPES.dataset}, {id: ASSET_TYPES.machineLearning, name: ASSET_TYPES.machineLearning}, {id: ASSET_TYPES.service, name: ASSET_TYPES.service}],
     }
 	],
 	bootstrap: [AppComponent]

diff --git a/src/app/pages/catalog/asset-details/asset-details.component.html b/src/app/pages/catalog/asset-details/asset-details.component.html
@@ -5,7 +5,7 @@
 
 <div class="item-detail">
 	<div class="header">
-		<i class="pi pi-box icon"></i>
+		<i [ngClass]="getAssetTypeIconClass()" class="pi icon"></i>
 		<h1 class="title">{{ dataset.properties.name }}</h1>
 		<span class="version">Versión {{ dataset.properties.version }}</span>
 		<span class="item-id">{{ dataset.assetId }}</span>

diff --git a/src/app/pages/catalog/asset-details/asset-details.component.scss b/src/app/pages/catalog/asset-details/asset-details.component.scss
@@ -1,7 +1,7 @@
 .item-detail {
 	padding: 20px;
 	border-radius: 8px;
-	font-family: Arial, sans-serif;
+	font-family: "Baloo 2", Helvetica, Arial, sans-serif;
 
 	.header {
 		display: flex;
@@ -10,73 +10,93 @@
 		margin-bottom: 20px;
 
 		.icon {
+			width: 40px;
+			height: 40px;
 			align-content: center;
 			font-size: 2.5rem;
 			margin-right: 15px;
+			&.pi-machinelearning {
+				&::before {
+					filter: saturate(0) brightness(0.6);
+					width: 40px;
+					height: 40px;
+				}
+			}
 		}
 
 		.title {
 			align-content: center;
-			font-size: 24px;
+			color: #404040;
+			font-size: 36px;
 			font-weight: bold;
 			margin: 0;
 			margin-right: 15px;
 		}
 
 		.version {
 			align-content: center;
-			font-size: 14px;
-			color: #888;
+			font-size: 18px;
+			color: #777;
 		}
 
 		.item-id {
 			align-content: center;
-			font-size: 20px;
-			color: #888;
+			font-size: 36px;
+			color: #A1A1A1;
 			font-weight: bold;
 			flex-grow: 1;
    		text-align: end;
 		}
 	}
 
 	.short-description {
-		font-size: 16px;
-		color: #888;
+		width: 50%;
+		font-size: 26px;
+		letter-spacing: -1px;
+		color: #A1A1A1;
 		margin-bottom: 35px;
 	}
 
 	.description {
+		color: #404040;
 		background-color: #fff;
 		margin-bottom: 40px;
+		font-family: "Baloo 2", Helvetica, Arial, sans-serif;
 
 		h2 {
+			font-family: "Baloo 2", Helvetica, Arial, sans-serif;
 			font-size: 18px;
 			margin-bottom: 10px;
 		}
 
 		p {
+			font-family: "Baloo 2", Helvetica, Arial, sans-serif;
 			font-size: 14px;
 			color: #666;
 		}
 	}
 
 	.details {
+		font-family: "Baloo 2", Helvetica, Arial, sans-serif;
 		display: flex;
 		flex-wrap: wrap;
 		gap: 20px;
 		margin-bottom: 20px;
 
 		.detail-item {
+			font-family: "Baloo 2", Helvetica, Arial, sans-serif;
 			flex: 1;
 			min-width: 150px;
 
 			.detail-title {
+				font-family: "Baloo 2", Helvetica, Arial, sans-serif;
 				font-weight: bold;
 				color: #333;
 				display: block;
 			}
 
 			.detail-value {
+				font-family: "Baloo 2", Helvetica, Arial, sans-serif;
 				font-size: 14px;
 				color: #555;
 				display: block;
@@ -86,11 +106,13 @@
 
 	.keywords {
 		h3 {
+			font-family: "Baloo 2", Helvetica, Arial, sans-serif;
 			font-size: 16px;
 			margin-bottom: 0px;
 		}
 
 		span {
+			font-family: "Baloo 2", Helvetica, Arial, sans-serif;
 			font-size: 14px;
 			color: #666;
 			display: block;
@@ -104,13 +126,17 @@
 
 :host ::ng-deep .p-tabview .p-tabview-nav,
 :host ::ng-deep .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+	font-family: "Baloo 2", Helvetica, Arial, sans-serif;
 	border: 0;
 }
 
 .clickable {
+	margin-left: 20px;
 	color: #4367bc;
 	cursor: pointer;
-
+	.pi-arrow-left:before {
+		font-size: 0.75rem;
+	}
 	&:hover {
 		color: #435a91;
 	}

diff --git a/src/app/pages/catalog/asset-details/asset-details.component.ts b/src/app/pages/catalog/asset-details/asset-details.component.ts
@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { DataOffer } from '../../../shared/models/data-offer';
 import { DomSanitizer } from '@angular/platform-browser';
+import { ASSET_TYPES } from 'src/app/shared/utils/app.constants';
 
 
 @Component({
@@ -33,4 +34,14 @@ export class AssetDetailsComponent implements OnInit {
 			}
     });
 	}
+
+	getAssetTypeIconClass(){
+		if (ASSET_TYPES.machineLearning == this.dataset.properties.assetType) {
+			return 'pi-machinelearning';
+		} else if (ASSET_TYPES.service == this.dataset.properties.assetType) {
+			return 'pi-briefcase';
+		} else {
+			return 'pi-box';
+		}
+	}
 }
diff --git a/src/app/pages/catalog/catalog-browser/catalog-browser.component.html b/src/app/pages/catalog/catalog-browser/catalog-browser.component.html
@@ -35,26 +35,26 @@ <h5>Categorías</h5>
 				<span class="filter-tag">Formato: PDF</span>
 			</div>
 
-      <div *ngFor="let dataset of datasets" class="result-item">
+      <div (click)="viewDetails(dataset)" *ngFor="let dataset of datasets" class="result-item">
 				<div class="result-item-title">
-					<i class="pi pi-box"></i>
-					<h4 (click)="viewDetails(dataset)">{{ dataset.properties.name }}</h4>
+					<i [ngClass]="getAssetTypeIconClass(dataset.properties.assetType)" class="pi"></i>
+					<h4>{{ dataset.properties.name }}</h4>
 					<div class="result-item-id">{{ dataset.assetId }}</div>
 				</div>
 				<div class="result-item-version">Versión {{ dataset.properties.version }}</div>
         <div class="result-item-description">
 					<p>{{ dataset.properties.shortDescription }}</p>
         </div>
       </div>
+			<p-paginator
+				[first]="offset"
+				 [rows]="pageSize"
+				[totalRecords]="paginatorLength"
+				[rowsPerPageOptions]="[5, 10, 20]"
+				(onPageChange)="changePage($event)">
+			</p-paginator>
     </section>
 
 
   </div>
-	<p-paginator
-		[first]="offset"
-	 	[rows]="pageSize"
-		[totalRecords]="paginatorLength"
-		[rowsPerPageOptions]="[5, 10, 20]"
-		(onPageChange)="changePage($event)">
-	</p-paginator>
 </div>