Merge pull request #244 from Caleydo/develop

Update slider for Firefox support
Caleydo · Dec 6, 2018 · 729d8a9 · 729d8a9
2 parents 9cd8dc5 + f293290
commit 729d8a9
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 159 deletions.
diff --git a/src/detail_view/ConfusionMeasuresView.ts b/src/detail_view/ConfusionMeasuresView.ts
@@ -211,6 +211,13 @@ export default class ConfusionMeasuresView implements IAppView {
     $header.enter().append('th').style('width', (d) => d.width).text((d) => d.label);
     $header.exit().remove();
 
+    const $trs = this.$node.select('tbody').selectAll('tr').data(rows);
+    $trs.enter().append('tr');
+
+    const $tds = $trs.selectAll('td').data((d) => d);
+    $tds.enter().append('td');
+
+    // inserting the td elements cause a relayout of the table -> read the cell size after the td elements are added
     const cellSizes = Array.from(this.$node.select('thead tr').node().childNodes)
       .map((th: HTMLElement) => {
         return {
@@ -219,12 +226,6 @@ export default class ConfusionMeasuresView implements IAppView {
         };
       });
 
-    const $trs = this.$node.select('tbody').selectAll('tr').data(rows);
-    $trs.enter().append('tr');
-
-    const $tds = $trs.selectAll('td').data((d) => d);
-    $tds.enter().append('td');
-
     $tds.each(function (cell, i) {
       const $td = d3.select(this);
       $td.html(''); // remove before adding a new svg

diff --git a/src/styles/_inputrange.scss b/src/styles/_inputrange.scss
diff --git a/src/styles/_toolbar.scss b/src/styles/_toolbar.scss
@@ -1,36 +1,11 @@
 @import "vars";
 
-/* Input Range Style */
-
-$track-color: transparent !default;
-$thumb-color: #ccc !default;
-
-$thumb-radius: 2px !default;
-$thumb-height: 24px !default;
-$thumb-width: 12px !default;
-$thumb-shadow-size: 0px !default;
-$thumb-shadow-blur: 0px !default;
-$thumb-shadow-color: rgba(0, 0, 0, .2) !default;
-$thumb-border-width: 0px !default;
-$thumb-border-color: transparent !default;
-
-$track-width: 100% !default;
-$track-height: 8px !default;
-$track-shadow-size: 0px !default;
-$track-shadow-blur: 0px !default;
-$track-shadow-color: rgba(0, 0, 0, .2) !default;
-$track-border-width: 1px !default;
-$track-border-color: #ddd !default;
-
-$track-radius: 2px !default;
-$contrast: 0% !default;
-
-@import "inputrange";
-
 input[type=range][orient=vertical] {
-  margin-top: 90px;
-  transform: rotate(270deg)translate(40px, -31px);
-  width: 100px;
+  writing-mode: bt-lr; // IE
+  -webkit-appearance: slider-vertical; // WebKit
+  width: 100%;
+  height: 100px;
+  padding: 0 5px;
 }