Optimize CSS for mobile devices

This commit is contained in:
Oliver Traber 2022-01-15 17:14:01 +01:00
parent 9edfc61e96
commit 16da1ac25c
Signed by: Bluemedia
GPG key ID: C7BA47275B086E2C
5 changed files with 71 additions and 7 deletions

View file

@ -9,7 +9,7 @@
<EndpointGroup class="mtop-2" v-for="(value, key) in groups" :key="key" :name="key" :endpoints="value" /> <EndpointGroup class="mtop-2" v-for="(value, key) in groups" :key="key" :name="key" :endpoints="value" />
</div> </div>
<div v-if="!$data.loading"> <div v-if="!$data.loading">
<RefreshSettings :defaultRefreshInterval="$data.config.defaultRefreshInterval" v-on:refresh="this.getApiData()" /> <RefreshSettings class="refresh-settings" :defaultRefreshInterval="$data.config.defaultRefreshInterval" v-on:refresh="this.getApiData()" />
<Footer /> <Footer />
</div> </div>
</div> </div>
@ -130,6 +130,18 @@ export default {
margin-top: 1rem; margin-top: 1rem;
margin-bottom: 3rem; margin-bottom: 3rem;
} }
@media screen and (max-width: 768px) {
.main {
padding-left: 15px;
padding-right: 15px;
}
.content-wrapper {
max-width: 100%;
}
.refresh-settings {
display: none;
}
}
</style> </style>
<style> <style>

View file

@ -1,11 +1,15 @@
<template> <template>
<div class="flex ai-center endpoint"> <div class="flex ai-center endpoint">
<BIconCheckCircleFill class="green icon" v-if="isSuccessfull" /> <div class="flex ai-center info">
<BIconExclamationCircleFill class="orange icon" v-if="!isSuccessfull" /> <BIconCheckCircleFill class="green icon" v-if="isSuccessfull" />
<span>{{ endpoint.name }}</span> <BIconExclamationCircleFill class="orange icon" v-if="!isSuccessfull" />
<span class="hostname" v-if="hostname">| {{ hostname }}</span> <span>{{ endpoint.name }}</span>
<span class="hostname" v-if="hostname">| {{ hostname }}</span>
</div>
<span class="spacer"></span> <span class="spacer"></span>
<EndpointHistory :results="endpoint.results" /> <div class="history">
<EndpointHistory :results="endpoint.results" />
</div>
</div> </div>
</template> </template>
@ -56,4 +60,30 @@ span {
.spacer { .spacer {
flex: 1; flex: 1;
} }
@media screen and (max-width: 768px) {
.endpoint {
flex-direction: column;
align-items: flex-start;
padding: 5px;
}
.info {
flex-direction: row;
justify-content: flex-start;
}
.history {
flex-direction: row;
align-items: center;
width: 100%;
}
.icon {
font-size: 15px;
}
span {
font-size: 15px;
}
.hostname {
display: none;
}
}
</style> </style>

View file

@ -47,6 +47,12 @@ export default {
background-color: var(--orange); background-color: var(--orange);
} }
.grey { .grey {
background-color: grey; background-color: var(--grey);
}
@media screen and (max-width: 768px) {
.history {
width: 100%;
margin-top: 0.4rem
}
} }
</style> </style>

View file

@ -26,4 +26,12 @@ h2 {
margin: 0; margin: 0;
margin-left: 20px; margin-left: 20px;
} }
@media screen and (max-width: 768px) {
.logo {
width: 40px;
}
h2 {
font-size: 1.2rem;
}
}
</style> </style>

View file

@ -55,4 +55,12 @@ export default {
span { span {
margin-left: 1rem; margin-left: 1rem;
} }
@media screen and (max-width: 768px) {
.status-wrapper {
font-size: 1rem;
}
.icon {
font-size: 20px;
}
}
</style> </style>