docs: Add detailed improvement log for calendar redesign
This commit is contained in:
parent
7def129e14
commit
b8cc859334
100
IMPROVEMENTS_LOG.md
Normal file
100
IMPROVEMENTS_LOG.md
Normal 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 уменьшен благодаря удалению дублирующихся стилей
|
||||
Loading…
x
Reference in New Issue
Block a user