style(dispatch): 카드 상단 여백 제거 — 로고를 우상단 absolute 배치

큰 로고가 flex 헤더 줄 높이를 키워 No.1 위에 빈 띠가 생기던 문제 수정.
로고/텍스트 배지를 카드 우상단으로 absolute 처리해 줄 높이에 영향 없게 함.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-06-19 16:23:19 +09:00
parent dfe79878b1
commit 31eaac8424
@@ -7,8 +7,10 @@
.dsp-search { flex:1 1 220px;min-width:180px; } .dsp-search { flex:1 1 220px;min-width:180px; }
.dsp-cards { display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px; } .dsp-cards { display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px; }
.dsp-card { border:1px solid #e2e8f0;border-radius:12px;padding:14px;background:#fff;display:flex;flex-direction:column;gap:10px; } .dsp-card { border:1px solid #e2e8f0;border-radius:12px;padding:14px;background:#fff;display:flex;flex-direction:column;gap:10px; }
.dsp-card { position:relative; }
.dsp-card.is-done { border-color:#86efac;background:#f0fdf4; } .dsp-card.is-done { border-color:#86efac;background:#f0fdf4; }
.dsp-no { font-size:20px;font-weight:700;color:#0f172a; } .dsp-no { font-size:20px;font-weight:700;color:#0f172a; }
.dsp-courier-text { position:absolute;top:12px;right:14px; }
.dsp-meta { font-size:13px;line-height:1.5;color:#334155;word-break:break-all; } .dsp-meta { font-size:13px;line-height:1.5;color:#334155;word-break:break-all; }
.dsp-meta b { color:#0f172a; } .dsp-meta b { color:#0f172a; }
.dsp-items { list-style:none;margin:0;padding:8px 0;border-top:1px dashed #e2e8f0;border-bottom:1px dashed #e2e8f0; } .dsp-items { list-style:none;margin:0;padding:8px 0;border-top:1px dashed #e2e8f0;border-bottom:1px dashed #e2e8f0; }
@@ -21,7 +23,7 @@
.dsp-btn-status small { display:block;font-size:10px;font-weight:500;opacity:.8; } .dsp-btn-status small { display:block;font-size:10px;font-weight:500;opacity:.8; }
.dsp-btn-status.on { background:#16a34a;border-color:#16a34a;color:#fff; } .dsp-btn-status.on { background:#16a34a;border-color:#16a34a;color:#fff; }
.dsp-btn-status:disabled { opacity:.6;cursor:wait; } .dsp-btn-status:disabled { opacity:.6;cursor:wait; }
.dsp-courier { height:44px;width:auto;max-width:280px;display:block; } .dsp-courier { position:absolute;top:12px;right:14px;height:44px;width:auto;max-width:180px; }
.dsp-hidden { display:none !important; } .dsp-hidden { display:none !important; }
@media (max-width:480px){ .dsp-cards{grid-template-columns:1fr;} } @media (max-width:480px){ .dsp-cards{grid-template-columns:1fr;} }
</style> </style>
@@ -61,15 +63,13 @@
data-handed_to_kagayaku="{{ p.handed_to_kagayaku|lower }}" data-handed_to_kagayaku="{{ p.handed_to_kagayaku|lower }}"
data-courier_scanned="{{ p.courier_scanned|lower }}" data-courier_scanned="{{ p.courier_scanned|lower }}"
data-search="{{ (p.order_id ~ ' ' ~ p.package_id ~ ' ' ~ p.tracking_id ~ ' ' ~ (p['items']|map(attribute='seller_sku')|join(' ')))|lower }}"> data-search="{{ (p.order_id ~ ' ' ~ p.package_id ~ ' ' ~ p.tracking_id ~ ' ' ~ (p['items']|map(attribute='seller_sku')|join(' ')))|lower }}">
<div style="display:flex;justify-content:space-between;align-items:baseline;">
<span class="dsp-no">No. {{ p.seq }}</span>
{% set logo = p.shipping_provider | courier_logo %} {% set logo = p.shipping_provider | courier_logo %}
{% if logo %} {% if logo %}
<img class="dsp-courier" src="{{ logo }}" alt="{{ p.shipping_provider }}" title="{{ p.shipping_provider }}" /> <img class="dsp-courier" src="{{ logo }}" alt="{{ p.shipping_provider }}" title="{{ p.shipping_provider }}" />
{% elif p.shipping_provider %} {% elif p.shipping_provider %}
<span class="erp-badge">{{ p.shipping_provider }}</span> <span class="dsp-courier-text erp-badge">{{ p.shipping_provider }}</span>
{% endif %} {% endif %}
</div> <div class="dsp-no">No. {{ p.seq }}</div>
<div class="dsp-meta"> <div class="dsp-meta">
<div><b>Order</b> {{ p.order_id or '—' }}</div> <div><b>Order</b> {{ p.order_id or '—' }}</div>
<div><b>Package</b> {{ p.package_id or '—' }}</div> <div><b>Package</b> {{ p.package_id or '—' }}</div>