diff options
author | Ivan Topolnjak <ivantopo@gmail.com> | 2019-03-11 22:21:06 +0100 |
---|---|---|
committer | Ivan Topolnjak <ivantopo@gmail.com> | 2019-03-15 11:36:11 +0100 |
commit | ec83a72879378bc9eedea24f828e4d30fed95e92 (patch) | |
tree | 96fd746fc13f4ffb914d8e59c4ea074513877556 /kamon-status-page/src/main/vue/src/components/StatusCard.vue | |
parent | 5df3351de8a885e2eb2b52f75817347a599b2327 (diff) | |
download | Kamon-ec83a72879378bc9eedea24f828e4d30fed95e92.tar.gz Kamon-ec83a72879378bc9eedea24f828e4d30fed95e92.tar.bz2 Kamon-ec83a72879378bc9eedea24f828e4d30fed95e92.zip |
separate the status-page project from the status API
Diffstat (limited to 'kamon-status-page/src/main/vue/src/components/StatusCard.vue')
-rw-r--r-- | kamon-status-page/src/main/vue/src/components/StatusCard.vue | 85 |
1 files changed, 85 insertions, 0 deletions
diff --git a/kamon-status-page/src/main/vue/src/components/StatusCard.vue b/kamon-status-page/src/main/vue/src/components/StatusCard.vue new file mode 100644 index 00000000..c402842f --- /dev/null +++ b/kamon-status-page/src/main/vue/src/components/StatusCard.vue @@ -0,0 +1,85 @@ +<template> + <card> + <div class="row status-card no-gutters"> + <div class="col-auto"> + <div class="status-indicator-wrap text-center text-uppercase" :style="indicatorStyle"> + <slot name="status-indicator"> + <div class="status-indicator h-100 pt-3"> + <i class="fas fa-fw" :class="indicatorIcon"></i> + <div> + {{ indicatorText }} + </div> + </div> + </slot> + </div> + </div> + <div class="col"> + <slot name="default"> + + </slot> + </div> + </div> + </card> +</template> + +<script lang="ts"> +import { Component, Prop, Vue } from 'vue-property-decorator' +import Card from './Card.vue' + +@Component({ + components: { + card: Card + } +}) +export default class StatusCard extends Vue { + @Prop({ default: 'white' }) private indicatorColor!: string + @Prop({ default: '#989898' }) private indicatorBackgroundColor!: string + @Prop({ default: 'fa-question' }) private indicatorIcon!: string + @Prop({ default: 'Unknown' }) private indicatorText!: string + + get indicatorStyle() { + return { + color: this.indicatorColor, + backgroundColor: this.indicatorBackgroundColor + } + } +} + +</script> + +<style lang="scss"> + +$indicator-size: 6rem; +.status-card { + min-height: $indicator-size; + + .status-indicator-wrap { + height: 100%; + min-width: $indicator-size; + max-width: $indicator-size; + min-height: $indicator-size; + font-size: 0.9rem; + font-weight: 600; + } + + .status-indicator { + line-height: 2rem; + + i { + font-size: 2.5rem; + } + } + + .critical { + background-color: #dadada; + } + + .healthy { + background-color: #7ade94; + } + + .suggested { + background-color: #5fd7cc; + } +} +</style> |