mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-18 05:09:39 +02:00
e7f5f942f3
Projects included: - maerchenzauber (NestJS backend + Expo mobile + SvelteKit web + Astro landing) - manacore (Expo mobile + SvelteKit web + Astro landing) - manadeck (NestJS backend + Expo mobile + SvelteKit web) - memoro (Expo mobile + SvelteKit web + Astro landing) This commit preserves the current state before monorepo restructuring. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
126 lines
2.8 KiB
Markdown
126 lines
2.8 KiB
Markdown
# Spacing System Migration - Completed ✅
|
|
|
|
## Zentrales Spacing-System
|
|
|
|
Alle Abstände in der App werden jetzt zentral über `utils/spacing.ts` verwaltet.
|
|
|
|
### Import
|
|
|
|
```tsx
|
|
import { spacing } from '~/utils/spacing';
|
|
```
|
|
|
|
### Verwendung
|
|
|
|
#### Container/Screen Padding
|
|
```tsx
|
|
<View style={{ paddingHorizontal: spacing.container.horizontal, paddingVertical: spacing.container.vertical }}>
|
|
```
|
|
|
|
#### Section Spacing (zwischen Cards)
|
|
```tsx
|
|
<Card style={{ marginBottom: spacing.section }}>
|
|
```
|
|
|
|
#### Content Spacing
|
|
```tsx
|
|
// Titel Abstand
|
|
<Text style={{ marginBottom: spacing.content.title }}>Titel</Text>
|
|
|
|
// Item Abstand
|
|
<View style={{ gap: spacing.content.item }}>
|
|
|
|
// Kleine Abstände
|
|
<Text style={{ marginTop: spacing.content.small }}>
|
|
```
|
|
|
|
## Migration Status - Alle Screens ✅
|
|
|
|
### Tab Screens (Main Navigation)
|
|
✅ app/(tabs)/decks/index.tsx
|
|
✅ app/(tabs)/explore/index.tsx
|
|
✅ app/(tabs)/progress/index.tsx
|
|
✅ app/(tabs)/profile/index.tsx
|
|
|
|
### Deck Screens
|
|
✅ app/deck/[id].tsx (Detail Screen)
|
|
✅ app/deck/create.tsx
|
|
✅ app/deck/[id]/edit.tsx
|
|
|
|
### Card Screens
|
|
✅ app/card/create.tsx
|
|
✅ app/card/edit/[id].tsx
|
|
|
|
### Study Screens
|
|
✅ app/study/session/[id].tsx
|
|
✅ app/study/summary/[id].tsx
|
|
|
|
### Auth Screens
|
|
✅ app/(auth)/login.tsx
|
|
✅ app/(auth)/register.tsx
|
|
✅ app/(auth)/forgot-password.tsx
|
|
|
|
## Spacing Reference
|
|
|
|
```typescript
|
|
spacing = {
|
|
// Base Units (4px increments)
|
|
xs: 4,
|
|
sm: 8,
|
|
md: 12,
|
|
lg: 16,
|
|
xl: 24,
|
|
xxl: 32,
|
|
xxxl: 48,
|
|
|
|
// Semantic Spacing
|
|
container: {
|
|
horizontal: 16, // Standard horizontal padding
|
|
vertical: 24, // Standard vertical padding
|
|
top: 24, // Top padding after PageHeader
|
|
bottom: 24, // Bottom padding before elements
|
|
},
|
|
|
|
section: 24, // Gap between major sections/cards
|
|
|
|
card: {
|
|
gap: 24, // Gap between cards
|
|
padding: 16, // Internal card padding
|
|
},
|
|
|
|
content: {
|
|
title: 16, // Space after section titles
|
|
item: 16, // Space between list items
|
|
small: 12, // Small spacing between related elements
|
|
micro: 8, // Very small spacing
|
|
},
|
|
|
|
header: {
|
|
paddingBottom: 16,
|
|
},
|
|
|
|
tabBar: {
|
|
clearance: 100, // Bottom padding to clear tab bar
|
|
},
|
|
}
|
|
```
|
|
|
|
## Benefits
|
|
|
|
✅ **Zentrale Verwaltung** - Alle Abstände an einem Ort
|
|
✅ **Konsistenz** - Gleiche Werte über die ganze App
|
|
✅ **Wartbarkeit** - Einfach änderbar
|
|
✅ **Semantisch** - Klare Bedeutung statt magische Zahlen
|
|
✅ **TypeScript Support** - Vollständige Type-Safety
|
|
✅ **Skalierbar** - Kann pro Theme angepasst werden
|
|
|
|
## Nächste Schritte
|
|
|
|
Das Spacing-System ist vollständig implementiert. Zukünftige Screens sollten das System von Anfang an nutzen:
|
|
|
|
```tsx
|
|
import { spacing } from '~/utils/spacing';
|
|
|
|
// In Komponenten
|
|
<View style={{ padding: spacing.container.horizontal }}>
|
|
```
|