editor.py aktualisiert

editor.py

@@ -1355,7 +1355,85 @@ th { color:var(--color-text-muted); font-weight:normal; }
 .spinner { width:54px; height:54px; border:5px solid var(--color-control-hover); border-top-color:var(--color-white); border-radius:50%; animation:spin .8s linear infinite; }
 @keyframes spin { to { transform:rotate(360deg); } }
 @media(max-width:900px) { .filter-bar { grid-template-columns:1fr 1fr; } .filter-bar .search { grid-column:auto; } }
-@media(max-width:800px) { body { padding:12px; } table,thead,tbody,tr,th,td { display:block; } thead { display:none; } tr { padding:10px 0; border-bottom:1px solid var(--color-border); } td { border:0; padding:5px 0; } }
+@media(max-width:800px) {
+  body { padding:12px; }
+
+  .recordings-table, .recordings-table tbody, .recordings-table tr, .recordings-table td,
+  .finished-table, .finished-table tbody, .finished-table tr, .finished-table td {
+    display:block;
+  }
+
+  .recordings-table, .finished-table {
+    background:transparent;
+  }
+
+  .recordings-table thead, .finished-table thead { display:none; }
+
+  .recordings-table tbody, .finished-table tbody {
+    display:grid;
+    gap:12px;
+  }
+
+  .recordings-table tr, .finished-table tr {
+    padding:12px 14px;
+    border:1px solid var(--color-border);
+    border-radius:12px;
+    background:var(--color-surface);
+    box-shadow:0 2px 8px var(--color-shadow);
+  }
+
+  .recordings-table td, .finished-table td {
+    display:grid;
+    grid-template-columns:92px minmax(0,1fr);
+    gap:10px;
+    align-items:baseline;
+    border:0;
+    padding:7px 0;
+    min-width:0;
+  }
+
+  .recordings-table td::before, .finished-table td::before {
+    color:var(--color-text-muted);
+    font-size:11px;
+    font-weight:600;
+    text-transform:uppercase;
+    letter-spacing:.04em;
+  }
+
+  .recordings-table td:nth-child(1)::before { content:"Dateiname"; }
+  .recordings-table td:nth-child(2)::before { content:"Größe"; }
+  .recordings-table td:nth-child(3)::before { content:"Dauer"; }
+  .recordings-table td:nth-child(4) {
+    display:block;
+    padding-top:9px;
+    border-top:1px solid var(--color-border-subtle);
+    margin-top:4px;
+  }
+  .recordings-table td:nth-child(4)::before { content:none; }
+
+  .finished-table td:nth-child(1)::before { content:"Zeitpunkt"; }
+  .finished-table td:nth-child(2)::before { content:"Redner"; }
+  .finished-table td:nth-child(3)::before { content:"Beschreibung"; }
+  .finished-table td:nth-child(4)::before { content:"Veranstaltung"; }
+  .finished-table td:nth-child(5)::before { content:"Dauer"; }
+  .finished-table td:nth-child(6) {
+    display:block;
+    padding-top:9px;
+    border-top:1px solid var(--color-border-subtle);
+    margin-top:4px;
+  }
+  .finished-table td:nth-child(6)::before { content:none; }
+
+  .recordings-table .actions, .finished-table .actions {
+    display:flex;
+    gap:7px;
+    flex-wrap:wrap;
+  }
+
+  .recordings-table .button, .finished-table .button {
+    margin:0;
+  }
+}
 </style>
 </head>
 <body>
@@ -1376,7 +1454,7 @@ th { color:var(--color-text-muted); font-weight:normal; }
   <div class="upload-progress" id="uploadProgress"><div class="upload-progress-bar" id="uploadProgressBar"></div></div>
 </div>
 {% if recordings %}
-<table>
+<table class="recordings-table">
 <thead><tr><th>Dateiname</th><th>Größe</th><th>Dauer</th><th></th></tr></thead>
 <tbody>
 {% for item in recordings %}
@@ -1410,7 +1488,7 @@ th { color:var(--color-text-muted); font-weight:normal; }
 </div>
 <div class="filter-info" id="filterInfo"></div>
 {% if finished %}
-<table id="finishedTable">
+<table id="finishedTable" class="finished-table">
 <thead><tr><th>Zeitpunkt</th><th>Redner</th><th>Beschreibung</th><th>Veranstaltung</th><th>Dauer</th><th></th></tr></thead>
 <tbody>
 {% for item in finished %}