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

Add: customize status page (css and poweredby)

Browse source
This commit is contained in:
Patrick Hafner 2021-12-21 03:27:05 +01:00
parent 0ca68f791f
commit 931ca6a3ef
1 changed files with 31 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
src/pages/StatusPage.vue
View file

@ -88,6 +88,11 @@
{{ $t("Show Tags") }}
</template>
</button>
<button class="btn btn-primary me-2" @click="customizeStatusPage">
<font-awesome-icon icon="cog" />
{{ $t("Customize") }}
</button>
</div>
</div>
@ -144,6 +149,15 @@
</div>
</div>
<!-- Customize -->
<div v-if="editMode && enableEditCustomizeMode" class="mb-4 p-4 alert shadow-box customize" role="alert">
<strong v-if="enableEditCustomizeMode">{{ $t("Custom CSS") }}:</strong>
<Editable v-model="config.customCSS" tag="div" :contenteditable="enableEditCustomizeMode" class="content p-2" />
<br />
<strong v-if="enableEditCustomizeMode">{{ $t("Custom Footer") }}:</strong>
<Editable v-model="config.poweredBy" tag="h4" :contenteditable="enableEditCustomizeMode" :noNL="true" class="alert-heading p-2" />
</div>
<!-- Overall Status -->
<div class="shadow-box list p-4 overall-status mb-4">
<div v-if="Object.keys($root.publicMonitorList).length === 0 && loadedData">
@ -208,9 +222,14 @@
</div>
<footer class="mt-5 mb-4">
{{ $t("Powered by") }} <a target="_blank" href="https://github.com/louislam/uptime-kuma">{{ $t("Uptime Kuma" ) }}</a>
<p v-if="config.poweredBy">{{ config.poweredBy }}</p>
<p v-else>{{ $t("Powered by") }} <a target="_blank" href="https://github.com/louislam/uptime-kuma">{{ $t("Uptime Kuma" ) }}</a></p>
</footer>
</div>
<component is="style" v-if="config.customCSS" type="text/css">
{{ config.customCSS }}
</component>
</template>
<script>
@ -249,6 +268,7 @@ export default {
return {
enableEditMode: false,
enableEditIncidentMode: false,
enableEditCustomizeMode: false,
hasToken: false,
config: {},
selectedMonitor: null,
@ -304,7 +324,7 @@ export default {
},
tagsVisible() {
return this.config.statusPageTags
return this.config.statusPageTags;
},
logoClass() {
@ -501,9 +521,9 @@ export default {
return {
...monitor,
tags: newState ? this.$root.monitorList[monitor.id].tags : []
}
};
})
}
};
});
},
@ -580,6 +600,12 @@ export default {
return dayjs.utc(date).fromNow();
},
/** customize status page */
customizeStatusPage() {
// toggle modal
this.enableEditCustomizeMode = !this.enableEditCustomizeMode;
},
}
};
</script>
@ -659,7 +685,7 @@ footer {
}
}
.incident {
.incident, .customize {
.content {
&[contenteditable=true] {
min-height: 60px;