From 8db2c843ccc7be9639dd62924c16d2351de44d77 Mon Sep 17 00:00:00 2001
From: jojohoch <joachim.hoch@iqb.hu-berlin.de>
Date: Thu, 3 Feb 2022 10:21:29 +0100
Subject: [PATCH] [player] Set the minimum height of a page to the screen size
- This improves scroll snap behaviour
- Set background color of page
- Interpret the margin of a page as padding. What it really is
---
docs/release-notes-player.txt | 3 +++
.../app/components/layout/layout.component.html | 15 +++++++++------
2 files changed, 12 insertions(+), 6 deletions(-)
diff --git a/docs/release-notes-player.txt b/docs/release-notes-player.txt
index a3989f320..cf66aec7f 100644
--- a/docs/release-notes-player.txt
+++ b/docs/release-notes-player.txt
@@ -2,6 +2,9 @@ Player
======
1.19.0
- Remove border of slider rectangle in number line mode at position 0
+- Set the minimum height of a page to the screen size
+- Set background color of page
+- Improves scroll snap behaviour for small pages
1.18.0
- Show arrow for slider in number line mode
diff --git a/projects/player/src/app/components/layout/layout.component.html b/projects/player/src/app/components/layout/layout.component.html
index 06cbfdae0..7733756c5 100644
--- a/projects/player/src/app/components/layout/layout.component.html
+++ b/projects/player/src/app/components/layout/layout.component.html
@@ -10,7 +10,6 @@
scrollPagesView"></ng-container>
</div>
</div>
-
<app-keyboard
*ngIf="keyboardService.isOpen && keyboardService.position === 'right'"
@keyboardSlideInOut
@@ -21,8 +20,6 @@
(deleteCharacter)="keyboardService.deleterCharacters()"
(enterKey)="keyboardService.enterKey($event)">
</app-keyboard>
-
-
</div>
<ng-template #alwaysVisiblePageView>
@@ -36,8 +33,10 @@
[style.max-width]="containerMaxWidth.alwaysVisiblePage">
<div appHideFirstChild
[hideFirstChild]="hidePageLabels"
+ [style.min-height]="'calc(100vh - ' + (alwaysVisiblePage.margin * 2) + 'px)'"
+ [style.background-color]="alwaysVisiblePage.backgroundColor"
[style.max-width]="alwaysVisiblePage.hasMaxWidth ? alwaysVisiblePage.maxWidth + 'px' : '100%'"
- [style.margin.px]="alwaysVisiblePage.margin">
+ [style.padding.px]="alwaysVisiblePage.margin">
<div class="mat-tab-label">{{'alwaysVisiblePage' | translate}}</div>
<app-page [parentArrayIndex]="alwaysVisibleUnitPageIndex"
[parentForm]="parentForm"
@@ -77,7 +76,9 @@
(selectedIndexChange)="onSelectedIndexChange($event)">
<ng-container *ngFor="let page of scrollPages; let i = index; let last = last">
<mat-tab [label]="'pageIndication' | translate: {index: i + 1}">
- <div [style.margin.px]="page.margin"
+ <div [style.min-height]="'calc(100vh - ' + (page.margin * 2) + 'px)'"
+ [style.background-color]="page.backgroundColor"
+ [style.padding.px]="page.margin"
[style.max-width]="page.hasMaxWidth ? page.maxWidth + 'px' : '100%'">
<app-page [parentArrayIndex]="scrollPagesIndices[i]"
[parentForm]="parentForm"
@@ -95,9 +96,11 @@
<ng-container *ngFor="let page of scrollPages; let i = index; let last = last">
<div appHideFirstChild
[hideFirstChild]="hidePageLabels"
+ [style.min-height]="'calc(100vh - ' + (page.margin * 2) + 'px)'"
+ [style.background-color]="page.backgroundColor"
[class.concat-scroll-snap-align]="scrollPageMode === 'concat-scroll-snap'"
[style.max-width]="page.hasMaxWidth ? page.maxWidth + 'px' : '100%'"
- [style.margin.px]="page.margin"
+ [style.padding.px]="page.margin"
appScrollIndex
[pagesContainer]="pagesContainer"
[selectIndex]="selectIndex"
--
GitLab