Fix: Implement proper link scrolling in groups using ExpandableGroup component
Some checks failed
continuous-integration/drone/push Build is failing
Some checks failed
continuous-integration/drone/push Build is failing
- 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:
@@ -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}
|
||||
<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"
|
||||
/>
|
||||
)}
|
||||
<span className="text-truncate">{link.title}</span>
|
||||
</Link>
|
||||
))}
|
||||
{group.links.length > 5 && (
|
||||
<small className="text-muted text-center">+{group.links.length - 5} еще...</small>
|
||||
)}
|
||||
</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"
|
||||
<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"
|
||||
/>
|
||||
)}
|
||||
<small className="text-truncate" style={{ color: designSettings.link_text_color || designSettings.theme_color }}>
|
||||
{link.title}
|
||||
</small>
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</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"
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
@@ -41,6 +41,10 @@
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
border: none;
|
||||
background: white;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
@@ -53,20 +57,19 @@
|
||||
.linkInner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
background: white;
|
||||
padding: 0.75rem;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #e9ecef;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.linkIcon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
margin-right: 1rem;
|
||||
border-radius: 4px;
|
||||
margin-right: 0.75rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@@ -76,17 +79,18 @@
|
||||
}
|
||||
|
||||
.linkTitle {
|
||||
margin: 0 0 0.25rem 0;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.linkDescription {
|
||||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
margin: 0.25rem 0 0 0;
|
||||
font-size: 0.75rem;
|
||||
color: #6c757d;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
||||
@@ -117,7 +117,7 @@ function LinkItem({ link, layout, className = '', overlayColor, overlayOpacity }
|
||||
href={link.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className={`${styles.linkContent} link-item ${layout}-link`}
|
||||
className={`${styles.linkContent} link-item ${layout}-link btn btn-outline-primary btn-sm d-flex align-items-center justify-content-start`}
|
||||
>
|
||||
<div className={styles.linkInner}>
|
||||
{link.image && (
|
||||
@@ -128,9 +128,9 @@ function LinkItem({ link, layout, className = '', overlayColor, overlayOpacity }
|
||||
/>
|
||||
)}
|
||||
<div className={styles.linkInfo}>
|
||||
<h6 className={styles.linkTitle}>{link.title}</h6>
|
||||
<span className={styles.linkTitle}>{link.title}</span>
|
||||
{link.description && (
|
||||
<p className={styles.linkDescription}>{link.description}</p>
|
||||
<small className={styles.linkDescription}>{link.description}</small>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user