From 447fa70b299e1977f9f563ab737928471b4cae55 Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Wed, 24 Nov 2021 12:15:45 +0100
Subject: [PATCH] Improve styling of cloze sub-elements
The issue here is the alignment if dropLists and text fields. They are
supposed to be exactly in line with the text which is very complicated
with Material components, which are heavily nested and contain several
sub-elements which need to be changed - removing margins, paddings and
other position related styles.
---
.../compound-elements/cloze.component.ts | 12 ++++++++----
.../element-components/text-field.component.ts | 2 +-
.../common/models/compound-elements/cloze-element.ts | 3 ++-
3 files changed, 11 insertions(+), 6 deletions(-)
diff --git a/projects/common/element-components/compound-elements/cloze.component.ts b/projects/common/element-components/compound-elements/cloze.component.ts
index d4369e5dc..5063ae977 100644
--- a/projects/common/element-components/compound-elements/cloze.component.ts
+++ b/projects/common/element-components/compound-elements/cloze.component.ts
@@ -55,15 +55,15 @@ import { FormElementComponent } from '../../form-element-component.directive';
</app-dropdown>
<app-text-field *ngIf="part.type === 'text-field'" #textfieldComponent
[parentForm]="parentForm"
- [style.vertical-align]="'sub'"
[style.display]="'inline-block'"
[style.pointerEvents]="allowClickThrough ? 'auto' : 'none'"
[elementModel]="$any(part.value)"
(elementValueChanged)="elementValueChanged.emit($event)">
</app-text-field>
- <div *ngIf="part.type === 'drop-list'" [style.display]="'inline-block'"
- [style.vertical-align]="'middle'"
+ <div *ngIf="part.type === 'drop-list'"
+ [style.display]="'inline-block'"
[style.pointerEvents]="allowClickThrough ? 'auto' : 'none'"
+ [style.vertical-align]="'middle'"
[style.width.px]="$any(part.value).width"
[style.height.px]="$any(part.value).height">
<app-drop-list #droplistComponent
@@ -77,7 +77,11 @@ import { FormElementComponent } from '../../form-element-component.directive';
</p>
`,
styles: [
- ':host ::ng-deep app-text-field .mat-form-field-wrapper {padding-bottom: 0; margin: 0}',
+ ':host ::ng-deep app-text-field {vertical-align: middle}',
+ ':host ::ng-deep app-text-field .mat-form-field-wrapper {height: 100%; padding-bottom: 0; margin: 0}',
+ ':host ::ng-deep app-text-field .mat-form-field {height: 100%}',
+ ':host ::ng-deep app-text-field .mat-form-field-flex {height: 100%}',
+ ':host ::ng-deep app-drop-list {vertical-align: middle}',
':host ::ng-deep app-drop-list .cdk-drop-list {height: 100%; width: 100%;}',
':host ::ng-deep app-drop-list .item {padding: 0 10px; height: 30px; line-height: 30px; text-align: center;}',
'p {margin: 0}'
diff --git a/projects/common/element-components/text-field.component.ts b/projects/common/element-components/text-field.component.ts
index 23099218a..176fc1c56 100644
--- a/projects/common/element-components/text-field.component.ts
+++ b/projects/common/element-components/text-field.component.ts
@@ -67,7 +67,7 @@ import { TextFieldElement } from '../models/text-field-element';
</mat-form-field>
`,
styles: [
- '::ng-deep app-text-field .small-input div.mat-form-field-infix {border-top: none; padding: 0.75em 0 0.25em 0;}'
+ '::ng-deep app-text-field .small-input div.mat-form-field-infix {border-top: none; padding: 0.55em 0 0.25em 0;}'
]
})
export class TextFieldComponent extends FormElementComponent {
diff --git a/projects/common/models/compound-elements/cloze-element.ts b/projects/common/models/compound-elements/cloze-element.ts
index 34225caa9..3d07b92f7 100644
--- a/projects/common/models/compound-elements/cloze-element.ts
+++ b/projects/common/models/compound-elements/cloze-element.ts
@@ -14,7 +14,7 @@ import { initFontElement } from '../../util/unit-interface-initializer';
// TODO styles like em dont continue after inserted components
export class ClozeElement extends CompoundElement implements FontElement {
- text: string = '<p>Lorem ipsum dolor \\z</p>';
+ text: string = '<p>Lorem ipsum dolor \\z sdfsdf \\i sdfsdf</p>';
parts: ClozePart[][] = [];
childElements: InputElement[] = [];
@@ -131,6 +131,7 @@ export class ClozeElement extends CompoundElement implements FontElement {
newElement = new DropListElement(elementModel);
newElement.height = 30;
newElement.width = 100;
+ newElement.onlyOneItem = true;
break;
default:
throw new Error(`ElementType ${elementModel.type} not found!`);
--
GitLab