From 685883e28a7ab96bdcadabe9169a4fa0ff4c1e5f Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Thu, 25 May 2023 17:11:33 +0200
Subject: [PATCH] [player] Fix section layout by adding Measurement property
support
Element margins and grid sizes now have a measure unit attached. The
translation logic to merge unit and value are done via Pipe.
---
.../app/components/section/section.component.html | 12 ++++++------
1 file changed, 6 insertions(+), 6 deletions(-)
diff --git a/projects/player/src/app/components/section/section.component.html b/projects/player/src/app/components/section/section.component.html
index 6b23cdd3d..1647a6bf1 100644
--- a/projects/player/src/app/components/section/section.component.html
+++ b/projects/player/src/app/components/section/section.component.html
@@ -19,8 +19,8 @@
<ng-template #dynamicElements>
<div
class="dynamic-section"
- [style.grid-template-columns]="!section.autoColumnSize ? section.gridColumnSizes : undefined"
- [style.grid-template-rows]="!section.autoRowSize ? section.gridRowSizes : undefined"
+ [style.grid-template-columns]="section.autoColumnSize ? undefined : section.gridColumnSizes | measure"
+ [style.grid-template-rows]="section.autoRowSize ? undefined : section.gridRowSizes | measure"
[style.grid-auto-columns]="section.autoColumnSize ? 'auto' : undefined"
[style.grid-auto-rows]="section.autoRowSize ? 'auto' : undefined"
[style.backgroundColor]="section.backgroundColor">
@@ -29,10 +29,10 @@
[class.no-pointer-events]="element.type === 'frame'"
[style.min-width.px]="element.width"
[style.min-height.px]="element.position.useMinHeight ? element.height : null"
- [style.margin-left.px]="element.position.marginLeft"
- [style.margin-right.px]="element.position.marginRight"
- [style.margin-top.px]="element.position.marginTop"
- [style.margin-bottom.px]="element.position.marginBottom"
+ [style.margin-left]="[element.position.marginLeft] | measure"
+ [style.margin-right]="[element.position.marginRight] | measure"
+ [style.margin-top]="[element.position.marginTop] | measure"
+ [style.margin-bottom]="[element.position.marginBottom] | measure"
[style.grid-column-start]="element.position.gridColumn"
[style.grid-column-end]="element.position.gridColumn ?
element.position.gridColumn + element.position.gridColumnRange:
--
GitLab