Merge branch…

Merge branch '37111-monitoring-graph-empty-states-are-gigantic-on-screen-sm-viewport-sizes' into 'master' Resolve "Monitoring graph empty states are gigantic on `screen-sm` viewport sizes" Closes #37111 See merge request gitlab-org/gitlab-ce!14259

Merge branch…
8500ec82 · Phil Hughes · 0a567f23 · 3c484861 · 8500ec82 · 8500ec82
Commit 8500ec82 authored Oct 05, 2017 by Phil Hughes
3 changed files
--- a/app/assets/javascripts/monitoring/components/empty_state.vue
+++ b/app/assets/javascripts/monitoring/components/empty_state.vue
@@ -73,34 +73,22 @@

 <template>
  <div class="prometheus-state">
-    <div class="row">
-      <div class="col-md-4 col-md-offset-4 state-svg svg-content">
-        <img :src="currentState.svgUrl"/>
-      </div>
+    <div class="state-svg svg-content">
+      <img :src="currentState.svgUrl"/>
    </div>
-    <div class="row">
-      <div class="col-md-6 col-md-offset-3">
-        <h4 class="text-center state-title">
-          {{currentState.title}}
-        </h4>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col-md-6 col-md-offset-3">
-        <div class="description-text text-center state-description">
-          {{currentState.description}}
-          <a v-if="showButtonDescription" :href="settingsPath">
-            Prometheus server
-          </a>
-        </div>
-      </div>
-    </div>
-    <div class="row state-button-section">
-      <div class="col-md-4 col-md-offset-4 text-center state-button">
-        <a class="btn btn-success" :href="buttonPath">
-          {{currentState.buttonText}}
-        </a>
-      </div>
+    <h4 class="state-title">
+      {{currentState.title}}
+    </h4>
+    <p class="state-description">
+      {{currentState.description}}
+      <a v-if="showButtonDescription" :href="settingsPath">
+        Prometheus server
+      </a>
+    </p>
+    <div class="state-button">
+      <a class="btn btn-success" :href="buttonPath">
+        {{currentState.buttonText}}
+      </a>
    </div>
  </div>
 </template>
--- a/app/assets/javascripts/monitoring/monitoring_bundle.js
+++ b/app/assets/javascripts/monitoring/monitoring_bundle.js
@@ -3,8 +3,5 @@ import Dashboard from './components/dashboard.vue';

 document.addEventListener('DOMContentLoaded', () => new Vue({
  el: '#prometheus-graphs',
-  components: {
-    Dashboard,
-  },
-  render: createElement => createElement('dashboard'),
+  render: createElement => createElement(Dashboard),
 }));
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -207,10 +207,13 @@
 }

 .prometheus-state {
-  margin-top: 10px;
+  max-width: 430px;
+  margin: 10px auto;
+  text-align: center;

-  .state-button-section {
-    margin-top: 10px;
+  .state-svg {
+    max-width: 80vw;
+    margin: 0 auto;
  }
 }