trafficlunar/statsys
1
0
Fork 0
mirror of https://github.com/trafficlunar/statsys.git synced 2026-03-28 11:13:17 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: better tooltips

Browse source
This commit is contained in:
trafficlunar 2025-12-17 20:17:35 +00:00
parent def80333da
commit b1deb5929a
2 changed files with 24 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.gitattributes vendored
View file

@ -1 +1,3 @@
# Only for decorational purposes to show Go as the main language
www/themes/*.css linguist-detectable=false www/themes/*.css linguist-detectable=false
www/index.html linguist-detectable=false

56
www/index.html
View file

@ -211,6 +211,7 @@
width: 1.188rem; width: 1.188rem;
height: 2.5rem; height: 2.5rem;
flex-shrink: 0; flex-shrink: 0;
position: relative;
} }
.status-bar { .status-bar {
@ -222,7 +223,7 @@
z-index: 0; z-index: 0;
border-radius: 3px; border-radius: 3px;
/* this weird hack fixes some inconsistencies */ /* this weird hack fixes a lot of CSS glitches */
transform: translateX(0px); transform: translateX(0px);
} }
@ -231,14 +232,16 @@
filter: brightness(0.9); filter: brightness(0.9);
} }
.bars > div:hover .status-bar::after { /* tooltip */
.bars > div:hover::after {
content: attr(data-tooltip); content: attr(data-tooltip);
position: absolute; position: absolute;
bottom: 100%; bottom: 100%;
left: var(--tooltip-left, 50%); left: 50%;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
font-size: 0.75rem;
font-family: "JetBrains Mono", monospace; font-family: "JetBrains Mono", monospace;
font-weight: 600; font-weight: 600;
@ -247,11 +250,11 @@
border: 1px solid var(--tooltip-border); border: 1px solid var(--tooltip-border);
padding: 0.45rem 0.5rem; padding: 0.45rem 0.5rem;
border-radius: 0.25rem; border-radius: 0.25rem;
font-size: 0.75rem;
transform: translateX(-50%); transform: translateX(-50%);
white-space: nowrap; white-space: nowrap;
z-index: 10; z-index: 10;
pointer-events: none;
} }
.status-bar.Online { .status-bar.Online {
@ -314,11 +317,11 @@
.bars-gradient { .bars-gradient {
display: none !important; display: none !important;
position: absolute !important; position: absolute !important;
left: 0; left: -2.5rem;
bottom: 0; bottom: 0;
width: 2.5rem !important; width: 5rem !important;
height: 3rem !important; height: 3rem !important;
background: linear-gradient(to left, transparent, var(--bg-main)); background: linear-gradient(to left, transparent, var(--bg-main) 50%);
pointer-events: none; pointer-events: none;
z-index: 10; z-index: 10;
} }
@ -469,12 +472,6 @@
width: 100%; width: 100%;
} }
.bars-container {
overflow-x: hidden;
padding-top: 3rem;
margin-top: -3rem;
}
.bars-gradient { .bars-gradient {
display: block !important; display: block !important;
} }
@ -495,11 +492,9 @@
margin-top: 0.25rem; margin-top: 0.25rem;
} }
.bars > div:hover .status-bar::after { /* places tooltip in middle of screen, allows small screens to see tooltip without getting cut off */
position: fixed; .bars > div {
left: 50vw; position: static;
transform: translateX(-50%);
bottom: 4rem;
} }
.uptime-percentage { .uptime-percentage {
@ -601,11 +596,8 @@
<div class="bars-gradient"></div> <div class="bars-gradient"></div>
{{ range $timelineIndex, $timelineStatus := $serviceStatus.MinuteTimeline }} {{ range $timelineIndex, $timelineStatus := $serviceStatus.MinuteTimeline }}
<div> <div tabindex="0" data-tooltip="{{ $timelineStatus.FormattedTime }} • {{ $timelineStatus.Status }}">
<div <div class="status-bar {{ $timelineStatus.Status }}"></div>
class="status-bar {{ $timelineStatus.Status }}"
data-tooltip="{{ $timelineStatus.FormattedTime }} • {{ $timelineStatus.Status }}"
></div>
</div> </div>
{{ end }} {{ end }}
</div> </div>
@ -621,11 +613,8 @@
<div class="bars-gradient"></div> <div class="bars-gradient"></div>
{{ range $timelineIndex, $timelineStatus := $serviceStatus.HourTimeline }} {{ range $timelineIndex, $timelineStatus := $serviceStatus.HourTimeline }}
<div> <div tabindex="0" data-tooltip="{{ $timelineStatus.FormattedTime }} • {{ $timelineStatus.Status }}">
<div <div class="status-bar {{ $timelineStatus.Status }}"></div>
class="status-bar {{ $timelineStatus.Status }}"
data-tooltip="{{ $timelineStatus.FormattedTime }} • {{ $timelineStatus.Status }}"
></div>
</div> </div>
{{ end }} {{ end }}
</div> </div>
@ -642,11 +631,8 @@
<div class="bars-gradient"></div> <div class="bars-gradient"></div>
{{ range $timelineIndex, $timelineStatus := $serviceStatus.DayTimeline }} {{ range $timelineIndex, $timelineStatus := $serviceStatus.DayTimeline }}
<div> <div tabindex="0" data-tooltip="{{ $timelineStatus.FormattedTime }} • {{ $timelineStatus.Status }}">
<div <div class="status-bar {{ $timelineStatus.Status }}"></div>
class="status-bar {{ $timelineStatus.Status }}"
data-tooltip="{{ $timelineStatus.FormattedTime }} • {{ $timelineStatus.Status }}"
></div>
</div> </div>
{{ end }} {{ end }}
</div> </div>
@ -694,7 +680,7 @@
function resizeUpdate() { function resizeUpdate() {
timelineLengthTexts.forEach((t) => { timelineLengthTexts.forEach((t) => {
const amountOfBars = Math.ceil(t.parentElement.clientWidth / 19); // each bar is 19px const amountOfBars = Math.min(Math.floor(t.parentElement.clientWidth / 19), "{{ .View }}" === "hours" ? 24 : 30); // each bar is 19px
t.textContent = `${amountOfBars} {{ .View }} ago`; t.textContent = `${amountOfBars} {{ .View }} ago`;
}); });
} }