Warenwirtschaft: AP-33a — Abwicklungs-Tabelle kompakter (Namen gekürzt, Positionen ans Ende)

Kundenname mit Ellipsis begrenzt (150px, iPad 110px; voller Name als Tooltip),
Zellen-Padding reduziert, Positionen-Toggle als schmale letzte Spalte —
zusammen mit den Aktionen rechts angepinnt, beim Scrollen bleibt beides sichtbar.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Kevin Adametz 2026-07-16 11:56:31 +00:00
parent 4c73e64446
commit c21cc63428

View file

@ -4,19 +4,40 @@
@include('admin.inventory.partials.wawi-ui')
<style>
/* AP-33a: iPad-Optimierung — Aktionen bleiben beim horizontalen Scrollen sichtbar */
/* AP-33a: iPad-Optimierung — Positionen (letzte Spalte) und Aktionen bleiben
beim horizontalen Scrollen rechts angepinnt, alles andere ist kompakt. */
#of-table th, #of-table td { padding: .45rem .5rem; }
#of-table td { vertical-align: middle; }
#of-table th.of-pos,
#of-table td.of-pos {
position: sticky;
right: 0;
width: 56px;
min-width: 56px;
background: #fff;
text-align: center;
}
#of-table th.of-actions,
#of-table td.of-actions {
position: sticky;
right: 0;
right: 56px;
background: #fff;
box-shadow: -6px 0 6px -6px rgba(24, 28, 33, .15);
white-space: nowrap;
}
#of-table td { vertical-align: middle; }
#of-table td.of-customer { max-width: 150px; }
#of-table td.of-customer .wawi-item-name {
display: inline-block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: bottom;
}
@media (max-width: 1199.98px) {
.of-btn-text { display: none; }
#of-table .btn .mr-1 { margin-right: 0 !important; }
#of-table td.of-customer { max-width: 110px; }
}
</style>
@ -82,10 +103,10 @@
<tr>
<th>{{ __('Bestellung') }}</th>
<th>{{ __('Kunde') }}</th>
<th class="text-center">{{ __('Positionen') }}</th>
<th>{{ __('Status') }}</th>
<th>{{ __('Dokumente') }}</th>
<th class="text-right of-actions">{{ __('Aktionen') }}</th>
<th class="of-pos" title="{{ __('Positionen') }}">{{ __('Pos.') }}</th>
</tr>
</thead>
<tbody>
@ -110,17 +131,12 @@
@endif
<div class="small text-muted">{{ $order->created_at->format('d.m.Y H:i') }}</div>
</td>
<td>
<td class="of-customer" title="{{ $customer }}">
<span class="wawi-item-name">{{ $customer !== '' ? $customer : '—' }}</span>
@if ($order->shipping_country?->country)
<span class="text-muted small">{{ strtoupper($order->shipping_country->country->code) }}</span>
@endif
</td>
<td class="text-center">
<button type="button" class="btn btn-sm btn-link p-0 js-of-toggle" data-target="of-items-{{ $order->id }}">
{{ $itemCount }} <span class="fas fa-chevron-down small"></span>
</button>
</td>
<td>
@if ((int) $order->shipped === 0)
<span class="wawi-pill wawi-pill--warning">{{ __('offen') }}</span>
@ -187,6 +203,11 @@
</form>
@endif
</td>
<td class="of-pos">
<button type="button" class="btn btn-sm btn-link p-0 js-of-toggle" data-target="of-items-{{ $order->id }}" title="{{ __('Packliste anzeigen') }}">
{{ $itemCount }} <span class="fas fa-chevron-down small"></span>
</button>
</td>
</tr>
<tr class="of-items d-none" id="of-items-{{ $order->id }}">
<td colspan="6" class="pl-4" style="background:rgba(24,28,33,.02);">