Merge pull request #7542 from opf/feature/30737-Improve-alignment-of-estimated-time

[30737] Improve alignment of estimated time

[ci skip]

app/assets/stylesheets/content/work_packages/inplace_editing/_display_fields.sass

@@ -36,13 +36,24 @@
   &.-placeholder
     font-style: italic
 
-  span.-derived
-    @include varprop(color, gray-dark)
-    font-style: italic
-    font-weight: bold
+  &.split-time-field
+    white-space: nowrap
+    .-actual-value,
+    .-derived-value
+      display: inline-block
+      width: 48%
+
+    .-actual-value
+      text-align: right
+      padding-right: 0.5rem
+
+    .-derived-value
+      @include varprop(color, gray-dark)
+      font-style: italic
+      font-weight: bold
 
-  span.-with-actual
-    margin-left: 0.5em
+      &:not(.-with-actual-value)
+        margin-left: 48%
 
 .wp-edit-field--text,
 wp-edit-field

frontend/src/app/modules/fields/display/field-types/wp-display-duration-field.module.ts

@@ -65,6 +65,7 @@ export class DurationDisplayField extends DisplayField {
       return;
     }
 
+    element.classList.add('split-time-field');
     let value = this.value;
     let actual:number = (value && this.timezoneService.toHours(value)) || 0;
 
@@ -83,6 +84,7 @@ export class DurationDisplayField extends DisplayField {
 
     span.textContent = displayText;
     span.title = this.valueString;
+    span.classList.add('-actual-value')
 
     element.appendChild(span);
   }
@@ -91,12 +93,12 @@ export class DurationDisplayField extends DisplayField {
     const span = document.createElement('span');
 
     span.setAttribute('title', this.texts.empty);
-    span.textContent = "(" + (actualPresent ? "+" : "") + displayText + ")";
+    span.textContent = '(' + (actualPresent ? '+' : '') + displayText + ')';
     span.title = `${this.derivedValueString} ${this.derivedText}`;
-    span.classList.add("-derived");
+    span.classList.add('-derived-value');
 
     if (actualPresent) {
-      span.classList.add("-with-actual");
+      span.classList.add('-with-actual-value');
     }
 
     element.appendChild(span);