Optimize CSS

This commit is contained in:
Oliver Traber 2022-01-15 16:41:40 +01:00
parent 594b20ba19
commit 9edfc61e96
Signed by: Bluemedia
GPG key ID: C7BA47275B086E2C
7 changed files with 35 additions and 49 deletions

View file

@ -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;

View file

@ -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 {

View file

@ -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;

View file

@ -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 {

View file

@ -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;

View file

@ -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;

View file

@ -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">
&#x21bb;
</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;