fix(frontend): mobile responsive document list — hide table columns + card padding
- DocumentTable: 분류/타입/크기 컬럼 모바일 숨김 (hidden md:flex/block) - DocumentCard: gap/padding 축소 (gap-2 p-2 sm:gap-3 sm:p-3), data_origin 모바일 숨김, 태그 모바일 1개 - 검색바: 검색모드 select 모바일 숨김, AI답변 텍스트 모바일 숨김 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -104,7 +104,7 @@
|
||||
<div class="w-1 shrink-0 rounded-l-lg" style="background: {domainColor}"></div>
|
||||
|
||||
<!-- 콘텐츠 -->
|
||||
<div class="flex items-start gap-3 p-3 flex-1 min-w-0 {selectable ? 'pl-8' : ''}">
|
||||
<div class="flex items-start gap-2 p-2 sm:gap-3 sm:p-3 flex-1 min-w-0 {selectable ? 'pl-8' : ''}">
|
||||
<!-- 포맷 아이콘 -->
|
||||
<div class="shrink-0 mt-0.5 text-dim group-hover:text-accent">
|
||||
<FormatIcon format={doc.file_format} size={18} />
|
||||
@@ -126,7 +126,7 @@
|
||||
{/if}
|
||||
{#if doc.ai_tags?.length}
|
||||
<div class="flex gap-1">
|
||||
{#each doc.ai_tags.slice(0, 3) as tag}
|
||||
{#each doc.ai_tags.slice(0, isDesktop ? 3 : 1) as tag}
|
||||
<TagPill {tag} />
|
||||
{/each}
|
||||
</div>
|
||||
@@ -143,7 +143,7 @@
|
||||
<span class="text-accent font-medium">{(doc.score * 100).toFixed(0)}%</span>
|
||||
{/if}
|
||||
{#if doc.data_origin}
|
||||
<span class="px-1.5 py-0.5 rounded {doc.data_origin === 'work' ? 'bg-blue-900/30 text-blue-400' : 'bg-gray-800 text-gray-400'}">
|
||||
<span class="hidden sm:inline px-1.5 py-0.5 rounded {doc.data_origin === 'work' ? 'bg-blue-900/30 text-blue-400' : 'bg-gray-800 text-gray-400'}">
|
||||
{doc.data_origin}
|
||||
</span>
|
||||
{/if}
|
||||
|
||||
@@ -108,9 +108,9 @@
|
||||
|
||||
const columns = [
|
||||
{ key: 'title', label: '이름', flex: 'flex-1' },
|
||||
{ key: 'ai_domain', label: '분류', width: 'w-48' },
|
||||
{ key: 'document_type', label: '타입', width: 'w-24' },
|
||||
{ key: 'file_size', label: '크기', width: 'w-20' },
|
||||
{ key: 'ai_domain', label: '분류', width: 'w-48', hideOnMobile: true },
|
||||
{ key: 'document_type', label: '타입', width: 'w-24', hideOnMobile: true },
|
||||
{ key: 'file_size', label: '크기', width: 'w-20', hideOnMobile: true },
|
||||
{ key: 'created_at', label: '등록일', width: 'w-20' },
|
||||
];
|
||||
</script>
|
||||
@@ -124,7 +124,7 @@
|
||||
{#each columns as col}
|
||||
<button
|
||||
onclick={() => toggleSort(col.key)}
|
||||
class="flex items-center gap-1 {col.flex || col.width || ''} px-1 hover:text-text transition-colors text-left"
|
||||
class="{col.hideOnMobile ? 'hidden md:flex' : 'flex'} items-center gap-1 {col.flex || col.width || ''} px-1 hover:text-text transition-colors text-left"
|
||||
>
|
||||
{col.label}
|
||||
{#if sortKey === col.key}
|
||||
@@ -168,16 +168,16 @@
|
||||
<FormatIcon format={doc.file_format} size={14} />
|
||||
<span class="{rowTextClass} truncate group-hover:text-accent">{doc.title || '제목 없음'}</span>
|
||||
</div>
|
||||
<!-- 분류 -->
|
||||
<div class="w-48 text-[10px] text-dim truncate">
|
||||
<!-- 분류 (모바일 숨김) -->
|
||||
<div class="hidden md:block w-48 text-[10px] text-dim truncate">
|
||||
{doc.ai_domain?.replace('Industrial_Safety/', 'IS/') || '-'}
|
||||
</div>
|
||||
<!-- 타입 -->
|
||||
<div class="w-24 text-[10px] text-dim">
|
||||
<!-- 타입 (모바일 숨김) -->
|
||||
<div class="hidden md:block w-24 text-[10px] text-dim">
|
||||
{doc.document_type || doc.file_format?.toUpperCase() || '-'}
|
||||
</div>
|
||||
<!-- 크기 -->
|
||||
<div class="w-20 text-[10px] text-dim text-right">
|
||||
<!-- 크기 (모바일 숨김) -->
|
||||
<div class="hidden md:block w-20 text-[10px] text-dim text-right">
|
||||
{formatSize(doc.file_size)}
|
||||
</div>
|
||||
<!-- 등록일 -->
|
||||
|
||||
@@ -434,7 +434,7 @@
|
||||
<select
|
||||
bind:value={searchMode}
|
||||
onchange={() => { if (searchQuery) submitSearch(); }}
|
||||
class="px-2 py-1.5 bg-[var(--surface)] border border-[var(--border)] rounded-lg text-[var(--text)] text-xs"
|
||||
class="hidden sm:block px-2 py-1.5 bg-[var(--surface)] border border-[var(--border)] rounded-lg text-[var(--text)] text-xs"
|
||||
>
|
||||
<option value="hybrid">하이브리드</option>
|
||||
<option value="fts">전문검색</option>
|
||||
@@ -447,7 +447,7 @@
|
||||
class="flex items-center gap-1 px-2.5 py-1.5 rounded-lg border border-default text-dim hover:text-accent hover:border-accent transition-colors text-xs"
|
||||
title="이 쿼리로 AI 답변 보기"
|
||||
>
|
||||
<Sparkles size={14} /> AI 답변
|
||||
<Sparkles size={14} /> <span class="hidden sm:inline">AI 답변</span>
|
||||
</a>
|
||||
{/if}
|
||||
<button
|
||||
|
||||
Reference in New Issue
Block a user