remove float: left from dc.css

fixes dc-js#673
pvsiddhartha · Jun 28, 2019 · 8c0aef4 · 8c0aef4
1 parent 4ff6244
commit 8c0aef4
Show file tree

Hide file tree

Showing 26 changed files with 44 additions and 6 deletions.
diff --git a/Changelog.md b/Changelog.md
@@ -1,3 +1,18 @@
+## 3.1.0
+* Remove `float: left` from dc.css; add it to individual examples where needed.
+
+It's not appropriate to set this in the library, because charts will be used in all sorts of different layouts, and this sometimes required people to use `div.dc-chart { float: none!important; }` which is horrible. ([#673](https://github.com/dc-js/dc.js/issues/673))
+
+Fixing this will break a lot of dashboard layouts, thus the version bump. Add
+
+```css
+div.dc-chart {
+    float: left;
+}
+```
+
+to your page CSS to restore the old layout!
+
 ## 3.0.13
 * Keep track of individual values efficiently in boxplot examples ([#543](https://github.com/dc-js/dc.js/issues/543))
 * Series progression [example](https://dc-js.github.io/dc.js/transitions/series-progression.html)

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dc",
-  "version": "3.0.13",
+  "version": "3.1.0",
   "license": "Apache-2.0",
   "copyright": "2019",
   "description": "A multi-dimensional charting library built to work natively with crossfilter and rendered using d3.js ",

diff --git a/style/dc.scss b/style/dc.scss
@@ -29,10 +29,6 @@ $font_sans_serif: sans-serif;
     stroke-opacity: 0.5;
 }
 
-div.dc-chart {
-    float: left;
-}
-
 .dc-chart {
     rect {
         &.bar {
@@ -320,4 +316,4 @@ div.dc-html-legend {
 
 .dc-html-legend-container{
     height: inherit;
-}
+}
diff --git a/web/css/dc-floatleft.css b/web/css/dc-floatleft.css
@@ -0,0 +1,3 @@
+div.dc-chart {
+    float: left;
+}
diff --git a/web/ep/index.html b/web/ep/index.html
@@ -5,6 +5,7 @@
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>dc.js - data grid example</title>
 <link rel="stylesheet" type="text/css" href="../css/dc.css"/>
+<link type="text/css" rel="stylesheet" href="../css/dc-floatleft.css"/>
 </head>
 <body>
 

diff --git a/web/examples/adjustable-threshold.html b/web/examples/adjustable-threshold.html
@@ -3,6 +3,7 @@
   <head>
     <title>dc.js - Adjustable Threshold Example</title>
     <link type="text/css" rel="stylesheet" href="../css/dc.css"/>
+    <link type="text/css" rel="stylesheet" href="../css/dc-floatleft.css"/>
     <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
     <script type="text/javascript" src="../js/promise-polyfill.js"></script>
     <script type="text/javascript" src="../js/fetch.umd.js"></script>

diff --git a/web/examples/boxplot-basic.html b/web/examples/boxplot-basic.html
@@ -5,6 +5,7 @@
     <meta charset="UTF-8">
     <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
     <link rel="stylesheet" type="text/css" href="../css/dc.css"/>
+    <link type="text/css" rel="stylesheet" href="../css/dc-floatleft.css"/>
 </head>
 <body>
 

diff --git a/web/examples/boxplot-enhanced.html b/web/examples/boxplot-enhanced.html
@@ -5,6 +5,7 @@
     <meta charset="UTF-8">
     <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
     <link rel="stylesheet" type="text/css" href="../css/dc.css"/>
+    <link type="text/css" rel="stylesheet" href="../css/dc-floatleft.css"/>
 </head>
 <body>
 

diff --git a/web/examples/boxplot-render-data.html b/web/examples/boxplot-render-data.html
@@ -5,6 +5,7 @@
     <meta charset="UTF-8">
     <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
     <link rel="stylesheet" type="text/css" href="../css/dc.css"/>
+    <link type="text/css" rel="stylesheet" href="../css/dc-floatleft.css"/>
 </head>
 <body>
 

diff --git a/web/examples/boxplot-time.html b/web/examples/boxplot-time.html
@@ -5,6 +5,7 @@
     <meta charset="UTF-8">
     <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
     <link rel="stylesheet" type="text/css" href="../css/dc.css"/>
+    <link type="text/css" rel="stylesheet" href="../css/dc-floatleft.css"/>
 </head>
 <body>
 

diff --git a/web/examples/cbox-menu.html b/web/examples/cbox-menu.html
@@ -5,6 +5,7 @@
     <meta charset="UTF-8">
     <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
     <link rel="stylesheet" type="text/css" href="../css/dc.css"/>
+    <link type="text/css" rel="stylesheet" href="../css/dc-floatleft.css"/>
 </head>
 <body>
 

diff --git a/web/examples/complex-reduce.html b/web/examples/complex-reduce.html
@@ -5,6 +5,7 @@
     <meta charset="UTF-8">
     <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
     <link rel="stylesheet" type="text/css" href="../css/dc.css"/>
+    <link type="text/css" rel="stylesheet" href="../css/dc-floatleft.css"/>
     <style>
       label {
           display: inline;

diff --git a/web/examples/composite-brush-multi-dim.html b/web/examples/composite-brush-multi-dim.html
@@ -5,6 +5,7 @@
     <meta charset="UTF-8">
     <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
     <link rel="stylesheet" type="text/css" href="../css/dc.css"/>
+    <link type="text/css" rel="stylesheet" href="../css/dc-floatleft.css"/>
 </head>
 <body>
 <div class="container">

diff --git a/web/examples/download-table.html b/web/examples/download-table.html
@@ -5,6 +5,7 @@
     <meta charset="UTF-8">
     <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
     <link rel="stylesheet" type="text/css" href="../css/dc.css"/>
+    <link type="text/css" rel="stylesheet" href="../css/dc-floatleft.css"/>
     <style>
       #table td {
         padding-left: 10px;

diff --git a/web/examples/filter-stacks.html b/web/examples/filter-stacks.html
@@ -5,6 +5,7 @@
     <meta charset="UTF-8">
     <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
     <link rel="stylesheet" type="text/css" href="../css/dc.css"/>
+    <link type="text/css" rel="stylesheet" href="../css/dc-floatleft.css"/>
     <style>
       .dc-chart g.chart-body {
           clip-path: none;

diff --git a/web/examples/filtering-removing.html b/web/examples/filtering-removing.html
@@ -5,6 +5,7 @@
     <meta charset="UTF-8">
     <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
     <link rel="stylesheet" type="text/css" href="../css/dc.css"/>
+    <link type="text/css" rel="stylesheet" href="../css/dc-floatleft.css"/>
 </head>
 <body>
 

diff --git a/web/examples/filtering.html b/web/examples/filtering.html
@@ -5,6 +5,7 @@
     <meta charset="UTF-8">
     <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
     <link rel="stylesheet" type="text/css" href="../css/dc.css"/>
+    <link type="text/css" rel="stylesheet" href="../css/dc-floatleft.css"/>
 </head>
 <body>
 

diff --git a/web/examples/html-legend.html b/web/examples/html-legend.html
@@ -5,6 +5,7 @@
     <meta charset="UTF-8">
     <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
     <link rel="stylesheet" type="text/css" href="../css/dc.css"/>
+    <link type="text/css" rel="stylesheet" href="../css/dc-floatleft.css"/>
 </head>
 <body>
 

diff --git a/web/examples/multi-focus.html b/web/examples/multi-focus.html
@@ -5,6 +5,7 @@
     <meta charset="UTF-8">
     <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
     <link rel="stylesheet" type="text/css" href="../css/dc.css"/>
+    <link type="text/css" rel="stylesheet" href="../css/dc-floatleft.css"/>
 </head>
 <body>
 

diff --git a/web/examples/scatter-brushing.html b/web/examples/scatter-brushing.html
@@ -5,6 +5,7 @@
     <meta charset="UTF-8">
     <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
     <link rel="stylesheet" type="text/css" href="../css/dc.css"/>
+    <link type="text/css" rel="stylesheet" href="../css/dc-floatleft.css"/>
 </head>
 <body>
 <div class="container">

diff --git a/web/examples/select.html b/web/examples/select.html
@@ -5,6 +5,7 @@
     <meta charset="UTF-8">
     <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
     <link rel="stylesheet" type="text/css" href="../css/dc.css"/>
+    <link type="text/css" rel="stylesheet" href="../css/dc-floatleft.css"/>
 </head>
 <body>
 

diff --git a/web/examples/sunburst-cat.html b/web/examples/sunburst-cat.html
@@ -5,6 +5,7 @@
     <meta charset="UTF-8">
     <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
     <link rel="stylesheet" type="text/css" href="../css/dc.css"/>
+    <link type="text/css" rel="stylesheet" href="../css/dc-floatleft.css"/>
     <style>
         .pie-slice path {
             stroke:#fff;

diff --git a/web/examples/sunburst.html b/web/examples/sunburst.html
@@ -5,6 +5,7 @@
     <meta charset="UTF-8">
     <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
     <link rel="stylesheet" type="text/css" href="../css/dc.css"/>
+    <link type="text/css" rel="stylesheet" href="../css/dc-floatleft.css"/>
     <style>
         .pie-slice path {
             stroke:#fff;

diff --git a/web/examples/time-intervals.html b/web/examples/time-intervals.html
@@ -5,6 +5,7 @@
     <meta charset="UTF-8">
     <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
     <link rel="stylesheet" type="text/css" href="../css/dc.css"/>
+    <link type="text/css" rel="stylesheet" href="../css/dc-floatleft.css"/>
 </head>
 <body>
 

diff --git a/web/index.html b/web/index.html
@@ -10,6 +10,9 @@
     <link rel="icon" type="image/x-icon" href="dc.logo.png"/>
 
     <style>
+        div.dc-chart {
+            float: left;
+        }
         #monthly-volume-chart g.y {
             display: none;
         }

diff --git a/web/resizing/resizing-scatter-brushing.html b/web/resizing/resizing-scatter-brushing.html
@@ -4,6 +4,7 @@
   <title>dc.js - Resizing Scatter Plot Brushing Example</title>
     <meta charset="UTF-8">
     <link rel="stylesheet" type="text/css" href="../css/dc.css"/>
+    <link type="text/css" rel="stylesheet" href="../css/dc-floatleft.css"/>
 </head>
 <body>
 <div class="container">