fix img loading overlay in explore view

apache · Apr 26, 2016 · d29446b · d29446b
1 parent c0fb9ee
commit d29446b
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 47 deletions.
diff --git a/caravel/assets/javascripts/dashboard.js b/caravel/assets/javascripts/dashboard.js
@@ -13,6 +13,8 @@ require('./caravel-select2.js');
 require('../node_modules/gridster/dist/jquery.gridster.min.css');
 require('../node_modules/gridster/dist/jquery.gridster.min.js');
 
+require('../stylesheets/dashboard.css');
+
 var Dashboard = function (dashboardData) {
   var dashboard = $.extend(dashboardData, {
     filters: {},

diff --git a/caravel/assets/javascripts/explore.js b/caravel/assets/javascripts/explore.js
@@ -18,6 +18,7 @@ require('../node_modules/bootstrap-toggle/js/bootstrap-toggle.min.js');
 
 // css
 require('../vendor/pygments.css');
+require('../stylesheets/explore.css');
 require('../node_modules/bootstrap-toggle/css/bootstrap-toggle.min.css');
 
 var slice;

diff --git a/caravel/assets/stylesheets/caravel.css b/caravel/assets/stylesheets/caravel.css
@@ -156,36 +156,6 @@ span.title-block {
 img.loading {
   width: 40px;
 }
-.dashboard a i {
-  cursor: pointer;
-}
-.dashboard i.drag {
-  cursor: move !important;
-}
-.dashboard .gridster .preview-holder {
-  z-index: 1;
-  position: absolute;
-  background-color: #AAA;
-  border-color: #AAA;
-  opacity: 0.3;
-}
-.gridster li.widget{
-  list-style-type: none;
-  border-radius: 0;
-  margin: 5px;
-  border: 1px solid #ccc;
-  box-shadow: 2px 1px 5px -2px #aaa;
-  background-color: #fff;
-}
-.dashboard .gridster .dragging,
-.dashboard .gridster .resizing {
-  opacity: 0.5;
-}
-.dashboard img.loading {
-  width: 20px;
-  margin: 5px;
-  position: absolute;
-}
 img.viz-thumb-option {
     width: 100px;
     border: 1px solid gray;
@@ -196,23 +166,6 @@ img.viz-thumb-option {
     max-height: 700px;
 }
 
-.dashboard .title {
-  text-align: center;
-}
-.dashboard .slice_title {
-  text-align: center;
-  font-weight: bold;
-  font-size: 14px;
-  padding: 5px;
-}
-.dashboard div.slice_content {
-  width: 100%;
-  height: 100%;
-}
-
-.dashboard  div.nvtooltip {
-  z-index: 888;  /* this lets tool tips go on top of other slices  */
-}
 
 div.header {
   font-weight: bold;

diff --git a/caravel/assets/stylesheets/dashboard.css b/caravel/assets/stylesheets/dashboard.css
@@ -0,0 +1,47 @@
+.dashboard a i {
+  cursor: pointer;
+}
+.dashboard i.drag {
+  cursor: move !important;
+}
+.dashboard .gridster .preview-holder {
+  z-index: 1;
+  position: absolute;
+  background-color: #AAA;
+  border-color: #AAA;
+  opacity: 0.3;
+}
+.gridster li.widget{
+  list-style-type: none;
+  border-radius: 0;
+  margin: 5px;
+  border: 1px solid #ccc;
+  box-shadow: 2px 1px 5px -2px #aaa;
+  background-color: #fff;
+}
+.dashboard .gridster .dragging,
+.dashboard .gridster .resizing {
+  opacity: 0.5;
+}
+.dashboard img.loading {
+  width: 20px;
+  margin: 5px;
+  position: absolute;
+}
+.dashboard .title {
+  text-align: center;
+}
+.dashboard .slice_title {
+  text-align: center;
+  font-weight: bold;
+  font-size: 14px;
+  padding: 5px;
+}
+.dashboard div.slice_content {
+  width: 100%;
+  height: 100%;
+}
+
+.dashboard  div.nvtooltip {
+  z-index: 888;  /* this lets tool tips go on top of other slices  */
+}
diff --git a/caravel/assets/stylesheets/explore.css b/caravel/assets/stylesheets/explore.css
@@ -0,0 +1,9 @@
+.widget {
+    position: relative;
+}
+
+.slice_container {
+    position: absolute;
+    left: 0;
+    top: 0;
+}