Better dashboard errors

app/assets/stylesheets/blazer/application.css

@@ -68,3 +68,15 @@ input.search:focus {
 .ace_gutter-cell.error {
   background-color: red;
 }
+
+.chart {
+  height: 300px;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.chart .alert {
+  display: inline-block;
+}

app/views/blazer/dashboards/show.html.erb

@@ -129,7 +129,9 @@
 <% @queries.each_with_index do |query, i| %>
   <div style="padding-top: 10px;">
     <h4 style="text-align: center;"><%= link_to query.friendly_name, query_path(query, variable_params), style: "color: inherit;" %></h4>
-    <div id="chart-<%= i %>" style="height: 300px; text-align: center; line-height: 300px;">Loading...</div>
+    <div id="chart-<%= i %>" class="chart">
+      Loading...
+    </div>
   </div>
   <script>
     $.post("<%= run_queries_path %>", <%= json_escape({statement: query.statement, query_id: query.id, only_chart: true}.to_json).html_safe %>, function (data) {

app/views/blazer/queries/run.html.erb

@@ -1,12 +1,8 @@
 <% if @error %>
-  <% if @only_chart %>
-    <p><%= @error %></p>
-  <% else %>
-    <div class="alert alert-danger"><%= @error %></div>
-  <% end %>
+  <div class="alert alert-danger"><%= @error %></div>
 <% elsif !@success %>
   <% if @only_chart %>
-    <p>Choose variables</p>
+    <p>Select variables</p>
   <% else %>
     <div class="alert alert-info">Can’t preview queries with variables...yet!</div>
   <% end %>
@@ -26,7 +22,7 @@
     <% elsif values.size == 2 && values.first.is_a?(String) && values.last.is_a?(Numeric) %>
       <%= pie_chart @rows.map(&:values), library: {sliceVisibilityThreshold: 1 / 40.0}, id: chart_id %>
     <% elsif @only_chart %>
-      <p>No chart</p>
+      <div class="alert alert-danger">No chart</div>
     <% end %>
 
     <% unless @only_chart %>