mirror of
https://github.com/EstrellaXD/Auto_Bangumi.git
synced 2026-04-01 01:30:27 +08:00
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>
16 lines
454 B
TypeScript
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,
|
|
};
|
|
}
|