feat(ui): Improve device card with collapsible device info and table layout

Refactored the device information section in `device_card.html` to use a table for better alignment and readability. Implemented a collapsible section for device details, controlled by a new toggle button and JavaScript function. Enhanced visual hierarchy by bolding the labels within the device info table. Also, updated German translations to include the new "Device Info" string.

Author: IngmarStein

tronbyt_server/static/css/manager.css

@@ -1086,3 +1086,50 @@ button.action.w3-button {
     box-sizing: border-box;
   }
 }
+
+.device-info-toggle {
+  background-color: #f1f1f1;
+  color: #333;
+  cursor: pointer;
+  padding: 10px;
+  width: 100%;
+  border: none;
+  text-align: left;
+  font-size: 0.9375rem;
+  transition: 0.4s;
+}
+
+.device-info-toggle:focus-visible {
+  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.5);
+}
+
+.device-info-toggle:hover {
+  background-color: #ddd;
+}
+
+.device-info-content {
+  padding: 0 15px;
+  overflow: hidden;
+  transition: max-height 0.2s ease-out, padding-top 0.2s ease-out, padding-bottom 0.2s ease-out;
+  max-height: 0;
+}
+
+.device-info-content.is-expanded {
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+
+.device-info-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.device-info-table td:first-child {
+  font-weight: bold;
+}
+
+.device-info-table td {
+  padding: 4px;
+  text-align: left;
+  font-size: 0.9em;
+}

tronbyt_server/static/js/manager.js

@@ -403,6 +403,7 @@ let draggedIname = null;
 document.addEventListener('DOMContentLoaded', function() {
   initializeDragAndDrop();
   initializeViewToggles();
+  initializeDeviceInfoToggles();
 
   const webpImages = document.querySelectorAll('[id^="currentWebp-"]');
   webpImages.forEach(image => {
@@ -426,6 +427,12 @@ function initializeViewToggles() {
   });
 }
 
+function initializeDeviceInfoToggles() {
+  document.querySelectorAll('.device-info-toggle').forEach(button => {
+    button.addEventListener('click', () => toggleDeviceInfo(button));
+  });
+}
+
 function restoreDevicePreferences(deviceId) {
   const prefs = loadDevicePreferences(deviceId);
   const appsList = document.getElementById(`appsList-${deviceId}`);
@@ -903,3 +910,27 @@ function handleDropZoneDrop(e) {
   // Clean up
   zone.classList.remove('active');
 }
+
+function toggleDeviceInfo(button) {
+  const content = document.getElementById(button.getAttribute('aria-controls'));
+  if (!content) {
+    return;
+  }
+  const icon = button.querySelector('i');
+  const isExpanded = button.getAttribute('aria-expanded') === 'true';
+
+  button.setAttribute('aria-expanded', !isExpanded);
+  content.classList.toggle('is-expanded');
+
+  if (!isExpanded) {
+    content.style.maxHeight = content.scrollHeight + "px";
+    if (icon) {
+      icon.classList.replace('fa-chevron-down', 'fa-chevron-up');
+    }
+  } else {
+    content.style.maxHeight = '0px';
+    if (icon) {
+      icon.classList.replace('fa-chevron-up', 'fa-chevron-down');
+    }
+  }
+}

tronbyt_server/templates/partials/device_card.html

@@ -30,24 +30,31 @@ <h1>
             </div>
             <div>{{ _('Currently Displaying App') }}</div>
             <div class="device-info-box">
-              {% if device.info.firmware_version %}
-                <div>{{ _('Firmware Version:') }} {{ device.info.firmware_version }}</div>
-              {% endif %}
-              {% if device.info.firmware_type %}
-                <div>{{ _('Firmware Type:') }} {{ device.info.firmware_type }}</div>
-              {% endif %}
-              {% if device.info.protocol_version %}
-                <div>{{ _('Protocol Version:') }} {{ device.info.protocol_version }}</div>
-              {% endif %}
-              {% if device.info.mac_address %}
-                <div>{{ _('MAC Address:') }} {{ device.info.mac_address }}</div>
-              {% endif %}
-              {% if device.info.protocol_type %}
-                <div>{{ _('Protocol Type:') }} {{ device.info.protocol_type.value }}</div>
-              {% endif %}
-              {% if device.last_seen %}
-                <div>{{ _('Last Seen:') }} {{ device.last_seen.astimezone().strftime('%Y-%m-%d %H:%M:%S') }}</div>
-              {% endif %}
+              <button class="device-info-toggle" aria-expanded="false" aria-controls="device-info-content-{{ device.id }}">
+                <i class="fas fa-chevron-down"></i> {{ _('Device Info') }}
+              </button>
+              <div id="device-info-content-{{ device.id }}" class="device-info-content">
+                <table class="device-info-table">
+                  {% if device.info.firmware_version %}
+                  <tr><td>{{ _('Firmware Version:') }}</td><td>{{ device.info.firmware_version }}</td></tr>
+                  {% endif %}
+                  {% if device.info.firmware_type %}
+                  <tr><td>{{ _('Firmware Type:') }}</td><td>{{ device.info.firmware_type }}</td></tr>
+                  {% endif %}
+                  {% if device.info.protocol_version %}
+                  <tr><td>{{ _('Protocol Version:') }}</td><td>{{ device.info.protocol_version }}</td></tr>
+                  {% endif %}
+                  {% if device.info.mac_address %}
+                  <tr><td>{{ _('MAC Address:') }}</td><td>{{ device.info.mac_address }}</td></tr>
+                  {% endif %}
+                  {% if device.info.protocol_type %}
+                  <tr><td>{{ _('Protocol Type:') }}</td><td>{{ device.info.protocol_type.value }}</td></tr>
+                  {% endif %}
+                  {% if device.last_seen %}
+                  <tr><td>{{ _('Last Seen:') }}</td><td>{{ device.last_seen.astimezone().strftime('%Y-%m-%d %H:%M:%S') }}</td></tr>
+                  {% endif %}
+                </table>
+              </div>
             </div>
           </td>
         </tr>