Self-Hosted
/
uptime-kuma
mirror of https://github.com/louislam/uptime-kuma
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Improve status page sidebar

Browse Source
pull/1415/head
Louis Lam 3 years ago
parent 0afa0be5c2
commit c399984b7f
2 changed files with 55 additions and 46 deletions
Show Stats Download Patch File Download Diff File

3
src/languages/zh-HK.js
Unescape View File

@ -339,7 +339,7 @@ export default {
"Switch to Dark Theme": "切換至深色佈景主題", "Switch to Dark Theme": "切換至深色佈景主題",
"Show Tags": "顯示標籤", "Show Tags": "顯示標籤",
"Hide Tags": "隱藏標籤", "Hide Tags": "隱藏標籤",
Description: "說明", Description: "描述",
"No monitors available.": "沒有可用的監測器。", "No monitors available.": "沒有可用的監測器。",
"Add one": "新增一個", "Add one": "新增一個",
"No Monitors": "無監測器", "No Monitors": "無監測器",
@ -347,7 +347,6 @@ export default {
Services: "服務", Services: "服務",
Discard: "捨棄", Discard: "捨棄",
Cancel: "取消", Cancel: "取消",
"Powered by": "技術支援",
shrinkDatabaseDescription: "觸發 SQLite 的資料庫清理 (VACUUM)。如果您的資料庫是在 1.10.0 版本後建立，AUTO_VACUUM 已自動啟用，則無需此操作。", shrinkDatabaseDescription: "觸發 SQLite 的資料庫清理 (VACUUM)。如果您的資料庫是在 1.10.0 版本後建立，AUTO_VACUUM 已自動啟用，則無需此操作。",
serwersms: "SerwerSMS.pl", serwersms: "SerwerSMS.pl",
serwersmsAPIUser: "API 使用者名稱 (包括 webapi_ 前綴)", serwersmsAPIUser: "API 使用者名稱 (包括 webapi_ 前綴)",

98
src/pages/StatusPage.vue
Unescape View File

@ -2,49 +2,51 @@
<div v-if="loadedTheme" class="container mt-3"> <div v-if="loadedTheme" class="container mt-3">
<!-- Sidebar for edit mode --> <!-- Sidebar for edit mode -->
<div v-if="enableEditMode" class="sidebar"> <div v-if="enableEditMode" class="sidebar">
<div class="my-3"> <div class="sidebar-body">
<label for="slug" class="form-label">{{ $t("Slug") }}</label> <div class="my-3">
<div class="input-group"> <label for="slug" class="form-label">{{ $t("Slug") }}</label>
<span id="basic-addon3" class="input-group-text">/status/</span> <div class="input-group">
<input id="slug" v-model="config.slug" type="text" class="form-control"> <span id="basic-addon3" class="input-group-text">/status/</span>
<input id="slug" v-model="config.slug" type="text" class="form-control">
</div>
</div> </div>
</div>
<div class="my-3"> <div class="my-3">
<label for="title" class="form-label">{{ $t("Title") }}</label> <label for="title" class="form-label">{{ $t("Title") }}</label>
<input id="title" v-model="config.title" type="text" class="form-control"> <input id="title" v-model="config.title" type="text" class="form-control">
</div> </div>
<div class="my-3"> <div class="my-3">
<label for="description" class="form-label">{{ $t("Description") }}</label> <label for="description" class="form-label">{{ $t("Description") }}</label>
<textarea id="description" v-model="config.description" class="form-control"></textarea> <textarea id="description" v-model="config.description" class="form-control"></textarea>
</div> </div>
<div class="my-3 form-check form-switch"> <div class="my-3 form-check form-switch">
<input id="switch-theme" v-model="config.theme" class="form-check-input" type="checkbox" true-value="dark" false-value="light"> <input id="switch-theme" v-model="config.theme" class="form-check-input" type="checkbox" true-value="dark" false-value="light">
<label class="form-check-label" for="switch-theme">{{ $t("Switch to Dark Theme") }}</label> <label class="form-check-label" for="switch-theme">{{ $t("Switch to Dark Theme") }}</label>
</div> </div>
<div class="my-3 form-check form-switch"> <div class="my-3 form-check form-switch">
<input id="showTags" v-model="config.showTags" class="form-check-input" type="checkbox"> <input id="showTags" v-model="config.showTags" class="form-check-input" type="checkbox">
<label class="form-check-label" for="showTags">{{ $t("Show Tags") }}</label> <label class="form-check-label" for="showTags">{{ $t("Show Tags") }}</label>
</div> </div>
<div v-if="false" class="my-3"> <div v-if="false" class="my-3">
<label for="password" class="form-label">{{ $t("Password") }} <sup>Coming Soon</sup></label> <label for="password" class="form-label">{{ $t("Password") }} <sup>Coming Soon</sup></label>
<input id="password" v-model="config.password" disabled type="password" autocomplete="new-password" class="form-control"> <input id="password" v-model="config.password" disabled type="password" autocomplete="new-password" class="form-control">
</div> </div>
<div class="my-3"> <div class="my-3">
<label for="cname" class="form-label">Domain Names</label> <label for="cname" class="form-label">Domain Names</label>
<textarea id="cname" v-model="config.domanNames" rows="3" class="form-control" :placeholder="domainNamesPlaceholder"></textarea> <textarea id="cname" v-model="config.domanNames" rows="3" class="form-control" :placeholder="domainNamesPlaceholder"></textarea>
</div> </div>
<div class="danger-zone"> <div class="danger-zone">
<button class="btn btn-danger me-2" @click="deleteDialog"> <button class="btn btn-danger me-2" @click="deleteDialog">
<font-awesome-icon icon="trash" /> <font-awesome-icon icon="trash" />
{{ $t("Delete") }} {{ $t("Delete") }}
</button> </button>
</div>
</div> </div>
<!-- Sidebar Footer --> <!-- Sidebar Footer -->
@ -120,7 +122,7 @@
<!-- Incident Date --> <!-- Incident Date -->
<div class="date mt-3"> <div class="date mt-3">
{{ $t("Created") }}: {{ $root.datetime(incident.createdDate) }} ({{ dateFromNow(incident.createdDate) }})<br /> {{ $t("Date Created") }}: {{ $root.datetime(incident.createdDate) }} ({{ dateFromNow(incident.createdDate) }})<br />
<span v-if="incident.lastUpdatedDate"> <span v-if="incident.lastUpdatedDate">
{{ $t("Last Updated") }}: {{ $root.datetime(incident.lastUpdatedDate) }} ({{ dateFromNow(incident.lastUpdatedDate) }}) {{ $t("Last Updated") }}: {{ $root.datetime(incident.lastUpdatedDate) }} ({{ dateFromNow(incident.lastUpdatedDate) }})
</span> </span>
@ -714,9 +716,7 @@ h1 {
top: 0; top: 0;
width: 300px; width: 300px;
height: 100vh; height: 100vh;
padding: 15px 15px 68px 15px;
overflow-x: hidden;
overflow-y: auto;
border-right: 1px solid #ededed; border-right: 1px solid #ededed;
.danger-zone { .danger-zone {
@ -724,13 +724,22 @@ h1 {
padding-top: 15px; padding-top: 15px;
} }
.sidebar-body {
padding: 15px 15px 68px 15px;
overflow-x: hidden;
overflow-y: auto;
height: calc(100% - 70px);
}
.sidebar-footer { .sidebar-footer {
width: 100%;
bottom: 0;
left: 0;
padding: 15px;
position: absolute;
border-top: 1px solid #ededed; border-top: 1px solid #ededed;
padding: 15px;
width: 300px;
height: 70px;
position: fixed;
left: 0;
bottom: 0;
background-color: white;
} }
} }
@ -818,6 +827,7 @@ footer {
.sidebar-footer { .sidebar-footer {
border-top-color: $dark-border-color; border-top-color: $dark-border-color;
background-color: $dark-header-bg;
} }
} }
} }

Write Preview
Loading…
Cancel
Save