ric/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2024-11-24 07:14:04 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

UI improvements

Browse source
This commit is contained in:
Karel Krýda 2022-05-08 20:03:24 +02:00
parent 9a35386841
commit ed218e73bb
5 changed files with 41 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/components/MonitorList.vue
View file

@ -1,10 +1,11 @@
<template> <template>
<div class="shadow-box mb-3" :style="boxStyle"> <div class="shadow-box mb-3" :style="boxStyle">
<div class="list-header"> <div class="list-header">
<div class="search-wrapper float-start"> <div class="search-wrapper float-start" style="margin-left: 5px;">
<select v-model="selectedList" class="form-control"> <font-awesome-icon icon="filter" />
<option value="monitor" selected>{{ $t('Monitor List') }}</option> <select v-model="selectedList" class="form-control" style="margin-left: 5px;">
<option value="maintenance">{{ $t('Maintenance List') }}</option> <option value="monitor" selected>{{ $t('Monitors') }}</option>
<option value="maintenance">{{ $t('Maintenance') }}</option>
</select> </select>
</div> </div>
<div class="search-wrapper"> <div class="search-wrapper">

2
src/icon.js
View file

@ -43,6 +43,7 @@ import {
faAngleDown, faAngleDown,
faWrench, faWrench,
faHeartbeat, faHeartbeat,
faFilter,
} from "@fortawesome/free-solid-svg-icons"; } from "@fortawesome/free-solid-svg-icons";
library.add( library.add(
@ -85,6 +86,7 @@ library.add(
faAngleDown, faAngleDown,
faWrench, faWrench,
faHeartbeat, faHeartbeat,
faFilter,
); );
export { FontAwesomeIcon }; export { FontAwesomeIcon };

3
src/languages/en.js
View file

@ -8,8 +8,7 @@ export default {
maxRedirectDescription: "Maximum number of redirects to follow. Set to 0 to disable redirects.", maxRedirectDescription: "Maximum number of redirects to follow. Set to 0 to disable redirects.",
acceptedStatusCodesDescription: "Select status codes which are considered as a successful response.", acceptedStatusCodesDescription: "Select status codes which are considered as a successful response.",
Maintenance: "Maintenance", Maintenance: "Maintenance",
"Monitor List": "Monitor List", "Monitors": "Monitors",
"Maintenance List": "Maintenance List",
"Schedule maintenance": "Schedule maintenance", "Schedule maintenance": "Schedule maintenance",
"Affected Monitors": "Affected Monitors", "Affected Monitors": "Affected Monitors",
"Pick Affected Monitors...": "Pick Affected Monitors...", "Pick Affected Monitors...": "Pick Affected Monitors...",

29
src/pages/Dashboard.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<div v-if="! $root.isMobile" class="col-12 col-md-5 col-xl-4"> <div v-if="!$root.isMobile" class="col-12 col-md-5 col-xl-4">
<div class="dropdown dropdown-create"> <div class="dropdown dropdown-create">
<button class="btn btn-primary mb-3 dropdown-toggle" type="button" data-bs-toggle="dropdown"> <button class="btn btn-primary mb-3 dropdown-toggle" type="button" data-bs-toggle="dropdown">
<font-awesome-icon icon="plus" /> {{ $t("Create") }} <font-awesome-icon icon="plus" /> {{ $t("Create") }}
@ -14,7 +14,7 @@
</li> </li>
<li> <li>
<button type="button" class="dropdown-item" @click="$router.push('/addMaintenance')"> <button type="button" class="dropdown-item" @click="$router.push('/addMaintenance')">
<font-awesome-icon icon="exclamation-circle" /> {{ $t("Maintenance") }} <font-awesome-icon icon="wrench" /> {{ $t("Maintenance") }}
</button> </button>
</li> </li>
</ul> </ul>
@ -45,7 +45,32 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../assets/vars.scss";
.container-fluid { .container-fluid {
width: 98%; width: 98%;
} }
.dropdown-create {
display: flex;
justify-content: end;
}
.dark {
.dropdown-create {
ul {
background-color: $dark-bg;
border-color: $dark-bg2;
border-width: 2px;
li button {
color: $dark-font-color;
}
li button:hover {
background-color: $dark-bg2;
}
}
}
}
</style> </style>

8
src/pages/MaintenanceDetails.vue
View file

@ -22,14 +22,14 @@
<label for="affected_monitors" class="form-label" style="margin-top: 20px;">{{ $t("Affected Monitors") }}</label> <label for="affected_monitors" class="form-label" style="margin-top: 20px;">{{ $t("Affected Monitors") }}</label>
<br> <br>
<button v-for="monitor in affectedMonitors" :key="monitor.id" class="btn btn-monitor" style="margin: 5px; cursor: auto; color: white; font-weight: bold;"> <button v-for="monitor in affectedMonitors" :key="monitor.id" class="btn btn-monitor" style="margin: 5px; cursor: auto; color: white; font-weight: 500;">
{{ monitor }} {{ monitor }}
</button> </button>
<br /> <br />
<label for="selected_status_pages" class="form-label" style="margin-top: 20px;">{{ $t("Selected status pages") }}</label> <label for="selected_status_pages" class="form-label" style="margin-top: 20px;">{{ $t("Selected status pages") }}</label>
<br> <br>
<button v-for="statusPage in selectedStatusPages" :key="statusPage.id" class="btn btn-monitor" style="margin: 5px; cursor: auto; color: white; font-weight: bold;"> <button v-for="statusPage in selectedStatusPages" :key="statusPage.id" class="btn btn-monitor" style="margin: 5px; cursor: auto; color: white; font-weight: 500;">
{{ statusPage }} {{ statusPage }}
</button> </button>
@ -154,4 +154,8 @@ textarea {
background-color: #5cdd8b; background-color: #5cdd8b;
} }
.dark .btn-monitor {
color: #020b05 !important;
}
</style> </style>