101 lines
4.9 KiB
Markdown
101 lines
4.9 KiB
Markdown
# Лог улучшений дизайна календаря
|
||
|
||
## Итерация 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 уменьшен благодаря удалению дублирующихся стилей
|