Commit 3c484861 authored by Mike Greiling's avatar Mike Greiling Committed by Phil Hughes

Resolve "Monitoring graph empty states are gigantic on `screen-sm` viewport sizes"

parent 0a567f23
......@@ -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">
<div class="state-svg svg-content">
<img :src="currentState.svgUrl"/>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h4 class="text-center state-title">
<h4 class="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">
<p class="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">
</p>
<div class="state-button">
<a class="btn btn-success" :href="buttonPath">
{{currentState.buttonText}}
</a>
</div>
</div>
</div>
</template>
......@@ -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),
}));
......@@ -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;
}
}
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment