mirror of
https://github.com/louislam/uptime-kuma.git
synced 2025-01-30 16:26:16 +00:00
Improve status page sidebar
This commit is contained in:
parent
0afa0be5c2
commit
c399984b7f
2 changed files with 55 additions and 46 deletions
|
@ -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_ 前綴)",
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Reference in a new issue