mirror/myspeed
1
0
Fork 0
mirror of https://github.com/gnmyt/myspeed.git synced 2026-02-11 16:19:11 -06:00
Code Issues Packages Projects Releases Wiki Activity

Use icon instead of +- for jitter display

Browse Source
This commit is contained in:
Mathias Wagner
2026-01-20 22:02:55 +01:00
parent 73f8d2b52b
commit b505441160
6 changed files with 27 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/pages/Home/components/LatestTest/LatestTestComponent.jsx
View File

@@ -1,5 +1,5 @@
import {useContext, useEffect, useState, useRef, useMemo} from "react";
import {faArrowDown, faArrowUp, faClockRotateLeft, faPingPongPaddleBall} from "@fortawesome/free-solid-svg-icons";
import {faArrowDown, faArrowUp, faClockRotateLeft, faPingPongPaddleBall, faWaveSquare} from "@fortawesome/free-solid-svg-icons";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {generateRelativeTime} from "./utils";
import {StatusContext} from "@/common/contexts/Status";
@@ -128,7 +128,7 @@ const LatestTestComponent = () => {
)}
{latest.jitter !== null && latest.jitter !== undefined && (
<span className="jitter-suffix" onClick={showJitterInfo} title={t("latest.jitter")}>
±{latest.jitter}
<FontAwesomeIcon icon={faWaveSquare} className="jitter-icon" />{latest.jitter}
</span>
)}
</h2>

7
client/src/pages/Home/components/LatestTest/styles.sass
View File

@@ -98,10 +98,17 @@ $purple-glow: rgba(139, 92, 246, 0.4)
margin-left: 0.4rem
border-left: 2px solid $light-gray
opacity: 0.7
display: flex
align-items: center
gap: 0.25rem
&:hover
opacity: 1
.jitter-icon
width: 0.9rem
height: 0.9rem
@media (max-width: 1351px)
.inner-container
margin-left: 1rem

4
client/src/pages/Home/components/Speedtest/SpeedtestComponent.jsx
View File

@@ -2,7 +2,7 @@ import React, {forwardRef, useContext, useRef, useImperativeHandle} from "react"
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {
faArrowDown, faArrowUp, faClockRotateLeft, faClose,
faInfo, faPingPongPaddleBall, faTrashCan
faInfo, faPingPongPaddleBall, faTrashCan, faWaveSquare
} from "@fortawesome/free-solid-svg-icons";
import {useAlert} from "@/common/contexts/Alert";
import {SpeedtestContext} from "@/common/contexts/Speedtests";
@@ -87,7 +87,7 @@ const SpeedtestComponent = forwardRef((props, forwardedRef) => {
<h2 className="speedtest-text">
{props.error ? "" : props.ping}
{!props.error && props.jitter !== null && props.jitter !== undefined && (
<span className="jitter-suffix">±{props.jitter}</span>
<span className="jitter-suffix"><FontAwesomeIcon icon={faWaveSquare} className="jitter-icon" />{props.jitter}</span>
)}
</h2>
</div>

7
client/src/pages/Home/components/Speedtest/styles.sass
View File

@@ -61,6 +61,13 @@
margin-left: 0.4rem
border-left: 2px solid $light-gray
opacity: 0.7
display: flex
align-items: center
gap: 0.25rem
.jitter-icon
width: 0.9rem
height: 0.9rem
@media (max-width: 605px)
.speedtest

2
client/src/pages/Statistics/charts/LatestTestChart/LatestTestChart.jsx
View File

@@ -24,7 +24,7 @@ export const LatestTestChart = (props) => {
<h2>{t("latest.ping")}</h2>
<p className={"icon-" + getIconBySpeed(props.test.ping, config.ping, false)}>
{(props.test.ping === -1 ? "N/A" : props.test.ping) + " " + t("latest.ping_unit")}
{hasJitter && <span className="jitter-value"> ±{props.test.jitter}</span>}
{hasJitter && <span className="jitter-value"><FontAwesomeIcon icon={faWaveSquare} className="jitter-icon" />{props.test.jitter}</span>}
</p>
</div>
<FontAwesomeIcon icon={faPingPongPaddleBall}

9
client/src/pages/Statistics/charts/LatestTestChart/styles.sass
View File

@@ -38,4 +38,11 @@ $purple: #8b5cf6
padding-left: 0.35rem
margin-left: 0.35rem
border-left: 2px solid $light-gray
opacity: 0.7
opacity: 0.7
display: inline-flex
align-items: center
gap: 0.2rem
.jitter-icon
width: 0.7rem
height: 0.7rem