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 4 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
Split 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",
"rules": {
"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": {
"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",
"dev": "vite --host",
"start": "npm run start-server",

23
src/assets/app.scss
View File

@ -2,7 +2,7 @@
@import "node_modules/bootstrap/scss/bootstrap";
#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 {
@ -18,7 +18,7 @@ h2 {
}
::-webkit-scrollbar-thumb {
background: #CCC;
background: #ccc;
border-radius: 20px;
}
@ -28,7 +28,7 @@ h2 {
.modal-content {
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 & {
box-shadow: 0 15px 70px rgb(0 0 0);
@ -41,10 +41,9 @@ h2 {
text-align: center;
}
.shadow-box {
//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;
border-radius: 10px;
@ -81,7 +80,6 @@ h2 {
}
@media (max-width: 550px) {
.table-shadow-box {
padding: 10px !important;
@ -89,7 +87,7 @@ h2 {
display: none;
}
tbody {
tbody {
.shadow-box {
background-color: white;
}
@ -126,12 +124,11 @@ h2 {
}
}
}
}
// Dark Theme override here
.dark {
background-color: #090C10;
background-color: #090c10;
color: $dark-font-color;
&::-webkit-scrollbar-thumb {
@ -173,7 +170,7 @@ h2 {
}
.table-hover > tbody > tr:hover {
--bs-table-accent-bg: #070A10;
--bs-table-accent-bg: #070a10;
color: $dark-font-color;
}
@ -263,11 +260,13 @@ h2 {
// page-change
.slide-fade-enter-active {
transition: all 0.20s $easing-in;
transition: all 0.2s $easing-in;
}
.slide-fade-leave-active {
transition: all 0.20s $easing-in;
transition: all 0.2s $easing-in;
}
.slide-fade-enter-from,
.slide-fade-leave-to {
transform: translateY(50px);

10
src/assets/vars.scss
View File

@ -1,5 +1,5 @@
$primary: #5CDD8B;
$danger: #DC3545;
$primary: #5cdd8b;
$danger: #dc3545;
$warning: #f8a306;
$link-color: #111;
$border-radius: 50rem;
@ -9,10 +9,10 @@ $highlight-white: #e7faec;
$dark-font-color: #b1b8c0;
$dark-font-color2: #020b05;
$dark-bg: #0D1117;
$dark-bg2: #070A10;
$dark-bg: #0d1117;
$dark-bg2: #070a10;
$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-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 {
.hp-bar-big .beat.empty{
.hp-bar-big .beat.empty {
background-color: #848484;
}
}

14
src/components/NotificationDialog.vue
View File

@ -210,7 +210,7 @@
<template v-if="notification.type === 'slack'">
<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>
<label for="slack-username" class="form-label">Username</label>
<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>
<input id="slack-button" v-model="notification.slackbutton" type="text" class="form-control">
<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;">
More info about webhooks on: <a href="https://api.slack.com/messaging/webhooks" target="_blank">https://api.slack.com/messaging/webhooks</a>
</p>
@ -288,9 +288,9 @@
<template v-if="notification.type === 'pushover'">
<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>
<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>
<label for="pushover-device" class="form-label">Device</label>
<input id="pushover-device" v-model="notification.pushoverdevice" type="text" class="form-control">
@ -330,7 +330,7 @@
<option>none</option>
</select>
<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;">
More info on: <a href="https://pushover.net/api" target="_blank">https://pushover.net/api</a>
</p>
@ -366,10 +366,10 @@
<template v-if="notification.type === 'lunasea'">
<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>
<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>
</template>

17
src/layouts/Layout.vue
View File

@ -9,7 +9,7 @@
<!-- Desktop header -->
<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">
<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>
</router-link>
@ -54,7 +54,7 @@
</footer>
<!-- 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">
<router-link to="/dashboard" class="nav-link">
<div><font-awesome-icon icon="tachometer-alt" /></div>
@ -173,7 +173,7 @@ export default {
}
main {
min-height: calc(100vh - 160px)
min-height: calc(100vh - 160px);
}
.title {
@ -191,7 +191,6 @@ main {
}
footer {
color: #AAA;
font-size: 13px;
margin-top: 10px;
padding-bottom: 30px;
@ -199,13 +198,17 @@ footer {
text-align: center;
}
footer {
color: #aaa;
}
.dark {
header {
background-color: #161B22;
border-bottom-color: #161B22 !important;
background-color: #161b22;
border-bottom-color: #161b22 !important;
span {
color: #F0F6FC;
color: #f0f6fc;
}
}

2
src/pages/Dashboard.vue
View File

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

2
src/pages/DashboardHome.vue
View File

@ -26,7 +26,7 @@
</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">
<thead>
<tr>

8
src/pages/Details.vue
View File

@ -34,7 +34,7 @@
<span class="word">{{ $t("checkEverySecond", [ monitor.interval ]) }}</span>
</div>
<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>
@ -384,7 +384,7 @@ export default {
}
.word {
color: #AAA;
color: #aaa;
font-size: 14px;
}
@ -398,7 +398,7 @@ table {
.stats p {
font-size: 13px;
color: #AAA;
color: #aaa;
}
.stats {
@ -413,7 +413,7 @@ table {
color: black;
}
.dark {
.dark {
.keyword {
color: $dark-font-color;
}

Write Preview
Loading…
Cancel
Save