igor_nadein
243fffc126
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.
This is a Next.js project bootstrapped with create-next-app.
Getting Started
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.
Learn More
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
Deploy on Vercel
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.