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