111 lines
4.1 KiB
Markdown
111 lines
4.1 KiB
Markdown
# CoreSync MRM Frontend
|
||
|
||
Адаптивное веб-приложение для управления email-рассылками.
|
||
|
||
## Адаптивность
|
||
|
||
Приложение полностью адаптировано для работы на всех устройствах:
|
||
|
||
### Поддерживаемые разрешения:
|
||
- **Desktop**: 1200px+
|
||
- **Tablet**: 768px - 1199px
|
||
- **Mobile**: 320px - 767px
|
||
- **Small Mobile**: до 479px
|
||
|
||
### Ключевые особенности адаптивности:
|
||
|
||
#### 1. Мобильное меню
|
||
- На мобильных устройствах боковое меню скрывается и открывается по кнопке
|
||
- Добавлен оверлей для закрытия меню
|
||
- Плавные анимации открытия/закрытия
|
||
|
||
#### 2. Адаптивные таблицы
|
||
- Горизонтальная прокрутка на мобильных устройствах
|
||
- Оптимизированные размеры ячеек для touch-устройств
|
||
- Улучшенная читаемость на маленьких экранах
|
||
|
||
#### 3. Адаптивные формы
|
||
- Увеличенные размеры полей ввода для touch-устройств
|
||
- Минимальная высота 44px для всех интерактивных элементов
|
||
- Оптимизированные отступы и размеры шрифтов
|
||
|
||
#### 4. Адаптивные кнопки
|
||
- Увеличенные размеры для touch-устройств
|
||
- Улучшенная доступность
|
||
- Поддержка hover и active состояний
|
||
|
||
#### 5. Модальные окна
|
||
- Адаптивные размеры и отступы
|
||
- Оптимизированное позиционирование на мобильных
|
||
- Поддержка прокрутки контента
|
||
|
||
### Технические особенности:
|
||
|
||
#### CSS Media Queries:
|
||
```css
|
||
/* Планшеты */
|
||
@media (max-width: 1024px) { ... }
|
||
|
||
/* Мобильные устройства */
|
||
@media (max-width: 768px) { ... }
|
||
|
||
/* Маленькие мобильные */
|
||
@media (max-width: 480px) { ... }
|
||
|
||
/* Touch устройства */
|
||
@media (hover: none) and (pointer: coarse) { ... }
|
||
```
|
||
|
||
#### Поддержка устройств:
|
||
- **iOS Safari**: Полная поддержка
|
||
- **Android Chrome**: Полная поддержка
|
||
- **Desktop browsers**: Chrome, Firefox, Safari, Edge
|
||
- **Touch devices**: iPad, iPhone, Android tablets/phones
|
||
|
||
### Структура стилей:
|
||
|
||
```
|
||
src/
|
||
├── styles/
|
||
│ ├── Common.module.css # Общие адаптивные стили
|
||
│ ├── Modal.module.css # Адаптивные модальные окна
|
||
│ ├── MultiSelect.module.css # Адаптивные селекты
|
||
│ └── Paginator.module.css # Адаптивная пагинация
|
||
├── components/
|
||
│ ├── Header.module.css # Адаптивный хедер
|
||
│ └── SideMenu.module.css # Адаптивное меню
|
||
└── pages/
|
||
├── Dashboard.module.css # Адаптивная главная страница
|
||
└── Login.module.css # Адаптивная страница входа
|
||
```
|
||
|
||
### Производительность:
|
||
|
||
- Оптимизированные изображения и иконки
|
||
- Минимальные CSS-анимации для плавности
|
||
- Эффективная работа с touch-событиями
|
||
- Поддержка `-webkit-overflow-scrolling: touch`
|
||
|
||
### Доступность:
|
||
|
||
- Поддержка screen readers
|
||
- Правильная семантика HTML
|
||
- Достаточный контраст цветов
|
||
- Увеличенные размеры для touch-интерфейса
|
||
|
||
## Запуск проекта
|
||
|
||
```bash
|
||
npm install
|
||
npm start
|
||
```
|
||
|
||
Приложение будет доступно по адресу `http://localhost:3000`
|
||
|
||
## Сборка для продакшена
|
||
|
||
```bash
|
||
npm run build
|
||
```
|
||
|
||
Собранные файлы будут в папке `build/` |