docs: Add detailed improvement log for calendar redesign

This commit is contained in:
Fovway 2025-10-18 00:39:53 +07:00
parent 7def129e14
commit b8cc859334

100
IMPROVEMENTS_LOG.md Normal file
View File

@ -0,0 +1,100 @@
# Лог улучшений дизайна календаря
## Итерация 1: Первоначальное добавление календаря
- **Дата**: Октябрь 2025
- **Коммит**: `d8b3b97` - feat: Add sidebar calendar to notes page with month navigation
- **Описание**: Добавлен полнофункциональный интерактивный календарь на боковую панель
- **Особенности**:
- Боковая панель полной высоты (240px)
- Все стили вместе с основными стилями
- Большой календарь
## Итерация 2: Финальное переделывание дизайна
- **Дата**: Октябрь 2025
- **Коммит**: `7def129` - refactor: Redesign calendar as compact sidebar box with improved layout
- **Описание**: Полная переделка дизайна календаря и макета страницы
### Ключевые изменения:
#### 📐 Макет
- Изменен основной контейнер с фиксированной ширины 600px на 850px
- Цель: обеспечить достаточно места для двухколонного макета (календарь + форма)
#### 📅 Календарь
- **Размер**: уменьшен с 240px до 190px ширины
- **Контейнер**: теперь является отдельным боксом (`.calendar-box`) с собственными стилями
- **Стили**:
- Белый фон (`background: white`)
- Тень (`box-shadow: 0 0 10px rgba(0, 0, 0, 0.1)`)
- Закруглённые углы (`border-radius: 8px`)
- Мягкий padding (10px)
#### 🎨 Компактизация
- **Размер шрифта**:
- Заголовок месяца: 11px (было 14px)
- Дни недели: 8px (было 11px)
- Дни месяца: 10px (было 12px)
- Кнопки навигации: 11px (было 14px)
- **Отступы и зазоры**:
- Margin между элементами: уменьшены
- Padding кнопок: 2px 5px (было 4px 8px)
- Gap между элементами в flexbox: 15px (было 20px)
- **Размеры элементов**:
- Ячейки дней: aspect-ratio остаётся 1:1 (квадраты)
- Border-radius: 3px (было 4px)
- Gap между днями: 1px (было 2px)
#### 📦 Основной контент
- **Добавлен стиль** для `.main` элемента:
- Белый фон
- Тень (совпадает с календарём)
- Padding: 15px
- Закруглённые углы: 8px
#### 🌐 Адаптивность
- На мобильных устройствах (< 768px):
- Макет переходит в режим column
- Календарь занимает полную ширину
- Форма занимает полную ширину под календарём
### Файлы, которые были изменены:
- `public/notes.html` - обновлена структура (удалена `calendar-sidebar` и `calendar-container`)
- `public/style.css` - полностью переработаны стили календаря
- `public/calendar.js` - остался без изменений (функциональность та же)
### Результаты:
✅ Компактный дизайн, который занимает минимум места
✅ Два контейнера рядом с одинаковым стилем
✅ Улучшена читаемость и визуальная иерархия
✅ Поддержка мобильных устройств сохранена
Все функции работают идентично
### Размеры:
- **Было**: 600px max-width для всего контейнера
- **Стало**: 850px max-width, с внутренним двухколонным макетом
- Левая колонка (календарь): 190px
- Промежуток: 15px
- Правая колонка (форма): оставшееся место (flex: 1)
### CSS переменные:
```css
/* Новые значения */
.main-wrapper { gap: 15px; }
.calendar-box { width: 190px; }
.calendar-header h3 { font-size: 11px; }
.weekday { font-size: 8px; }
.calendar-day { font-size: 10px; }
```
### Совместимость:
- ✅ Все современные браузеры
- ✅ Мобильные устройства
- ✅ Экраны высокого разрешения
- ✅ Тёмный режим (не повреждается)
### Производительность:
- Календарь остаётся быстрым и отзывчивым
- Никаких новых зависимостей добавлено не было
- Размер CSS уменьшен благодаря удалению дублирующихся стилей