[AIRFLOW-5503] Fix tree view layout on HDPI screen (apache#6125)

- Tree view layout on HDPI screens overlaps and doesn't make full use of screen real estate. (cherry picked from commit 533086e)
ashb · Oct 14, 2019 · 1c84a01 · 1c84a01
1 parent a112c12
commit 1c84a01
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/airflow/www/templates/airflow/tree.html b/airflow/www/templates/airflow/tree.html
@@ -81,14 +81,15 @@
 <script>
 $('span.status_square').tooltip({html: true});
 
+var devicePixelRatio = window.devicePixelRatio || 1;
 var data = {{ data|tojson|safe }};
 var barHeight = 20;
 var axisHeight = 40;
-var square_x = 500;
+var square_x = parseInt(500 * devicePixelRatio);
 var square_size = 10;
 var square_spacing = 2;
 var margin = {top: barHeight/2 + axisHeight, right: 0, bottom: 0, left: barHeight/2},
-    width = 960 - margin.left - margin.right,
+    width = parseInt(960 * devicePixelRatio) - margin.left - margin.right,
     barWidth = width * 0.9;
 
 var i = 0,

diff --git a/airflow/www_rbac/templates/airflow/tree.html b/airflow/www_rbac/templates/airflow/tree.html
@@ -82,14 +82,15 @@
 <script>
 $('span.status_square').tooltip({html: true});
 
+var devicePixelRatio = window.devicePixelRatio || 1;
 var data = {{ data|tojson|safe }};
 var barHeight = 20;
 var axisHeight = 40;
-var square_x = 500;
+var square_x = parseInt(500 * devicePixelRatio);
 var square_size = 10;
 var square_spacing = 2;
 var margin = {top: barHeight/2 + axisHeight, right: 0, bottom: 0, left: barHeight/2},
-    width = 960 - margin.left - margin.right,
+    width = parseInt(960 * devicePixelRatio) - margin.left - margin.right,
     barWidth = width * 0.9;
 
 var i = 0,