topaLE
/
uptime-kuma
1
0
Fork 0
Code Issues 185 Pull Requests 26 Projects Releases 28 Wiki Activity
Browse Source

run stylelint for the project

pull/253/head
LouisLam 3 years ago
parent
2b68be52b0
commit
302d2665d2
10 changed files with 45 additions and 40 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      .stylelintrc
  2. 2
      package.json
  3. 23
      src/assets/app.scss
  4. 10
      src/assets/vars.scss
  5. 2
      src/components/HeartbeatBar.vue
  6. 14
      src/components/NotificationDialog.vue
  7. 17
      src/layouts/Layout.vue
  8. 2
      src/pages/Dashboard.vue
  9. 2
      src/pages/DashboardHome.vue
  10. 8
      src/pages/Details.vue

5
.stylelintrc
View File

@ -2,6 +2,9 @@
"extends": "stylelint-config-standard", "extends": "stylelint-config-standard",
"rules": { "rules": {
"indentation": 4, "indentation": 4,
"no-descending-specificity": null "no-descending-specificity": null,
"selector-list-comma-newline-after": null,
"declaration-empty-line-before": null,
"no-duplicate-selectors": null
} }
} }

2
package.json
View File

@ -11,7 +11,7 @@
}, },
"scripts": { "scripts": {
"lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .", "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
"lint:style": "stylelint \"**/*.{vue,css}\" --ignore-path .gitignore", "lint:style": "stylelint \"**/*.{vue,css,scss}\" --ignore-path .gitignore",
"lint": "npm run lint:js && npm run lint:style", "lint": "npm run lint:js && npm run lint:style",
"dev": "vite --host", "dev": "vite --host",
"start": "npm run start-server", "start": "npm run start-server",

23
src/assets/app.scss
View File

@ -2,7 +2,7 @@
@import "node_modules/bootstrap/scss/bootstrap"; @import "node_modules/bootstrap/scss/bootstrap";
#app { #app {
font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol,noto color emoji; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, segoe ui, Roboto, helvetica neue, Arial, noto sans, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
} }
h1 { h1 {
@ -18,7 +18,7 @@ h2 {
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: #CCC; background: #ccc;
border-radius: 20px; border-radius: 20px;
} }
@ -28,7 +28,7 @@ h2 {
.modal-content { .modal-content {
border-radius: 1rem; border-radius: 1rem;
box-shadow: 0 15px 70px rgba(0, 0, 0, .1); box-shadow: 0 15px 70px rgba(0, 0, 0, 0.1);
.dark & { .dark & {
box-shadow: 0 15px 70px rgb(0 0 0); box-shadow: 0 15px 70px rgb(0 0 0);
@ -41,10 +41,9 @@ h2 {
text-align: center; text-align: center;
} }
.shadow-box { .shadow-box {
//overflow: hidden; // Forget why add this, but multiple select hide by this //overflow: hidden; // Forget why add this, but multiple select hide by this
box-shadow: 0 15px 70px rgba(0, 0, 0, .1); box-shadow: 0 15px 70px rgba(0, 0, 0, 0.1);
padding: 10px; padding: 10px;
border-radius: 10px; border-radius: 10px;
@ -81,7 +80,6 @@ h2 {
} }
@media (max-width: 550px) { @media (max-width: 550px) {
.table-shadow-box { .table-shadow-box {
padding: 10px !important; padding: 10px !important;
@ -89,7 +87,7 @@ h2 {
display: none; display: none;
} }
tbody { tbody {
.shadow-box { .shadow-box {
background-color: white; background-color: white;
} }
@ -126,12 +124,11 @@ h2 {
} }
} }
} }
} }
// Dark Theme override here // Dark Theme override here
.dark { .dark {
background-color: #090C10; background-color: #090c10;
color: $dark-font-color; color: $dark-font-color;
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
@ -173,7 +170,7 @@ h2 {
} }
.table-hover > tbody > tr:hover { .table-hover > tbody > tr:hover {
--bs-table-accent-bg: #070A10; --bs-table-accent-bg: #070a10;
color: $dark-font-color; color: $dark-font-color;
} }
@ -263,11 +260,13 @@ h2 {
// page-change // page-change
.slide-fade-enter-active { .slide-fade-enter-active {
transition: all 0.20s $easing-in; transition: all 0.2s $easing-in;
} }
.slide-fade-leave-active { .slide-fade-leave-active {
transition: all 0.20s $easing-in; transition: all 0.2s $easing-in;
} }
.slide-fade-enter-from, .slide-fade-enter-from,
.slide-fade-leave-to { .slide-fade-leave-to {
transform: translateY(50px); transform: translateY(50px);

10
src/assets/vars.scss
View File

@ -1,5 +1,5 @@
$primary: #5CDD8B; $primary: #5cdd8b;
$danger: #DC3545; $danger: #dc3545;
$warning: #f8a306; $warning: #f8a306;
$link-color: #111; $link-color: #111;
$border-radius: 50rem; $border-radius: 50rem;
@ -9,10 +9,10 @@ $highlight-white: #e7faec;
$dark-font-color: #b1b8c0; $dark-font-color: #b1b8c0;
$dark-font-color2: #020b05; $dark-font-color2: #020b05;
$dark-bg: #0D1117; $dark-bg: #0d1117;
$dark-bg2: #070A10; $dark-bg2: #070a10;
$dark-border-color: #1d2634; $dark-border-color: #1d2634;
$easing-in: cubic-bezier(0.54,0.78,0.55,0.97); $easing-in: cubic-bezier(0.54, 0.78, 0.55, 0.97);
$easing-out: cubic-bezier(0.25, 0.46, 0.45, 0.94); $easing-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
$easing-in-out: cubic-bezier(0.79, 0.14, 0.15, 0.86); $easing-in-out: cubic-bezier(0.79, 0.14, 0.15, 0.86);

2
src/components/HeartbeatBar.vue
View File

@ -186,7 +186,7 @@ export default {
} }
.dark { .dark {
.hp-bar-big .beat.empty{ .hp-bar-big .beat.empty {
background-color: #848484; background-color: #848484;
} }
} }

14
src/components/NotificationDialog.vue
View File

@ -210,7 +210,7 @@
<template v-if="notification.type === 'slack'"> <template v-if="notification.type === 'slack'">
<div class="mb-3"> <div class="mb-3">
<label for="slack-webhook-url" class="form-label">Webhook URL<span style="color:red;"><sup>*</sup></span></label> <label for="slack-webhook-url" class="form-label">Webhook URL<span style="color: red;"><sup>*</sup></span></label>
<input id="slack-webhook-url" v-model="notification.slackwebhookURL" type="text" class="form-control" required> <input id="slack-webhook-url" v-model="notification.slackwebhookURL" type="text" class="form-control" required>
<label for="slack-username" class="form-label">Username</label> <label for="slack-username" class="form-label">Username</label>
<input id="slack-username" v-model="notification.slackusername" type="text" class="form-control"> <input id="slack-username" v-model="notification.slackusername" type="text" class="form-control">
@ -221,7 +221,7 @@
<label for="slack-button-url" class="form-label">Uptime Kuma URL</label> <label for="slack-button-url" class="form-label">Uptime Kuma URL</label>
<input id="slack-button" v-model="notification.slackbutton" type="text" class="form-control"> <input id="slack-button" v-model="notification.slackbutton" type="text" class="form-control">
<div class="form-text"> <div class="form-text">
<span style="color:red;"><sup>*</sup></span>Required <span style="color: red;"><sup>*</sup></span>Required
<p style="margin-top: 8px;"> <p style="margin-top: 8px;">
More info about webhooks on: <a href="https://api.slack.com/messaging/webhooks" target="_blank">https://api.slack.com/messaging/webhooks</a> More info about webhooks on: <a href="https://api.slack.com/messaging/webhooks" target="_blank">https://api.slack.com/messaging/webhooks</a>
</p> </p>
@ -288,9 +288,9 @@
<template v-if="notification.type === 'pushover'"> <template v-if="notification.type === 'pushover'">
<div class="mb-3"> <div class="mb-3">
<label for="pushover-user" class="form-label">User Key<span style="color:red;"><sup>*</sup></span></label> <label for="pushover-user" class="form-label">User Key<span style="color: red;"><sup>*</sup></span></label>
<input id="pushover-user" v-model="notification.pushoveruserkey" type="text" class="form-control" required> <input id="pushover-user" v-model="notification.pushoveruserkey" type="text" class="form-control" required>
<label for="pushover-app-token" class="form-label">Application Token<span style="color:red;"><sup>*</sup></span></label> <label for="pushover-app-token" class="form-label">Application Token<span style="color: red;"><sup>*</sup></span></label>
<input id="pushover-app-token" v-model="notification.pushoverapptoken" type="text" class="form-control" required> <input id="pushover-app-token" v-model="notification.pushoverapptoken" type="text" class="form-control" required>
<label for="pushover-device" class="form-label">Device</label> <label for="pushover-device" class="form-label">Device</label>
<input id="pushover-device" v-model="notification.pushoverdevice" type="text" class="form-control"> <input id="pushover-device" v-model="notification.pushoverdevice" type="text" class="form-control">
@ -330,7 +330,7 @@
<option>none</option> <option>none</option>
</select> </select>
<div class="form-text"> <div class="form-text">
<span style="color:red;"><sup>*</sup></span>Required <span style="color: red;"><sup>*</sup></span>Required
<p style="margin-top: 8px;"> <p style="margin-top: 8px;">
More info on: <a href="https://pushover.net/api" target="_blank">https://pushover.net/api</a> More info on: <a href="https://pushover.net/api" target="_blank">https://pushover.net/api</a>
</p> </p>
@ -366,10 +366,10 @@
<template v-if="notification.type === 'lunasea'"> <template v-if="notification.type === 'lunasea'">
<div class="mb-3"> <div class="mb-3">
<label for="lunasea-device" class="form-label">LunaSea Device ID<span style="color:red;"><sup>*</sup></span></label> <label for="lunasea-device" class="form-label">LunaSea Device ID<span style="color: red;"><sup>*</sup></span></label>
<input id="lunasea-device" v-model="notification.lunaseaDevice" type="text" class="form-control" required> <input id="lunasea-device" v-model="notification.lunaseaDevice" type="text" class="form-control" required>
<div class="form-text"> <div class="form-text">
<p><span style="color:red;"><sup>*</sup></span>Required</p> <p><span style="color: red;"><sup>*</sup></span>Required</p>
</div> </div>
</div> </div>
</template> </template>

17
src/layouts/Layout.vue
View File

@ -9,7 +9,7 @@
<!-- Desktop header --> <!-- Desktop header -->
<header v-if="! $root.isMobile" class="d-flex flex-wrap justify-content-center py-3 mb-3 border-bottom"> <header v-if="! $root.isMobile" class="d-flex flex-wrap justify-content-center py-3 mb-3 border-bottom">
<router-link to="/dashboard" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none"> <router-link to="/dashboard" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
<object class="bi me-2 ms-4" width="40" height="40" data="/icon.svg" alt="Logo" /> <object class="bi me-2 ms-4" width="40" height="40" data="/icon.svg" />
<span class="fs-4 title">Uptime Kuma</span> <span class="fs-4 title">Uptime Kuma</span>
</router-link> </router-link>
@ -54,7 +54,7 @@
</footer> </footer>
<!-- Mobile Only --> <!-- Mobile Only -->
<div v-if="$root.isMobile" style="width: 100%;height: 60px;" /> <div v-if="$root.isMobile" style="width: 100%; height: 60px;" />
<nav v-if="$root.isMobile" class="bottom-nav"> <nav v-if="$root.isMobile" class="bottom-nav">
<router-link to="/dashboard" class="nav-link"> <router-link to="/dashboard" class="nav-link">
<div><font-awesome-icon icon="tachometer-alt" /></div> <div><font-awesome-icon icon="tachometer-alt" /></div>
@ -173,7 +173,7 @@ export default {
} }
main { main {
min-height: calc(100vh - 160px) min-height: calc(100vh - 160px);
} }
.title { .title {
@ -191,7 +191,6 @@ main {
} }
footer { footer {
color: #AAA;
font-size: 13px; font-size: 13px;
margin-top: 10px; margin-top: 10px;
padding-bottom: 30px; padding-bottom: 30px;
@ -199,13 +198,17 @@ footer {
text-align: center; text-align: center;
} }
footer {
color: #aaa;
}
.dark { .dark {
header { header {
background-color: #161B22; background-color: #161b22;
border-bottom-color: #161B22 !important; border-bottom-color: #161b22 !important;
span { span {
color: #F0F6FC; color: #f0f6fc;
} }
} }

2
src/pages/Dashboard.vue
View File

@ -32,6 +32,6 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.container-fluid { .container-fluid {
width: 98% width: 98%;
} }
</style> </style>

2
src/pages/DashboardHome.vue
View File

@ -26,7 +26,7 @@
</div> </div>
</div> </div>
<div class="shadow-box table-shadow-box" style="overflow-x: scroll"> <div class="shadow-box table-shadow-box" style="overflow-x: scroll;">
<table class="table table-borderless table-hover"> <table class="table table-borderless table-hover">
<thead> <thead>
<tr> <tr>

8
src/pages/Details.vue
View File

@ -34,7 +34,7 @@
<span class="word">{{ $t("checkEverySecond", [ monitor.interval ]) }}</span> <span class="word">{{ $t("checkEverySecond", [ monitor.interval ]) }}</span>
</div> </div>
<div class="col-md-4 text-center"> <div class="col-md-4 text-center">
<span class="badge rounded-pill" :class=" 'bg-' + status.color " style="font-size: 30px">{{ status.text }}</span> <span class="badge rounded-pill" :class=" 'bg-' + status.color " style="font-size: 30px;">{{ status.text }}</span>
</div> </div>
</div> </div>
</div> </div>
@ -384,7 +384,7 @@ export default {
} }
.word { .word {
color: #AAA; color: #aaa;
font-size: 14px; font-size: 14px;
} }
@ -398,7 +398,7 @@ table {
.stats p { .stats p {
font-size: 13px; font-size: 13px;
color: #AAA; color: #aaa;
} }
.stats { .stats {
@ -413,7 +413,7 @@ table {
color: black; color: black;
} }
.dark { .dark {
.keyword { .keyword {
color: $dark-font-color; color: $dark-font-color;
} }

Write Preview
Loading…
Cancel
Save