Merge pull request #4820 from HDinger/feature/23848-show-work-package-attributes-in-fullscreen-view-in-two-columns

[23848] Show work package attributes in fullscreen view in two columns

app/assets/stylesheets/layout/_work_package.sass

@@ -299,3 +299,15 @@
   .work-package--attachments--filename
     width: rem-calc(354)
     display: inline-block
+
+// Implement two column layout for WP full screen view
+@media screen and (min-width: 90rem)
+  .action-show .attributes-group
+    .-columns-2
+      column-count: 2
+      column-gap: 4rem
+
+      .attributes-key-value
+        -webkit-column-break-inside: avoid
+        page-break-inside: avoid
+        break-inside: avoid

frontend/app/components/work-packages/wp-single-view/wp-single-view.directive.html

@@ -37,63 +37,65 @@
       </div>
     </div>
 
-    <div
-        class="attributes-key-value"
-        ng-repeat="field in group.attributes">
+    <div class="-columns-2">
       <div
-          class="attributes-key-value--key"
-          ng-hide="$ctrl.shouldHideField(field)"
-          ng-if="$ctrl.singleViewWp.isSingleField(field) && $ctrl.singleViewWp.isSpecified(field)"
-          wp-replacement-label="field">
+          class="attributes-key-value"
+          ng-repeat="field in group.attributes">
+        <div
+            class="attributes-key-value--key"
+            ng-hide="$ctrl.shouldHideField(field)"
+            ng-if="$ctrl.singleViewWp.isSingleField(field) && $ctrl.singleViewWp.isSpecified(field)"
+            wp-replacement-label="field">
 
-        {{$ctrl.singleViewWp.getLabel(field)}}
+          {{$ctrl.singleViewWp.getLabel(field)}}
 
-        <span class="required" ng-if="$ctrl.singleViewWp.hasNiceStar(field)"> *</span>
-      </div>
-      <div
-          ng-hide="$ctrl.shouldHideField(field)"
-          ng-if="$ctrl.singleViewWp.isSingleField(field) && $ctrl.singleViewWp.isSpecified(field)"
-          wp-edit-field="field"
-          wp-edit-field-label="$ctrl.singleViewWp.getLabel(field)"
-          wp-edit-field-wrapper-classes="'-small'"
-          class="attributes-key-value--value-container">
-      </div>
-
-      <div
-          class="attributes-key-value--key"
-          ng-hide="$ctrl.shouldHideField(field.fields[0]) &&
-                   $ctrl.shouldHideField(field.fields[1])"
-          ng-if="!$ctrl.singleViewWp.isSingleField(field) &&
-                 $ctrl.singleViewWp.isSpecified(field.fields[0]) &&
-                 $ctrl.singleViewWp.isSpecified(field.fields[1]) "
-          wp-replacement-label="field.label">
+          <span class="required" ng-if="$ctrl.singleViewWp.hasNiceStar(field)"> *</span>
+        </div>
+        <div
+            ng-hide="$ctrl.shouldHideField(field)"
+            ng-if="$ctrl.singleViewWp.isSingleField(field) && $ctrl.singleViewWp.isSpecified(field)"
+            wp-edit-field="field"
+            wp-edit-field-label="$ctrl.singleViewWp.getLabel(field)"
+            wp-edit-field-wrapper-classes="'-small'"
+            class="attributes-key-value--value-container">
+        </div>
 
-        {{$ctrl.singleViewWp.getLabel(field.label)}}
+        <div
+            class="attributes-key-value--key"
+            ng-hide="$ctrl.shouldHideField(field.fields[0]) &&
+                     $ctrl.shouldHideField(field.fields[1])"
+            ng-if="!$ctrl.singleViewWp.isSingleField(field) &&
+                   $ctrl.singleViewWp.isSpecified(field.fields[0]) &&
+                   $ctrl.singleViewWp.isSpecified(field.fields[1]) "
+            wp-replacement-label="field.label">
 
-        <span class="required" ng-if="$ctrl.singleViewWp.hasNiceStar(field.label)"> *</span>
-      </div>
-      <div
-          ng-hide="$ctrl.shouldHideField(field.fields[0]) &&
-                   $ctrl.shouldHideField(field.fields[1])"
-          ng-if="!$ctrl.singleViewWp.isSingleField(field) &&
-                 $ctrl.singleViewWp.isSpecified(field.fields[0]) &&
-                 $ctrl.singleViewWp.isSpecified(field.fields[1]) "
-          class="attributes-key-value--value-container -minimal">
+          {{$ctrl.singleViewWp.getLabel(field.label)}}
 
-        <div
-            wp-edit-field="field.fields[0]"
-            wp-edit-field-label="$ctrl.singleViewWp.getLabel(field.fields[0])"
-            wp-edit-field-wrapper-classes="'-small -shrink'"
-            display-placeholder="::$ctrl.text.fields[field.label][field.fields[0]]">
+          <span class="required" ng-if="$ctrl.singleViewWp.hasNiceStar(field.label)"> *</span>
         </div>
+        <div
+            ng-hide="$ctrl.shouldHideField(field.fields[0]) &&
+                     $ctrl.shouldHideField(field.fields[1])"
+            ng-if="!$ctrl.singleViewWp.isSingleField(field) &&
+                   $ctrl.singleViewWp.isSpecified(field.fields[0]) &&
+                   $ctrl.singleViewWp.isSpecified(field.fields[1]) "
+            class="attributes-key-value--value-container -minimal">
 
-        <span class="attributes-key-value--value-separator"></span>
+          <div
+              wp-edit-field="field.fields[0]"
+              wp-edit-field-label="$ctrl.singleViewWp.getLabel(field.fields[0])"
+              wp-edit-field-wrapper-classes="'-small -shrink'"
+              display-placeholder="::$ctrl.text.fields[field.label][field.fields[0]]">
+          </div>
 
-        <div
-            wp-edit-field="field.fields[1]"
-            wp-edit-field-label="$ctrl.singleViewWp.getLabel(field.fields[1])"
-            wp-edit-field-wrapper-classes="'-small -shrink'"
-            display-placeholder="::$ctrl.text.fields[field.label][field.fields[1]]">
+          <span class="attributes-key-value--value-separator"></span>
+
+          <div
+              wp-edit-field="field.fields[1]"
+              wp-edit-field-label="$ctrl.singleViewWp.getLabel(field.fields[1])"
+              wp-edit-field-wrapper-classes="'-small -shrink'"
+              display-placeholder="::$ctrl.text.fields[field.label][field.fields[1]]">
+          </div>
         </div>
       </div>
     </div>