Files
Auto_Bangumi/webui/src/hooks/useSafeArea.ts
Estrella Pan 3ff0a64e89 feat(webui): mobile-first responsive redesign with 3-tier breakpoints
Implement a comprehensive mobile-first UI redesign with touch-friendly
navigation, responsive data display, and proper device adaptation.

Key changes:
- Add 3-tier breakpoint system: mobile (<640px), tablet (640-1023px), desktop (1024px+)
- Create core mobile components: bottom-sheet, pull-refresh, swipe-container, data-list, adaptive-modal
- Redesign navigation: bottom nav with labels on mobile, mini sidebar on tablet
- Mobile-first layout with dvh units, safe area insets, and column-reverse flex
- Forms stack labels vertically on mobile, inputs go full-width
- Popups render as bottom sheets on mobile devices
- Bangumi grid uses CSS Grid with responsive minmax columns
- RSS page uses card-based data-list on mobile instead of NDataTable
- Config actions get safe area padding and full-width buttons on mobile/tablet
- Touch targets enforced at 44px minimum throughout
- Add sheet/overlay/swipe CSS transitions
- Topbar search visible on tablet (previously desktop-only)

Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
2026-01-24 07:37:50 +01:00

16 lines
454 B
TypeScript

import { computed } from 'vue';
export function useSafeArea() {
const safeAreaTop = computed(() => 'env(safe-area-inset-top, 0px)');
const safeAreaBottom = computed(() => 'env(safe-area-inset-bottom, 0px)');
const safeAreaLeft = computed(() => 'env(safe-area-inset-left, 0px)');
const safeAreaRight = computed(() => 'env(safe-area-inset-right, 0px)');
return {
safeAreaTop,
safeAreaBottom,
safeAreaLeft,
safeAreaRight,
};
}