From 52f12349c9254f5fc30660b99985ee4acff87776 Mon Sep 17 00:00:00 2001
From: kaw67872 <kawtar.laariche@iais.fraunhofer.de>
Date: Wed, 24 Jul 2024 10:50:06 +0200
Subject: [PATCH] #24: :lipstick: fix alignment
---
.../dashboard/dashboard.component.scss | 30 +-
.../my-models/my-models.component.html | 318 ++++----
.../my-models/my-models.component.scss | 36 +-
.../marketplace/marketplace.component.html | 241 +++---
.../marketplace/marketplace.component.scss | 41 +-
.../model-details.component.html | 736 +++++++++---------
.../model-details.component.scss | 21 +-
.../model-management.component.html | 9 +-
.../model-management.component.scss | 16 +-
src/environments/environment.ts | 2 +-
src/styles.scss | 1 +
11 files changed, 774 insertions(+), 677 deletions(-)
diff --git a/src/app/features/dashboard/dashboard.component.scss b/src/app/features/dashboard/dashboard.component.scss
index 6a2724e..f740627 100644
--- a/src/app/features/dashboard/dashboard.component.scss
+++ b/src/app/features/dashboard/dashboard.component.scss
@@ -10,7 +10,6 @@ mat-toolbar {
}
mat-sidenav-container {
- height: calc(100% - 64px);
overflow: hidden !important;
}
@@ -24,3 +23,32 @@ mat-sidenav {
overflow: hidden !important;
padding-top: 0 !important;
}
+
+::ng-deep.mat-drawer-container {
+ position: relative;
+ z-index: -1;
+ box-sizing: border-box;
+ -webkit-overflow-scrolling: touch;
+ display: block;
+ overflow: hidden;
+ height: 100% !important;
+}
+.all-wrap {
+ min-height: 100vh;
+}
+
+.content {
+ flex: 1; // child will set to an equal size inside the container
+}
+
+main {
+ display: flex;
+ flex-direction: column;
+
+ // Select all direct descendants only of the <main> element
+ // that are not <router-outlet> elements:
+ > *:not(router-outlet) {
+ flex: 1; // child will set to an equal size inside the container
+ display: block;
+ }
+}
diff --git a/src/app/features/dashboard/my-models/my-models.component.html b/src/app/features/dashboard/my-models/my-models.component.html
index 9595cce..b723d7d 100644
--- a/src/app/features/dashboard/my-models/my-models.component.html
+++ b/src/app/features/dashboard/my-models/my-models.component.html
@@ -1,166 +1,170 @@
-<section class="pageheadsection mob-pageheadsection1">
- <div class="mdl-grid mdl-grid.mdl-grid--no-spacing">
- <div>
- <gp-headline [headlineTitle]="'My Models'"></gp-headline>
- </div>
- <gp-breadcrumb-navigation
- [firstNavigationLabel]="{ label: 'Home' }"
- [secondNavigationLabel]="{ label: 'My models', disabled: true }"
- (firstNavigationClicked)="onHomeClick()"
- ></gp-breadcrumb-navigation>
- </div>
-</section>
-<mat-sidenav-container>
- <mat-sidenav mode="side" opened>
- <gp-filters
- [tags]="tags"
- [categories]="categories"
- (selectedTagsChange)="handleSelectedTagsChange($event)"
- (selectedCategoriesChange)="handleSelectedCategoriesChange($event)"
- (searchValueChanged)="onSearchValueChanged($event)"
- ></gp-filters>
- </mat-sidenav>
- <mat-sidenav-content>
- <div class="content-container">
- <div class="sort-toggle-container">
- <div class="gp-sort-by">
- <gp-sort-by
- [sortByOptions]="sortByOptions"
- [selectedSortBy]="sortByFilter"
- (sortBySelected)="updateFieldToDirectionMap($event)"
- ></gp-sort-by>
- </div>
- <div class="gp-card-list-view">
- <gp-solutions-toggle-view
- [viewTile]="viewTile"
- (viewTileChange)="onViewTileChange($event)"
- ></gp-solutions-toggle-view>
- </div>
+<div class="flex-column">
+ <section class="pageheadsection mob-pageheadsection1">
+ <div class="mdl-grid mdl-grid.mdl-grid--no-spacing">
+ <div>
+ <gp-headline [headlineTitle]="'My Models'"></gp-headline>
</div>
- <!--Unpublished models section-->
- @if (modelType === "both") {
- <div class="flex-column">
- <gp-model-list
- [solutions]="selectedUnpublishedSolutions"
- [totalItems]="unpublishedTotalItems"
- [isLoading]="isUnpublishedSolutionsLoading"
- [headlineTitle]="'MY UNPUBLISHED MODELS'"
- [showEntirePage]="false"
- [viewTile]="viewTile"
- [pageSize]="pageSize"
- [pageIndex]="pageIndex"
- [pageSizeOptions]="pageSizeOptions"
- [modelType]="'unpublished'"
- [favoriteSolutionsMap]="favoriteSolutionsMap"
- [calculateStartIndex]="calculateStartIndex(pageIndex, pageSize)"
- [calculateEndIndex]="
- calculateEndIndex(unpublishedTotalItems, pageIndex, pageSize)
- "
- (pageChange)="onPageChange($event)"
- (updateFavorite)="updateFavorite($event)"
- (backEvent)="onClickBack('both')"
- ></gp-model-list>
+ <gp-breadcrumb-navigation
+ [firstNavigationLabel]="{ label: 'Home' }"
+ [secondNavigationLabel]="{ label: 'My models', disabled: true }"
+ (firstNavigationClicked)="onHomeClick()"
+ ></gp-breadcrumb-navigation>
+ </div>
+ </section>
+ <mat-sidenav-container>
+ <mat-sidenav mode="side" opened>
+ <gp-filters
+ [tags]="tags"
+ [categories]="categories"
+ (selectedTagsChange)="handleSelectedTagsChange($event)"
+ (selectedCategoriesChange)="handleSelectedCategoriesChange($event)"
+ (searchValueChanged)="onSearchValueChanged($event)"
+ ></gp-filters>
+ </mat-sidenav>
+ <mat-sidenav-content class="page-wrap">
+ <main class="content-router-outlet">
+ <div class="content-container">
+ <div class="sort-toggle-container">
+ <div class="gp-sort-by">
+ <gp-sort-by
+ [sortByOptions]="sortByOptions"
+ [selectedSortBy]="sortByFilter"
+ (sortBySelected)="updateFieldToDirectionMap($event)"
+ ></gp-sort-by>
+ </div>
+ <div class="gp-card-list-view">
+ <gp-solutions-toggle-view
+ [viewTile]="viewTile"
+ (viewTileChange)="onViewTileChange($event)"
+ ></gp-solutions-toggle-view>
+ </div>
+ </div>
+ <!--Unpublished models section-->
+ @if (modelType === "both") {
+ <div class="flex-column">
+ <gp-model-list
+ [solutions]="selectedUnpublishedSolutions"
+ [totalItems]="unpublishedTotalItems"
+ [isLoading]="isUnpublishedSolutionsLoading"
+ [headlineTitle]="'MY UNPUBLISHED MODELS'"
+ [showEntirePage]="false"
+ [viewTile]="viewTile"
+ [pageSize]="pageSize"
+ [pageIndex]="pageIndex"
+ [pageSizeOptions]="pageSizeOptions"
+ [modelType]="'unpublished'"
+ [favoriteSolutionsMap]="favoriteSolutionsMap"
+ [calculateStartIndex]="calculateStartIndex(pageIndex, pageSize)"
+ [calculateEndIndex]="
+ calculateEndIndex(unpublishedTotalItems, pageIndex, pageSize)
+ "
+ (pageChange)="onPageChange($event)"
+ (updateFavorite)="updateFavorite($event)"
+ (backEvent)="onClickBack('both')"
+ ></gp-model-list>
- <div class="see-all-container">
- <button
- class="see-all-button"
- aria-label="icon button with a menu icon"
- (click)="onClickSeeAll('unpublished')"
- >
- <div class="see-all-text-container">
- <span>See all</span> <mat-icon>arrow_forward_ios</mat-icon>
+ <div class="see-all-container">
+ <button
+ class="see-all-button"
+ aria-label="icon button with a menu icon"
+ (click)="onClickSeeAll('unpublished')"
+ >
+ <div class="see-all-text-container">
+ <span>See all</span> <mat-icon>arrow_forward_ios</mat-icon>
+ </div>
+ </button>
</div>
- </button>
- </div>
- </div>
- }
+ </div>
+ }
- @if (modelType === "unpublished") {
- <div class="flex-column">
- <gp-model-list
- [solutions]="selectedUnpublishedSolutions"
- [totalItems]="unpublishedTotalItems"
- [isLoading]="isUnpublishedSolutionsLoading"
- [headlineTitle]="'MY UNPUBLISHED MODELS'"
- [showEntirePage]="true"
- [viewTile]="viewTile"
- [pageSize]="pageSize"
- [pageIndex]="pageIndex"
- [pageSizeOptions]="pageSizeOptions"
- [modelType]="'unpublished'"
- [favoriteSolutionsMap]="favoriteSolutionsMap"
- [calculateStartIndex]="calculateStartIndex(pageIndex, pageSize)"
- [calculateEndIndex]="
- calculateEndIndex(unpublishedTotalItems, pageIndex, pageSize)
- "
- (pageChange)="onPageChange($event)"
- (updateFavorite)="updateFavorite($event)"
- (backEvent)="onClickBack('both')"
- ></gp-model-list>
- </div>
- }
+ @if (modelType === "unpublished") {
+ <div class="flex-column">
+ <gp-model-list
+ [solutions]="selectedUnpublishedSolutions"
+ [totalItems]="unpublishedTotalItems"
+ [isLoading]="isUnpublishedSolutionsLoading"
+ [headlineTitle]="'MY UNPUBLISHED MODELS'"
+ [showEntirePage]="true"
+ [viewTile]="viewTile"
+ [pageSize]="pageSize"
+ [pageIndex]="pageIndex"
+ [pageSizeOptions]="pageSizeOptions"
+ [modelType]="'unpublished'"
+ [favoriteSolutionsMap]="favoriteSolutionsMap"
+ [calculateStartIndex]="calculateStartIndex(pageIndex, pageSize)"
+ [calculateEndIndex]="
+ calculateEndIndex(unpublishedTotalItems, pageIndex, pageSize)
+ "
+ (pageChange)="onPageChange($event)"
+ (updateFavorite)="updateFavorite($event)"
+ (backEvent)="onClickBack('both')"
+ ></gp-model-list>
+ </div>
+ }
- <!--published solutions -->
+ <!--published solutions -->
- @if (modelType === "both") {
- <div class="flex-column">
- <gp-model-list
- [solutions]="selectedPublishedSolutions"
- [totalItems]="publishedTotalItems"
- [isLoading]="isPublishedSolutionsLoading"
- [headlineTitle]="'MY PUBLISHED MODELS'"
- [showEntirePage]="false"
- [viewTile]="viewTile"
- [pageSize]="pageSize"
- [pageIndex]="pageIndex"
- [pageSizeOptions]="pageSizeOptions"
- [modelType]="'published'"
- [favoriteSolutionsMap]="favoriteSolutionsMap"
- [calculateStartIndex]="calculateStartIndex(pageIndex, pageSize)"
- [calculateEndIndex]="
- calculateEndIndex(publishedTotalItems, pageIndex, pageSize)
- "
- (pageChange)="onPageChange($event)"
- (updateFavorite)="updateFavorite($event)"
- (backEvent)="onClickBack('both')"
- ></gp-model-list>
+ @if (modelType === "both") {
+ <div class="flex-column">
+ <gp-model-list
+ [solutions]="selectedPublishedSolutions"
+ [totalItems]="publishedTotalItems"
+ [isLoading]="isPublishedSolutionsLoading"
+ [headlineTitle]="'MY PUBLISHED MODELS'"
+ [showEntirePage]="false"
+ [viewTile]="viewTile"
+ [pageSize]="pageSize"
+ [pageIndex]="pageIndex"
+ [pageSizeOptions]="pageSizeOptions"
+ [modelType]="'published'"
+ [favoriteSolutionsMap]="favoriteSolutionsMap"
+ [calculateStartIndex]="calculateStartIndex(pageIndex, pageSize)"
+ [calculateEndIndex]="
+ calculateEndIndex(publishedTotalItems, pageIndex, pageSize)
+ "
+ (pageChange)="onPageChange($event)"
+ (updateFavorite)="updateFavorite($event)"
+ (backEvent)="onClickBack('both')"
+ ></gp-model-list>
- <div class="see-all-container">
- <button
- class="see-all-button"
- aria-label="Example icon button with a menu icon"
- (click)="onClickSeeAll('published')"
- >
- <div class="see-all-text-container">
- <span>See all</span> <mat-icon>arrow_forward_ios</mat-icon>
+ <div class="see-all-container">
+ <button
+ class="see-all-button"
+ aria-label="Example icon button with a menu icon"
+ (click)="onClickSeeAll('published')"
+ >
+ <div class="see-all-text-container">
+ <span>See all</span> <mat-icon>arrow_forward_ios</mat-icon>
+ </div>
+ </button>
</div>
- </button>
- </div>
- </div>
- }
- @if (modelType === "published") {
- <div class="flex-column">
- <gp-model-list
- [solutions]="selectedPublishedSolutions"
- [totalItems]="publishedTotalItems"
- [isLoading]="isPublishedSolutionsLoading"
- [headlineTitle]="'MY PUBLISHED MODELS'"
- [showEntirePage]="true"
- [viewTile]="viewTile"
- [pageSize]="pageSize"
- [pageIndex]="pageIndex"
- [pageSizeOptions]="pageSizeOptions"
- [modelType]="'published'"
- [favoriteSolutionsMap]="favoriteSolutionsMap"
- [calculateStartIndex]="calculateStartIndex(pageIndex, pageSize)"
- [calculateEndIndex]="
- calculateEndIndex(publishedTotalItems, pageIndex, pageSize)
- "
- (pageChange)="onPageChange($event)"
- (updateFavorite)="updateFavorite($event)"
- (backEvent)="onClickBack('both')"
- ></gp-model-list>
+ </div>
+ }
+ @if (modelType === "published") {
+ <div class="flex-column">
+ <gp-model-list
+ [solutions]="selectedPublishedSolutions"
+ [totalItems]="publishedTotalItems"
+ [isLoading]="isPublishedSolutionsLoading"
+ [headlineTitle]="'MY PUBLISHED MODELS'"
+ [showEntirePage]="true"
+ [viewTile]="viewTile"
+ [pageSize]="pageSize"
+ [pageIndex]="pageIndex"
+ [pageSizeOptions]="pageSizeOptions"
+ [modelType]="'published'"
+ [favoriteSolutionsMap]="favoriteSolutionsMap"
+ [calculateStartIndex]="calculateStartIndex(pageIndex, pageSize)"
+ [calculateEndIndex]="
+ calculateEndIndex(publishedTotalItems, pageIndex, pageSize)
+ "
+ (pageChange)="onPageChange($event)"
+ (updateFavorite)="updateFavorite($event)"
+ (backEvent)="onClickBack('both')"
+ ></gp-model-list>
+ </div>
+ }
</div>
- }
- </div> </mat-sidenav-content
-></mat-sidenav-container>
+ </main> </mat-sidenav-content
+ ></mat-sidenav-container>
+</div>
diff --git a/src/app/features/dashboard/my-models/my-models.component.scss b/src/app/features/dashboard/my-models/my-models.component.scss
index 1819422..f0f6420 100644
--- a/src/app/features/dashboard/my-models/my-models.component.scss
+++ b/src/app/features/dashboard/my-models/my-models.component.scss
@@ -2,9 +2,23 @@
padding: 24px;
}
+.page-wrap {
+ display: flex !important;
+ flex-direction: column !important;
+ min-height: 100vh !important;
+}
+
+.content-router-outlet {
+ flex: 1;
+}
+
+// content height
+::ng-deep.mat-drawer-content {
+ height: 89.1% !important;
+}
+
mat-sidenav-container {
- height: calc(100% - 64px);
- overflow: auto;
+ overflow: hidden;
}
.cards-container {
@@ -25,7 +39,7 @@ mat-sidenav {
width: 300px;
background: #f1f1f1;
height: 100%;
- overflow-y: auto;
+ overflow: hidden;
}
.mat-grid-tile {
@@ -34,23 +48,11 @@ mat-sidenav {
:host ::ng-deep .mat-drawer-inner-container {
overflow: hidden !important;
+ padding: 20px 0 20px 0;
}
mat-sidenav-content {
- height: 77vh;
- overflow: auto;
- .loading-data {
- height: 75vh;
- width: 100%;
- overflow: hidden !important;
- display: flex;
- align-items: center;
- justify-content: center;
-
- p {
- margin: 0;
- }
- }
+ overflow: hidden !important;
}
.pageheadsection {
diff --git a/src/app/features/marketplace/marketplace.component.html b/src/app/features/marketplace/marketplace.component.html
index 17d9586..1e1ff78 100644
--- a/src/app/features/marketplace/marketplace.component.html
+++ b/src/app/features/marketplace/marketplace.component.html
@@ -1,126 +1,131 @@
-<section class="pageheadsection mob-pageheadsection1">
- <div class="mdl-grid mdl-grid.mdl-grid--no-spacing">
- <div>
- <gp-headline [headlineTitle]="'Marketplace |'"></gp-headline>
- <div class="favorite-buttons-container" *ngIf="loginUserId">
- <button
- class="favorite-button"
- mat-raised-button
- [color]="!isOnMyFavoriteSelected ? 'primary' : ''"
- (click)="onAllCatalogsClick()"
- >
- All catalogs
- </button>
- <button
- class="favorite-button"
- mat-raised-button
- [color]="isOnMyFavoriteSelected ? 'primary' : ''"
- (click)="onMyFavoriteCatalogsClick()"
- >
- My favorite catalogs
- </button>
+<div class="flex-column">
+ <section class="pageheadsection mob-pageheadsection1">
+ <div class="mdl-grid mdl-grid.mdl-grid--no-spacing">
+ <div>
+ <gp-headline [headlineTitle]="'Marketplace |'"></gp-headline>
+ <div class="favorite-buttons-container" *ngIf="loginUserId">
+ <button
+ class="favorite-button"
+ mat-raised-button
+ [color]="!isOnMyFavoriteSelected ? 'primary' : ''"
+ (click)="onAllCatalogsClick()"
+ >
+ All catalogs
+ </button>
+ <button
+ class="favorite-button"
+ mat-raised-button
+ [color]="isOnMyFavoriteSelected ? 'primary' : ''"
+ (click)="onMyFavoriteCatalogsClick()"
+ >
+ My favorite catalogs
+ </button>
+ </div>
</div>
+ <gp-breadcrumb-navigation
+ [firstNavigationLabel]="{ label: 'Home' }"
+ [secondNavigationLabel]="{ label: 'Marketplace', disabled: true }"
+ (firstNavigationClicked)="onHomeClick()"
+ ></gp-breadcrumb-navigation>
</div>
- <gp-breadcrumb-navigation
- [firstNavigationLabel]="{ label: 'Home' }"
- [secondNavigationLabel]="{ label: 'Marketplace', disabled: true }"
- (firstNavigationClicked)="onHomeClick()"
- ></gp-breadcrumb-navigation>
- </div>
-</section>
-<mat-sidenav-container>
- <mat-sidenav mode="side" opened>
- <gp-filters
- [tags]="tags"
- [categories]="categories"
- (selectedTagsChange)="handleSelectedTagsChange($event)"
- (selectedCategoriesChange)="handleSelectedCategoriesChange($event)"
- (searchValueChanged)="onSearchValueChanged($event)"
- ></gp-filters>
- </mat-sidenav>
- <mat-sidenav-content>
- <div class="filters-container">
- <div class="total-items-container" *ngIf="!isLoading">
- @if (totalItems > 0) {
- <div class="total-items-text-container">
- <span class="showing-text"
- >Showing -
- <span class="total-items-text">
- {{ calculateStartIndex() }} to {{ calculateEndIndex() }} of
- {{ totalItems }} Models</span
- ></span
- >
+ </section>
+ <mat-sidenav-container>
+ <mat-sidenav mode="side" opened>
+ <gp-filters
+ [tags]="tags"
+ [categories]="categories"
+ (selectedTagsChange)="handleSelectedTagsChange($event)"
+ (selectedCategoriesChange)="handleSelectedCategoriesChange($event)"
+ (searchValueChanged)="onSearchValueChanged($event)"
+ ></gp-filters>
+ </mat-sidenav>
+ <mat-sidenav-content class="page-wrap">
+ <main class="content-router-outlet">
+ <div class="filters-container">
+ <div class="total-items-container" *ngIf="!isLoading">
+ @if (totalItems > 0) {
+ <div class="total-items-text-container">
+ <span class="showing-text"
+ >Showing -
+ <span class="total-items-text">
+ {{ calculateStartIndex() }} to {{ calculateEndIndex() }} of
+ {{ totalItems }} Models</span
+ ></span
+ >
+ </div>
+ }
</div>
- }
- </div>
- <div class="gp-sort-by" *ngIf="!isLoading">
- <gp-sort-by
- [sortByOptions]="sortByOptions"
- [selectedSortBy]="sortByFilter"
- (sortBySelected)="updateFieldToDirectionMap($event)"
- ></gp-sort-by>
- </div>
- <div class="gp-card-list-view" *ngIf="!isLoading">
- <gp-solutions-toggle-view
- [viewTile]="viewTile"
- (viewTileChange)="onViewTileChange($event)"
- ></gp-solutions-toggle-view>
- </div>
- </div>
- <ng-container *ngIf="publicSolutions && !isLoading; else loadingState">
- <ng-container *ngIf="publicSolutions.length > 0; else noCatalogs">
- <div *ngIf="!viewTile; else gridView">
- <!-- Horizontal list view content -->
- <div class="grid-list">
- <gp-list-item
- [item]="item"
- [items]="publicSolutions"
- [isMarketPlacePage]="true"
- [isPublishedSolution]="true"
- *ngFor="let item of publicSolutions"
- ></gp-list-item>
+ <div class="gp-sort-by" *ngIf="!isLoading">
+ <gp-sort-by
+ [sortByOptions]="sortByOptions"
+ [selectedSortBy]="sortByFilter"
+ (sortBySelected)="updateFieldToDirectionMap($event)"
+ ></gp-sort-by>
+ </div>
+ <div class="gp-card-list-view" *ngIf="!isLoading">
+ <gp-solutions-toggle-view
+ [viewTile]="viewTile"
+ (viewTileChange)="onViewTileChange($event)"
+ ></gp-solutions-toggle-view>
</div>
</div>
- <ng-template #gridView>
- <div class="grid-list">
- <mat-grid-list cols="5" rowHeight="3:4" gutterSize="20px">
- <mat-grid-tile *ngFor="let item of publicSolutions">
- <div class="cards-container">
- <gp-card-item
- [isPublishedSolution]="true"
- [item]="item"
- [items]="publicSolutions"
- [isMarketPlacePage]="true"
- [isFavoriteSolution]="favoriteSolutionsMap[item.solutionId]"
- (favoriteClicked)="updateFavorite(item.solutionId)"
- ></gp-card-item>
- </div>
- </mat-grid-tile>
- </mat-grid-list>
+ <ng-container *ngIf="publicSolutions && !isLoading; else loadingState">
+ <ng-container *ngIf="publicSolutions.length > 0; else noCatalogs">
+ <div *ngIf="!viewTile; else gridView">
+ <!-- Horizontal list view content -->
+ <div class="grid-list">
+ <gp-list-item
+ [item]="item"
+ [items]="publicSolutions"
+ [isMarketPlacePage]="true"
+ [isPublishedSolution]="true"
+ *ngFor="let item of publicSolutions"
+ ></gp-list-item>
+ </div>
+ </div>
+ <ng-template #gridView>
+ <div class="grid-list">
+ <mat-grid-list cols="5" rowHeight="3:4" gutterSize="20px">
+ <mat-grid-tile *ngFor="let item of publicSolutions">
+ <div class="cards-container">
+ <gp-card-item
+ [isPublishedSolution]="true"
+ [item]="item"
+ [items]="publicSolutions"
+ [isMarketPlacePage]="true"
+ [isFavoriteSolution]="
+ favoriteSolutionsMap[item.solutionId]
+ "
+ (favoriteClicked)="updateFavorite(item.solutionId)"
+ ></gp-card-item>
+ </div>
+ </mat-grid-tile>
+ </mat-grid-list>
+ </div>
+ </ng-template>
+ </ng-container>
+ <ng-template #noCatalogs>
+ <div class="loading-data">
+ <p>No result found...</p>
+ </div>
+ </ng-template>
+ </ng-container>
+ <ng-template #loadingState>
+ <div class="loading-data">
+ <p>Loading data ...</p>
</div>
</ng-template>
- </ng-container>
- <ng-template #noCatalogs>
- <div class="loading-data">
- <p>No result found...</p>
- </div>
- </ng-template>
- </ng-container>
- <ng-template #loadingState>
- <div class="loading-data">
- <p>Loading data ...</p>
- </div>
- </ng-template>
- @if (totalItems > 0) {
- <mat-paginator
- [length]="totalItems"
- [pageSize]="pageSize"
- [pageSizeOptions]="pageSizeOptions"
- (page)="onPageChange($event)"
- aria-label="Select page"
- aria-label="Select page"
- >
- </mat-paginator>
- }</mat-sidenav-content
-></mat-sidenav-container>
+ @if (totalItems > 0) {
+ <mat-paginator
+ [length]="totalItems"
+ [pageSize]="pageSize"
+ [pageSizeOptions]="pageSizeOptions"
+ (page)="onPageChange($event)"
+ aria-label="Select page"
+ aria-label="Select page"
+ >
+ </mat-paginator>
+ }</main></mat-sidenav-content
+ ></mat-sidenav-container>
+</div>
diff --git a/src/app/features/marketplace/marketplace.component.scss b/src/app/features/marketplace/marketplace.component.scss
index a7889e3..d5e1010 100644
--- a/src/app/features/marketplace/marketplace.component.scss
+++ b/src/app/features/marketplace/marketplace.component.scss
@@ -2,9 +2,23 @@
padding: 24px;
}
+.page-wrap {
+ display: flex !important;
+ flex-direction: column !important;
+ min-height: 100vh !important;
+}
+
+.content-router-outlet {
+ flex: 1;
+}
+
+// content height
+::ng-deep.mat-drawer-content {
+ height: 89.1% !important;
+}
+
mat-sidenav-container {
- height: calc(100% - 64px);
- overflow: auto;
+ overflow: hidden;
}
.cards-container {
@@ -25,7 +39,8 @@ mat-sidenav {
width: 300px;
background: #f1f1f1;
height: 100%;
- overflow-y: auto;
+ //overflow-y: auto;
+ overflow: hidden;
}
.mat-grid-tile {
@@ -34,23 +49,11 @@ mat-sidenav {
:host ::ng-deep .mat-drawer-inner-container {
overflow: hidden !important;
+ padding: 20px 0 20px 0;
}
mat-sidenav-content {
- height: 77vh;
- overflow: auto;
- .loading-data {
- height: 75vh;
- width: 100%;
- overflow: hidden !important;
- display: flex;
- align-items: center;
- justify-content: center;
-
- p {
- margin: 0;
- }
- }
+ overflow: hidden;
}
.pageheadsection {
@@ -160,3 +163,7 @@ mat-sidenav-content {
.total-items-text {
color: #8f8f8f;
}
+
+.full-height {
+ height: 100%;
+}
diff --git a/src/app/features/model-details/model-details.component.html b/src/app/features/model-details/model-details.component.html
index c4b6886..b39f6e5 100644
--- a/src/app/features/model-details/model-details.component.html
+++ b/src/app/features/model-details/model-details.component.html
@@ -1,382 +1,398 @@
-<section class="pageheadsection" *ngIf="data$ | async as data">
- <div class="md-head-container1">
- <div class="md-head-containerinner1">
- <div matTooltip="{{ solution?.name?.toString()?.split('_')?.join('') }}">
- <span class="md-headline4"
- ><img [src]="imageToShow" tabindex="0" class="solutions-img" />{{
- data.solution?.name?.toString()?.split("_")?.join(" ")
- }}
- </span>
- </div>
- <div class="md-head-container3">
- <div class="md-head-containerinner-seperator"></div>
- <div class="version-container cataloglist-container">
- <button
- class="mdl-button"
- #menuTrigger="matMenuTrigger"
- [matMenuTriggerFor]="menu"
- (click)="menuTrigger.openMenu()"
- >
- <span class="text-ellipsis"
- >Catalog - {{ selectedDefaultCatalog?.name }}</span
- >
- <i class="material-icons">keyboard_arrow_down</i>
- </button>
- <mat-menu #menu="matMenu">
- <ul>
- <li *ngFor="let catalog of data.catalogs" class="selected">
- <span
- [ngClass]="{
- 'md-cat-txtellipsis': catalog.name.length > 15
- }"
- >{{ catalog.name }}</span
- >
- <span class="custom-tooltip-text">{{ catalog.name }}</span>
- </li>
- </ul>
- </mat-menu>
+<div class="flex-column">
+ <section class="pageheadsection" *ngIf="data$ | async as data">
+ <div class="md-head-container1">
+ <div class="md-head-containerinner1">
+ <div
+ matTooltip="{{ solution?.name?.toString()?.split('_')?.join('') }}"
+ >
+ <span class="md-headline4"
+ ><img [src]="imageToShow" tabindex="0" class="solutions-img" />{{
+ data.solution?.name?.toString()?.split("_")?.join(" ")
+ }}
+ </span>
</div>
- </div>
- <gp-version-dropdown
- [selectedDefaultRevision]="selectedDefaultRevision"
- [revisionsList]="revisionsList"
- (revisionChange)="onChangeVersion($event)"
- ></gp-version-dropdown>
- </div>
- <ng-container *ngIf="isLoggedIn$ | async; else notLoggedIn">
- <div class="md-head-container2">
- <div class="select-control dcl-list">
- <mat-form-field appearance="fill">
- <mat-select placeholder="Deploy for Execution">
- <mat-option
- *ngFor="let menuEntry of deployMenu"
- [value]="menuEntry.title"
- (click)="triggerDeployment(menuEntry)"
+ <div class="md-head-container3">
+ <div class="md-head-containerinner-seperator"></div>
+ <div class="version-container cataloglist-container">
+ <button
+ class="mdl-button"
+ #menuTrigger="matMenuTrigger"
+ [matMenuTriggerFor]="menu"
+ (click)="menuTrigger.openMenu()"
+ >
+ <span class="text-ellipsis"
+ >Catalog - {{ selectedDefaultCatalog?.name }}</span
>
- <img
- [src]="getImagePath(menuEntry.title)"
- class="deploy-image"
- />
- {{ menuEntry.title }}
- </mat-option>
- </mat-select>
- </mat-form-field>
+ <i class="material-icons">keyboard_arrow_down</i>
+ </button>
+ <mat-menu #menu="matMenu">
+ <ul>
+ <li *ngFor="let catalog of data.catalogs" class="selected">
+ <span
+ [ngClass]="{
+ 'md-cat-txtellipsis': catalog.name.length > 15
+ }"
+ >{{ catalog.name }}</span
+ >
+ <span class="custom-tooltip-text">{{ catalog.name }}</span>
+ </li>
+ </ul>
+ </mat-menu>
+ </div>
</div>
+ <gp-version-dropdown
+ [selectedDefaultRevision]="selectedDefaultRevision"
+ [revisionsList]="revisionsList"
+ (revisionChange)="onChangeVersion($event)"
+ ></gp-version-dropdown>
</div>
- </ng-container>
- <ng-template #notLoggedIn>
- <div class="md-head-container2">
- <button class="mdl-button btn-primary" (click)="openSignInDialog()">
- Sign in to download
- </button>
- <button class="mdl-button btn-secondary" (click)="openSignInDialog()">
- Sign in to deploy to cloud
- </button>
- </div>
- </ng-template>
- </div>
+ <ng-container *ngIf="isLoggedIn$ | async; else notLoggedIn">
+ <div class="md-head-container2">
+ <div class="select-control dcl-list">
+ <mat-form-field appearance="fill">
+ <mat-select placeholder="Deploy for Execution">
+ <mat-option
+ *ngFor="let menuEntry of deployMenu"
+ [value]="menuEntry.title"
+ (click)="triggerDeployment(menuEntry)"
+ >
+ <img
+ [src]="getImagePath(menuEntry.title)"
+ class="deploy-image"
+ />
+ {{ menuEntry.title }}
+ </mat-option>
+ </mat-select>
+ </mat-form-field>
+ </div>
+ </div>
+ </ng-container>
+ <ng-template #notLoggedIn>
+ <div class="md-head-container2">
+ <button class="mdl-button btn-primary" (click)="openSignInDialog()">
+ Sign in to download
+ </button>
+ <button class="mdl-button btn-secondary" (click)="openSignInDialog()">
+ Sign in to deploy to cloud
+ </button>
+ </div>
+ </ng-template>
+ </div>
- <div class="md-head-container2 breadcrumb-navigation-container">
- <gp-breadcrumb-navigation
- [solution]="data.solution"
- [firstNavigationLabel]="{ label: 'Home' }"
- [secondNavigationLabel]="{ label: 'MarketPlace' }"
- (firstNavigationClicked)="onHomeClick()"
- (secondNavigationClicked)="onMarketPlaceClick()"
- ></gp-breadcrumb-navigation>
- <span class="md-lbl1"
- >Version {{ selectedDefaultRevision?.version }} |
- {{
- data.solution?.downloadCount === null ? 0 : data.solution?.downloadCount
- }}
- Downloaded</span
- >
- </div>
-</section>
-<div class="md-container-head1 md-header3" *ngIf="data$ | async as data">
- <div class="head-stat-left">
- <div class="mdchild1">
- <img
- class="userimg"
- src="../../../assets/images/user-profile-black.png"
- />
+ <div class="md-head-container2 breadcrumb-navigation-container">
+ <gp-breadcrumb-navigation
+ [solution]="data.solution"
+ [firstNavigationLabel]="{ label: 'Home' }"
+ [secondNavigationLabel]="{ label: 'MarketPlace' }"
+ (firstNavigationClicked)="onHomeClick()"
+ (secondNavigationClicked)="onMarketPlaceClick()"
+ ></gp-breadcrumb-navigation>
+ <span class="md-lbl1"
+ >Version {{ selectedDefaultRevision?.version }} |
+ {{
+ data.solution?.downloadCount === null
+ ? 0
+ : data.solution?.downloadCount
+ }}
+ Downloaded</span
+ >
</div>
- <div>
+ </section>
+ <div class="md-container-head1 md-header3" *ngIf="data$ | async as data">
+ <div class="head-stat-left">
+ <div class="mdchild1">
+ <img
+ class="userimg"
+ src="../../../assets/images/user-profile-black.png"
+ />
+ </div>
<div>
- <span class="text-medium font600"
- ><span class="md-created-label"
- >Created by
- {{
- data.authors && data.authors[0]
- ? data.authors[0]?.name
- : data.solution?.ownerName
- }}</span
- ></span
- >
- |
- <span class="text-xsmall"
- >Created on {{ data.solution?.created | date: "MM/dd/yyyy" }} </span
- ><span ng-if="!audit"
- >|
- <button
- class="mdl-button mdl-js-button btn-md-edit"
- [disabled]="!editModel"
- alt="Manage My Model"
- title="Manage My Model"
- (click)="OnlClickManageMyModel()"
+ <div>
+ <span class="text-medium font600"
+ ><span class="md-created-label"
+ >Created by
+ {{
+ data.authors && data.authors[0]
+ ? data.authors[0]?.name
+ : data.solution?.ownerName
+ }}</span
+ ></span
>
- Manage My Model
- </button>
- </span>
+ |
+ <span class="text-xsmall"
+ >Created on {{ data.solution?.created | date: "MM/dd/yyyy" }} </span
+ ><span ng-if="!audit"
+ >|
+ <button
+ class="mdl-button mdl-js-button btn-md-edit"
+ [disabled]="!editModel"
+ alt="Manage My Model"
+ title="Manage My Model"
+ (click)="OnlClickManageMyModel()"
+ >
+ Manage My Model
+ </button>
+ </span>
+ </div>
+ <span
+ class="text-xsmall publish-text"
+ *ngIf="data.catalogs && data.catalogs.length > 0"
+ >Published on {{ data.solution?.modified | date: "MM/dd/yyyy" }}</span
+ >
</div>
- <span
- class="text-xsmall publish-text"
- *ngIf="data.catalogs && data.catalogs.length > 0"
- >Published on {{ data.solution?.modified | date: "MM/dd/yyyy" }}</span
- >
- </div>
- </div>
- <div class="header-stats">
- <div>
- <a
- class="link-blue text-medium md-icons1 scrollToComment-button"
- (click)="scrollToComment('view')"
- ><span
- class="statistics-icons icon-chat-blue md-icons1"
- alt="Comment"
- title="Comment"
- ></span>
- {{ data.comments.response_body.content.length }}
- <span class="header-stat-lg">Comments</span></a
- >
</div>
- <div *ngIf="data.solution?.active === true">|</div>
- <div *ngIf="data.solution?.active === true">
- <a
- class="link-write-comments link-blue text-medium md-icons1 scrollToComment-button"
- (click)="scrollToComment('edit')"
- >Write comments</a
- >
- </div>
- <div>|</div>
- <div class="text-medium view-download-container">
- <gp-view-count [item]="data.solution" class="md-icons1"></gp-view-count>
- </div>
- <div>|</div>
- <div class="text-medium view-download-container">
- <gp-download-count
- [item]="data.solution"
- class="md-icons1"
- ></gp-download-count>
+ <div class="header-stats">
+ <div>
+ <a
+ class="link-blue text-medium md-icons1 scrollToComment-button"
+ (click)="scrollToComment('view')"
+ ><span
+ class="statistics-icons icon-chat-blue md-icons1"
+ alt="Comment"
+ title="Comment"
+ ></span>
+ {{ data.comments.response_body.content.length }}
+ <span class="header-stat-lg">Comments</span></a
+ >
+ </div>
+ <div *ngIf="data.solution?.active === true">|</div>
+ <div *ngIf="data.solution?.active === true">
+ <a
+ class="link-write-comments link-blue text-medium md-icons1 scrollToComment-button"
+ (click)="scrollToComment('edit')"
+ >Write comments</a
+ >
+ </div>
+ <div>|</div>
+ <div class="text-medium view-download-container">
+ <gp-view-count [item]="data.solution" class="md-icons1"></gp-view-count>
+ </div>
+ <div>|</div>
+ <div class="text-medium view-download-container">
+ <gp-download-count
+ [item]="data.solution"
+ class="md-icons1"
+ ></gp-download-count>
+ </div>
</div>
</div>
-</div>
-<mat-sidenav-container *ngIf="data$ | async as data">
- <mat-sidenav mode="side" opened>
- <nav mat-tab-nav-bar class="margin: 20px 0 20px 0;" [tabPanel]="tabPanel">
- <a mat-tab-link routerLink="modelDescription" routerLinkActive="is-active"
- ><mat-icon fontIcon="description"></mat-icon
- ><span class="tab-box">Description</span></a
- >
- <a mat-tab-link routerLink="licenseProfile" routerLinkActive="is-active">
- <span
- class="tab_license"
- [ngClass]="
- isActive(
- '/marketSolutions/model-details/' +
- solutionId +
- '/' +
- revisionId +
- '/licenseProfile'
- )
- ? 'tab-license-profile-is-active'
- : 'tab-license-profile-not-active'
- "
- ></span
- ><span class="tab-box"> License profile</span></a
- >
- <a mat-tab-link routerLink="modelSignature" routerLinkActive="is-active"
- ><mat-icon fontIcon="sync_alt"></mat-icon
- ><span class="tab-box">Signature</span></a
- >
- <a mat-tab-link routerLink="modelDocuments" routerLinkActive="is-active"
- ><mat-icon fontIcon="content_copy"></mat-icon
- ><span class="tab-box">Documents</span></a
- >
- <a mat-tab-link routerLink="modelArtifacts" routerLinkActive="is-active"
- ><mat-icon fontIcon="history"></mat-icon
- ><span class="tab-box">Model artifacts</span></a
- >
- <a mat-tab-link routerLink="modelAuthor" routerLinkActive="is-active">
- <span
- class="tab-icon"
- [ngClass]="
- isActive(
- '/marketSolutions/model-details/' +
- solutionId +
- '/' +
- revisionId +
- '/modelAuthor'
- )
- ? 'tab-author_details-is-active'
- : 'tab-author_details-not-active'
- "
+ <mat-sidenav-container *ngIf="data$ | async as data">
+ <mat-sidenav mode="side" opened #sidenav>
+ <nav mat-tab-nav-bar class="margin: 20px 0 20px 0;" [tabPanel]="tabPanel">
+ <a
+ mat-tab-link
+ routerLink="modelDescription"
+ routerLinkActive="is-active"
+ ><mat-icon fontIcon="description"></mat-icon
+ ><span class="tab-box">Description</span></a
>
- </span>
- <span class="tab-box author-publisher-text">
- <span>Author</span>
- <span>/</span>
- <span>Publisher details</span>
- </span>
- </a>
- </nav>
- <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
- <mat-divider></mat-divider>
- <div>
- <h6 class="sectiontitle4">
- Tags<span class="title-icons icon-tags" alt="Tags" title="Tags"></span>
- </h6>
- <mat-chip-set class="chip-set-tags" aria-label="Tags selection">
- <mat-chip-option
- *ngFor="let tag of data.solution.solutionTagList"
- color="primary"
- class="chips-width"
- [matTooltip]="tag.tag"
+ <a
+ mat-tab-link
+ routerLink="licenseProfile"
+ routerLinkActive="is-active"
>
- {{ tag.tag }}
- </mat-chip-option>
- </mat-chip-set>
- </div>
- <mat-divider></mat-divider>
- <div>
- <h6 class="sectiontitle5">
- Other {{ data.solution?.modelTypeName }} Models
- </h6>
+ <span
+ class="tab_license"
+ [ngClass]="
+ isActive(
+ '/marketSolutions/model-details/' +
+ solutionId +
+ '/' +
+ revisionId +
+ '/licenseProfile'
+ )
+ ? 'tab-license-profile-is-active'
+ : 'tab-license-profile-not-active'
+ "
+ ></span
+ ><span class="tab-box"> License profile</span></a
+ >
+ <a mat-tab-link routerLink="modelSignature" routerLinkActive="is-active"
+ ><mat-icon fontIcon="sync_alt"></mat-icon
+ ><span class="tab-box">Signature</span></a
+ >
+ <a mat-tab-link routerLink="modelDocuments" routerLinkActive="is-active"
+ ><mat-icon fontIcon="content_copy"></mat-icon
+ ><span class="tab-box">Documents</span></a
+ >
+ <a mat-tab-link routerLink="modelArtifacts" routerLinkActive="is-active"
+ ><mat-icon fontIcon="history"></mat-icon
+ ><span class="tab-box">Model artifacts</span></a
+ >
+ <a mat-tab-link routerLink="modelAuthor" routerLinkActive="is-active">
+ <span
+ class="tab-icon"
+ [ngClass]="
+ isActive(
+ '/marketSolutions/model-details/' +
+ solutionId +
+ '/' +
+ revisionId +
+ '/modelAuthor'
+ )
+ ? 'tab-author_details-is-active'
+ : 'tab-author_details-not-active'
+ "
+ >
+ </span>
+ <span class="tab-box author-publisher-text">
+ <span>Author</span>
+ <span>/</span>
+ <span>Publisher details</span>
+ </span>
+ </a>
+ </nav>
+ <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
<mat-divider></mat-divider>
- <a class="text-small pull-right show-all" (click)="onClickShowAll()"
- >Show all</a
- >
<div>
- <div class="md-list-container1">
- <div
- *ngFor="let val of data.relatedSolutions | slice: 0 : 5"
- class="list-item list-container"
+ <h6 class="sectiontitle4">
+ Tags<span
+ class="title-icons icon-tags"
+ alt="Tags"
+ title="Tags"
+ ></span>
+ </h6>
+ <mat-chip-set class="chip-set-tags" aria-label="Tags selection">
+ <mat-chip-option
+ *ngFor="let tag of data.solution.solutionTagList"
+ color="primary"
+ class="chips-width"
+ [matTooltip]="tag.tag"
>
- <ul
- class="model-list go-to-related-solutions-ul"
- (click)="
- goToRelatedSolutions(val.solutionId, val.latestRevisionId)
- "
+ {{ tag.tag }}
+ </mat-chip-option>
+ </mat-chip-set>
+ </div>
+ <mat-divider></mat-divider>
+ <div>
+ <h6 class="sectiontitle5">
+ Other {{ data.solution?.modelTypeName }} Models
+ </h6>
+ <mat-divider></mat-divider>
+ <a class="text-small pull-right show-all" (click)="onClickShowAll()"
+ >Show all</a
+ >
+ <div>
+ <div class="md-list-container1">
+ <div
+ *ngFor="let val of data.relatedSolutions | slice: 0 : 5"
+ class="list-item list-container"
>
- <li>
- <img
- src="../../../assets/images/solution2.jpg"
- alt=""
- (click)="
- goToRelatedSolutions(val.solutionId, val.latestRevisionId)
- "
- title="solution"
- />
- </li>
- <li>
- <label
- class="rel-title"
- (click)="
- goToRelatedSolutions(val.solutionId, val.latestRevisionId)
- "
- >{{ val.name.toString().split("_").join(" ") }}</label
- >
- <span class="rating">
- <span>
- <i
- class="material-icons fa fa-star"
- [ngClass]="{
- 'fa-star1':
- val.solutionRatingAvg == null ||
- val.solutionRatingAvg < 1
- }"
- ></i>
- </span>
- <span>
- <i
- class="material-icons fa fa-star"
- [ngClass]="{ 'fa-star1': val.solutionRatingAvg < 2 }"
- ></i>
- </span>
- <span>
- <i
- class="material-icons fa fa-star"
- [ngClass]="{ 'fa-star1': val.solutionRatingAvg < 3 }"
- ></i>
- </span>
- <span>
- <i
- class="material-icons fa fa-star"
- [ngClass]="{ 'fa-star1': val.solutionRatingAvg < 4 }"
- ></i>
- </span>
- <span>
- <i
- class="material-icons fa fa-star"
- [ngClass]="{ 'fa-star1': val.solutionRatingAvg < 5 }"
- ></i>
- </span>
- </span>
- <label class="iconcontainer">
- <span class="iconspan1">
- <span
- class="statistics-icons icon-chat"
- alt="Comment"
- title="Comment"
- ></span>
- 0
- </span>
- <span class="iconspan1">
- <span
- class="statistics-icons icon-view"
- alt="View"
- title="View"
- ></span>
- {{ val.viewCount }}
- </span>
- <span class="iconspan1">
- <span
- class="statistics-icons icon-download"
- alt="Download"
- title="Download"
- ></span>
- {{ val.downloadCount }}
+ <ul
+ class="model-list go-to-related-solutions-ul"
+ (click)="
+ goToRelatedSolutions(val.solutionId, val.latestRevisionId)
+ "
+ >
+ <li>
+ <img
+ src="../../../assets/images/solution2.jpg"
+ alt=""
+ (click)="
+ goToRelatedSolutions(val.solutionId, val.latestRevisionId)
+ "
+ title="solution"
+ />
+ </li>
+ <li>
+ <label
+ class="rel-title"
+ (click)="
+ goToRelatedSolutions(val.solutionId, val.latestRevisionId)
+ "
+ >{{ val.name.toString().split("_").join(" ") }}</label
+ >
+ <span class="rating">
+ <span>
+ <i
+ class="material-icons fa fa-star"
+ [ngClass]="{
+ 'fa-star1':
+ val.solutionRatingAvg == null ||
+ val.solutionRatingAvg < 1
+ }"
+ ></i>
+ </span>
+ <span>
+ <i
+ class="material-icons fa fa-star"
+ [ngClass]="{ 'fa-star1': val.solutionRatingAvg < 2 }"
+ ></i>
+ </span>
+ <span>
+ <i
+ class="material-icons fa fa-star"
+ [ngClass]="{ 'fa-star1': val.solutionRatingAvg < 3 }"
+ ></i>
+ </span>
+ <span>
+ <i
+ class="material-icons fa fa-star"
+ [ngClass]="{ 'fa-star1': val.solutionRatingAvg < 4 }"
+ ></i>
+ </span>
+ <span>
+ <i
+ class="material-icons fa fa-star"
+ [ngClass]="{ 'fa-star1': val.solutionRatingAvg < 5 }"
+ ></i>
+ </span>
</span>
- </label>
- </li>
- </ul>
+ <label class="iconcontainer">
+ <span class="iconspan1">
+ <span
+ class="statistics-icons icon-chat"
+ alt="Comment"
+ title="Comment"
+ ></span>
+ 0
+ </span>
+ <span class="iconspan1">
+ <span
+ class="statistics-icons icon-view"
+ alt="View"
+ title="View"
+ ></span>
+ {{ val.viewCount }}
+ </span>
+ <span class="iconspan1">
+ <span
+ class="statistics-icons icon-download"
+ alt="Download"
+ title="Download"
+ ></span>
+ {{ val.downloadCount }}
+ </span>
+ </label>
+ </li>
+ </ul>
+ </div>
</div>
</div>
</div>
- </div>
- </mat-sidenav>
- <mat-sidenav-content>
- <router-outlet></router-outlet>
- <gp-rate-model-details
- [solution]="data.solution"
- [allUserRatings]="allRatings"
- [averageRatings]="averageRatings"
- [totalRatingsCount]="allRatings.length"
- [solutionId]="data.solutionId"
- [solutionRating]="(rating$ | async)!"
- (updateRating)="updateRating()"
- [totalCommentCount]="data.comments.response_body.content.length"
- [ratingCounts]="ratingCounts"
- [perRatingCounts]="perRatingCounts"
- [userId]="(userId$ | async)!"
- [revisionId]="revisionId"
- [comments]="comments"
- [firstName]="firstName"
- [lastName]="lastName"
- (createComment)="createComment($event)"
- (deleteComment)="deleteComment($event)"
- (editComment)="editComment($event)"
- (replyToComment)="createOrReplyToComment($event)"
- ></gp-rate-model-details> </mat-sidenav-content
-></mat-sidenav-container>
-<gp-footer></gp-footer>
+ </mat-sidenav>
+ <mat-sidenav-content class="page-wrap">
+ <main class="content-router-outlet"><router-outlet></router-outlet></main>
+ <gp-rate-model-details
+ [solution]="data.solution"
+ [allUserRatings]="allRatings"
+ [averageRatings]="averageRatings"
+ [totalRatingsCount]="allRatings.length"
+ [solutionId]="data.solutionId"
+ [solutionRating]="(rating$ | async)!"
+ (updateRating)="updateRating()"
+ [totalCommentCount]="data.comments.response_body.content.length"
+ [ratingCounts]="ratingCounts"
+ [perRatingCounts]="perRatingCounts"
+ [userId]="(userId$ | async)!"
+ [revisionId]="revisionId"
+ [comments]="comments"
+ [firstName]="firstName"
+ [lastName]="lastName"
+ (createComment)="createComment($event)"
+ (deleteComment)="deleteComment($event)"
+ (editComment)="editComment($event)"
+ (replyToComment)="createOrReplyToComment($event)"
+ ></gp-rate-model-details> </mat-sidenav-content
+ ></mat-sidenav-container>
+</div>
diff --git a/src/app/features/model-details/model-details.component.scss b/src/app/features/model-details/model-details.component.scss
index 674f24f..83f75be 100644
--- a/src/app/features/model-details/model-details.component.scss
+++ b/src/app/features/model-details/model-details.component.scss
@@ -5,6 +5,21 @@
background-color: white;
}
+.page-wrap {
+ display: flex !important;
+ flex-direction: column !important;
+ min-height: 100vh !important;
+}
+
+.content-router-outlet {
+ flex: 1;
+}
+
+// content height
+::ng-deep.mat-drawer-content {
+ height: 89.2% !important;
+}
+
.pageheadsection {
background: #fff;
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.1);
@@ -430,7 +445,6 @@ ul {
}
mat-sidenav-container {
- height: calc(100% - 64px);
overflow: hidden !important;
}
@@ -438,6 +452,11 @@ mat-sidenav {
background: #f1f1f1;
width: 250px !important;
overflow: hidden !important;
+ height: 100% !important;
+}
+
+mat-sidenav-content {
+ overflow: hidden;
}
::ng-deep .mat-drawer-inner-container {
diff --git a/src/app/shared/components/model-management/model-management.component.html b/src/app/shared/components/model-management/model-management.component.html
index 749019a..61c95c0 100644
--- a/src/app/shared/components/model-management/model-management.component.html
+++ b/src/app/shared/components/model-management/model-management.component.html
@@ -60,7 +60,7 @@
</div>
<mat-sidenav-container>
- <mat-sidenav mode="side" opened>
+ <mat-sidenav mode="side" opened #sidenav>
<div class="workflow-left-header workflow-header">MANAGEMENT OPTIONS</div>
<div
*ngIf="selectedRevision$ | async as selectedRevision"
@@ -139,6 +139,9 @@
</nav>
<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
</mat-sidenav>
- <mat-sidenav-content> <router-outlet></router-outlet></mat-sidenav-content
- ></mat-sidenav-container>
+ <mat-sidenav-content class="page-wrap"
+ ><main class="content-router-outlet">
+ <router-outlet></router-outlet></main
+ ></mat-sidenav-content>
+ </mat-sidenav-container>
</div>
diff --git a/src/app/shared/components/model-management/model-management.component.scss b/src/app/shared/components/model-management/model-management.component.scss
index 947e171..cd4c8cd 100644
--- a/src/app/shared/components/model-management/model-management.component.scss
+++ b/src/app/shared/components/model-management/model-management.component.scss
@@ -2,8 +2,20 @@
padding: 24px;
}
+.page-wrap {
+ display: flex !important;
+ flex-direction: column !important;
+ min-height: 100vh !important;
+}
+
+.content-router-outlet {
+ flex: 1;
+}
+
+::ng-deep.mat-drawer-content {
+ height: 83.5% !important;
+}
mat-sidenav-container {
- height: calc(100% - 64px);
overflow: hidden !important;
}
@@ -11,10 +23,10 @@ mat-sidenav {
background: #f1f1f1;
width: 250px !important;
overflow: hidden !important;
+ height: 100% !important;
}
mat-sidenav-content {
- height: 87vh;
overflow: hidden;
}
::ng-deep .mat-drawer-inner-container {
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index 87f4dc1..e0a56ed 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -2,7 +2,7 @@ export const environment = {
// local with session
production: false,
skipAuth: false,
- apiBackendURL: 'https://dev02.ki-lab.nrw',
+ apiBackendURL: 'https://aiexp-dev.ai4europe.eu',
isDebugMode: true,
logging: {
level: {
diff --git a/src/styles.scss b/src/styles.scss
index 801d5df..104b271 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -12,6 +12,7 @@
html,
body {
+ overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
--
GitLab