Simplify markup and add more styling for add new widget box

KiiCorp · Jan 28, 2018 · cfb4a1c · cfb4a1c
1 parent 4b74ab3
commit cfb4a1c
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 10 deletions.
diff --git a/client/app/assets/less/redash/redash-newstyle.less b/client/app/assets/less/redash/redash-newstyle.less
@@ -73,6 +73,22 @@ body {
   }
 }
 
+.add-widget-container {
+  background: #fff;
+  border-radius: @redash-radius;
+  padding: 20px;
+  position: fixed;
+  left: calc(~'50% - 200px');
+  bottom: 25px;
+  width: 400px;
+  z-index: 99;
+  box-shadow: fade(@redash-gray, 50%) 0px 7px 29px -3px;
+
+  h2 {
+    margin-top: 0;
+  }
+}
+
 body {
   .ace-tm .ace_gutter {
     background: #fff;

diff --git a/client/app/pages/dashboards/dashboard.html b/client/app/pages/dashboards/dashboard.html
@@ -89,15 +89,9 @@ <h3>{{$ctrl.dashboard.name}}
     </div>
   </div>
 
-  <div ng-if="$ctrl.layoutEditing">
-    <div class="col-md-12 text-center add-widget-container">
-      <div class="col-md-4 col-md-offset-4">
-        <br>
-        <h2><i class="zmdi zmdi-widgets"></i></h2>
-        <p>Widgets are individual query visualisations you can place on your dashboard in various arrangements.</p>
-        <a class="btn btn-primary" ng-click="$ctrl.addWidget()">Add Widget</a>
-        <br><br>
-      </div>
-    </div>
+  <div class="text-center add-widget-container" ng-if="$ctrl.layoutEditing">
+    <h2><i class="zmdi zmdi-widgets"></i></h2>
+    <p>Widgets are individual query visualisations you can place on your dashboard in various arrangements.</p>
+    <a class="btn btn-primary" ng-click="$ctrl.addWidget()">Add Widget</a>
   </div>
 </div>