✨ Исправлены стили мобильного слайдера для полной видимости
- Изменен display с 'none' на 'flex' для постоянной готовности слайдера - Адаптирована ширина слайдера: 85vw (85% ширины экрана) - Установлен max-width: 320px для планшетов - Слайдер теперь полностью видим при открытии на всех размерах - Улучшена анимация выдвижения (0.3s ease) - Добавлено правильное распределение content внутри слайдера
This commit is contained in:
parent
6f79afeb7e
commit
3560b4d461
247
MOBILE_SIDEBAR_FEATURE.md
Normal file
247
MOBILE_SIDEBAR_FEATURE.md
Normal file
@ -0,0 +1,247 @@
|
||||
# Мобильный боковой слайдер - Документация функции
|
||||
|
||||
## Обзор
|
||||
|
||||
На мобильных устройствах добавлена новая функция **мобильного бокового слайдера**, который предоставляет доступ к календарю, поиску и тегам. Эта функция значительно улучшает пользовательский опыт на мобильных устройствах, предоставляя полный функционал ПК версии в удобной форме.
|
||||
|
||||
## Технические характеристики
|
||||
|
||||
### Точка срабатывания адаптивности
|
||||
- **Мобильная версия**: ширина экрана ≤ 768px
|
||||
- **ПК версия**: ширина экрана > 768px
|
||||
|
||||
### Компоненты слайдера
|
||||
|
||||
1. **Кнопка открытия** (☰)
|
||||
- Позиция: фиксированная, левый верхний угол
|
||||
- Z-index: 999
|
||||
- Стиль: кнопка с выпуклым эффектом (box-shadow)
|
||||
|
||||
2. **Основной слайдер** (.mobile-sidebar)
|
||||
- Позиция: фиксированная, слева
|
||||
- Ширина: 280px
|
||||
- Высота: 100vh (во всю высоту экрана)
|
||||
- Анимация: плавное выдвижение (0.3s ease)
|
||||
- Z-index: 1000
|
||||
|
||||
3. **Оверлей** (.mobile-sidebar-overlay)
|
||||
- Позиция: фиксированная, полный экран
|
||||
- Фон: полупрозрачный чёрный (rgba(0, 0, 0, 0.5))
|
||||
- Z-index: 999
|
||||
- Функция: закрытие слайдера при клике
|
||||
|
||||
4. **Кнопка закрытия**
|
||||
- Позиция: верхний правый угол слайдера
|
||||
- Размер: 40x40px
|
||||
- Иконка: mdi:close
|
||||
|
||||
### Содержимое слайдера
|
||||
|
||||
#### 1. Календарь (renderCalendarMobile)
|
||||
```javascript
|
||||
- 42 дня (6 недель x 7 дней)
|
||||
- Полная навигация по месяцам
|
||||
- Выделение сегодняшнего дня (синий цвет)
|
||||
- Выделение выбранного дня (зелёный цвет)
|
||||
- Индикатор дней с заметками (зелёная точка)
|
||||
- Дни соседних месяцев (серый цвет, меньший размер)
|
||||
```
|
||||
|
||||
#### 2. Поле поиска
|
||||
```javascript
|
||||
- Синхронизировано с основным поиском
|
||||
- Задержка 300ms перед поиском (оптимизация)
|
||||
- Кнопка очистки (✕)
|
||||
- Подержка Escape для сброса
|
||||
```
|
||||
|
||||
#### 3. Теги (renderTagsMobile)
|
||||
```javascript
|
||||
- Все уникальные теги из заметок
|
||||
- Показывает количество заметок для каждого тега
|
||||
- Визуальное выделение активного тега
|
||||
- Полная функциональность фильтрации
|
||||
```
|
||||
|
||||
## Функциональность
|
||||
|
||||
### Управление слайдером
|
||||
|
||||
```javascript
|
||||
// Открытие слайдера
|
||||
mobileMenuBtn.addEventListener("click", () => {
|
||||
mobileSidebar.classList.add("open");
|
||||
sidebarOverlay.classList.add("open");
|
||||
document.body.style.overflow = "hidden";
|
||||
});
|
||||
|
||||
// Закрытие слайдера
|
||||
sidebarCloseBtn.addEventListener("click", () => {
|
||||
mobileSidebar.classList.remove("open");
|
||||
sidebarOverlay.classList.remove("open");
|
||||
document.body.style.overflow = "auto";
|
||||
});
|
||||
|
||||
// Закрытие при клике на оверлей
|
||||
sidebarOverlay.addEventListener("click", () => {
|
||||
mobileSidebar.classList.remove("open");
|
||||
sidebarOverlay.classList.remove("open");
|
||||
document.body.style.overflow = "auto";
|
||||
});
|
||||
```
|
||||
|
||||
### Синхронизация
|
||||
|
||||
Все действия в мобильном слайдере автоматически синхронизируются с ПК версией:
|
||||
|
||||
1. **Выбор даты в календаре**
|
||||
- Срабатывает `handleDayClickMobile()`
|
||||
- Перерисовываются оба календаря
|
||||
- Обновляются теги и основной календарь
|
||||
|
||||
2. **Ввод текста в поиск**
|
||||
- Синхронизируется с основным полем поиска (#searchInput)
|
||||
- Вызывает `searchNotes(query)`
|
||||
- Обновляет индикатор фильтра
|
||||
|
||||
3. **Клик на тег**
|
||||
- Срабатывает `handleTagClickMobile()`
|
||||
- Синхронизируется с основными тегами
|
||||
- Обновляет оба календаря
|
||||
|
||||
## Новые функции в app.js
|
||||
|
||||
### renderCalendarMobile()
|
||||
Отображает календарь в мобильном слайдере. Использует тот же алгоритм, что и основной календарь.
|
||||
|
||||
### handleDayClickMobile()
|
||||
Обработчик клика на день в мобильном календаре. Обновляет фильтр и перерисовывает все компоненты.
|
||||
|
||||
### renderTagsMobile()
|
||||
Отображает теги в мобильном слайдере. Синхронизируется с основными тегами.
|
||||
|
||||
### handleTagClickMobile()
|
||||
Обработчик клика на тег в мобильном слайдере. Обновляет фильтр и перерисовывает компоненты.
|
||||
|
||||
### initSearchMobile()
|
||||
Инициализирует поле поиска в мобильном слайдере. Синхронизируется с основным поиском.
|
||||
|
||||
## Стили в style.css
|
||||
|
||||
### Ключевые CSS классы
|
||||
|
||||
```css
|
||||
.mobile-menu-btn /* Кнопка открытия меню */
|
||||
.mobile-sidebar /* Основной контейнер слайдера */
|
||||
.mobile-sidebar.open /* Состояние открытого слайдера */
|
||||
.sidebar-close-btn /* Кнопка закрытия */
|
||||
.sidebar-content /* Контейнер содержимого */
|
||||
.mobile-sidebar-overlay /* Оверлей */
|
||||
.mobile-sidebar-overlay.open /* Состояние открытого оверлея */
|
||||
```
|
||||
|
||||
### Медиа-запрос
|
||||
|
||||
```css
|
||||
@media (max-width: 768px) {
|
||||
.mobile-menu-btn {
|
||||
display: flex; /* Показываем кнопку меню */
|
||||
}
|
||||
.container-leftside {
|
||||
display: none !important; /* Скрываем ПК версию панели */
|
||||
}
|
||||
/* Дополнительные адаптации */
|
||||
}
|
||||
```
|
||||
|
||||
## Преимущества реализации
|
||||
|
||||
✅ **Полная функциональность** - все функции как в ПК версии
|
||||
✅ **Синхронизация** - изменения в слайдере сразу отражаются везде
|
||||
✅ **Удобство** - легко открыть/закрыть
|
||||
✅ **Экономия места** - не занимает постоянное место на экране
|
||||
✅ **Хороший UX** - оверлей и плавные анимации
|
||||
✅ **Производительность** - минимальные затраты на отрисовку
|
||||
✅ **Доступность** - полная поддержка клавиатуры (Escape)
|
||||
|
||||
## Тестирование
|
||||
|
||||
### Чек-лист тестирования
|
||||
|
||||
- [x] Кнопка меню появляется на экранах ≤ 768px
|
||||
- [x] Кнопка меню исчезает на экранах > 768px
|
||||
- [x] Слайдер открывается при нажатии кнопки
|
||||
- [x] Слайдер закрывается кнопкой ✕
|
||||
- [x] Слайдер закрывается кликом на оверлей
|
||||
- [x] Календарь отображается правильно
|
||||
- [x] Навигация по месяцам работает в обе стороны
|
||||
- [x] День выбирается и фильтрует заметки
|
||||
- [x] Выбранный день синхронизируется между слайдером и основным календарем
|
||||
- [x] Поле поиска синхронизируется
|
||||
- [x] Теги отображаются правильно
|
||||
- [x] Клик на тег применяет фильтр
|
||||
- [x] Все фильтры работают одновременно
|
||||
|
||||
## Браузеры и поддержка
|
||||
|
||||
- ✅ Chrome / Chromium
|
||||
- ✅ Firefox
|
||||
- ✅ Safari
|
||||
- ✅ Edge
|
||||
- ✅ Все современные мобильные браузеры
|
||||
|
||||
## Примеры кода
|
||||
|
||||
### Пример 1: Открытие/закрытие слайдера
|
||||
|
||||
```javascript
|
||||
// HTML
|
||||
<div class="mobile-menu-btn" id="mobileMenuBtn">
|
||||
<span class="iconify" data-icon="mdi:menu"></span>
|
||||
</div>
|
||||
|
||||
// JavaScript
|
||||
document.getElementById("mobileMenuBtn").addEventListener("click", function () {
|
||||
document.getElementById("mobileSidebar").classList.add("open");
|
||||
document.getElementById("sidebarOverlay").classList.add("open");
|
||||
document.body.style.overflow = "hidden";
|
||||
});
|
||||
```
|
||||
|
||||
### Пример 2: Синхронизация поиска
|
||||
|
||||
```javascript
|
||||
// При вводе в мобильное поле
|
||||
searchInputMobile.addEventListener("input", function () {
|
||||
const query = this.value;
|
||||
searchNotes(query);
|
||||
|
||||
// Синхронизируем с основным полем
|
||||
document.getElementById("searchInput").value = query;
|
||||
});
|
||||
```
|
||||
|
||||
### Пример 3: Синхронизация календарей
|
||||
|
||||
```javascript
|
||||
// При нажатии на месяц в мобильном календаре
|
||||
prevMonthBtnMobile.addEventListener("click", function () {
|
||||
currentDate.setMonth(currentDate.getMonth() - 1);
|
||||
renderCalendar(); // Обновляем основной календарь
|
||||
renderCalendarMobile(); // Обновляем мобильный
|
||||
});
|
||||
```
|
||||
|
||||
## Возможные улучшения в будущем
|
||||
|
||||
1. 🎯 Анимация свайпа (жесты) для открытия/закрытия
|
||||
2. 🎨 Темная тема (dark mode) для слайдера
|
||||
3. 📊 Статистика по тегам в слайдере
|
||||
4. 🔔 Уведомления о днях с заметками
|
||||
5. ⌨️ Горячие клавиши для быстрого открытия слайдера
|
||||
6. 📍 Сохранение позиции прокрутки при открытии/закрытии
|
||||
7. 🎭 Переходы и анимации при перелистывании месяцев
|
||||
|
||||
## Заключение
|
||||
|
||||
Мобильный боковой слайдер - это полнофункциональное решение для мобильной версии приложения NoteJS, которое предоставляет удобный доступ ко всем инструментам фильтрации и поиска, сохраняя при этом максимум пространства на экране для просмотра заметок.
|
||||
@ -924,11 +924,12 @@ textarea:focus {
|
||||
|
||||
/* Мобильный слайдер */
|
||||
.mobile-sidebar {
|
||||
display: none;
|
||||
display: flex;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: -300px;
|
||||
width: 280px;
|
||||
left: -85vw;
|
||||
width: 85vw;
|
||||
max-width: 320px;
|
||||
height: 100vh;
|
||||
background: white;
|
||||
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
|
||||
@ -936,6 +937,7 @@ textarea:focus {
|
||||
overflow-y: auto;
|
||||
transition: left 0.3s ease;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.mobile-sidebar.open {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user