mirror of
https://github.com/BluemediaGER/fancy-gatus.git
synced 2024-11-08 09:35:28 +01:00
Optimize CSS
This commit is contained in:
parent
594b20ba19
commit
9edfc61e96
46
src/App.vue
46
src/App.vue
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<div class="main">
|
||||
<div v-if="$data.loading" class="loader-wrapper">
|
||||
<div class="flex flex-column ai-center main">
|
||||
<div v-if="$data.loading" class="flex ai-center jc-center loader-wrapper">
|
||||
<Loader />
|
||||
</div>
|
||||
<div v-if="!$data.loading" class="content-wrapper">
|
||||
<div v-if="!$data.loading" class="flex flex-column jc-center content-wrapper">
|
||||
<Header :title="this.config.title" />
|
||||
<OverallStatus class="overall-status" :failedEndpoints="failedEndpoints" />
|
||||
<EndpointGroup class="endpoint-group" v-for="(value, key) in groups" :key="key" :name="key" :endpoints="value" />
|
||||
<OverallStatus class="mtop-2" :failedEndpoints="failedEndpoints" />
|
||||
<EndpointGroup class="mtop-2" v-for="(value, key) in groups" :key="key" :name="key" :endpoints="value" />
|
||||
</div>
|
||||
<div v-if="!$data.loading">
|
||||
<RefreshSettings :defaultRefreshInterval="$data.config.defaultRefreshInterval" v-on:refresh="this.getApiData()" />
|
||||
|
@ -114,17 +114,14 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
.mtop-2 {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
.main {
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.loader-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
}
|
||||
.content-wrapper {
|
||||
|
@ -132,15 +129,6 @@ export default {
|
|||
max-width: 95%;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 3rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.overall-status {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
.endpoint-group {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
@ -161,6 +149,24 @@ html {
|
|||
color: #2F3545;
|
||||
padding: 0;
|
||||
}
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
.jc-center {
|
||||
justify-content: center;
|
||||
}
|
||||
.jc-space-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.ai-center {
|
||||
align-items: center;
|
||||
}
|
||||
.flex-column {
|
||||
flex-direction: column;
|
||||
}
|
||||
.flex-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
.shadow-box {
|
||||
box-shadow: 2px 3px 10px 2px rgb(0 0 0 / 10%);
|
||||
padding: 10px;
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="endpoint">
|
||||
<div class="flex ai-center endpoint">
|
||||
<BIconCheckCircleFill class="green icon" v-if="isSuccessfull" />
|
||||
<BIconExclamationCircleFill class="orange icon" v-if="!isSuccessfull" />
|
||||
<span>{{ endpoint.name }}</span>
|
||||
|
@ -39,8 +39,6 @@ export default {
|
|||
|
||||
<style scoped>
|
||||
.endpoint {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
}
|
||||
span {
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="endpoint-group">
|
||||
<div>
|
||||
<h3>{{ name }}</h3>
|
||||
<div class="shadow-box list">
|
||||
<div class="flex flex-column shadow-box">
|
||||
<Endpoint class="endpoint" v-for="endpoint in endpoints" :key="endpoint.name" :endpoint="endpoint" />
|
||||
</div>
|
||||
</div>
|
||||
|
@ -29,11 +29,6 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
.list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-items: space-between;
|
||||
}
|
||||
.endpoint {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="history">
|
||||
<div class="flex flex-row jc-space-between history">
|
||||
<div v-for="(result, index) in preparedResults" :key="index" :title="result.timestamp" :class="{blob: true, green: result.success === true, orange: result.success === false, grey: !result.timestamp}"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -27,9 +27,6 @@ export default {
|
|||
|
||||
<style scoped>
|
||||
.history {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
width: 300px;
|
||||
}
|
||||
.blob {
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="header">
|
||||
<div class="flex ai-center">
|
||||
<img src="/img/logo.png" alt="Logo" class="logo">
|
||||
<h2>{{ this.title }}</h2>
|
||||
</div>
|
||||
|
@ -18,10 +18,6 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.logo {
|
||||
width: 60px;
|
||||
height: auto;
|
||||
|
|
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<div class="shadow-box">
|
||||
<div class="status-wrapper" v-if="this.failedEndpoints.length === 0">
|
||||
<div class="flex ai-center status-wrapper" v-if="this.failedEndpoints.length === 0">
|
||||
<BIconCheckCircleFill class="icon green" />
|
||||
<span>All services healthy.</span>
|
||||
</div>
|
||||
<div class="status-wrapper" v-else>
|
||||
<div class="flex ai-center status-wrapper" v-else>
|
||||
<BIconExclamationCircleFill class="icon orange" />
|
||||
<span>{{ failedEndpointCountText }}</span>
|
||||
</div>
|
||||
|
@ -44,8 +44,6 @@ export default {
|
|||
|
||||
<style scoped>
|
||||
.status-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 1.3rem;
|
||||
margin-left: 10px;
|
||||
margin-top: 10px;
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div id="settings">
|
||||
<div class="reload-icon">
|
||||
<div id="settings" class="flex">
|
||||
<div class="flex jc-center ai-center reload-icon">
|
||||
↻
|
||||
</div>
|
||||
<select id="refresh-rate" ref="refreshInterval" @change="handleChangeRefreshInterval">
|
||||
|
@ -50,7 +50,6 @@ export default {
|
|||
|
||||
<style scoped>
|
||||
#settings {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
left: 10px;
|
||||
bottom: 10px;
|
||||
|
@ -60,9 +59,6 @@ export default {
|
|||
box-shadow: 0 1px 3px 0 rgba(0,0,0,.1);
|
||||
}
|
||||
.reload-icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
width: 1.4rem;
|
||||
height: 1.4rem;
|
||||
|
|
Loading…
Reference in a new issue