Add Speed Test

LReion · Dec 9, 2023 · 6f7f1d4 · 6f7f1d4
1 parent 75ca46c
commit 6f7f1d4
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 9 deletions.
diff --git a/index.html b/index.html
@@ -313,22 +313,22 @@ <h2 id="SpeedTest" :class="{'mobile-h2' : isMobile }">🚀 {{currentTexts.speedt
 
                   <div class="row" style="margin-bottom: 10pt;">
                     <div class="col-3 text-center">
-                      <h5>{{currentTexts.speedtest.Download}}</h5>
-                      <p id="download-speed" :class="updateSpeedTestColor(speedTestStatus)">{{speedTest.downloadSpeed}}
-                        Mbps</p>
+                      <h5 class="speedtest-h5">{{currentTexts.speedtest.Download}}</h5>
+                      <p id="download-speed" class="speedtest-h5" :class="updateSpeedTestColor(speedTestStatus)">{{speedTest.downloadSpeed}}
+                        M/s</p>
                     </div>
                     <div class="col-3 text-center">
-                      <h5>{{currentTexts.speedtest.Upload}}</h5>
-                      <p id="upload-speed" :class="updateSpeedTestColor(speedTestStatus)">{{speedTest.uploadSpeed}} Mbps
+                      <h5 class="speedtest-h5">{{currentTexts.speedtest.Upload}}</h5>
+                      <p id="upload-speed" class="speedtest-h5" :class="updateSpeedTestColor(speedTestStatus)">{{speedTest.uploadSpeed}} M/s
                       </p>
                     </div>
                     <div class="col-3 text-center">
-                      <h5>{{currentTexts.speedtest.Latency}}</h5>
-                      <p id="latency" :class="updateSpeedTestColor(speedTestStatus)">{{speedTest.latency}} ms</p>
+                      <h5 class="speedtest-h5">{{currentTexts.speedtest.Latency}}</h5>
+                      <p id="latency" class="speedtest-h5" :class="updateSpeedTestColor(speedTestStatus)">{{speedTest.latency}} ms</p>
                     </div>
                     <div class="col-3 text-center">
-                      <h5>{{currentTexts.speedtest.Jitter}}</h5>
-                      <p id="jitter" :class="updateSpeedTestColor(speedTestStatus)">{{speedTest.jitter}} ms</p>
+                      <h5 class="speedtest-h5">{{currentTexts.speedtest.Jitter}}</h5>
+                      <p id="jitter" class="speedtest-h5" :class="updateSpeedTestColor(speedTestStatus)">{{speedTest.jitter}} ms</p>
                     </div>
                   </div>
                   <div id="result"></div>

diff --git a/res/style.css b/res/style.css
@@ -92,6 +92,12 @@ footer {
     footer {
         height: 140pt;
     }
+    .speedtest-h5 {
+        font-size: 12px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
 }
 
 .jn-radio {