trevor/links
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: Implement proper link scrolling in groups using ExpandableGroup component
Some checks failed
continuous-integration/drone/push Build is failing
Details

Browse Source 
- Replace all hardcoded group.links.slice(0, 5) with ExpandableGroup component
- Updated renderGridLayout, renderCardsLayout, renderCompactLayout, renderSidebarLayout
- Fixed icon display in ExpandableGroup component
- Improved styling for button-style links
- All group layouts now support expandable link lists with 'Show X more links' functionality
This commit is contained in:
Andrey K. Choi
2025-11-09 12:08:35 +09:00
parent 90ac03663f
commit cefd884172
3 changed files with 58 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
frontend/linktree-frontend/src/app/[username]/page.tsx
View File

@@ -303,33 +303,19 @@ export default function UserPage({
</p>
)}
<div className="d-grid gap-2">
{group.links.slice(0, 5).map((link) => (
<Link
key={link.id}
href={link.url}
target="_blank"
rel="noopener noreferrer"
className="btn btn-outline-primary btn-sm d-flex align-items-center justify-content-start"
style={{
borderColor: designSettings.theme_color,
color: designSettings.link_text_color || designSettings.theme_color
}}
>
{designSettings.show_link_icons && link.icon_url && (
<img
src={link.icon_url}
width={16}
height={16}
className="me-2 rounded"
alt={link.title}
/>
)}
<span className="text-truncate">{link.title}</span>
</Link>
))}
{group.links.length > 5 && (
<small className="text-muted text-center">+{group.links.length - 5} еще...</small>
)}
<ExpandableGroup
links={group.links.map(link => ({
id: link.id,
title: link.title,
url: link.url,
description: link.description,
image: designSettings.show_link_icons ? link.icon_url : undefined
}))}
layout="grid"
initialShowCount={5}
className=""
linkClassName="btn btn-outline-primary btn-sm d-flex align-items-center justify-content-start"
/>
</div>
</div>
</div>
@@ -476,35 +462,19 @@ export default function UserPage({
<i className="bi bi-star-fill text-warning ms-2"></i>
)}
</div>
<div className="row">
{group.links.map((link) => (
<div key={link.id} className="col-auto mb-1">
<Link
href={link.url}
target="_blank"
rel="noopener noreferrer"
className="btn btn-outline-secondary btn-sm d-flex align-items-center"
style={{
borderColor: designSettings.theme_color + '60',
color: designSettings.link_text_color || designSettings.theme_color
}}
>
{designSettings.show_link_icons && link.icon && (
<img
src={link.icon}
alt=""
width={16}
height={16}
className="me-1 rounded"
/>
)}
<small className="text-truncate" style={{ color: designSettings.link_text_color || designSettings.theme_color }}>
{link.title}
</small>
</Link>
</div>
))}
</div>
<ExpandableGroup
links={group.links.map(link => ({
id: link.id,
title: link.title,
url: link.url,
description: link.description,
image: designSettings.show_link_icons ? link.icon_url : undefined
}))}
layout="cards"
initialShowCount={10}
className="row"
linkClassName="col-auto mb-1"
/>
</div>
</div>
))}
@@ -572,39 +542,19 @@ export default function UserPage({
backgroundPosition: 'center'
}}
>
<div className="row">
{group.links.map((link) => (
<div key={link.id} className="col-12 col-md-6 col-lg-4 mb-3">
<Link
href={link.url}
target="_blank"
rel="noopener noreferrer"
className="card h-100 text-decoration-none border"
style={{ borderColor: designSettings.theme_color + '40' }}
>
<div className="card-body d-flex align-items-center">
{designSettings.show_link_icons && link.icon && (
<img
src={link.icon}
alt=""
width={24}
height={24}
className="me-2 rounded"
/>
)}
<div>
<h6 className="mb-1" style={{ color: designSettings.link_text_color || designSettings.theme_color }}>
{link.title}
</h6>
{link.description && (
<small className="text-muted">{link.description}</small>
)}
</div>
</div>
</Link>
</div>
))}
</div>
<ExpandableGroup
links={group.links.map(link => ({
id: link.id,
title: link.title,
url: link.url,
description: link.description,
image: designSettings.show_link_icons ? link.icon_url : undefined
}))}
layout="cards"
initialShowCount={6}
className="row"
linkClassName="col-12 col-md-6 col-lg-4 mb-3"
/>
</div>
</div>
))}