- Enhanced topbar with better button styling and tooltips
- Added system information to drawer footer (server, update status)
- Improved visual hierarchy and spacing
- Better responsive design for mobile screens
- Replaced meaningless message with useful admin context
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- App.razor: loading overlay starts with `show` class (visible on cold load)
- admin-session.js: add showLoading()/hideLoading(); MutationObserver detects
.admin-page-hero / .admin-login-page instead of mud-element count threshold;
observer restarts on every navigation cycle via LocationChanged
- MainLayout.razor: subscribe to NavigationManager.LocationChanged →
call JS showLoading() on every route change; implements IDisposable
- InquiryList.razor: remove unused IInquiryRepository injection; load data
once (GetPagedAsync(1,200)) and pass IReadOnlyList to all six tab panels
- InquiryTable.razor: accept Inquiries parameter; filter synchronously in
OnParametersSet() — eliminates 6 redundant API calls per page visit
- admin.css: overlay fade-in animation (0.15s); page content fade-in on
route mount via .admin-page-hero / .admin-login-page animation (0.25s)
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
**Issue**: White screen appears 1-2 seconds during page load/transitions while Blazor circuit connects
**Solution**: Add loading spinner overlay that displays while Blazor initializes
**Changes**:
1. App.razor: Add loading overlay HTML element
2. admin.css: Add loading spinner styles + animations
3. admin-session.js: Show overlay on load, hide when Blazor circuit ready
**UX Flow**:
- Page load starts → Blazor loading spinner appears
- Blazor circuit connects (~1-2s) → Spinner disappears
- Page fully interactive → User sees content
**Styling**:
- Centered spinner with 'Loading...' text
- Semi-transparent background (blur effect)
- Smooth fade-out when complete
- High z-index (9999) to cover all content
This provides clear visual feedback that the app is working, not frozen.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Mobile S (<480px) drawer now properly:
- Uses flex-direction: row for horizontal layout
- Has max-height: 60px to constrain vertical space
- Shows horizontal scrollbar for nav items (overflow-x: auto)
- Proper border styling (no right border, bottom border)
- Brand mark positioned correctly with flex-shrink: 0
This fixes the drawer responsiveness test on 375px viewport.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
**Responsive Breakpoints (Mobile-First):**
- Mobile S (<480px): Single column, minimal padding, hidden subtitles
- Mobile L (480-599px): Single column with optimized spacing
- Tablet S (600-767px): Single column, collapsed drawer (60px wide)
- Tablet M (768-959px): 2-column metric grid, full drawer
- Tablet L (960-1023px): 3-column metric grid
- Desktop L (1024-1439px): 4-column metric grid, full layout
- Desktop XL (1440-1919px): 4-column with increased spacing
- Desktop XXL (1920px+): 4-column with maximum spacing
**Key Improvements:**
✓ Device-specific padding, margin, font-size optimizations
✓ Drawer behavior: full width on mobile, sidebar on tablet+
✓ Navigation: horizontal scroll on tablet S, full menu on larger screens
✓ Tables: font-size and padding scale with viewport
✓ Metric cards: responsive heights and spacing
✓ Page hero: column layout on mobile, row layout on desktop
✓ Typography: scales from 0.65rem to 2rem based on device
**Mobile Optimizations:**
- Hide non-critical elements (page subtitle)
- Compress navigation to icons
- Full-width buttons on small screens
- Horizontal scroll for navigation menu
- Optimized touch target sizes
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
**Dashboard.razor Changes:**
- Replace MudGrid/MudItem with pure HTML div elements for reliable layout
- Remove dependency on MudBlazor grid components that were causing conflicts
- Use inline flexbox layout with emoji icons for better visual appeal
- Improve semantic structure and readability
**admin.css Improvements:**
- 4-column metric grid layout for desktop (1440px+)
- 3-column for laptops (1024px), 2-column for tablets (768px), 1-column for mobile
- Add hover effects: elevation, transform, top border animation
- Improve gradient backgrounds: more subtle, better color hierarchy
- Add professional box shadows and smooth transitions (cubic-bezier)
- Better padding and spacing for premium look
- Responsive design across all breakpoints
Visual improvements:
✓ Professional gradient backgrounds with hover states
✓ Smooth animations (0.3s cubic-bezier for premium feel)
✓ Better visual hierarchy with typography
✓ Proper spacing and alignment
✓ Accessibility-friendly color contrasts
✓ Mobile-first responsive design
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Convert .admin-metric-grid to CSS Grid (grid-template-columns: repeat(auto-fit))
- Add flexbox layout to .admin-metric-card for proper content distribution
- Remove all MudBlazor component direct styling (MudGrid, MudItem, MudPaper)
- Focus only on custom admin-* classes
- Fix metric cards layout (4-column desktop, responsive mobile)
- Improve typography and spacing hierarchy
- Add proper !important only where necessary for class overrides
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
wwwroot/css/admin.css 생성:
• 폼 요소 기본 스타일
• MudBlazor 컴포넌트 기본 스타일
• Responsive 디자인
• Material Design Blue 컬러
결과:
✅ 페이지 로딩 중에도 깔끔한 UI
✅ MudBlazor 로드 후 자동 오버라이드
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
kjh2064