From 27d2a39e5672c5ca3b1fdd1b3f82e51917424953 Mon Sep 17 00:00:00 2001
From: Henriette Dinger <h.dinger@finn.de>
Date: Wed, 16 Sep 2015 16:45:27 +0200
Subject: [PATCH] Uses a css-only approach and set the transformation origin

---
 app/assets/stylesheets/content/_tables.sass      |  9 +++++++--
 .../ui_components/interactive-table-directive.js | 16 +---------------
 2 files changed, 8 insertions(+), 17 deletions(-)

diff --git a/app/assets/stylesheets/content/_tables.sass b/app/assets/stylesheets/content/_tables.sass
index 60b4ffa23a..9470ec5158 100644
--- a/app/assets/stylesheets/content/_tables.sass
+++ b/app/assets/stylesheets/content/_tables.sass
@@ -90,12 +90,17 @@ table
           text-transform: uppercase
           font-weight: bold
           max-width: 50px
+          min-width: 50px
+          position: relative
 
           span
             white-space: nowrap
             transform: rotate(270deg)
-            display: block
-            text-align: right
+            position: absolute
+            top: -40px
+            right: 50%
+            transform-origin: right center
+            margin-top: 8px
 
     thead
       .workflow-table--header
diff --git a/frontend/app/ui_components/interactive-table-directive.js b/frontend/app/ui_components/interactive-table-directive.js
index 9d6606e062..395244589b 100644
--- a/frontend/app/ui_components/interactive-table-directive.js
+++ b/frontend/app/ui_components/interactive-table-directive.js
@@ -56,10 +56,6 @@ module.exports = function($timeout, $window){
                                         '.generic-table--footer-background');
       }
 
-      function getTurnedHeader(){
-        return getInnerContainer().find('.workflow-table--turned-header-text');
-      }
-
       function getHeadersFooters() {
         return element.find(
           '.generic-table--sort-header-outer,' +
@@ -71,8 +67,7 @@ module.exports = function($timeout, $window){
       function setTableContainerWidths() {
         // adjust overall containers
         var tableWidth = getTable().width(),
-          scrollBarWidth = 16,
-          turnedHeaderMargin;
+          scrollBarWidth = 16;
 
         // account for a possible scrollbar
         if (tableWidth > document.documentElement.clientWidth - scrollBarWidth) {
@@ -94,15 +89,6 @@ module.exports = function($timeout, $window){
             getBackgrounds().css('width', '100%');
           }
         }
-
-          // HACK: Important for workflow table
-          // The turned Header needs to be as high as the table to correctly align it at the end.
-          // Because of the rotation the width needs to be set instead of height.
-          // Because of that the text gets misaligned and needs a margin, to remove the space on the left side.
-          // So the calculation: height/2 - font-size
-          turnedHeaderMargin = -(getInnerContainer().height()/2 - parseInt(getTurnedHeader().css('font-size'), 10));
-          getTurnedHeader().width(getInnerContainer().height())
-                           .css('margin-left', turnedHeaderMargin);
       }
 
       function setHeaderFooterWidths() {