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,46 @@ 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;
+  outline: none;
+  font-size: 15px;
+  transition: 0.4s;
+}
+
+.device-info-toggle:hover {
+  background-color: #ddd;
+}
+
+.device-info-content {
+  padding: 0 18px;
+  background-color: white;
+  overflow: hidden;
+  transition: max-height 0.2s ease-out;
+}
+
+.device-info-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.device-info-table td:first-child {
+  font-weight: bold;
+}
+
+.device-info-table td {
+  padding: 8px;
+  border: 1px solid #ddd;
+  text-align: left;
+}
+
+.device-info-table tr:nth-child(even) {
+  background-color: #f2f2f2;
+}

tronbyt_server/static/js/manager.js

@@ -903,3 +903,17 @@ function handleDropZoneDrop(e) {
   // Clean up
   zone.classList.remove('active');
 }
+
+function toggleDeviceInfo(button) {
+  const content = button.nextElementSibling;
+  const icon = button.querySelector('i');
+  if (content.style.display === 'none') {
+    content.style.display = 'block';
+    icon.classList.remove('fa-chevron-down');
+    icon.classList.add('fa-chevron-up');
+  } else {
+    content.style.display = 'none';
+    icon.classList.remove('fa-chevron-up');
+    icon.classList.add('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" onclick="toggleDeviceInfo(this)">
+                <i class="fas fa-chevron-down"></i> {{ _('Device Info') }}
+              </button>
+              <div class="device-info-content" style="display: none;">
+                <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>