asdasd

partials/landing/main/material-matrix.php

@@ -15,7 +15,7 @@ $app->assets()->addScript('/assets/app.js', 'footer', true);
   </header>
 
   <div class="mm-card">
-    <aside class="mm-sidebar">
+    <aside class="mm-sidebar mm-sidebar--top">
       <div class="mm-panel">
         <h2>Drucker auswählen</h2>
         <label for="printerSelect">Einzelansicht</label>
@@ -48,8 +48,8 @@ $app->assets()->addScript('/assets/app.js', 'footer', true);
               <th>Platte</th>
               <th>Zusatz</th>
               <th>Anwendung</th>
-              <th>Kinder</th>
-              <th>Emission</th>
+              <th>Kinder <span aria-hidden="true">👶</span></th>
+              <th>Emission <span aria-hidden="true">🌫️</span></th>
             </tr>
           </thead>
           <tbody id="matBody"></tbody>

public/assets/app.css

@@ -71,8 +71,8 @@
 }
 
 .mm-card {
-  display: grid;
-  grid-template-columns: 280px 1fr;
+  display: flex;
+  flex-direction: column;
   gap: 1.5rem;
   background: var(--card);
   border: 1px solid var(--line);
@@ -85,8 +85,8 @@
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
-  border-right: 1px dashed var(--line);
-  padding-right: 1.5rem;
+  border-bottom: 1px dashed var(--line);
+  padding-bottom: 1.5rem;
 }
 
 .mm-panel h2 {
@@ -218,13 +218,7 @@
 }
 
 @media (max-width: 980px) {
-  .mm-card {
-    grid-template-columns: 1fr;
-  }
   .mm-sidebar {
-    border-right: none;
-    border-bottom: 1px dashed var(--line);
-    padding-right: 0;
     padding-bottom: 1rem;
   }
 }

public/assets/app.js

@@ -112,8 +112,8 @@
       'Platte',
       'Zusatz',
       'Anwendung',
-      'Kinder',
-      'Emission'
+      'Kinder <span aria-hidden="true">👶</span>',
+      'Emission <span aria-hidden="true">🌫️</span>'
     ].map(label => `<th>${label}</th>`).join('');
 
     let printerCols = '';
@@ -139,8 +139,12 @@
       const tr = document.createElement('tr');
       tr.className = idx % 2 === 0 ? '' : 'is-alt';
 
-      const kid = m.kid_safety === 'safe' ? 'grün' : (m.kid_safety === 'limited' ? 'gelb' : 'rot');
-      const em = m.emission === 'low' ? 'niedrig' : (m.emission === 'medium' ? 'mittel' : 'hoch');
+      const kid = m.kid_safety === 'safe'
+        ? { icon: '🌿', text: 'sicher' }
+        : (m.kid_safety === 'limited' ? { icon: '🟡', text: 'eingeschränkt' } : { icon: '🔴', text: 'nicht geeignet' });
+      const em = m.emission === 'low'
+        ? { icon: '✅', text: 'niedrig' }
+        : (m.emission === 'medium' ? { icon: '⚠️', text: 'mittel' } : { icon: '⛔', text: 'hoch' });
 
       let html = '';
       html += `<td><strong>${escapeHtml(m.code)}</strong><div class="mm-sub">${escapeHtml(m.short_desc || '')}</div></td>`;
@@ -150,8 +154,8 @@
       html += `<td>${escapeHtml(m.plate_req || '')}</td>`;
       html += `<td>${escapeHtml(m.extra_req || '')}</td>`;
       html += `<td>${escapeHtml(m.application || '')}</td>`;
-      html += `<td>${escapeHtml(kid)}</td>`;
-      html += `<td>${escapeHtml(em)}</td>`;
+      html += `<td title="${escapeHtml(kid.text)}">${kid.icon}</td>`;
+      html += `<td title="${escapeHtml(em.text)}">${em.icon}</td>`;
 
       datasets.forEach(ds => {
         const printerId = ds && ds.printer ? ds.printer.id : '';