From 57fffc8b6088846cf0d7b0757258da83b6c2b9ca Mon Sep 17 00:00:00 2001
From: Benedikt Seeger <benedikt.seeger@ptb.de>
Date: Fri, 21 Mar 2025 11:29:54 +0100
Subject: [PATCH] ui changes
---
src/app.js | 18 ++-
src/renderers/MeasurementRenderer.js | 96 +++++++++-----
src/styles.css | 186 +++++++++++++++++++++++++++
3 files changed, 265 insertions(+), 35 deletions(-)
diff --git a/src/app.js b/src/app.js
index a4a70e5..9d84ab6 100644
--- a/src/app.js
+++ b/src/app.js
@@ -56,12 +56,18 @@ export function init(xmlStr, options = {}) {
// Mapping for custom option text with flag symbols for language codes
const languageOptionText = {
- de: '๐ฉ๐ช DE Sprache wechseln',
- en: '๐บ๐ธ EN Change Language',
- fr: '๐ซ๐ท FR Changer de langue',
- es: '๐ช๐ธ ES Cambiar idioma',
- ru: '๐ท๐บ RU ะะทะผะตะฝะธัั ัะทัะบ',
- cn: '๐จ๐ณ CN ๅๆข่ฏญ่จ'
+ de: '๐ฉ๐ช DE Sprache',
+ en: '๐ฌ๐ง EN Language', // Updated: UK flag instead of US
+ fr: '๐ซ๐ท FR Langue',
+ es: '๐ช๐ธ ES Idioma',
+ ru: '๐ท๐บ RU ัะทัะบ',
+ cn: '๐จ๐ณ CN ่ฏญ่จ',
+ dk: '๐ฉ๐ฐ DK Sprog',
+ nl: '๐ณ๐ฑ NL Taal',
+ se: '๐ธ๐ช SE Sprรฅk',
+ no: '๐ณ๐ด NO Sprรฅk',
+ fi: '๐ซ๐ฎ FI Kieli',
+ it: '๐ฎ๐น IT Lingua'
};
languages.forEach(lang => {
diff --git a/src/renderers/MeasurementRenderer.js b/src/renderers/MeasurementRenderer.js
index 7608a19..9ae973d 100644
--- a/src/renderers/MeasurementRenderer.js
+++ b/src/renderers/MeasurementRenderer.js
@@ -249,30 +249,68 @@ export function renderSingleMeasurementResult(resultObj, language, tabPanel) {
return headerText;
});
- // Create scaling toggles and X-axis selector controls
+// Create scaling toggles and X-axis selector controls
+
+// === Helper function to create a mobile-friendly toggle switch ===
+ function createToggleSwitch(id, labelText) {
+ const switchContainer = document.createElement('div');
+ switchContainer.classList.add('toggle-switch-container');
+
+ // The label acts as the clickable area
+ const toggleSwitch = document.createElement('label');
+ toggleSwitch.classList.add('toggle-switch');
+ toggleSwitch.htmlFor = id;
+
+ const checkbox = document.createElement('input');
+ checkbox.type = 'checkbox';
+ checkbox.id = id;
+
+ const slider = document.createElement('span');
+ slider.classList.add('slider');
+
+ toggleSwitch.appendChild(checkbox);
+ toggleSwitch.appendChild(slider);
+
+ const switchLabel = document.createElement('span');
+ switchLabel.textContent = labelText;
+ switchLabel.classList.add('toggle-label');
+
+ switchContainer.appendChild(toggleSwitch);
+ switchContainer.appendChild(switchLabel);
+
+ return switchContainer;
+ }
+
+// === Build the control elements ===
+// --- 1. Scaling toggles (Log-scale X and Y) ---
+
+// Container for scaling controls
const scalingContainer = document.createElement('div');
- scalingContainer.innerHTML = '<strong>Scaling:</strong> ';
- const logXToggle = document.createElement('input');
- logXToggle.type = 'checkbox';
- logXToggle.id = 'logXToggle';
- const logXLabel = document.createElement('label');
- logXLabel.htmlFor = 'logXToggle';
- logXLabel.textContent = 'Log X';
- scalingContainer.appendChild(logXToggle);
- scalingContainer.appendChild(logXLabel);
- const logYToggle = document.createElement('input');
- logYToggle.type = 'checkbox';
- logYToggle.id = 'logYToggle';
- const logYLabel = document.createElement('label');
- logYLabel.htmlFor = 'logYToggle';
- logYLabel.textContent = 'Log Y';
- scalingContainer.appendChild(logYToggle);
- scalingContainer.appendChild(logYLabel);
+ scalingContainer.classList.add('mobile-control');
+ scalingContainer.innerHTML = '<strong>Log-Axis Scaling:</strong> ';
+
+// Flex container for side-by-side toggle switches
+ const scalingToggles = document.createElement('div');
+ scalingToggles.style.display = 'flex';
+ scalingToggles.style.flexWrap = 'wrap';
+ scalingToggles.style.gap = '10px';
+
+// Create toggle switch for Log-scale X
+ const logXSwitch = createToggleSwitch('logXToggle', 'X');
+// Create toggle switch for Log-scale Y
+ const logYSwitch = createToggleSwitch('logYToggle', 'Y');
+
+ scalingToggles.appendChild(logXSwitch);
+ scalingToggles.appendChild(logYSwitch);
+ scalingContainer.appendChild(scalingToggles);
tabPanel.appendChild(scalingContainer);
+// --- 2. X-axis selector controls (Radio buttons) ---
+
const xAxisContainer = document.createElement('div');
- // Change header text for X-axis selector column
- xAxisContainer.innerHTML = '<strong>Frequency in Hz (selected X):</strong> ';
+ xAxisContainer.classList.add('mobile-control');
+ xAxisContainer.innerHTML = '<strong>Select X-Axis</strong> ';
+
indexQuantities.forEach((q, idx) => {
let nameStr = q.getName(language) || ('Index ' + idx);
const radio = document.createElement('input');
@@ -280,24 +318,24 @@ export function renderSingleMeasurementResult(resultObj, language, tabPanel) {
radio.name = 'xAxisSelect';
radio.value = idx;
if (idx === 0) { radio.checked = true; }
+ // Optionally add a class for further styling:
+ radio.classList.add('mobile-radio');
+
const label = document.createElement('label');
label.textContent = nameStr;
label.style.marginRight = '10px';
+
xAxisContainer.appendChild(radio);
xAxisContainer.appendChild(label);
});
tabPanel.appendChild(xAxisContainer);
- // Change tolerance toggle label to "Show conformity limits"
- const toleranceToggle = document.createElement('input');
- toleranceToggle.type = 'checkbox';
- toleranceToggle.id = 'toleranceToggle';
- const tolLabel = document.createElement('label');
- tolLabel.htmlFor = 'toleranceToggle';
- tolLabel.textContent = ' Show conformity limits';
+// --- 3. Tolerance toggle switch ("Show conformity limits") ---
+
const tolContainer = document.createElement('div');
- tolContainer.appendChild(toleranceToggle);
- tolContainer.appendChild(tolLabel);
+ tolContainer.classList.add('mobile-control');
+ const toleranceSwitch = createToggleSwitch('toleranceToggle', 'Conformity limits');
+ tolContainer.appendChild(toleranceSwitch);
tabPanel.appendChild(tolContainer);
// Create containers for plots and table, add extra spacing between them.
diff --git a/src/styles.css b/src/styles.css
index 39c419b..458b2bc 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -54,4 +54,190 @@ th, td {
font-size: 18px; /* Slightly larger on mobile devices */
padding: 10px;
}
+}
+
+/* Container for the entire toggle switch and its descriptive text */
+.toggle-switch-container {
+ display: flex;
+ align-items: center;
+ margin-right: 20px;
+}
+
+/* The toggle switch itself */
+.toggle-switch {
+ position: relative;
+ display: inline-block;
+ width: 60px;
+ height: 30px;
+ margin-right: 10px;
+}
+
+/* Hide default checkbox */
+.toggle-switch input {
+ opacity: 0;
+ width: 0;
+ height: 0;
+}
+
+/* The slider (background) */
+.slider {
+ position: absolute;
+ cursor: pointer;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: #ccc;
+ transition: .4s;
+ border-radius: 30px;
+}
+
+/* The circle inside the slider */
+.slider:before {
+ position: absolute;
+ content: "";
+ height: 24px;
+ width: 24px;
+ left: 3px;
+ bottom: 3px;
+ background-color: white;
+ transition: .4s;
+ border-radius: 50%;
+}
+
+/* When the checkbox is checked, change background */
+.toggle-switch input:checked + .slider {
+ background-color: #2196F3;
+}
+
+/* Move the circle when checked */
+.toggle-switch input:checked + .slider:before {
+ transform: translateX(30px);
+}
+
+/* Optional focus style */
+.toggle-switch input:focus + .slider {
+ box-shadow: 0 0 1px #2196F3;
+}
+
+/* Adjust font size and spacing for the descriptive label */
+.toggle-label {
+ font-size: 16px;
+ cursor: pointer;
+}
+
+/* Increase sizes for smaller screens */
+@media (max-width: 600px) {
+ .toggle-switch {
+ width: 70px;
+ height: 35px;
+ }
+ .slider:before {
+ height: 28px;
+ width: 28px;
+ left: 3px;
+ bottom: 3px;
+ }
+ .toggle-label {
+ font-size: 18px;
+ }
+}
+
+.mobile-control {
+ font-size: 16px;
+ padding: 10px;
+ margin-bottom: 10px;
+ width: 100%;
+ box-sizing: border-box;
+}
+
+/* Container for the entire toggle switch and its descriptive text */
+.toggle-switch-container {
+ display: flex;
+ align-items: center;
+ margin-right: 20px;
+}
+
+/* The toggle switch itself */
+.toggle-switch {
+ position: relative;
+ display: inline-block;
+ width: 60px;
+ height: 30px;
+ margin-right: 10px;
+}
+
+/* Hide the default checkbox */
+.toggle-switch input {
+ opacity: 0;
+ width: 0;
+ height: 0;
+}
+
+/* The slider (background) */
+.slider {
+ position: absolute;
+ cursor: pointer;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: #ccc;
+ transition: .4s;
+ border-radius: 30px;
+}
+
+/* The circle inside the slider */
+.slider:before {
+ position: absolute;
+ content: "";
+ height: 24px;
+ width: 24px;
+ left: 3px;
+ bottom: 3px;
+ background-color: white;
+ transition: .4s;
+ border-radius: 50%;
+}
+
+/* When checked, change background color */
+.toggle-switch input:checked + .slider {
+ background-color: #2196F3;
+}
+
+/* Move the circle when checked */
+.toggle-switch input:checked + .slider:before {
+ transform: translateX(30px);
+}
+
+/* Focus style for accessibility */
+.toggle-switch input:focus + .slider {
+ box-shadow: 0 0 1px #2196F3;
+}
+
+/* Label for toggle switch */
+.toggle-label {
+ font-size: 16px;
+ cursor: pointer;
+}
+
+/* Increase sizes on smaller screens */
+@media (max-width: 600px) {
+ .mobile-control {
+ font-size: 18px;
+ padding: 12px;
+ }
+ .toggle-switch {
+ width: 70px;
+ height: 35px;
+ }
+ .slider:before {
+ height: 28px;
+ width: 28px;
+ left: 3px;
+ bottom: 3px;
+ }
+ .toggle-label {
+ font-size: 18px;
+ }
}
\ No newline at end of file
--
GitLab