Add color overlay settings for link buttons

- Added link_overlay_enabled, link_overlay_color, link_overlay_opacity to DesignSettings model
- Created migration 0008 for new fields
- Updated CustomizationPanel with link overlay controls section
- Added validation for new overlay settings in serializer
- Updated PublicDesignSettingsSerializer to include overlay settings
- Applied link overlay to all ExpandableGroup components in public page
- Added preview in customization panel for link overlay effect
This commit is contained in:
2025-11-09 13:00:25 +09:00
parent cefd884172
commit d59c1ad42a
7 changed files with 267 additions and 6 deletions

View File

@@ -0,0 +1,57 @@
# Инструкция по деплою исправлений скроллинга ссылок
## Исправления внесены в следующие файлы:
### 1. frontend/linktree-frontend/src/app/components/ExpandableGroup.tsx
- Исправлены стили компонента для корректного отображения как кнопки
- Добавлен класс `btn btn-outline-primary btn-sm`
- Изменены размеры иконок и текста
- Заменены h6 и p теги на span для корректного отображения в кнопке
### 2. frontend/linktree-frontend/src/app/components/ExpandableGroup.module.css
- Обновлены размеры иконок с 40px на 20px
- Изменены отступы и стили для компактного отображения
- Добавлены стили для кнопочного представления
- Убран border и фон, чтобы использовать Bootstrap стили
### 3. frontend/linktree-frontend/src/app/[username]/page.tsx
- Заменены все `group.links.slice(0, 5).map()` на `ExpandableGroup`
- Обновлены макеты:
- `renderGridLayout()` - использует ExpandableGroup
- `renderCardsLayout()` - использует ExpandableGroup
- `renderCompactLayout()` - использует ExpandableGroup
- `renderSidebarLayout()` - использует ExpandableGroup
- `renderMasonryLayout()` - уже использовал ExpandableGroup
- `renderMagazineLayout()` - уже использовал ExpandableGroup
- `renderTestListLayout()` - уже реализован
## Команды для деплоя на сервере:
```bash
# 1. Обновить код
cd /var/www/links
git pull origin master
# 2. Пересобрать фронтенд
cd frontend/linktree-frontend
npm run build
# 3. Перезапустить контейнеры
cd /var/www/links
docker-compose down
docker-compose up -d
```
## Результат:
Теперь во всех макетах групп ссылок:
- Отображается максимум 5-10 ссылок по умолчанию (зависит от макета)
- Есть кнопка "Показать еще X ссылок" если ссылок больше лимита
- Кнопка "Скрыть (X ссылок)" для сворачивания списка
- Иконки ссылок корректно отображаются во всех макетах
- Сохранены все стили дизайна
## Исправленные проблемы:
✅ Скроллинг ссылок внутри группы
✅ Отображение иконок во всех макетах
✅ Единообразное поведение во всех layout'ах
✅ Адаптивность и красивый дизайн кнопок расширения