From fddef8387036a1f068fe661177bdf237c0dc668a Mon Sep 17 00:00:00 2001
From: Henriette Dinger <h.dinger@finn.de>
Date: Thu, 25 Aug 2016 10:18:52 +0200
Subject: [PATCH 1/2] Implement two column layout for WP view

---
 .../stylesheets/layout/_work_package.sass     | 11 +++
 .../wp-single-view.directive.html             | 98 ++++++++++---------
 2 files changed, 61 insertions(+), 48 deletions(-)

diff --git a/app/assets/stylesheets/layout/_work_package.sass b/app/assets/stylesheets/layout/_work_package.sass
index f2d97e196b..6b87783577 100644
--- a/app/assets/stylesheets/layout/_work_package.sass
+++ b/app/assets/stylesheets/layout/_work_package.sass
@@ -299,3 +299,14 @@
   .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: 62rem)
+  .action-show .attributes-group
+    .-columns-2
+      column-count: 2
+
+      .attributes-key-value
+        -webkit-column-break-inside: avoid
+        page-break-inside: avoid
+        break-inside: avoid
diff --git a/frontend/app/components/work-packages/wp-single-view/wp-single-view.directive.html b/frontend/app/components/work-packages/wp-single-view/wp-single-view.directive.html
index 2d0950b01e..a6b317c892 100644
--- a/frontend/app/components/work-packages/wp-single-view/wp-single-view.directive.html
+++ b/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>

From a702b574749be7a48ae42b4509eb35a30f09d370 Mon Sep 17 00:00:00 2001
From: Henriette Dinger <h.dinger@finn.de>
Date: Thu, 25 Aug 2016 12:03:56 +0200
Subject: [PATCH 2/2] Increase breakpoint and gap between WP columns

---
 app/assets/stylesheets/layout/_work_package.sass | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/layout/_work_package.sass b/app/assets/stylesheets/layout/_work_package.sass
index 6b87783577..838b56b6f9 100644
--- a/app/assets/stylesheets/layout/_work_package.sass
+++ b/app/assets/stylesheets/layout/_work_package.sass
@@ -301,10 +301,11 @@
     display: inline-block
 
 // Implement two column layout for WP full screen view
-@media screen and (min-width: 62rem)
+@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