From a6b24ce33c9fc06ba7c79d2e514ec08ba9d2b0a8 Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Fri, 2 Dec 2022 18:14:52 +0100
Subject: [PATCH] Fix DropList styling
- Mainly highlight border and moving elements.
- Centerpiece is: line-height: 130%;
Don't know why or how but it works okay.
---
.../input-elements/drop-list.component.ts | 18 +++++++++---------
1 file changed, 9 insertions(+), 9 deletions(-)
diff --git a/projects/common/components/input-elements/drop-list.component.ts b/projects/common/components/input-elements/drop-list.component.ts
index 1a3fa9971..0e78710f6 100644
--- a/projects/common/components/input-elements/drop-list.component.ts
+++ b/projects/common/components/input-elements/drop-list.component.ts
@@ -14,8 +14,8 @@ import { FormElementComponent } from '../../directives/form-element-component.di
[fxLayout]="elementModel.orientation | droplistLayout"
[fxLayoutAlign]="elementModel.orientation | droplistLayoutAlign"
[ngClass]="{ 'vertical-orientation' : elementModel.orientation === 'vertical',
- 'horizontal-orientation' : elementModel.orientation === 'horizontal',
- 'clozeContext': clozeContext}"
+ 'horizontal-orientation' : elementModel.orientation === 'horizontal',
+ 'clozeContext': clozeContext}"
[style.min-height.px]="elementModel.position?.useMinHeight ? elementModel.height : undefined"
[style.color]="elementModel.styling.fontColor"
[style.font-family]="elementModel.styling.font"
@@ -25,7 +25,7 @@ import { FormElementComponent } from '../../directives/form-element-component.di
[style.text-decoration]="elementModel.styling.underline ? 'underline' : ''"
[style.backgroundColor]="elementModel.styling.backgroundColor"
[class.errors]="elementFormControl.errors && elementFormControl.touched"
- [style.outline-color]="elementModel.highlightReceivingDropListColor"
+ [style.border-color]="elementModel.highlightReceivingDropListColor"
[class.highlight-valid-drop]="highlightValidDrop"
[class.highlight-as-receiver]="highlightAsReceiver"
tabindex="0"
@@ -63,10 +63,11 @@ import { FormElementComponent } from '../../directives/form-element-component.di
`,
styles: [
'.list {width: 100%; height: 100%; background-color: rgb(244, 244, 242); border-radius: 5px;}',
- ':not(.clozeContext).list {padding: 3px;}',
- ':not(.clozeContext) .list-item {border-radius: 5px; padding: 10px;}',
- '.clozeContext .list-item {border-radius: 5px; padding: 0 5px; text-align: center;}',
- 'img.list-item {align-self: start;}',
+ '.list {padding: 2px;}',
+ '.list-item {border-radius: 5px;}',
+ ':not(.clozeContext) .list-item {padding: 10px;}',
+ '.clozeContext .list-item {padding: 0 5px; text-align: center; line-height: 130%;}',
+ 'img.list-item {align-self: start; padding: 2px !important;}',
'.vertical-orientation .list-item:not(:last-child) {margin-bottom: 5px;}',
'.horizontal-orientation .list-item:not(:last-child) {margin-right: 5px;}',
'.errors {border: 2px solid #f44336;}',
@@ -76,7 +77,7 @@ import { FormElementComponent } from '../../directives/form-element-component.di
'.list-item:active {cursor: grabbing}',
'.show-as-placeholder {opacity: 0.5 !important; pointer-events: none;}',
'.highlight-valid-drop {background-color: lightblue !important;}',
- '.highlight-as-receiver {border: 2px solid;}',
+ '.highlight-as-receiver {padding: 0; border: 2px solid;}',
'.show-as-hidden {visibility: hidden;}'
]
})
@@ -331,7 +332,6 @@ export class DropListLayoutAlignPipe implements PipeTransform {
transform(orientation: string): string {
switch (orientation) {
case 'horizontal':
- return 'start start';
case 'vertical':
return 'start stretch';
case 'flex':
--
GitLab