fix:수당정산 필터 flex-wrap 레이아웃으로 변경
사이드바로 인해 grid 열이 깨지는 문제 해결. flex-wrap으로 변경하여 PC에서 한 줄, 모바일에서 2열 자동 배치. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -2,9 +2,8 @@
|
||||
<div class="bg-white rounded-lg shadow-sm p-4 mb-6">
|
||||
<form id="filter-form" method="GET" action="{{ route('finance.settlement') }}">
|
||||
<input type="hidden" name="tab" value="commission">
|
||||
<div class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-8 gap-3">
|
||||
{{-- 년도 --}}
|
||||
<div>
|
||||
<div class="flex flex-wrap items-end gap-3">
|
||||
<div class="w-[calc(50%-6px)] sm:w-auto sm:min-w-[100px]">
|
||||
<label class="block text-xs font-medium text-gray-500 mb-1">년도</label>
|
||||
<select name="year" class="w-full rounded-lg border-gray-300 text-sm focus:border-emerald-500 focus:ring-emerald-500">
|
||||
@for ($y = now()->year - 2; $y <= now()->year + 1; $y++)
|
||||
@@ -13,8 +12,7 @@
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{{-- 월 --}}
|
||||
<div>
|
||||
<div class="w-[calc(50%-6px)] sm:w-auto sm:min-w-[80px]">
|
||||
<label class="block text-xs font-medium text-gray-500 mb-1">월</label>
|
||||
<select name="month" class="w-full rounded-lg border-gray-300 text-sm focus:border-emerald-500 focus:ring-emerald-500">
|
||||
@for ($m = 1; $m <= 12; $m++)
|
||||
@@ -23,8 +21,7 @@
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{{-- 상태 --}}
|
||||
<div>
|
||||
<div class="w-[calc(50%-6px)] sm:w-auto sm:min-w-[100px]">
|
||||
<label class="block text-xs font-medium text-gray-500 mb-1">상태</label>
|
||||
<select name="status" class="w-full rounded-lg border-gray-300 text-sm focus:border-emerald-500 focus:ring-emerald-500">
|
||||
<option value="">전체</option>
|
||||
@@ -35,8 +32,7 @@
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{{-- 입금구분 --}}
|
||||
<div>
|
||||
<div class="w-[calc(50%-6px)] sm:w-auto sm:min-w-[100px]">
|
||||
<label class="block text-xs font-medium text-gray-500 mb-1">입금구분</label>
|
||||
<select name="payment_type" class="w-full rounded-lg border-gray-300 text-sm focus:border-emerald-500 focus:ring-emerald-500">
|
||||
<option value="">전체</option>
|
||||
@@ -45,8 +41,7 @@
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{{-- 영업파트너 --}}
|
||||
<div>
|
||||
<div class="w-[calc(50%-6px)] sm:w-auto sm:flex-1 sm:min-w-[120px]">
|
||||
<label class="block text-xs font-medium text-gray-500 mb-1">영업파트너</label>
|
||||
<select name="partner_id" class="w-full rounded-lg border-gray-300 text-sm focus:border-emerald-500 focus:ring-emerald-500">
|
||||
<option value="">전체</option>
|
||||
@@ -58,8 +53,7 @@
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{{-- 수당유형 --}}
|
||||
<div>
|
||||
<div class="w-[calc(50%-6px)] sm:w-auto sm:min-w-[110px]">
|
||||
<label class="block text-xs font-medium text-gray-500 mb-1">수당유형</label>
|
||||
<select name="commission_type" class="w-full rounded-lg border-gray-300 text-sm focus:border-emerald-500 focus:ring-emerald-500">
|
||||
<option value="">전체</option>
|
||||
@@ -69,10 +63,9 @@
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{{-- 버튼 --}}
|
||||
<div class="flex items-end gap-1 col-span-2 sm:col-span-2 lg:col-span-2">
|
||||
<div class="flex items-end gap-1 w-full sm:w-auto">
|
||||
<button type="submit"
|
||||
class="flex-1 px-3 py-2 bg-emerald-600 hover:bg-emerald-700 text-white text-sm rounded-lg transition-colors">
|
||||
class="flex-1 sm:flex-none px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white text-sm rounded-lg transition-colors">
|
||||
조회
|
||||
</button>
|
||||
<a href="{{ route('finance.settlement') }}"
|
||||
|
||||
Reference in New Issue
Block a user