extern/gatus
1
0
Fork 0
mirror of https://github.com/TwiN/gatus.git synced 2024-11-21 23:43:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

Close #99: Implement dark theme

Browse Source
This commit is contained in:
TwinProduction 2021-05-09 12:59:22 -04:00
parent 857ad584e7
commit 2a632e8f87
12 changed files with 86 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/app/public/index.html
View File

@ -7,7 +7,7 @@
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>Health Dashboard | Gatus</title> <title>Health Dashboard | Gatus</title>
</head> </head>
<body> <body class="dark:bg-gray-900">
<noscript> <noscript>
<strong>Enable JavaScript to view this page.</strong> <strong>Enable JavaScript to view this page.</strong>
</noscript> </noscript>

17
web/app/src/App.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="container container-xs relative mx-auto xl:rounded xl:border xl:shadow-xl xl:my-5 p-5 pb-12 xl:pb-5 text-left" id="global"> <div class="container container-xs relative mx-auto xl:rounded xl:border xl:shadow-xl xl:my-5 p-5 pb-12 xl:pb-5 text-left dark:bg-gray-800 dark:text-gray-200 dark:border-gray-500" id="global">
<div class="mb-2"> <div class="mb-2">
<div class="flex flex-wrap"> <div class="flex flex-wrap">
<div class="w-3/4 text-left my-auto"> <div class="w-3/4 text-left my-auto">
@ -39,18 +39,3 @@ export default {
}, },
} }
</script> </script>
<style>
html {
height: 100%;
}
html, body {
background-color: #f7f9fb;
}
#global, #results {
max-width: 1200px;
}
</style>

4
web/app/src/components/Pagination.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<div class="mt-3 flex"> <div class="mt-3 flex">
<div class="flex-1"> <div class="flex-1">
<button v-if="currentPage < 5" @click="nextPage" class="bg-gray-100 hover:bg-gray-200 px-2 rounded border-gray-200 border font-mono text-gray-500">&lt;</button> <button v-if="currentPage < 5" @click="nextPage" class="bg-gray-100 hover:bg-gray-200 text-gray-500 border border-gray-200 px-2 rounded font-mono dark:bg-gray-700 dark:text-gray-200 dark:border-gray-500 dark:hover:bg-gray-600">&lt;</button>
</div> </div>
<div class="flex-1 text-right"> <div class="flex-1 text-right">
<button v-if="currentPage > 1" @click="previousPage" class="bg-gray-100 hover:bg-gray-200 px-2 rounded border-gray-200 border font-mono text-gray-500">&gt;</button> <button v-if="currentPage > 1" @click="previousPage" class="bg-gray-100 hover:bg-gray-200 text-gray-500 border border-gray-200 px-2 rounded font-mono dark:bg-gray-700 dark:text-gray-200 dark:border-gray-500 dark:hover:bg-gray-600">&gt;</button>
</div> </div>
</div> </div>
</template> </template>

6
web/app/src/components/Service.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<div class='service px-3 py-3 border-l border-r border-t rounded-none hover:bg-gray-100' v-if="data"> <div class='service px-3 py-3 border-l border-r border-t rounded-none hover:bg-gray-100 dark:hover:bg-gray-700 dark:border-gray-500' v-if="data">
<div class='flex flex-wrap mb-2'> <div class='flex flex-wrap mb-2'>
<div class='w-3/4'> <div class='w-3/4'>
<router-link :to="generatePath()" class="font-bold hover:text-blue-800 hover:underline" title="View detailed service health"> <router-link :to="generatePath()" class="font-bold hover:text-blue-800 hover:underline dark:hover:text-blue-400" title="View detailed service health">
{{ data.name }} {{ data.name }}
</router-link> </router-link>
<span v-if="data.results && data.results.length" class='text-gray-500 font-light'> | {{ data.results[data.results.length - 1].hostname }}</span> <span v-if="data.results && data.results.length" class='text-gray-500 font-light'> | {{ data.results[data.results.length - 1].hostname }}</span>
@ -132,8 +132,6 @@ export default {
border-bottom-left-radius: 3px; border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px; border-bottom-right-radius: 3px;
border-bottom-width: 3px; border-bottom-width: 3px;
border-color: #dee2e6;
border-style: solid;
} }
.status-over-time { .status-over-time {

6
web/app/src/components/ServiceGroup.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<div :class="services.length === 0 ? 'mt-3' : 'mt-4'"> <div :class="services.length === 0 ? 'mt-3' : 'mt-4'">
<slot v-if="name !== 'undefined'"> <slot v-if="name !== 'undefined'">
<div class="service-group pt-2 border" @click="toggleGroup"> <div class="service-group pt-2 border dark:bg-gray-800 dark:border-gray-500" @click="toggleGroup">
<h5 class='font-mono text-gray-400 text-xl font-medium pb-2 px-3'> <h5 class='font-mono text-gray-400 text-xl font-medium pb-2 px-3 dark:text-gray-200 dark:hover:text-gray-500 dark:border-gray-500'>
<span v-if="healthy" class='text-green-600'>&#10003;</span> <span v-if="healthy" class='text-green-600'>&#10003;</span>
<span v-else class='text-yellow-400'>~</span> <span v-else class='text-yellow-400'>~</span>
{{ name }} {{ name }}
@ -96,6 +96,6 @@ export default {
} }
.service-group h5:hover { .service-group h5:hover {
color: #1b1e21 !important; color: #1b1e21;
} }
</style> </style>

49
web/app/src/components/Settings.vue
View File

@ -1,17 +1,23 @@
<template> <template>
<div id="settings"> <div id="settings">
<div class="flex bg-gray-200 rounded border border-gray-300 shadow"> <div class="flex">
<div class="text-sm text-gray-600 rounded-xl py-1 px-2"> <div class="flex bg-gray-200 border-gray-300 rounded border shadow dark:text-gray-200 dark:bg-gray-800 dark:border-gray-500">
&#x21bb; <div class="text-xs text-gray-600 rounded-xl py-1 px-2 dark:text-gray-200">
&#x21bb;
</div>
<select class="text-center text-gray-500 text-xs dark:text-gray-200 dark:bg-gray-800 border-r border-l border-gray-300 dark:border-gray-500" id="refresh-rate" ref="refreshInterval" @change="handleChangeRefreshInterval">
<option value="10" :selected="refreshInterval === 10">10s</option>
<option value="30" :selected="refreshInterval === 30">30s</option>
<option value="60" :selected="refreshInterval === 60">1m</option>
<option value="120" :selected="refreshInterval === 120">2m</option>
<option value="300" :selected="refreshInterval === 300">5m</option>
<option value="600" :selected="refreshInterval === 600">10m</option>
</select>
<button @click="toggleDarkMode" class="text-xs p-1">
<slot v-if="darkMode">☀</slot>
<slot v-else>🌙</slot>
</button>
</div> </div>
<select class="text-center text-gray-500 text-sm" id="refresh-rate" ref="refreshInterval" @change="handleChangeRefreshInterval">
<option value="10" :selected="refreshInterval === 10">10s</option>
<option value="30" :selected="refreshInterval === 30">30s</option>
<option value="60" :selected="refreshInterval === 60">1m</option>
<option value="120" :selected="refreshInterval === 120">2m</option>
<option value="300" :selected="refreshInterval === 300">5m</option>
<option value="600" :selected="refreshInterval === 600">10m</option>
</select>
</div> </div>
</div> </div>
</template> </template>
@ -36,6 +42,24 @@ export default {
this.refreshData(); this.refreshData();
clearInterval(this.refreshIntervalHandler); clearInterval(this.refreshIntervalHandler);
this.setRefreshInterval(this.$refs.refreshInterval.value); this.setRefreshInterval(this.$refs.refreshInterval.value);
},
toggleDarkMode() {
if (localStorage.theme === 'dark') {
localStorage.theme = 'light';
} else {
localStorage.theme = 'dark';
}
this.applyTheme();
},
applyTheme() {
console.log(localStorage.theme, 'theme' in localStorage);
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
this.darkMode = true;
document.documentElement.classList.add('dark');
} else {
this.darkMode = false;
document.documentElement.classList.remove('dark');
}
} }
}, },
created() { created() {
@ -43,6 +67,8 @@ export default {
this.refreshInterval = 60; this.refreshInterval = 60;
} }
this.setRefreshInterval(this.refreshInterval); this.setRefreshInterval(this.refreshInterval);
// dark mode
this.applyTheme();
}, },
unmounted() { unmounted() {
clearInterval(this.refreshIntervalHandler); clearInterval(this.refreshIntervalHandler);
@ -51,6 +77,7 @@ export default {
return { return {
refreshInterval: sessionStorage.getItem('gatus:refresh-interval') < 10 ? 60 : parseInt(sessionStorage.getItem('gatus:refresh-interval')), refreshInterval: sessionStorage.getItem('gatus:refresh-interval') < 10 ? 60 : parseInt(sessionStorage.getItem('gatus:refresh-interval')),
refreshIntervalHandler: 0, refreshIntervalHandler: 0,
darkMode: false
} }
}, },
} }

32
web/app/src/index.css
View File

@ -5,3 +5,35 @@
.bg-success { .bg-success {
background-color: #28a745; background-color: #28a745;
} }
html {
height: 100%;
}
body {
padding-top: 20px;
padding-bottom: 20px;
min-height: 100vh;
}
html, body {
background-color: #f7f9fb;
}
#global {
margin-top: 0 !important;
}
#global, #results {
max-width: 1280px;
}
@media screen and (max-width: 1279px) {
body {
padding-top: 0;
padding-bottom: 0;
}
#global {
min-height: 100vh;
}
}

4
web/app/src/views/Details.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<router-link to="../" class="absolute top-2 left-2 inline-block px-2 py-0 text-lg text-black transition bg-gray-100 rounded shadow ripple hover:shadow-lg hover:bg-gray-200 focus:outline-none"> <router-link to="../" class="absolute top-2 left-2 inline-block px-2 pb-0.5 text-lg text-black bg-gray-100 rounded hover:bg-gray-200 focus:outline-none border border-gray-200 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-500 dark:hover:bg-gray-600">
&larr; &larr;
</router-link> </router-link>
<div> <div>
@ -176,7 +176,5 @@ export default {
.service { .service {
border-radius: 3px; border-radius: 3px;
border-bottom-width: 3px; border-bottom-width: 3px;
border-color: #dee2e6;
border-style: solid;
} }
</style> </style>

4
web/app/tailwind.config.js
View File

@ -1,6 +1,6 @@
module.exports = { module.exports = {
purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'], purge: ['./public/index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class' darkMode: 'class', // or 'media' or 'class'
theme: { theme: {
fontFamily: { fontFamily: {
'mono': ['Consolas', 'Monaco', '"Courier New"', 'monospace'] 'mono': ['Consolas', 'Monaco', '"Courier New"', 'monospace']

4
web/static/css/app.css
View File

File diff suppressed because one or more lines are too long

2
web/static/index.html
View File

@ -1 +1 @@
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><title>Health Dashboard | Gatus</title><link href="/css/app.css" rel="preload" as="style"><link href="/js/app.js" rel="preload" as="script"><link href="/js/chunk-vendors.js" rel="preload" as="script"><link href="/css/app.css" rel="stylesheet"></head><body><noscript><strong>Enable JavaScript to view this page.</strong></noscript><div id="app"></div><script src="/js/chunk-vendors.js"></script><script src="/js/app.js"></script></body></html> <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><title>Health Dashboard | Gatus</title><link href="/css/app.css" rel="preload" as="style"><link href="/js/app.js" rel="preload" as="script"><link href="/js/chunk-vendors.js" rel="preload" as="script"><link href="/css/app.css" rel="stylesheet"></head><body class="dark:bg-gray-900"><noscript><strong>Enable JavaScript to view this page.</strong></noscript><div id="app"></div><script src="/js/chunk-vendors.js"></script><script src="/js/app.js"></script></body></html>

2
web/static/js/app.js
View File

File diff suppressed because one or more lines are too long