diff options
| author | Mike Greiling <mike@pixelcog.com> | 2017-10-04 15:38:19 -0500 |
|---|---|---|
| committer | Mike Greiling <mike@pixelcog.com> | 2017-10-04 15:48:08 -0500 |
| commit | 44eaf488dffde3bbf3d92aa20acfcf6a0b98b6fd (patch) | |
| tree | c0ae5d5d922bace24e4992ceec477f7314890bdb | |
| parent | 03ce2c125f86661ac5b84f69a452604aeb991aad (diff) | |
| download | gitlab-ce-37111-monitoring-graph-empty-states-are-gigantic-on-screen-sm-viewport-sizes.tar.gz | |
fix enormous empty state graphics by limiting width to 430px37111-monitoring-graph-empty-states-are-gigantic-on-screen-sm-viewport-sizes
| -rw-r--r-- | app/assets/javascripts/monitoring/components/empty_state.vue | 42 | ||||
| -rw-r--r-- | app/assets/stylesheets/pages/environments.scss | 9 |
2 files changed, 21 insertions, 30 deletions
diff --git a/app/assets/javascripts/monitoring/components/empty_state.vue b/app/assets/javascripts/monitoring/components/empty_state.vue index a7b483f6786..a18164482a2 100644 --- 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> diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss index 9362d80d4e6..6a9c2578d95 100644 --- 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; } } |