From 243fffc1269ad9a557ac3917f1246ec6ed8faeea Mon Sep 17 00:00:00 2001 From: igor_nadein Date: Sat, 28 Feb 2026 14:15:28 +0300 Subject: [PATCH] refactor: Restructure document card layout for better visual hierarchy MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit PROBLEM: - Document cards had unstructured layout with all elements mixed together - No clear visual separation between sections - Poor readability and cluttered appearance - Actions scattered without logical grouping SOLUTION: Completely restructured document cards into 3 distinct sections: 1. HEADER (with light background and border-bottom) - Checkbox + Title (h3 with semibold) - Status badges (primary + acknowledgement) - Quick action buttons (Preview/PDF + Details) on the right - Improved: Buttons now have solid backgrounds (bg-sky-100, bg-gray-100) for better visibility 2. BODY (main content area) - Description (only if exists, with better line-height) - Metadata grid (3 columns on large screens): • Folder location (sky background with FolderOpen icon) • Author (gray background with User icon) • Created date (gray background with Calendar icon) - Workflow actions (only for draft/review/approved/rejected states) - Better spacing and visual hierarchy 3. FOOTER (conditional, only when needed) - Shows only if document has acknowledgement requirement OR is published/archived - Acknowledgement actions (Ознакомиться + Ведомость buttons) - Workflow for published/archived states (aligned right) - Light background matching header IMPROVEMENTS: - Clear visual sections with borders and backgrounds - Metadata in colored pill-shaped cards instead of plain text - Icons for all metadata fields (folder, user, calendar) - Removed redundant 'Updated' field (not essential) - Removed empty description text ('Описание не заполнено') - Better button hierarchy: primary actions in header, secondary in footer - Larger, more clickable buttons (px-3 py-1.5 instead of px-2.5 py-1) - Consistent rounded-lg instead of mix of rounded-full/rounded-lg - Better hover states (bg-sky-200 instead of bg-sky-100) - Conditional rendering: footer only appears when necessary VISUAL DESIGN: - Header: bg-gray-50/50 with border-bottom - Body: white background, clean content area - Footer: bg-gray-50/50 with border-top - Metadata cards: colored backgrounds (sky-50 for folder, gray-50 for others) - Better border colors: border-gray-200 instead of border-gray-100 This matches the structure of modern DMS systems like Notion, Confluence, and Google Drive where cards have clear header/body/footer separation. --- frontend/src/app/documents/page.tsx | 151 ++++++++++++++++++---------- 1 file changed, 96 insertions(+), 55 deletions(-) diff --git a/frontend/src/app/documents/page.tsx b/frontend/src/app/documents/page.tsx index 61f84e49..de54b25f 100644 --- a/frontend/src/app/documents/page.tsx +++ b/frontend/src/app/documents/page.tsx @@ -499,26 +499,28 @@ export default function DocumentsPage() { return (
-
+ {/* Header */} +
{/* Checkbox */} selection.toggleDocument(doc.id)} - className="mt-1 h-4 w-4 rounded border-gray-300 text-sky-600 focus:ring-sky-500" + className="mt-0.5 h-4 w-4 rounded border-gray-300 text-sky-600 focus:ring-sky-500" /> + {/* Title & Status */}
-
-

- {doc.title} -

+

+ {doc.title} +

+
- + + Ознакомлен ) : ( - - + + Требуется ознакомление ) )}
- -

- {doc.description || "Описание не заполнено"} -

- - {/* Workflow Buttons */} -
- -
- -
- {doc.folder_path && ( -

- - {doc.folder_path} -

- )} -

Автор: {authorName}

-

Создано: {formatDate(doc.created_at)}

-

Обновлено: {formatDate(doc.updated_at)}

-
-
+ {/* Quick Actions - Right Side */} +
{doc.file_url && ( <> {doc.file_name?.toLowerCase().endsWith(".pdf") ? ( @@ -576,9 +554,10 @@ export default function DocumentsPage() { name: doc.file_name || doc.title, }) } - className="inline-flex items-center gap-1 rounded-full bg-sky-50 px-2.5 py-1 text-xs text-sky-700 ring-1 ring-sky-100 hover:bg-sky-100" + className="inline-flex items-center gap-1.5 rounded-lg bg-sky-100 px-3 py-1.5 text-xs font-medium text-sky-700 transition hover:bg-sky-200" + title="Открыть PDF" > - + PDF ) : ( @@ -589,25 +568,82 @@ export default function DocumentsPage() { name: doc.file_name || doc.title, }) } - className="inline-flex items-center gap-1 rounded-full bg-sky-50 px-2.5 py-1 text-xs text-sky-700 ring-1 ring-sky-100 hover:bg-sky-100" + className="inline-flex items-center gap-1.5 rounded-lg bg-sky-100 px-3 py-1.5 text-xs font-medium text-sky-700 transition hover:bg-sky-200" + title="Просмотреть файл" > - + Просмотр )} )} - {/* Acknowledge Button - for documents requiring acknowledgement */} + +
+
+ + {/* Body */} +
+ {/* Description */} + {doc.description && ( +

+ {doc.description} +

+ )} + + {/* Metadata Grid */} +
+ {/* Folder */} + {doc.folder_path && ( +
+ + {doc.folder_path} +
+ )} + {/* Author */} +
+ + {authorName} +
+ {/* Created */} +
+ + {formatDate(doc.created_at)} +
+
+ + {/* Workflow Actions */} + {doc.status_code !== 'published' && doc.status_code !== 'archived' && ( +
+ +
+ )} +
+ + {/* Footer - только если есть дополнительные действия */} + {(doc.acknowledgement_required || doc.status_code === 'published' || doc.status_code === 'archived') && ( +
+ {/* Acknowledge Button */} {doc.acknowledgement_required && !doc.is_acknowledged && ( )} - {/* Acknowledgements Report Button - for authors/admins */} + {/* Acknowledgements Report */} {doc.acknowledgement_required && ( )} - + {/* Workflow for published/archived */} + {(doc.status_code === 'published' || doc.status_code === 'archived') && ( +
+ +
+ )}
-
+ )}
); })}