diff --git a/docs/releases/v2.4.0.md b/docs/releases/v2.4.0.md
index bd1bb94a609d2a92ad4fc44b5d1abd8da1c0f7c7..696b90a90178a5c9fc9db3e102574d41701abd29 100644
--- a/docs/releases/v2.4.0.md
+++ b/docs/releases/v2.4.0.md
@@ -1,5 +1,9 @@
# v2.4.0
+## Bugfixes
+
+- fixes UI issue, where chips wraps on smaller screen (#740)
+
## New features
- plugins will now follow a permission model, if they would like to access external resources
diff --git a/src/layouts/fourCorners/fourCorners.component.ts b/src/layouts/fourCorners/fourCorners.component.ts
index 181bb85285ed389cc4fd59f5bf34d527b52cbc65..6bae516c960e2c6b3e7344b8bb46274a310d1c95 100644
--- a/src/layouts/fourCorners/fourCorners.component.ts
+++ b/src/layouts/fourCorners/fourCorners.component.ts
@@ -1,4 +1,4 @@
-import { Component } from "@angular/core";
+import { Component, Input } from "@angular/core";
@Component({
selector: 'iav-layout-fourcorners',
@@ -8,4 +8,7 @@ import { Component } from "@angular/core";
]
})
-export class FourCornersCmp{}
\ No newline at end of file
+export class FourCornersCmp{
+ @Input('iav-layout-fourcorners-cnr-cntr-ngclass')
+ cornerContainerClasses = {}
+}
diff --git a/src/layouts/fourCorners/fourCorners.template.html b/src/layouts/fourCorners/fourCorners.template.html
index c99f8b0a8bf791a3b6efc256bf8b86cf3594c9b4..96cfe86cdb46e296f4b44fa92adfb377dec010fd 100644
--- a/src/layouts/fourCorners/fourCorners.template.html
+++ b/src/layouts/fourCorners/fourCorners.template.html
@@ -2,15 +2,19 @@
<ng-content select="[iavLayoutFourCornersContent]"></ng-content>
</div>
-<div class="corner-container position-absolute top-0 left-0">
+<div [ngClass]="cornerContainerClasses"
+ class="corner-container position-absolute top-0 left-0">
<ng-content select="[iavLayoutFourCornersTopLeft]"></ng-content>
</div>
-<div class="corner-container position-absolute top-0 right-0">
+<div [ngClass]="cornerContainerClasses"
+ class="corner-container position-absolute top-0 right-0">
<ng-content select="[iavLayoutFourCornersTopRight]"></ng-content>
</div>
-<div class="corner-container position-absolute bottom-0 left-0">
+<div [ngClass]="cornerContainerClasses"
+ class="corner-container position-absolute bottom-0 left-0">
<ng-content select="[iavLayoutFourCornersBottomLeft]"></ng-content>
</div>
-<div class="corner-container position-absolute bottom-0 right-0">
+<div [ngClass]="cornerContainerClasses"
+ class="corner-container position-absolute bottom-0 right-0">
<ng-content select="[iavLayoutFourCornersBottomRight]"></ng-content>
</div>
\ No newline at end of file
diff --git a/src/ui/topMenu/module.ts b/src/ui/topMenu/module.ts
index a2c6f8a2e211f2952b5cc4f3975adcc27e4f7217..8ae3bbf7341f50320612c758bd319527860a982a 100644
--- a/src/ui/topMenu/module.ts
+++ b/src/ui/topMenu/module.ts
@@ -10,6 +10,7 @@ import { ConfigModule } from "../config/module";
import { CookieModule } from "../cookieAgreement/module";
import { HelpModule } from "../help/module";
import { KgTosModule } from "../kgtos/module";
+import { ScreenshotModule } from "../screenshot";
import { AngularMaterialModule } from "../sharedModules/angularMaterial.module";
import { TopMenuCmp } from "./topMenuCmp/topMenu.components";
@@ -27,6 +28,7 @@ import { TopMenuCmp } from "./topMenuCmp/topMenu.components";
HelpModule,
PluginModule,
AuthModule,
+ ScreenshotModule,
],
declarations: [
TopMenuCmp
diff --git a/src/ui/topMenu/topMenuCmp/topMenu.template.html b/src/ui/topMenu/topMenuCmp/topMenu.template.html
index f3ef18322bbb703d96c9fbdf2b52980d50c46401..e76a092a2be712b7493517e82d783eab05128f66 100644
--- a/src/ui/topMenu/topMenuCmp/topMenu.template.html
+++ b/src/ui/topMenu/topMenuCmp/topMenu.template.html
@@ -1,6 +1,7 @@
<ng-template [ngIf]="ismobile" [ngIfElse]="fullTmpl">
<div iav-fab-speed-dial-container
- #fab="iavFabSpeedDialContainer">
+ #fab="iavFabSpeedDialContainer"
+ class="d-flex flex-column align-items-center">
<button mat-fab
iav-fab-speed-dial-trigger
[color]="fab.isOpen ? 'basic' : 'accent'">
diff --git a/src/ui/ui.module.ts b/src/ui/ui.module.ts
index ac11d02f3cd101e9033e64ade8d0d2616d7cd556..55fff4982240b15dbce5fc0f33077760f62886e5 100644
--- a/src/ui/ui.module.ts
+++ b/src/ui/ui.module.ts
@@ -47,7 +47,7 @@ import { DOCUMENT } from "@angular/common";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { RegionalFeaturesModule } from "../atlasComponents/regionalFeatures";
import { Landmark2DModule } from "./nehubaContainer/2dLandmarks/module";
-import { ScreenshotModule, HANDLE_SCREENSHOT_PROMISE, TypeHandleScrnShotPromise } from "./screenshot";
+import { HANDLE_SCREENSHOT_PROMISE, TypeHandleScrnShotPromise } from "./screenshot";
import { ParcellationRegionModule } from "src/atlasComponents/parcellationRegion";
import { AtlasCmpParcellationModule } from "src/atlasComponents/parcellation";
import { AtlasCmptConnModule } from "src/atlasComponents/connectivity";
@@ -68,7 +68,6 @@ import { AtlasCmptConnModule } from "src/atlasComponents/connectivity";
AuthModule,
RegionalFeaturesModule,
Landmark2DModule,
- ScreenshotModule,
ParcellationRegionModule,
AtlasCmpParcellationModule,
AtlasCmptConnModule,
diff --git a/src/viewerModule/nehuba/nehubaViewerGlue/nehubaViewerGlue.template.html b/src/viewerModule/nehuba/nehubaViewerGlue/nehubaViewerGlue.template.html
index 5c612b2957e95a637b4992110ffe18780db47b1f..ac4241ecfea6d528df7a71ed6fe7c83eea21152a 100644
--- a/src/viewerModule/nehuba/nehubaViewerGlue/nehubaViewerGlue.template.html
+++ b/src/viewerModule/nehuba/nehubaViewerGlue/nehubaViewerGlue.template.html
@@ -85,7 +85,7 @@
</layout-floating-container>
<!-- panel controller -->
- <div iavLayoutFourCornersBottomRight>
+ <div iavLayoutFourCornersBottomRight class="position-relative">
<ng-container *ngTemplateOutlet="panelCtrlTmpl; context: {
panelIndex: panelIndex,
@@ -93,7 +93,8 @@
}">
</ng-container>
- <div *ngIf="(sliceViewLoadingMain$ | async)[panelIndex]">
+ <div *ngIf="(sliceViewLoadingMain$ | async)[panelIndex]"
+ class="position-absolute bottom-0 right-0">
<spinner-cmp></spinner-cmp>
</div>
</div>
diff --git a/src/viewerModule/viewerCmp/viewerCmp.style.css b/src/viewerModule/viewerCmp/viewerCmp.style.css
index a3960f1d7ea97425a512e78a0d7396801e28cf8b..af05bcb9091017bba2154587fea00f258843cf38 100644
--- a/src/viewerModule/viewerCmp/viewerCmp.style.css
+++ b/src/viewerModule/viewerCmp/viewerCmp.style.css
@@ -40,3 +40,8 @@
position: sticky;
bottom: 0.5rem;
}
+
+:host >>> .mat-chip-list-wrapper
+{
+ flex-wrap: nowrap;
+}
diff --git a/src/viewerModule/viewerCmp/viewerCmp.template.html b/src/viewerModule/viewerCmp/viewerCmp.template.html
index 2df56a69fd5e00480757e94a6514be539c574790..4d5a766686e66d6470c73055a92c41a4fa80ed1a 100644
--- a/src/viewerModule/viewerCmp/viewerCmp.template.html
+++ b/src/viewerModule/viewerCmp/viewerCmp.template.html
@@ -55,42 +55,49 @@
<mat-drawer-content class="visible position-relative pe-none">
- <iav-layout-fourcorners>
+ <iav-layout-fourcorners [iav-layout-fourcorners-cnr-cntr-ngclass]="{'w-100': true}">
<!-- pullable tab top right corner -->
- <div iavLayoutFourCornersTopLeft class="d-inline-flex">
-
- <div *ngIf="viewerLoaded"
- class="pe-all tab-toggle-container"
- (click)="sideNavTopSwitch && sideNavTopSwitch.toggle()">
- <ng-container *ngTemplateOutlet="tabTmpl; context: {
- isOpen: sideNavTopSwitch.switchState,
- regionSelected: selectedRegions$ | async,
- iavAdditionallayers: iavAdditionalLayers$ | async
- }">
- </ng-container>
+ <div iavLayoutFourCornersTopLeft class="d-flex flex-nowrap w-100">
+
+ <!-- top left -->
+ <div class="flex-grow-1 d-flex flex-nowrap">
+
+ <div *ngIf="viewerLoaded"
+ class="pe-all tab-toggle-container"
+ (click)="sideNavTopSwitch && sideNavTopSwitch.toggle()">
+ <ng-container *ngTemplateOutlet="tabTmpl; context: {
+ isOpen: sideNavTopSwitch.switchState,
+ regionSelected: selectedRegions$ | async,
+ iavAdditionallayers: iavAdditionalLayers$ | async
+ }">
+ </ng-container>
+ </div>
+
+ <iav-cmp-viewer-nehuba-status *ngIf="viewerLoaded"
+ class="pe-all mt-2 muted-7">
+ </iav-cmp-viewer-nehuba-status>
</div>
- <iav-cmp-viewer-nehuba-status *ngIf="viewerLoaded"
- class="pe-all mt-2 muted-7">
- </iav-cmp-viewer-nehuba-status>
- </div>
+ <!-- top right -->
+ <div class="flex-grow-0 d-inline-flex align-items-start">
- <!-- signin banner at top right corner -->
- <div iavLayoutFourCornersTopRight
- class="d-inline-flex align-items-start">
+ <!-- signin banner at top right corner -->
+
- <top-menu-cmp class="mt-3 mr-2 d-inline-block"
- [ismobile]="ismobile"
- [viewerLoaded]="viewerLoaded">
- </top-menu-cmp>
+ <top-menu-cmp class="mt-3 mr-2 d-inline-block"
+ [ismobile]="ismobile"
+ [viewerLoaded]="viewerLoaded">
+ </top-menu-cmp>
- <div *ngIf="viewerLoaded"
- class="iv-custom-comp bg card m-2 mat-elevation-z2">
- <atlas-dropdown-selector class="pe-all mt-2">
- </atlas-dropdown-selector>
+ <div *ngIf="viewerLoaded"
+ class="iv-custom-comp bg card m-2 mat-elevation-z2">
+ <atlas-dropdown-selector class="pe-all mt-2">
+ </atlas-dropdown-selector>
+ </div>
</div>
</div>
+
</iav-layout-fourcorners>
</mat-drawer-content>
@@ -178,10 +185,10 @@
<!-- main-content -->
<mat-drawer-content class="visible position-relative">
- <iav-layout-fourcorners>
+ <iav-layout-fourcorners [iav-layout-fourcorners-cnr-cntr-ngclass]="{'w-100': true}">
<!-- bottom left corner (atlas selector and currently selected) -->
- <div iavLayoutFourCornersBottomLeft class="d-inline-flex align-items-center mb-4 ml-2">
+ <div iavLayoutFourCornersBottomLeft class="d-inline-flex align-items-center mb-4 ml-2 w-100">
<!-- atlas selector -->
<atlas-layer-selector *ngIf="viewerLoaded && !(isStandaloneVolumes$ | async)"
@@ -190,26 +197,29 @@
</atlas-layer-selector>
<!-- chips -->
- <mat-chip-list>
- <!-- additional layer -->
-
- <ng-container>
- <ng-container *ngTemplateOutlet="currParcellationTmpl; context: { addParc: (selectedAdditionalLayers$ | async), parc: (parcellationSelected$ | async) }">
+ <div class="flex-grow-1 flex-shrink-1 overflow-x-scroll">
+
+ <mat-chip-list class="d-inline-block">
+ <!-- additional layer -->
+
+ <ng-container>
+ <ng-container *ngTemplateOutlet="currParcellationTmpl; context: { addParc: (selectedAdditionalLayers$ | async), parc: (parcellationSelected$ | async) }">
+ </ng-container>
</ng-container>
- </ng-container>
-
- <!-- any selected region(s) -->
- <ng-container>
- <ng-container *ngTemplateOutlet="selectedRegionTmpl">
+
+ <!-- any selected region(s) -->
+ <ng-container>
+ <ng-container *ngTemplateOutlet="selectedRegionTmpl">
+ </ng-container>
</ng-container>
- </ng-container>
-
- <!-- controls for iav volumes -->
- <div class="hidden" iav-shown-previews #previews="iavShownPreviews"></div>
- <ng-container *ngTemplateOutlet="selectedDatasetPreview; context: { layers: previews.iavAdditionalLayers$ | async | filterPreviewByType : [previews.FILETYPES.VOLUMES] }">
- </ng-container>
-
- </mat-chip-list>
+
+ <!-- controls for iav volumes -->
+ <div class="hidden" iav-shown-previews #previews="iavShownPreviews"></div>
+ <ng-container *ngTemplateOutlet="selectedDatasetPreview; context: { layers: previews.iavAdditionalLayers$ | async | filterPreviewByType : [previews.FILETYPES.VOLUMES] }">
+ </ng-container>
+
+ </mat-chip-list>
+ </div>
</div>
</iav-layout-fourcorners>
@@ -311,7 +321,7 @@
(click)="onclick && onclick()"
[selected]="selected">
- <span>
+ <span class="ws-no-wrap">
{{ parcel?.groupName ? (parcel?.groupName + ' - ') : '' }}{{ parcel && (parcel.displayName || parcel.name) }}
</span>