Skip to content
Snippets Groups Projects
Commit 52f12349 authored by Kawtar Laariche's avatar Kawtar Laariche
Browse files

#24: :lipstick: fix alignment

parent ce6c0def
No related branches found
No related tags found
No related merge requests found
Showing
with 774 additions and 677 deletions
...@@ -10,7 +10,6 @@ mat-toolbar { ...@@ -10,7 +10,6 @@ mat-toolbar {
} }
mat-sidenav-container { mat-sidenav-container {
height: calc(100% - 64px);
overflow: hidden !important; overflow: hidden !important;
} }
...@@ -24,3 +23,32 @@ mat-sidenav { ...@@ -24,3 +23,32 @@ mat-sidenav {
overflow: hidden !important; overflow: hidden !important;
padding-top: 0 !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;
}
}
<section class="pageheadsection mob-pageheadsection1"> <div class="flex-column">
<div class="mdl-grid mdl-grid.mdl-grid--no-spacing"> <section class="pageheadsection mob-pageheadsection1">
<div> <div class="mdl-grid mdl-grid.mdl-grid--no-spacing">
<gp-headline [headlineTitle]="'My Models'"></gp-headline> <div>
</div> <gp-headline [headlineTitle]="'My Models'"></gp-headline>
<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> </div>
<!--Unpublished models section--> <gp-breadcrumb-navigation
@if (modelType === "both") { [firstNavigationLabel]="{ label: 'Home' }"
<div class="flex-column"> [secondNavigationLabel]="{ label: 'My models', disabled: true }"
<gp-model-list (firstNavigationClicked)="onHomeClick()"
[solutions]="selectedUnpublishedSolutions" ></gp-breadcrumb-navigation>
[totalItems]="unpublishedTotalItems" </div>
[isLoading]="isUnpublishedSolutionsLoading" </section>
[headlineTitle]="'MY UNPUBLISHED MODELS'" <mat-sidenav-container>
[showEntirePage]="false" <mat-sidenav mode="side" opened>
[viewTile]="viewTile" <gp-filters
[pageSize]="pageSize" [tags]="tags"
[pageIndex]="pageIndex" [categories]="categories"
[pageSizeOptions]="pageSizeOptions" (selectedTagsChange)="handleSelectedTagsChange($event)"
[modelType]="'unpublished'" (selectedCategoriesChange)="handleSelectedCategoriesChange($event)"
[favoriteSolutionsMap]="favoriteSolutionsMap" (searchValueChanged)="onSearchValueChanged($event)"
[calculateStartIndex]="calculateStartIndex(pageIndex, pageSize)" ></gp-filters>
[calculateEndIndex]=" </mat-sidenav>
calculateEndIndex(unpublishedTotalItems, pageIndex, pageSize) <mat-sidenav-content class="page-wrap">
" <main class="content-router-outlet">
(pageChange)="onPageChange($event)" <div class="content-container">
(updateFavorite)="updateFavorite($event)" <div class="sort-toggle-container">
(backEvent)="onClickBack('both')" <div class="gp-sort-by">
></gp-model-list> <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"> <div class="see-all-container">
<button <button
class="see-all-button" class="see-all-button"
aria-label="icon button with a menu icon" aria-label="icon button with a menu icon"
(click)="onClickSeeAll('unpublished')" (click)="onClickSeeAll('unpublished')"
> >
<div class="see-all-text-container"> <div class="see-all-text-container">
<span>See all</span> <mat-icon>arrow_forward_ios</mat-icon> <span>See all</span> <mat-icon>arrow_forward_ios</mat-icon>
</div>
</button>
</div> </div>
</button> </div>
</div> }
</div>
}
@if (modelType === "unpublished") { @if (modelType === "unpublished") {
<div class="flex-column"> <div class="flex-column">
<gp-model-list <gp-model-list
[solutions]="selectedUnpublishedSolutions" [solutions]="selectedUnpublishedSolutions"
[totalItems]="unpublishedTotalItems" [totalItems]="unpublishedTotalItems"
[isLoading]="isUnpublishedSolutionsLoading" [isLoading]="isUnpublishedSolutionsLoading"
[headlineTitle]="'MY UNPUBLISHED MODELS'" [headlineTitle]="'MY UNPUBLISHED MODELS'"
[showEntirePage]="true" [showEntirePage]="true"
[viewTile]="viewTile" [viewTile]="viewTile"
[pageSize]="pageSize" [pageSize]="pageSize"
[pageIndex]="pageIndex" [pageIndex]="pageIndex"
[pageSizeOptions]="pageSizeOptions" [pageSizeOptions]="pageSizeOptions"
[modelType]="'unpublished'" [modelType]="'unpublished'"
[favoriteSolutionsMap]="favoriteSolutionsMap" [favoriteSolutionsMap]="favoriteSolutionsMap"
[calculateStartIndex]="calculateStartIndex(pageIndex, pageSize)" [calculateStartIndex]="calculateStartIndex(pageIndex, pageSize)"
[calculateEndIndex]=" [calculateEndIndex]="
calculateEndIndex(unpublishedTotalItems, pageIndex, pageSize) calculateEndIndex(unpublishedTotalItems, pageIndex, pageSize)
" "
(pageChange)="onPageChange($event)" (pageChange)="onPageChange($event)"
(updateFavorite)="updateFavorite($event)" (updateFavorite)="updateFavorite($event)"
(backEvent)="onClickBack('both')" (backEvent)="onClickBack('both')"
></gp-model-list> ></gp-model-list>
</div> </div>
} }
<!--published solutions --> <!--published solutions -->
@if (modelType === "both") { @if (modelType === "both") {
<div class="flex-column"> <div class="flex-column">
<gp-model-list <gp-model-list
[solutions]="selectedPublishedSolutions" [solutions]="selectedPublishedSolutions"
[totalItems]="publishedTotalItems" [totalItems]="publishedTotalItems"
[isLoading]="isPublishedSolutionsLoading" [isLoading]="isPublishedSolutionsLoading"
[headlineTitle]="'MY PUBLISHED MODELS'" [headlineTitle]="'MY PUBLISHED MODELS'"
[showEntirePage]="false" [showEntirePage]="false"
[viewTile]="viewTile" [viewTile]="viewTile"
[pageSize]="pageSize" [pageSize]="pageSize"
[pageIndex]="pageIndex" [pageIndex]="pageIndex"
[pageSizeOptions]="pageSizeOptions" [pageSizeOptions]="pageSizeOptions"
[modelType]="'published'" [modelType]="'published'"
[favoriteSolutionsMap]="favoriteSolutionsMap" [favoriteSolutionsMap]="favoriteSolutionsMap"
[calculateStartIndex]="calculateStartIndex(pageIndex, pageSize)" [calculateStartIndex]="calculateStartIndex(pageIndex, pageSize)"
[calculateEndIndex]=" [calculateEndIndex]="
calculateEndIndex(publishedTotalItems, pageIndex, pageSize) calculateEndIndex(publishedTotalItems, pageIndex, pageSize)
" "
(pageChange)="onPageChange($event)" (pageChange)="onPageChange($event)"
(updateFavorite)="updateFavorite($event)" (updateFavorite)="updateFavorite($event)"
(backEvent)="onClickBack('both')" (backEvent)="onClickBack('both')"
></gp-model-list> ></gp-model-list>
<div class="see-all-container"> <div class="see-all-container">
<button <button
class="see-all-button" class="see-all-button"
aria-label="Example icon button with a menu icon" aria-label="Example icon button with a menu icon"
(click)="onClickSeeAll('published')" (click)="onClickSeeAll('published')"
> >
<div class="see-all-text-container"> <div class="see-all-text-container">
<span>See all</span> <mat-icon>arrow_forward_ios</mat-icon> <span>See all</span> <mat-icon>arrow_forward_ios</mat-icon>
</div>
</button>
</div> </div>
</button> </div>
</div> }
</div> @if (modelType === "published") {
} <div class="flex-column">
@if (modelType === "published") { <gp-model-list
<div class="flex-column"> [solutions]="selectedPublishedSolutions"
<gp-model-list [totalItems]="publishedTotalItems"
[solutions]="selectedPublishedSolutions" [isLoading]="isPublishedSolutionsLoading"
[totalItems]="publishedTotalItems" [headlineTitle]="'MY PUBLISHED MODELS'"
[isLoading]="isPublishedSolutionsLoading" [showEntirePage]="true"
[headlineTitle]="'MY PUBLISHED MODELS'" [viewTile]="viewTile"
[showEntirePage]="true" [pageSize]="pageSize"
[viewTile]="viewTile" [pageIndex]="pageIndex"
[pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions"
[pageIndex]="pageIndex" [modelType]="'published'"
[pageSizeOptions]="pageSizeOptions" [favoriteSolutionsMap]="favoriteSolutionsMap"
[modelType]="'published'" [calculateStartIndex]="calculateStartIndex(pageIndex, pageSize)"
[favoriteSolutionsMap]="favoriteSolutionsMap" [calculateEndIndex]="
[calculateStartIndex]="calculateStartIndex(pageIndex, pageSize)" calculateEndIndex(publishedTotalItems, pageIndex, pageSize)
[calculateEndIndex]=" "
calculateEndIndex(publishedTotalItems, pageIndex, pageSize) (pageChange)="onPageChange($event)"
" (updateFavorite)="updateFavorite($event)"
(pageChange)="onPageChange($event)" (backEvent)="onClickBack('both')"
(updateFavorite)="updateFavorite($event)" ></gp-model-list>
(backEvent)="onClickBack('both')" </div>
></gp-model-list> }
</div> </div>
} </main> </mat-sidenav-content
</div> </mat-sidenav-content ></mat-sidenav-container>
></mat-sidenav-container> </div>
...@@ -2,9 +2,23 @@ ...@@ -2,9 +2,23 @@
padding: 24px; 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 { mat-sidenav-container {
height: calc(100% - 64px); overflow: hidden;
overflow: auto;
} }
.cards-container { .cards-container {
...@@ -25,7 +39,7 @@ mat-sidenav { ...@@ -25,7 +39,7 @@ mat-sidenav {
width: 300px; width: 300px;
background: #f1f1f1; background: #f1f1f1;
height: 100%; height: 100%;
overflow-y: auto; overflow: hidden;
} }
.mat-grid-tile { .mat-grid-tile {
...@@ -34,23 +48,11 @@ mat-sidenav { ...@@ -34,23 +48,11 @@ mat-sidenav {
:host ::ng-deep .mat-drawer-inner-container { :host ::ng-deep .mat-drawer-inner-container {
overflow: hidden !important; overflow: hidden !important;
padding: 20px 0 20px 0;
} }
mat-sidenav-content { mat-sidenav-content {
height: 77vh; overflow: hidden !important;
overflow: auto;
.loading-data {
height: 75vh;
width: 100%;
overflow: hidden !important;
display: flex;
align-items: center;
justify-content: center;
p {
margin: 0;
}
}
} }
.pageheadsection { .pageheadsection {
......
<section class="pageheadsection mob-pageheadsection1"> <div class="flex-column">
<div class="mdl-grid mdl-grid.mdl-grid--no-spacing"> <section class="pageheadsection mob-pageheadsection1">
<div> <div class="mdl-grid mdl-grid.mdl-grid--no-spacing">
<gp-headline [headlineTitle]="'Marketplace |'"></gp-headline> <div>
<div class="favorite-buttons-container" *ngIf="loginUserId"> <gp-headline [headlineTitle]="'Marketplace |'"></gp-headline>
<button <div class="favorite-buttons-container" *ngIf="loginUserId">
class="favorite-button" <button
mat-raised-button class="favorite-button"
[color]="!isOnMyFavoriteSelected ? 'primary' : ''" mat-raised-button
(click)="onAllCatalogsClick()" [color]="!isOnMyFavoriteSelected ? 'primary' : ''"
> (click)="onAllCatalogsClick()"
All catalogs >
</button> All catalogs
<button </button>
class="favorite-button" <button
mat-raised-button class="favorite-button"
[color]="isOnMyFavoriteSelected ? 'primary' : ''" mat-raised-button
(click)="onMyFavoriteCatalogsClick()" [color]="isOnMyFavoriteSelected ? 'primary' : ''"
> (click)="onMyFavoriteCatalogsClick()"
My favorite catalogs >
</button> My favorite catalogs
</button>
</div>
</div> </div>
<gp-breadcrumb-navigation
[firstNavigationLabel]="{ label: 'Home' }"
[secondNavigationLabel]="{ label: 'Marketplace', disabled: true }"
(firstNavigationClicked)="onHomeClick()"
></gp-breadcrumb-navigation>
</div> </div>
<gp-breadcrumb-navigation </section>
[firstNavigationLabel]="{ label: 'Home' }" <mat-sidenav-container>
[secondNavigationLabel]="{ label: 'Marketplace', disabled: true }" <mat-sidenav mode="side" opened>
(firstNavigationClicked)="onHomeClick()" <gp-filters
></gp-breadcrumb-navigation> [tags]="tags"
</div> [categories]="categories"
</section> (selectedTagsChange)="handleSelectedTagsChange($event)"
<mat-sidenav-container> (selectedCategoriesChange)="handleSelectedCategoriesChange($event)"
<mat-sidenav mode="side" opened> (searchValueChanged)="onSearchValueChanged($event)"
<gp-filters ></gp-filters>
[tags]="tags" </mat-sidenav>
[categories]="categories" <mat-sidenav-content class="page-wrap">
(selectedTagsChange)="handleSelectedTagsChange($event)" <main class="content-router-outlet">
(selectedCategoriesChange)="handleSelectedCategoriesChange($event)" <div class="filters-container">
(searchValueChanged)="onSearchValueChanged($event)" <div class="total-items-container" *ngIf="!isLoading">
></gp-filters> @if (totalItems > 0) {
</mat-sidenav> <div class="total-items-text-container">
<mat-sidenav-content> <span class="showing-text"
<div class="filters-container"> >Showing -
<div class="total-items-container" *ngIf="!isLoading"> <span class="total-items-text">
@if (totalItems > 0) { {{ calculateStartIndex() }} to {{ calculateEndIndex() }} of
<div class="total-items-text-container"> {{ totalItems }} Models</span
<span class="showing-text" ></span
>Showing - >
<span class="total-items-text"> </div>
{{ calculateStartIndex() }} to {{ calculateEndIndex() }} of }
{{ totalItems }} Models</span
></span
>
</div> </div>
}
</div>
<div class="gp-sort-by" *ngIf="!isLoading"> <div class="gp-sort-by" *ngIf="!isLoading">
<gp-sort-by <gp-sort-by
[sortByOptions]="sortByOptions" [sortByOptions]="sortByOptions"
[selectedSortBy]="sortByFilter" [selectedSortBy]="sortByFilter"
(sortBySelected)="updateFieldToDirectionMap($event)" (sortBySelected)="updateFieldToDirectionMap($event)"
></gp-sort-by> ></gp-sort-by>
</div> </div>
<div class="gp-card-list-view" *ngIf="!isLoading"> <div class="gp-card-list-view" *ngIf="!isLoading">
<gp-solutions-toggle-view <gp-solutions-toggle-view
[viewTile]="viewTile" [viewTile]="viewTile"
(viewTileChange)="onViewTileChange($event)" (viewTileChange)="onViewTileChange($event)"
></gp-solutions-toggle-view> ></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> </div>
</div> </div>
<ng-template #gridView> <ng-container *ngIf="publicSolutions && !isLoading; else loadingState">
<div class="grid-list"> <ng-container *ngIf="publicSolutions.length > 0; else noCatalogs">
<mat-grid-list cols="5" rowHeight="3:4" gutterSize="20px"> <div *ngIf="!viewTile; else gridView">
<mat-grid-tile *ngFor="let item of publicSolutions"> <!-- Horizontal list view content -->
<div class="cards-container"> <div class="grid-list">
<gp-card-item <gp-list-item
[isPublishedSolution]="true" [item]="item"
[item]="item" [items]="publicSolutions"
[items]="publicSolutions" [isMarketPlacePage]="true"
[isMarketPlacePage]="true" [isPublishedSolution]="true"
[isFavoriteSolution]="favoriteSolutionsMap[item.solutionId]" *ngFor="let item of publicSolutions"
(favoriteClicked)="updateFavorite(item.solutionId)" ></gp-list-item>
></gp-card-item> </div>
</div> </div>
</mat-grid-tile> <ng-template #gridView>
</mat-grid-list> <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> </div>
</ng-template> </ng-template>
</ng-container> @if (totalItems > 0) {
<ng-template #noCatalogs> <mat-paginator
<div class="loading-data"> [length]="totalItems"
<p>No result found...</p> [pageSize]="pageSize"
</div> [pageSizeOptions]="pageSizeOptions"
</ng-template> (page)="onPageChange($event)"
</ng-container> aria-label="Select page"
<ng-template #loadingState> aria-label="Select page"
<div class="loading-data"> >
<p>Loading data ...</p> </mat-paginator>
</div> }</main></mat-sidenav-content
</ng-template> ></mat-sidenav-container>
@if (totalItems > 0) { </div>
<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>
...@@ -2,9 +2,23 @@ ...@@ -2,9 +2,23 @@
padding: 24px; 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 { mat-sidenav-container {
height: calc(100% - 64px); overflow: hidden;
overflow: auto;
} }
.cards-container { .cards-container {
...@@ -25,7 +39,8 @@ mat-sidenav { ...@@ -25,7 +39,8 @@ mat-sidenav {
width: 300px; width: 300px;
background: #f1f1f1; background: #f1f1f1;
height: 100%; height: 100%;
overflow-y: auto; //overflow-y: auto;
overflow: hidden;
} }
.mat-grid-tile { .mat-grid-tile {
...@@ -34,23 +49,11 @@ mat-sidenav { ...@@ -34,23 +49,11 @@ mat-sidenav {
:host ::ng-deep .mat-drawer-inner-container { :host ::ng-deep .mat-drawer-inner-container {
overflow: hidden !important; overflow: hidden !important;
padding: 20px 0 20px 0;
} }
mat-sidenav-content { mat-sidenav-content {
height: 77vh; overflow: hidden;
overflow: auto;
.loading-data {
height: 75vh;
width: 100%;
overflow: hidden !important;
display: flex;
align-items: center;
justify-content: center;
p {
margin: 0;
}
}
} }
.pageheadsection { .pageheadsection {
...@@ -160,3 +163,7 @@ mat-sidenav-content { ...@@ -160,3 +163,7 @@ mat-sidenav-content {
.total-items-text { .total-items-text {
color: #8f8f8f; color: #8f8f8f;
} }
.full-height {
height: 100%;
}
<section class="pageheadsection" *ngIf="data$ | async as data"> <div class="flex-column">
<div class="md-head-container1"> <section class="pageheadsection" *ngIf="data$ | async as data">
<div class="md-head-containerinner1"> <div class="md-head-container1">
<div matTooltip="{{ solution?.name?.toString()?.split('_')?.join('') }}"> <div class="md-head-containerinner1">
<span class="md-headline4" <div
><img [src]="imageToShow" tabindex="0" class="solutions-img" />{{ matTooltip="{{ solution?.name?.toString()?.split('_')?.join('') }}"
data.solution?.name?.toString()?.split("_")?.join(" ") >
}} <span class="md-headline4"
</span> ><img [src]="imageToShow" tabindex="0" class="solutions-img" />{{
</div> data.solution?.name?.toString()?.split("_")?.join(" ")
<div class="md-head-container3"> }}
<div class="md-head-containerinner-seperator"></div> </span>
<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> </div>
</div> <div class="md-head-container3">
<gp-version-dropdown <div class="md-head-containerinner-seperator"></div>
[selectedDefaultRevision]="selectedDefaultRevision" <div class="version-container cataloglist-container">
[revisionsList]="revisionsList" <button
(revisionChange)="onChangeVersion($event)" class="mdl-button"
></gp-version-dropdown> #menuTrigger="matMenuTrigger"
</div> [matMenuTriggerFor]="menu"
<ng-container *ngIf="isLoggedIn$ | async; else notLoggedIn"> (click)="menuTrigger.openMenu()"
<div class="md-head-container2"> >
<div class="select-control dcl-list"> <span class="text-ellipsis"
<mat-form-field appearance="fill"> >Catalog - {{ selectedDefaultCatalog?.name }}</span
<mat-select placeholder="Deploy for Execution">
<mat-option
*ngFor="let menuEntry of deployMenu"
[value]="menuEntry.title"
(click)="triggerDeployment(menuEntry)"
> >
<img <i class="material-icons">keyboard_arrow_down</i>
[src]="getImagePath(menuEntry.title)" </button>
class="deploy-image" <mat-menu #menu="matMenu">
/> <ul>
{{ menuEntry.title }} <li *ngFor="let catalog of data.catalogs" class="selected">
</mat-option> <span
</mat-select> [ngClass]="{
</mat-form-field> 'md-cat-txtellipsis': catalog.name.length > 15
}"
>{{ catalog.name }}</span
>
<span class="custom-tooltip-text">{{ catalog.name }}</span>
</li>
</ul>
</mat-menu>
</div>
</div> </div>
<gp-version-dropdown
[selectedDefaultRevision]="selectedDefaultRevision"
[revisionsList]="revisionsList"
(revisionChange)="onChangeVersion($event)"
></gp-version-dropdown>
</div> </div>
</ng-container> <ng-container *ngIf="isLoggedIn$ | async; else notLoggedIn">
<ng-template #notLoggedIn> <div class="md-head-container2">
<div class="md-head-container2"> <div class="select-control dcl-list">
<button class="mdl-button btn-primary" (click)="openSignInDialog()"> <mat-form-field appearance="fill">
Sign in to download <mat-select placeholder="Deploy for Execution">
</button> <mat-option
<button class="mdl-button btn-secondary" (click)="openSignInDialog()"> *ngFor="let menuEntry of deployMenu"
Sign in to deploy to cloud [value]="menuEntry.title"
</button> (click)="triggerDeployment(menuEntry)"
</div> >
</ng-template> <img
</div> [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"> <div class="md-head-container2 breadcrumb-navigation-container">
<gp-breadcrumb-navigation <gp-breadcrumb-navigation
[solution]="data.solution" [solution]="data.solution"
[firstNavigationLabel]="{ label: 'Home' }" [firstNavigationLabel]="{ label: 'Home' }"
[secondNavigationLabel]="{ label: 'MarketPlace' }" [secondNavigationLabel]="{ label: 'MarketPlace' }"
(firstNavigationClicked)="onHomeClick()" (firstNavigationClicked)="onHomeClick()"
(secondNavigationClicked)="onMarketPlaceClick()" (secondNavigationClicked)="onMarketPlaceClick()"
></gp-breadcrumb-navigation> ></gp-breadcrumb-navigation>
<span class="md-lbl1" <span class="md-lbl1"
>Version {{ selectedDefaultRevision?.version }} | >Version {{ selectedDefaultRevision?.version }} |
{{ {{
data.solution?.downloadCount === null ? 0 : data.solution?.downloadCount data.solution?.downloadCount === null
}} ? 0
Downloaded</span : data.solution?.downloadCount
> }}
</div> Downloaded</span
</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>
<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> <div>
<span class="text-medium font600" <div>
><span class="md-created-label" <span class="text-medium font600"
>Created by ><span class="md-created-label"
{{ >Created by
data.authors && data.authors[0] {{
? data.authors[0]?.name data.authors && data.authors[0]
: data.solution?.ownerName ? data.authors[0]?.name
}}</span : data.solution?.ownerName
></span }}</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()"
> >
Manage My Model |
</button> <span class="text-xsmall"
</span> >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> </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>
<div *ngIf="data.solution?.active === true">|</div> <div class="header-stats">
<div *ngIf="data.solution?.active === true"> <div>
<a <a
class="link-write-comments link-blue text-medium md-icons1 scrollToComment-button" class="link-blue text-medium md-icons1 scrollToComment-button"
(click)="scrollToComment('edit')" (click)="scrollToComment('view')"
>Write comments</a ><span
> class="statistics-icons icon-chat-blue md-icons1"
</div> alt="Comment"
<div>|</div> title="Comment"
<div class="text-medium view-download-container"> ></span>
<gp-view-count [item]="data.solution" class="md-icons1"></gp-view-count> {{ data.comments.response_body.content.length }}
</div> <span class="header-stat-lg">Comments</span></a
<div>|</div> >
<div class="text-medium view-download-container"> </div>
<gp-download-count <div *ngIf="data.solution?.active === true">|</div>
[item]="data.solution" <div *ngIf="data.solution?.active === true">
class="md-icons1" <a
></gp-download-count> 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> </div>
</div> <mat-sidenav-container *ngIf="data$ | async as data">
<mat-sidenav-container *ngIf="data$ | async as data"> <mat-sidenav mode="side" opened #sidenav>
<mat-sidenav mode="side" opened> <nav mat-tab-nav-bar class="margin: 20px 0 20px 0;" [tabPanel]="tabPanel">
<nav mat-tab-nav-bar class="margin: 20px 0 20px 0;" [tabPanel]="tabPanel"> <a
<a mat-tab-link routerLink="modelDescription" routerLinkActive="is-active" mat-tab-link
><mat-icon fontIcon="description"></mat-icon routerLink="modelDescription"
><span class="tab-box">Description</span></a routerLinkActive="is-active"
> ><mat-icon fontIcon="description"></mat-icon
<a mat-tab-link routerLink="licenseProfile" routerLinkActive="is-active"> ><span class="tab-box">Description</span></a
<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> <a
<span class="tab-box author-publisher-text"> mat-tab-link
<span>Author</span> routerLink="licenseProfile"
<span>/</span> routerLinkActive="is-active"
<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"
> >
{{ tag.tag }} <span
</mat-chip-option> class="tab_license"
</mat-chip-set> [ngClass]="
</div> isActive(
<mat-divider></mat-divider> '/marketSolutions/model-details/' +
<div> solutionId +
<h6 class="sectiontitle5"> '/' +
Other {{ data.solution?.modelTypeName }} Models revisionId +
</h6> '/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> <mat-divider></mat-divider>
<a class="text-small pull-right show-all" (click)="onClickShowAll()"
>Show all</a
>
<div> <div>
<div class="md-list-container1"> <h6 class="sectiontitle4">
<div Tags<span
*ngFor="let val of data.relatedSolutions | slice: 0 : 5" class="title-icons icon-tags"
class="list-item list-container" 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 {{ tag.tag }}
class="model-list go-to-related-solutions-ul" </mat-chip-option>
(click)=" </mat-chip-set>
goToRelatedSolutions(val.solutionId, val.latestRevisionId) </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> <ul
<img class="model-list go-to-related-solutions-ul"
src="../../../assets/images/solution2.jpg" (click)="
alt="" goToRelatedSolutions(val.solutionId, val.latestRevisionId)
(click)=" "
goToRelatedSolutions(val.solutionId, val.latestRevisionId) >
" <li>
title="solution" <img
/> src="../../../assets/images/solution2.jpg"
</li> alt=""
<li> (click)="
<label goToRelatedSolutions(val.solutionId, val.latestRevisionId)
class="rel-title" "
(click)=" title="solution"
goToRelatedSolutions(val.solutionId, val.latestRevisionId) />
" </li>
>{{ val.name.toString().split("_").join(" ") }}</label <li>
> <label
<span class="rating"> class="rel-title"
<span> (click)="
<i goToRelatedSolutions(val.solutionId, val.latestRevisionId)
class="material-icons fa fa-star" "
[ngClass]="{ >{{ val.name.toString().split("_").join(" ") }}</label
'fa-star1': >
val.solutionRatingAvg == null || <span class="rating">
val.solutionRatingAvg < 1 <span>
}" <i
></i> class="material-icons fa fa-star"
</span> [ngClass]="{
<span> 'fa-star1':
<i val.solutionRatingAvg == null ||
class="material-icons fa fa-star" val.solutionRatingAvg < 1
[ngClass]="{ 'fa-star1': val.solutionRatingAvg < 2 }" }"
></i> ></i>
</span> </span>
<span> <span>
<i <i
class="material-icons fa fa-star" class="material-icons fa fa-star"
[ngClass]="{ 'fa-star1': val.solutionRatingAvg < 3 }" [ngClass]="{ 'fa-star1': val.solutionRatingAvg < 2 }"
></i> ></i>
</span> </span>
<span> <span>
<i <i
class="material-icons fa fa-star" class="material-icons fa fa-star"
[ngClass]="{ 'fa-star1': val.solutionRatingAvg < 4 }" [ngClass]="{ 'fa-star1': val.solutionRatingAvg < 3 }"
></i> ></i>
</span> </span>
<span> <span>
<i <i
class="material-icons fa fa-star" class="material-icons fa fa-star"
[ngClass]="{ 'fa-star1': val.solutionRatingAvg < 5 }" [ngClass]="{ 'fa-star1': val.solutionRatingAvg < 4 }"
></i> ></i>
</span> </span>
</span> <span>
<label class="iconcontainer"> <i
<span class="iconspan1"> class="material-icons fa fa-star"
<span [ngClass]="{ 'fa-star1': val.solutionRatingAvg < 5 }"
class="statistics-icons icon-chat" ></i>
alt="Comment" </span>
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> </span>
</label> <label class="iconcontainer">
</li> <span class="iconspan1">
</ul> <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>
</div> </div>
</div> </mat-sidenav>
</mat-sidenav> <mat-sidenav-content class="page-wrap">
<mat-sidenav-content> <main class="content-router-outlet"><router-outlet></router-outlet></main>
<router-outlet></router-outlet> <gp-rate-model-details
<gp-rate-model-details [solution]="data.solution"
[solution]="data.solution" [allUserRatings]="allRatings"
[allUserRatings]="allRatings" [averageRatings]="averageRatings"
[averageRatings]="averageRatings" [totalRatingsCount]="allRatings.length"
[totalRatingsCount]="allRatings.length" [solutionId]="data.solutionId"
[solutionId]="data.solutionId" [solutionRating]="(rating$ | async)!"
[solutionRating]="(rating$ | async)!" (updateRating)="updateRating()"
(updateRating)="updateRating()" [totalCommentCount]="data.comments.response_body.content.length"
[totalCommentCount]="data.comments.response_body.content.length" [ratingCounts]="ratingCounts"
[ratingCounts]="ratingCounts" [perRatingCounts]="perRatingCounts"
[perRatingCounts]="perRatingCounts" [userId]="(userId$ | async)!"
[userId]="(userId$ | async)!" [revisionId]="revisionId"
[revisionId]="revisionId" [comments]="comments"
[comments]="comments" [firstName]="firstName"
[firstName]="firstName" [lastName]="lastName"
[lastName]="lastName" (createComment)="createComment($event)"
(createComment)="createComment($event)" (deleteComment)="deleteComment($event)"
(deleteComment)="deleteComment($event)" (editComment)="editComment($event)"
(editComment)="editComment($event)" (replyToComment)="createOrReplyToComment($event)"
(replyToComment)="createOrReplyToComment($event)" ></gp-rate-model-details> </mat-sidenav-content
></gp-rate-model-details> </mat-sidenav-content ></mat-sidenav-container>
></mat-sidenav-container> </div>
<gp-footer></gp-footer>
...@@ -5,6 +5,21 @@ ...@@ -5,6 +5,21 @@
background-color: white; 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 { .pageheadsection {
background: #fff; background: #fff;
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.1); box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.1);
...@@ -430,7 +445,6 @@ ul { ...@@ -430,7 +445,6 @@ ul {
} }
mat-sidenav-container { mat-sidenav-container {
height: calc(100% - 64px);
overflow: hidden !important; overflow: hidden !important;
} }
...@@ -438,6 +452,11 @@ mat-sidenav { ...@@ -438,6 +452,11 @@ mat-sidenav {
background: #f1f1f1; background: #f1f1f1;
width: 250px !important; width: 250px !important;
overflow: hidden !important; overflow: hidden !important;
height: 100% !important;
}
mat-sidenav-content {
overflow: hidden;
} }
::ng-deep .mat-drawer-inner-container { ::ng-deep .mat-drawer-inner-container {
......
...@@ -60,7 +60,7 @@ ...@@ -60,7 +60,7 @@
</div> </div>
<mat-sidenav-container> <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 class="workflow-left-header workflow-header">MANAGEMENT OPTIONS</div>
<div <div
*ngIf="selectedRevision$ | async as selectedRevision" *ngIf="selectedRevision$ | async as selectedRevision"
...@@ -139,6 +139,9 @@ ...@@ -139,6 +139,9 @@
</nav> </nav>
<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel> <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
</mat-sidenav> </mat-sidenav>
<mat-sidenav-content> <router-outlet></router-outlet></mat-sidenav-content <mat-sidenav-content class="page-wrap"
></mat-sidenav-container> ><main class="content-router-outlet">
<router-outlet></router-outlet></main
></mat-sidenav-content>
</mat-sidenav-container>
</div> </div>
...@@ -2,8 +2,20 @@ ...@@ -2,8 +2,20 @@
padding: 24px; 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 { mat-sidenav-container {
height: calc(100% - 64px);
overflow: hidden !important; overflow: hidden !important;
} }
...@@ -11,10 +23,10 @@ mat-sidenav { ...@@ -11,10 +23,10 @@ mat-sidenav {
background: #f1f1f1; background: #f1f1f1;
width: 250px !important; width: 250px !important;
overflow: hidden !important; overflow: hidden !important;
height: 100% !important;
} }
mat-sidenav-content { mat-sidenav-content {
height: 87vh;
overflow: hidden; overflow: hidden;
} }
::ng-deep .mat-drawer-inner-container { ::ng-deep .mat-drawer-inner-container {
......
...@@ -2,7 +2,7 @@ export const environment = { ...@@ -2,7 +2,7 @@ export const environment = {
// local with session // local with session
production: false, production: false,
skipAuth: false, skipAuth: false,
apiBackendURL: 'https://dev02.ki-lab.nrw', apiBackendURL: 'https://aiexp-dev.ai4europe.eu',
isDebugMode: true, isDebugMode: true,
logging: { logging: {
level: { level: {
......
...@@ -12,6 +12,7 @@ ...@@ -12,6 +12,7 @@
html, html,
body { body {
overflow: hidden;
width: 100%; width: 100%;
height: 100%; height: 100%;
margin: 0; margin: 0;
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment