louislam / uptime-kuma

A fancy self-hosted monitoring tool
https://uptime.kuma.pet
MIT License
55.48k stars 4.99k forks source link

SVG logo on Status pages #2976

Open robetus opened 1 year ago

robetus commented 1 year ago

⚠️ Please verify that this feature request has NOT been suggested before.

🏷️ Feature Request Type

UI Feature

🔖 Feature description

The ability to add a logo size other than a square and the ability to upload an svg logo that shows an svg logo.

✔️ Solution

I used the following as a workaround for each page to add a normal sized svg logo to the status pages, you may need to change the data-v- code for your install:

body {

}
h1 img[data-v-8h4b2bcp] {
vertical-align: middle;
height: 94px;
width: 103px;
margin-bottom: -50px;
content:url(https://upload.wikimedia.org/wikipedia/en/8/80/Wikipedia-logo-v2.svg);
}

❓ Alternatives

body {

}
h1 img[data-v-8h4b2bcp] {
vertical-align: middle;
height: 94px;
width: 103px;
margin-bottom: -50px;
content:url(https://upload.wikimedia.org/wikipedia/en/8/80/Wikipedia-logo-v2.svg);
}

📝 Additional Context

This allows you to use the default uploaded image as a favicon for the status page.

rezzorix commented 1 year ago

You could change the code and then make a pull request for this :wink:

CommanderStorm commented 4 months ago

Uptime Kuma is using vue-image-crop-upload for resizing and cropping. You may provide your opinion to them. https://github.com/dai-siki/vue-image-crop-upload

If there are better options for this usecase, we would be open to hear about them ^^

The squareness of the logo is a won'tfix, as otherwise this would not nicely work when scaled down in a favicon.

CommanderStorm commented 4 months ago

Related https://github.com/louislam/uptime-kuma/issues/1719