cinnabarflower/mnemo_cards
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
mnemo_cards/mnemo_cards_web_v2/DESIGN_ADAPTATION_PROGRESS.md
Dmitry 9414005e2a stuff
2025-11-11 02:55:41 +03:00

9.1 KiB
Raw Blame History

Прогресс адаптации дизайна

Дата: 19 октября 2025
Статус: В процессе

✅ Выполнено

🎨 Этап 1: Цветовая схема и темизация (ЗАВЕРШЕНО)

Создано:

  • ✅ lib/presentation/theme/app_colors.dart - цветовые константы из мобильного приложения
    • Peach, golden, green, progressBlue, borderGray и др.
    • MaterialColor палитры для черного и белого

Обновлено:

  • ✅ lib/presentation/theme/app_theme.dart
    • Черно-белая ColorScheme (вместо синей Material 3)
    • Все тексты жирные (FontWeight.w700)
    • Минимальная elevation (1)
    • Светлая и темная темы

Результаты:

  • Приложение использует черно-белую основу с акцентными цветами
  • Все тексты жирные, как в мобильном приложении
  • Минималистичный дизайн

📦 Этап 2: Адаптация карточек паков (ЗАВЕРШЕНО)

Создано:

  • ✅ lib/utils/color_extension.dart - extension для парсинга String? цветов
  • ✅ lib/presentation/widgets/pack_card_vertical.dart - вертикальная карточка для плитки
  • ✅ lib/presentation/widgets/loading/pack_card_vertical_shimmer.dart - shimmer для вертикальных карточек

Обновлено:

  • ✅ lib/presentation/widgets/pack_card.dart

    • Горизонтальная компоновка (изображение слева, текст справа)
    • Граница с цветом пака
    • Отображение base64 изображений
    • Фиксированная высота 110px

  • ✅ lib/presentation/widgets/loading/pack_card_shimmer.dart

    • Адаптирован под горизонтальную карточку

Результаты:

  • Горизонтальные карточки для мобильного вида
  • Вертикальные карточки для desktop вида (плитка)
  • Изображения паков отображаются из base64
  • Сохранена стилистика с цветными границами

🏠 Этап 3: Адаптация HomePage (ЗАВЕРШЕНО)

Обновлено:

  • ✅ lib/presentation/pages/home/home_page.dart
    • Адаптивный layout:
      • Мобильный (< 600px): ListView с горизонтальными карточками
      • Desktop/Tablet (≥ 600px): GridView с вертикальными карточками
    • BouncingScrollPhysics для плавной прокрутки
    • RefreshIndicator с displacement: 20
    • Shimmer loading адаптируется под размер экрана

Результаты:

  • HomePage автоматически адаптируется под размер экрана
  • На широких экранах - красивая плитка (3-4 колонки)
  • На узких экранах - компактный список

📄 Этап 4: Адаптация PackDetailsPage (ЗАВЕРШЕНО)

Обновлено:

  • ✅ lib/presentation/pages/pack_details/pack_details_page.dart
    • Custom header в стиле мобильного приложения:
      • Кнопка "к темам" для возврата
      • Большой заголовок (36px, жирный)
      • Подзаголовок (20px, легкий)
    • Секция с карточками:
      • Сетка карточек 100x100px
      • Фоновый цвет пака (0.1 opacity)
      • Expand/collapse функциональность
    • Кнопки управления:
      • Expand/Collapse (стрелка вверх/вниз)
      • Shuffle (перемешать)
      • Favorite (избранное)
    • Разделители с цветом пака
    • Удалён стандартный AppBar

Создано:

  • ✅ _ControlButton - виджет кнопки управления
    • Размер: 110x60
    • Граница с borderGray
    • Иконка 29px

Результаты:

  • PackDetailsPage соответствует стилю мобильного приложения
  • Все элементы на своих местах
  • Работает expand/collapse карточек

📊 Статистика

Созданные файлы (6):

  1. lib/presentation/theme/app_colors.dart
  2. lib/utils/color_extension.dart
  3. lib/presentation/widgets/pack_card_vertical.dart
  4. lib/presentation/widgets/loading/pack_card_vertical_shimmer.dart
  5. DESIGN_ADAPTATION_PLAN.md
  6. DESIGN_ADAPTATION_PROGRESS.md (этот файл)

Обновленные файлы (8):

  1. lib/presentation/theme/app_theme.dart
  2. lib/presentation/widgets/pack_card.dart
  3. lib/presentation/widgets/loading/pack_card_shimmer.dart
  4. lib/presentation/pages/home/home_page.dart
  5. lib/presentation/pages/pack_details/pack_details_page.dart
  6. lib/domain/config/api_config.dart (appVersion 1.1.0)
  7. test/presentation/theme/app_theme_test.dart

Тесты:

  • ✅ 117 тестов - все проходят
  • ✅ Нет линтер ошибок

🎯 Ключевые достижения

1. Цветовая схема

  • ✅ Черно-белая основа вместо синей
  • ✅ Все акцентные цвета из мобильного приложения
  • ✅ Темная и светлая темы работают

2. Типографика

  • ✅ Все тексты жирные (FontWeight.w700)
  • ✅ Шрифт Nunito сохранен
  • ✅ Правильные размеры (36px для заголовков, 20px для подзаголовков)

3. Карточки паков

  • ✅ Горизонтальный layout для мобильных
  • ✅ Вертикальный layout для desktop
  • ✅ Границы с цветом пака
  • ✅ Base64 изображения отображаются

4. Адаптивность

  • ✅ Автоматическое переключение ListView/GridView
  • ✅ 3-4 колонки на широких экранах
  • ✅ Правильные пропорции карточек (childAspectRatio: 0.7)

5. PackDetailsPage

  • ✅ Custom header как в мобильном
  • ✅ Сетка карточек с expand/collapse
  • ✅ Кнопки управления (expand, shuffle, favorite)
  • ✅ Разделители с цветом пака

📈 Прогресс по плану

Этап Описание Статус
1 Цветовая схема и темизация ✅ 100%
2 Адаптация PackCard ✅ 100%
3 Адаптация HomePage ✅ 100%
4 PackDetailsPage ✅ 100%
5 GamesPage ⏳ 0%
6 ProfilePage ⏳ 0%
7 Общие компоненты ⏳ 0%
8 Responsive адаптация ✅ 50% (HomePage готов)
9 Финальная полировка ⏳ 0%

Общий прогресс: ~45% (4 из 9 этапов)

🔜 Следующие шаги

Приоритет 1 (Критический):

  • Адаптация GamesPage (Этап 5)
    • Обновить GameCard под стиль мобильного
    • Адаптивный layout (список/плитка)
    • Обновить shimmer loading

Приоритет 2 (Высокий):

  • Адаптация ProfilePage (Этап 6)
    • Упростить дизайн
    • Добавить компоненты SimpleTile
    • Обновить статистику

Приоритет 3 (Средний):

  • Общие компоненты (Этап 7)
    • MainShell
    • AuthPage
    • ErrorView/LoadingView

Приоритет 4 (Низкий):

  • Финальная полировка (Этап 9)
    • Проверка консистентности
    • Темная тема
    • Accessibility
    • Документация

💡 Технические заметки

Реализованные паттерны:

  1. Адаптивные карточки: Два виджета (PackCard + PackCardVertical) для разных layout'ов
  2. Responsive utility: Использование Responsive.isMobile() для переключения
  3. Color extension: Extension на String? для парсинга цветов
  4. Expand/Collapse: Простое state management с setState

Размеры и пропорции:

  • Горизонтальная карточка: высота 110px
  • Вертикальная карточка: childAspectRatio 0.7 (ширина/высота)
  • Карточка пака в сетке: 100x100px
  • Кнопки управления: 110x60px

Цвета:

  • Primary: Black (light) / White (dark)
  • Secondary: Green (#3d5309)
  • Border: BorderGray (#ABABAB)
  • Pack color: Из pack.color field

Последнее обновление: 19 октября 2025
Все тесты: ✅ 117/117 проходят