mirror of https://github.com/Memo-2023/mana-monorepo.git synced 2026-05-16 09:59:41 +02:00

Till-JS e7f5f942f3 chore: initial commit - consolidate 4 projects into monorepo

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>

2025-11-22 23:38:24 +01:00

2.8 KiB

Raw Blame History

Spacing System Migration - Completed ✅

Zentrales Spacing-System

Alle Abstände in der App werden jetzt zentral über utils/spacing.ts verwaltet.

Import

import { spacing } from '~/utils/spacing';

Verwendung

Container/Screen Padding

<View style={{ paddingHorizontal: spacing.container.horizontal, paddingVertical: spacing.container.vertical }}>

Section Spacing (zwischen Cards)

<Card style={{ marginBottom: spacing.section }}>

Content Spacing

// 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 ✅

✅ 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

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:

import { spacing } from '~/utils/spacing';

// In Komponenten
<View style={{ padding: spacing.container.horizontal }}>

2.8 KiB Raw Blame History