diff --git a/src/layouts/currentLayout/currentLayout.component.ts b/src/layouts/currentLayout/currentLayout.component.ts
index 313f1cd93467cb08955bd92f2dc728568427bf62..be31bf00347ec1bee75eba254c3ff866b7ac4304 100644
--- a/src/layouts/currentLayout/currentLayout.component.ts
+++ b/src/layouts/currentLayout/currentLayout.component.ts
@@ -4,7 +4,6 @@ import { Observable } from "rxjs";
import { startWith } from "rxjs/operators";
import { SUPPORTED_PANEL_MODES } from "src/services/state/ngViewerState.store";
import { ngViewerSelectorPanelMode } from "src/services/state/ngViewerState/selectors";
-import { IavRootStoreInterface } from "src/services/stateStore.service";
@Component({
selector: 'current-layout',
@@ -20,7 +19,7 @@ export class CurrentLayout {
public panelMode$: Observable<string>
constructor(
- private store$: Store<IavRootStoreInterface>,
+ private store$: Store<any>,
) {
this.panelMode$ = this.store$.pipe(
select(ngViewerSelectorPanelMode),
diff --git a/src/layouts/currentLayout/currentLayout.style.css b/src/layouts/currentLayout/currentLayout.style.css
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..a633460dc9cd04a4e563a2a926b4d486cba421d4 100644
--- a/src/layouts/currentLayout/currentLayout.style.css
+++ b/src/layouts/currentLayout/currentLayout.style.css
@@ -0,0 +1,6 @@
+:host
+{
+ width: 100%;
+ height: 100%;
+ display: block;
+}
\ No newline at end of file
diff --git a/src/layouts/currentLayout/currentLayout.template.html b/src/layouts/currentLayout/currentLayout.template.html
index f3d04c104239b9e81f3ff0552c892e86c444ba0d..9575932ed1de52ea23341d6570a48b32225c9160 100644
--- a/src/layouts/currentLayout/currentLayout.template.html
+++ b/src/layouts/currentLayout/currentLayout.template.html
@@ -1,72 +1,72 @@
-<div [ngSwitch]="panelMode$ | async" class="w-100 h-100 d-flex flex-row">
+<ng-container [ngSwitch]="panelMode$ | async">
<layout-four-panel
*ngSwitchCase="supportedPanelModes[0]"
class="d-block w-100 h-100">
- <div class="w-100 h-100" cell-i>
+ <ng-container cell-i>
<ng-content *ngTemplateOutlet="celli"></ng-content>
- </div>
- <div class="w-100 h-100" cell-ii>
+ </ng-container>
+ <ng-container cell-ii>
<ng-content *ngTemplateOutlet="cellii"></ng-content>
- </div>
- <div class="w-100 h-100" cell-iii>
+ </ng-container>
+ <ng-container cell-iii>
<ng-content *ngTemplateOutlet="celliii"></ng-content>
- </div>
- <div class="w-100 h-100" cell-iv>
+ </ng-container>
+ <ng-container cell-iv>
<ng-content *ngTemplateOutlet="celliv"></ng-content>
- </div>
+ </ng-container>
</layout-four-panel>
<layout-horizontal-one-three
*ngSwitchCase="supportedPanelModes[1]"
class="d-block w-100 h-100">
- <div class="w-100 h-100" cell-i>
+ <ng-container cell-i>
<ng-content *ngTemplateOutlet="celli"></ng-content>
- </div>
- <div class="w-100 h-100" cell-ii>
+ </ng-container>
+ <ng-container cell-ii>
<ng-content *ngTemplateOutlet="cellii"></ng-content>
- </div>
- <div class="w-100 h-100" cell-iii>
+ </ng-container>
+ <ng-container cell-iii>
<ng-content *ngTemplateOutlet="celliii"></ng-content>
- </div>
- <div class="w-100 h-100" cell-iv>
+ </ng-container>
+ <ng-container cell-iv>
<ng-content *ngTemplateOutlet="celliv"></ng-content>
- </div>
+ </ng-container>
</layout-horizontal-one-three>
<layout-vertical-one-three
*ngSwitchCase="supportedPanelModes[2]"
class="d-block w-100 h-100">
- <div class="w-100 h-100" cell-i>
+ <ng-container cell-i>
<ng-content *ngTemplateOutlet="celli"></ng-content>
- </div>
- <div class="w-100 h-100" cell-ii>
+ </ng-container>
+ <ng-container cell-ii>
<ng-content *ngTemplateOutlet="cellii"></ng-content>
- </div>
- <div class="w-100 h-100" cell-iii>
+ </ng-container>
+ <ng-container cell-iii>
<ng-content *ngTemplateOutlet="celliii"></ng-content>
- </div>
- <div class="w-100 h-100" cell-iv>
+ </ng-container>
+ <ng-container cell-iv>
<ng-content *ngTemplateOutlet="celliv"></ng-content>
- </div>
+ </ng-container>
</layout-vertical-one-three>
<layout-single-panel
*ngSwitchCase="supportedPanelModes[3]"
class="d-block w-100 h-100">
- <div class="w-100 h-100" cell-i>
+ <ng-container cell-i>
<ng-content *ngTemplateOutlet="celli"></ng-content>
- </div>
- <div class="w-100 h-100" cell-ii>
+ </ng-container>
+ <ng-container cell-ii>
<ng-content *ngTemplateOutlet="cellii"></ng-content>
- </div>
- <div class="w-100 h-100" cell-iii>
+ </ng-container>
+ <ng-container cell-iii>
<ng-content *ngTemplateOutlet="celliii"></ng-content>
- </div>
- <div class="w-100 h-100" cell-iv>
+ </ng-container>
+ <ng-container cell-iv>
<ng-content *ngTemplateOutlet="celliv"></ng-content>
- </div>
+ </ng-container>
</layout-single-panel>
<div *ngSwitchDefault>
A panel mode which I have never seen before ...
</div>
-</div>
+</ng-container>
<ng-template #celli>
<ng-content select="[cell-i]"></ng-content>
diff --git a/src/layouts/layouts/fourPanel/fourPanel.style.css b/src/layouts/layouts/fourPanel/fourPanel.style.css
index 03169dfb4b9564f62c86ca9250303c5337927861..c967cad95281436e99d2fe073018148ae818c4bd 100644
--- a/src/layouts/layouts/fourPanel/fourPanel.style.css
+++ b/src/layouts/layouts/fourPanel/fourPanel.style.css
@@ -1,4 +1,12 @@
.four-panel-cell
{
flex: 0 0 50%;
+}
+
+.four-panel-container
+{
+ display: grid;
+ grid-template-columns: 50% 50%;
+ grid-template-rows: 50% 50%;
+ height: 100%;
}
\ No newline at end of file
diff --git a/src/layouts/layouts/fourPanel/fourPanel.template.html b/src/layouts/layouts/fourPanel/fourPanel.template.html
index ddb10f1f6a34adda68f578625dd843baf536dfa0..9e747c2a9cf43469711a520b225b92353090c523 100644
--- a/src/layouts/layouts/fourPanel/fourPanel.template.html
+++ b/src/layouts/layouts/fourPanel/fourPanel.template.html
@@ -1,18 +1,14 @@
-<div class="w-100 h-100 d-flex flex-column justify-content-center align-items-stretch">
- <div class="d-flex flex-row flex-grow-1 flex-shrink-1">
- <div class="d-flex flex-row four-panel-cell align-items-center justify-content-center">
- <ng-content select="[cell-i]"></ng-content>
- </div>
- <div class="d-flex flex-row four-panel-cell align-items-center justify-content-center">
- <ng-content select="[cell-ii]"></ng-content>
- </div>
+<div class="four-panel-container">
+ <div>
+ <ng-content select="[cell-i]"></ng-content>
</div>
- <div class="d-flex flex-row flex-grow-1 flex-shrink-1">
- <div class="d-flex flex-row four-panel-cell align-items-center justify-content-center">
- <ng-content select="[cell-iii]"></ng-content>
- </div>
- <div class="d-flex flex-row four-panel-cell align-items-center justify-content-center">
- <ng-content select="[cell-iv]"></ng-content>
- </div>
+ <div>
+ <ng-content select="[cell-ii]"></ng-content>
+ </div>
+ <div>
+ <ng-content select="[cell-iii]"></ng-content>
+ </div>
+ <div>
+ <ng-content select="[cell-iv]"></ng-content>
</div>
</div>
diff --git a/src/layouts/layouts/single/single.template.html b/src/layouts/layouts/single/single.template.html
index 561a6363b701518ec5d27b1f0d78507e02afe30a..fcf3a11e33d91bac185b09150761e7487b3e7ae5 100644
--- a/src/layouts/layouts/single/single.template.html
+++ b/src/layouts/layouts/single/single.template.html
@@ -1,18 +1,3 @@
-<div class="w-100 h-100 d-flex flex-row justify-content-center align-items-stretch">
- <div class="d-flex flex-column major-column">
- <div class="overflow-hidden flex-grow-1 d-flex align-items-center justify-content-center">
- <ng-content select="[cell-i]"></ng-content>
- </div>
- </div>
- <div class="d-flex flex-column minor-column">
- <div class="overflow-hidden layout-31-cell d-flex align-items-center justify-content-center">
- <ng-content select="[cell-ii]"></ng-content>
- </div>
- <div class="overflow-hidden layout-31-cell d-flex align-items-center justify-content-center">
- <ng-content select="[cell-iii]"></ng-content>
- </div>
- <div class="overflow-hidden layout-31-cell d-flex align-items-center justify-content-center">
- <ng-content select="[cell-iv]"></ng-content>
- </div>
- </div>
- </div>
\ No newline at end of file
+<div class="w-100 h-100">
+ <ng-content select="[cell-i]"></ng-content>
+</div>