ui changes

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 => {

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.

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