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

#24: :lipstick: fix alignment

parent ce6c0def
Branches Features/publish-to-marketplace-page
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 774 additions and 677 deletions
src/app/features/dashboard/dashboard.component.scss
+ 29
− 1
View file @ 52f12349
...@@ -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;
}
}
src/app/features/dashboard/my-models/my-models.component.html
+ 161
− 157
View file @ 52f12349
<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>
src/app/features/dashboard/my-models/my-models.component.scss
+ 19
− 17
View file @ 52f12349
...@@ -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 {
......
src/app/features/marketplace/marketplace.component.html
+ 123
− 118
View file @ 52f12349
<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>
src/app/features/marketplace/marketplace.component.scss
+ 24
− 17
View file @ 52f12349
...@@ -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%;
}
src/app/features/model-details/model-details.component.html
+ 376
− 360
View file @ 52f12349
This diff is collapsed.
src/app/features/model-details/model-details.component.scss
+ 20
− 1
View file @ 52f12349
...@@ -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 {
......
src/app/shared/components/model-management/model-management.component.html
+ 6
− 3
View file @ 52f12349
...@@ -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>
src/app/shared/components/model-management/model-management.component.scss
+ 14
− 2
View file @ 52f12349
...@@ -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 {
......
src/environments/environment.ts
+ 1
− 1
View file @ 52f12349
...@@ -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: {
......
src/styles.scss
+ 1
− 0
View file @ 52f12349
...@@ -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% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Copyright © Eclipse Foundation, Inc. All Rights Reserved.     Privacy Policy | Terms of Use | Copyright Agent