Merge pull request #1896 from opf/fix/14596-details-pane-long-attributes

Fixes for wp attributes layout with long values

app/assets/stylesheets/content/_work_packages.sass

@@ -192,20 +192,19 @@ div
     width: 100%
 
     ul
+      list-style-type: none
+      +display(flex)
+      +flex-wrap(wrap)
       margin: 10px 0 0 0
       padding: 0
-      list-style-type: none
+
       li
         margin: 0 0 25px 0
         padding: 0
-        display: inline-table
+        +flex-grow(1)
         min-width: 33%
-        clear: left
+        max-width: 33%
 
-    label
-      font-weight: bold
-      display: block
-      margin: 0 0 7px 0
   &.detail-panel-attributes-toggler
     float: left
     margin: 10px 0 0 0
@@ -213,6 +212,22 @@ div
     text-align: center
     border-bottom: 1px solid #ddd
 
+.work-package-attributes--label
+  font-weight: bold
+  margin: 0 0 7px 0
+  padding: 0 4px 0 0
+
+.work-package-attributes--value-container
+  padding: 0 4px 0 0
+  display: block
+
+.work-package-attributes--value
+  &.-dynamic,
+  &.-version,
+  &.-category,
+  &.-text,
+    +ellipsis
+
 span.role
   font-size: 11px
   font-size: 0.6875rem

public/templates/work_packages/tabs/overview.html

@@ -12,25 +12,29 @@
   <!-- present attributes -->
   <ul>
     <li ng-repeat="propertyData in presentWorkPackageProperties">
-      <label ng-bind="propertyData.label"/>
-      <span ng-switch="propertyData.format">
-        <user-field ng-switch-when="user" user="propertyData.value"></user-field>
-        <span ng-switch-when="dynamic" work-package-dynamic-attribute
-                                       html-element="propertyData.value"
-                                       work-package="workPackage">
-        </span>
-        <span ng-switch-when="version"><a ng-href="{{propertyData.value.href}}">{{propertyData.value.title}}</a></span>
-        <span ng-switch-when="category">{{ propertyData.value.props.name }}</span>
-        <span ng-switch-default ng-bind="(propertyData.value !== undefined) ? propertyData.value : '-'"/>
-      </span>
+      <div class="work-package-attributes--label" ng-bind="propertyData.label"/>
+      <div class="work-package-attributes--value-container" ng-switch="propertyData.format">
+        <div ng-class="['work-package-attributes--value', '-' + propertyData.format]">
+          <user-field ng-switch-when="user" user="propertyData.value"></user-field>
+          <span ng-switch-when="dynamic" work-package-dynamic-attribute
+                                         html-element="propertyData.value"
+                                         work-package="workPackage">
+          </span>
+          <span ng-switch-when="version"><a ng-href="{{propertyData.value.href}}">{{propertyData.value.title}}</a></span>
+          <span ng-switch-when="category">{{ propertyData.value.props.name }}</span>
+          <span ng-switch-default ng-bind="(propertyData.value !== undefined) ? propertyData.value : '-'"/>
+        </div>
+      </div>
     </li>
   </ul>
   <!-- empty attributes -->
   <ul class="work-package-details-overview-tab-empty-attributes"
       slide-toggle collapsed="toggleStates.hideAllAttributes">
       <li ng-repeat="property in emptyWorkPackageProperties">
-        <label ng-bind="property"></label>
-        <span> - </span>
+        <div class="work-package-attributes--label" ng-bind="property"></div>
+        <div class="work-package-attributes--value-container">
+          <div class="work-package-attributes--value">-</div>
+        </div>
       </li>
   </ul>
   <panel-expander ng-if="emptyWorkPackageProperties.length"