mirror of
https://github.com/louislam/uptime-kuma.git
synced 2025-06-19 10:46:48 +02:00
lint fix
This commit is contained in:
Doruk
parent
b1bf26289e
commit
89fc5f1665
2 changed files with 67 additions and 60 deletions
|
|
@ -30,11 +30,10 @@
|
|||
<div v-if="$root.styleElapsedTime === 'with-line'" class="connecting-line"></div>
|
||||
<div>{{ timeSinceLastBeat }}</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- Custom Tooltip -->
|
||||
<Tooltip
|
||||
:visible="tooltipVisible"
|
||||
<Tooltip
|
||||
:visible="tooltipVisible"
|
||||
:content="tooltipContent"
|
||||
:x="tooltipX"
|
||||
:y="tooltipY"
|
||||
|
|
@ -86,7 +85,7 @@ export default {
|
|||
tooltipContent: null,
|
||||
tooltipX: 0,
|
||||
tooltipY: 0,
|
||||
tooltipPosition: 'below',
|
||||
tooltipPosition: "below",
|
||||
tooltipTimeoutId: null,
|
||||
};
|
||||
},
|
||||
|
|
@ -369,7 +368,7 @@ export default {
|
|||
|
||||
const statusText = {
|
||||
0: "Down",
|
||||
1: "Up",
|
||||
1: "Up",
|
||||
2: "Pending",
|
||||
3: "Maintenance"
|
||||
}[beat.status] || "Unknown";
|
||||
|
|
@ -396,40 +395,40 @@ export default {
|
|||
// Small delay for better UX
|
||||
this.tooltipTimeoutId = setTimeout(() => {
|
||||
this.tooltipContent = beat;
|
||||
|
||||
|
||||
// Calculate position relative to viewport
|
||||
const rect = event.target.getBoundingClientRect();
|
||||
|
||||
|
||||
// Position relative to viewport
|
||||
const x = rect.left + (rect.width / 2);
|
||||
const y = rect.top;
|
||||
|
||||
|
||||
// Check if tooltip would go off-screen and adjust position
|
||||
const tooltipHeight = 80; // Approximate tooltip height
|
||||
const viewportHeight = window.innerHeight;
|
||||
const spaceAbove = y;
|
||||
const spaceBelow = viewportHeight - y - rect.height;
|
||||
|
||||
|
||||
if (spaceAbove > tooltipHeight && spaceBelow < tooltipHeight) {
|
||||
// Show above - arrow points down
|
||||
this.tooltipPosition = 'above';
|
||||
this.tooltipPosition = "above";
|
||||
this.tooltipY = y - 10;
|
||||
} else {
|
||||
// Show below - arrow points up
|
||||
this.tooltipPosition = 'below';
|
||||
this.tooltipPosition = "below";
|
||||
this.tooltipY = y + rect.height + 10;
|
||||
}
|
||||
|
||||
|
||||
// Ensure tooltip doesn't go off the left or right edge
|
||||
const tooltipWidth = 120; // Approximate tooltip width
|
||||
let adjustedX = x;
|
||||
|
||||
if (x - tooltipWidth/2 < 10) {
|
||||
adjustedX = tooltipWidth/2 + 10;
|
||||
} else if (x + tooltipWidth/2 > window.innerWidth - 10) {
|
||||
adjustedX = window.innerWidth - tooltipWidth/2 - 10;
|
||||
|
||||
if (x - tooltipWidth / 2 < 10) {
|
||||
adjustedX = tooltipWidth / 2 + 10;
|
||||
} else if (x + tooltipWidth / 2 > window.innerWidth - 10) {
|
||||
adjustedX = window.innerWidth - tooltipWidth / 2 - 10;
|
||||
}
|
||||
|
||||
|
||||
this.tooltipX = adjustedX;
|
||||
this.tooltipVisible = true;
|
||||
}, 150);
|
||||
|
|
@ -443,7 +442,7 @@ export default {
|
|||
clearTimeout(this.tooltipTimeoutId);
|
||||
this.tooltipTimeoutId = null;
|
||||
}
|
||||
|
||||
|
||||
this.tooltipVisible = false;
|
||||
this.tooltipContent = null;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<teleport to="body">
|
||||
<div
|
||||
<div
|
||||
v-if="visible && content"
|
||||
ref="tooltip"
|
||||
class="tooltip-wrapper"
|
||||
|
|
@ -41,7 +41,7 @@ export default {
|
|||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
/** Y position (viewport coordinates) */
|
||||
/** Y position (viewport coordinates) */
|
||||
y: {
|
||||
type: Number,
|
||||
default: 0
|
||||
|
|
@ -49,50 +49,58 @@ export default {
|
|||
/** Position relative to target element */
|
||||
position: {
|
||||
type: String,
|
||||
default: 'below',
|
||||
validator: (value) => ['above', 'below'].includes(value)
|
||||
default: "below",
|
||||
validator: (value) => [ "above", "below" ].includes(value)
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
tooltipStyle() {
|
||||
return {
|
||||
left: this.x + 'px',
|
||||
top: this.y + 'px',
|
||||
left: this.x + "px",
|
||||
top: this.y + "px",
|
||||
};
|
||||
},
|
||||
|
||||
statusText() {
|
||||
if (!this.content || this.content === 0) return this.$t('Unknown');
|
||||
|
||||
if (!this.content || this.content === 0) {
|
||||
return this.$t("Unknown");
|
||||
}
|
||||
|
||||
const statusMap = {
|
||||
0: this.$t('Down'),
|
||||
1: this.$t('Up'),
|
||||
2: this.$t('Pending'),
|
||||
3: this.$t('Maintenance')
|
||||
0: this.$t("Down"),
|
||||
1: this.$t("Up"),
|
||||
2: this.$t("Pending"),
|
||||
3: this.$t("Maintenance")
|
||||
};
|
||||
return statusMap[this.content.status] || this.$t('Unknown');
|
||||
return statusMap[this.content.status] || this.$t("Unknown");
|
||||
},
|
||||
|
||||
statusClass() {
|
||||
if (!this.content || this.content === 0) return 'status-empty';
|
||||
|
||||
if (!this.content || this.content === 0) {
|
||||
return "status-empty";
|
||||
}
|
||||
|
||||
const classMap = {
|
||||
0: 'status-down',
|
||||
1: 'status-up',
|
||||
2: 'status-pending',
|
||||
3: 'status-maintenance'
|
||||
0: "status-down",
|
||||
1: "status-up",
|
||||
2: "status-pending",
|
||||
3: "status-maintenance"
|
||||
};
|
||||
return classMap[this.content.status] || 'status-unknown';
|
||||
return classMap[this.content.status] || "status-unknown";
|
||||
},
|
||||
|
||||
timeText() {
|
||||
if (!this.content || this.content === 0) return '';
|
||||
if (!this.content || this.content === 0) {
|
||||
return "";
|
||||
}
|
||||
return this.$root.datetime(this.content.time);
|
||||
},
|
||||
|
||||
message() {
|
||||
if (!this.content || this.content === 0) return '';
|
||||
return this.content.msg || '';
|
||||
if (!this.content || this.content === 0) {
|
||||
return "";
|
||||
}
|
||||
return this.content.msg || "";
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -106,7 +114,7 @@ export default {
|
|||
z-index: 9999;
|
||||
pointer-events: none;
|
||||
transform: translateX(-50%);
|
||||
|
||||
|
||||
.tooltip-content {
|
||||
background: rgba(17, 24, 39, 0.95);
|
||||
backdrop-filter: blur(8px);
|
||||
|
|
@ -116,41 +124,41 @@ export default {
|
|||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
|
||||
min-width: 120px;
|
||||
text-align: center;
|
||||
|
||||
|
||||
.tooltip-status {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 4px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
|
||||
|
||||
&.status-up {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
|
||||
&.status-down {
|
||||
color: $danger;
|
||||
}
|
||||
|
||||
|
||||
&.status-pending {
|
||||
color: $warning;
|
||||
}
|
||||
|
||||
|
||||
&.status-maintenance {
|
||||
color: $maintenance;
|
||||
}
|
||||
|
||||
|
||||
&.status-empty {
|
||||
color: $secondary-text;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.tooltip-time {
|
||||
color: #d1d5db;
|
||||
font-size: 11px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
|
||||
.tooltip-message {
|
||||
color: #f3f4f6;
|
||||
font-size: 10px;
|
||||
|
|
@ -159,7 +167,7 @@ export default {
|
|||
border-top: 1px solid rgba(75, 85, 99, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.tooltip-arrow {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
|
|
@ -168,11 +176,11 @@ export default {
|
|||
height: 0;
|
||||
border-left: 6px solid transparent;
|
||||
border-right: 6px solid transparent;
|
||||
|
||||
|
||||
// Default: tooltip below element, arrow points up
|
||||
border-bottom: 6px solid rgba(17, 24, 39, 0.95);
|
||||
top: -6px;
|
||||
|
||||
|
||||
&.arrow-above {
|
||||
// Tooltip above element, arrow points down
|
||||
top: auto;
|
||||
|
|
@ -181,10 +189,10 @@ export default {
|
|||
border-top: 6px solid rgba(17, 24, 39, 0.95);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Smooth entrance animation
|
||||
animation: tooltip-fade-in 0.2s $easing-out;
|
||||
|
||||
|
||||
&.tooltip-above {
|
||||
transform: translateX(-50%) translateY(-8px);
|
||||
}
|
||||
|
|
@ -196,10 +204,10 @@ export default {
|
|||
background: rgba(31, 41, 55, 0.95);
|
||||
border-color: rgba(107, 114, 128, 0.3);
|
||||
}
|
||||
|
||||
|
||||
.tooltip-arrow {
|
||||
border-bottom-color: rgba(31, 41, 55, 0.95);
|
||||
|
||||
|
||||
&.arrow-above {
|
||||
border-top-color: rgba(31, 41, 55, 0.95);
|
||||
}
|
||||
|
|
@ -223,4 +231,4 @@ export default {
|
|||
animation: none !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue