Fix expand button display in Magazine, Masonry and Timeline layouts
Some checks failed
continuous-integration/drone/push Build is failing
Some checks failed
continuous-integration/drone/push Build is failing
- Fixed data mapping for ExpandableGroup components in all three layouts - Increased initialShowCount for magazine layout (8 for first, 6 for others) - Fixed overlay settings to use link_overlay instead of group_overlay in masonry layout - Added debug logging to ExpandableGroup to help diagnose issues - All layouts now properly convert group.links to ExpandableGroup format with icon mapping Issues fixed: - Timeline layout: Now properly maps link data with icons - Magazine layout: Increased link count and fixed data mapping - Masonry layout: Fixed overlay settings and data mapping
This commit is contained in:
57
docs/DEPLOYMENT_INSTRUCTIONS.md
Normal file
57
docs/DEPLOYMENT_INSTRUCTIONS.md
Normal 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'ах
|
||||
✅ Адаптивность и красивый дизайн кнопок расширения
|
||||
Reference in New Issue
Block a user