mirrors/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2024-12-23 10:20:23 +03:00
Code Issues Projects Releases Packages Wiki Activity

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

2
src/icon.js
View file

@ -43,6 +43,7 @@ import {
faAngleDown,
faWrench,
faHeartbeat,
faFilter,
} from "@fortawesome/free-solid-svg-icons";
library.add(
@ -85,6 +86,7 @@ library.add(
faAngleDown,
faWrench,
faHeartbeat,
faFilter,
);
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.",
acceptedStatusCodesDescription: "Select status codes which are considered as a successful response.",
Maintenance: "Maintenance",
"Monitor List": "Monitor List",
"Maintenance List": "Maintenance List",
"Monitors": "Monitors",
"Schedule maintenance": "Schedule maintenance",
"Affected Monitors": "Affected Monitors",
"Pick Affected Monitors...": "Pick Affected Monitors...",

29
src/pages/Dashboard.vue
View file

@ -1,7 +1,7 @@
<template>
<div class="container-fluid">
<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">
<button class="btn btn-primary mb-3 dropdown-toggle" type="button" data-bs-toggle="dropdown">
<font-awesome-icon icon="plus" /> {{ $t("Create") }}
@ -14,7 +14,7 @@
</li>
<li>
<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>
</li>
</ul>
@ -45,7 +45,32 @@ export default {
</script>
<style lang="scss" scoped>
@import "../assets/vars.scss";
.container-fluid {
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>

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>
<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 }}
</button>
<br />
<label for="selected_status_pages" class="form-label" style="margin-top: 20px;">{{ $t("Selected status pages") }}</label>
<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 }}
</button>
@ -154,4 +154,8 @@ textarea {
background-color: #5cdd8b;
}
.dark .btn-monitor {
color: #020b05 !important;
}
</style>