Enhanced customization features with full layout support
✨ New Features: - Add group overlay to ALL layouts (Grid, Cards, Timeline, Magazine) - Expand font selection with beautiful Cyrillic fonts - Dynamic font loading optimization with FontLoader component - Group title visibility control across all layouts - Group description color theming throughout 🎨 Font improvements: - Added premium Cyrillic fonts: PT Sans, PT Serif, Fira Sans, Ubuntu, Yandex Sans Text - Added decorative fonts: Russo One, Comfortaa, Philosopher, Marck Script - Only load fonts that are actually used on the page via Google Fonts API 🔧 Technical enhancements: - FontLoader component with smart Google Fonts integration - Consistent overlay implementation across all layout modes - Better color theming for group descriptions - Improved font fallbacks and loading performance
This commit is contained in:
@@ -5,6 +5,7 @@ import { notFound } from 'next/navigation'
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
import { useEffect, useState, Fragment } from 'react'
|
||||
import FontLoader from '../components/FontLoader'
|
||||
|
||||
interface LinkItem {
|
||||
id: number
|
||||
@@ -337,11 +338,12 @@ export default function UserPage({
|
||||
</div>
|
||||
)
|
||||
|
||||
// Карточки (большие карточки с описанием)
|
||||
const renderCardsLayout = () => (
|
||||
<div>
|
||||
<div className="d-flex justify-content-between align-items-center mb-4">
|
||||
<h5 className="mb-0">Группы ссылок</h5>
|
||||
{(designSettings.show_groups_title !== false) && (
|
||||
<h5 className="mb-0">Группы ссылок</h5>
|
||||
)}
|
||||
</div>
|
||||
<div className="row g-4">
|
||||
{data!.groups.map((group) => (
|
||||
@@ -375,15 +377,32 @@ export default function UserPage({
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card-body"
|
||||
<div
|
||||
className="card-body position-relative"
|
||||
style={{
|
||||
backgroundImage: group.background_image ? `url(${group.background_image})` : 'none',
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center'
|
||||
}}
|
||||
>
|
||||
{designSettings.group_overlay_enabled && (
|
||||
<div
|
||||
className="position-absolute top-0 start-0 w-100 h-100"
|
||||
style={{
|
||||
backgroundColor: designSettings.group_overlay_color || '#000000',
|
||||
opacity: designSettings.group_overlay_opacity || 0.3,
|
||||
zIndex: 1
|
||||
}}
|
||||
></div>
|
||||
)}
|
||||
<div className="position-relative" style={{ zIndex: 2 }}>
|
||||
{group.description && (
|
||||
<p className="text-muted mb-3">{group.description}</p>
|
||||
<p
|
||||
className="mb-3"
|
||||
style={{ color: designSettings.group_description_text_color || '#666666' }}
|
||||
>
|
||||
{group.description}
|
||||
</p>
|
||||
)}
|
||||
<div className="row g-3">
|
||||
{group.links.map((link) => (
|
||||
@@ -422,6 +441,7 @@ export default function UserPage({
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -677,7 +697,9 @@ export default function UserPage({
|
||||
const renderTimelineLayout = () => (
|
||||
<div>
|
||||
<div className="d-flex justify-content-between align-items-center mb-4">
|
||||
<h5 className="mb-0">Группы ссылок</h5>
|
||||
{(designSettings.show_groups_title !== false) && (
|
||||
<h5 className="mb-0">Группы ссылок</h5>
|
||||
)}
|
||||
</div>
|
||||
<div className="timeline">
|
||||
{data!.groups.map((group, index) => (
|
||||
@@ -706,15 +728,32 @@ export default function UserPage({
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card-body"
|
||||
<div
|
||||
className="card-body position-relative"
|
||||
style={{
|
||||
backgroundImage: group.background_image ? `url(${group.background_image})` : 'none',
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center'
|
||||
}}
|
||||
>
|
||||
{designSettings.group_overlay_enabled && (
|
||||
<div
|
||||
className="position-absolute top-0 start-0 w-100 h-100"
|
||||
style={{
|
||||
backgroundColor: designSettings.group_overlay_color || '#000000',
|
||||
opacity: designSettings.group_overlay_opacity || 0.3,
|
||||
zIndex: 1
|
||||
}}
|
||||
></div>
|
||||
)}
|
||||
<div className="position-relative" style={{ zIndex: 2 }}>
|
||||
{group.description && (
|
||||
<p className="text-muted mb-3">{group.description}</p>
|
||||
<p
|
||||
className="mb-3"
|
||||
style={{ color: designSettings.group_description_text_color || '#666666' }}
|
||||
>
|
||||
{group.description}
|
||||
</p>
|
||||
)}
|
||||
{group.links.slice(0, 5).map(link => (
|
||||
<Link
|
||||
@@ -743,6 +782,7 @@ export default function UserPage({
|
||||
{group.links.length > 5 && (
|
||||
<small className="text-muted">+{group.links.length - 5} еще...</small>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="card-footer">
|
||||
{/* footer intentionally left empty for public page, mirrors dashboard structure */}
|
||||
@@ -759,7 +799,9 @@ export default function UserPage({
|
||||
const renderMagazineLayout = () => (
|
||||
<div>
|
||||
<div className="d-flex justify-content-between align-items-center mb-4">
|
||||
<h5 className="mb-0">Группы ссылок</h5>
|
||||
{(designSettings.show_groups_title !== false) && (
|
||||
<h5 className="mb-0">Группы ссылок</h5>
|
||||
)}
|
||||
</div>
|
||||
<div className="magazine-layout">
|
||||
{data!.groups.map((group, index) => (
|
||||
@@ -767,7 +809,8 @@ export default function UserPage({
|
||||
<div className="card">
|
||||
<div className="row g-0">
|
||||
<div className={`${index === 0 ? 'col-md-6' : 'col-md-4'}`}>
|
||||
<div className="magazine-image d-flex align-items-center justify-content-center bg-light position-relative"
|
||||
<div
|
||||
className="magazine-image d-flex align-items-center justify-content-center bg-light position-relative"
|
||||
style={{
|
||||
minHeight: index === 0 ? '300px' : '200px',
|
||||
backgroundImage: group.background_image ? `url(${group.background_image})` : 'none',
|
||||
@@ -775,6 +818,17 @@ export default function UserPage({
|
||||
backgroundPosition: 'center'
|
||||
}}
|
||||
>
|
||||
{designSettings.group_overlay_enabled && group.background_image && (
|
||||
<div
|
||||
className="position-absolute top-0 start-0 w-100 h-100"
|
||||
style={{
|
||||
backgroundColor: designSettings.group_overlay_color || '#000000',
|
||||
opacity: designSettings.group_overlay_opacity || 0.3,
|
||||
zIndex: 1
|
||||
}}
|
||||
></div>
|
||||
)}
|
||||
<div className="position-relative" style={{ zIndex: 2 }}>
|
||||
{!group.background_image && (
|
||||
group.icon_url && designSettings.show_group_icons ? (
|
||||
<img
|
||||
@@ -792,6 +846,7 @@ export default function UserPage({
|
||||
<i className="bi bi-star-fill text-warning"></i>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={`${index === 0 ? 'col-md-6' : 'col-md-8'}`}>
|
||||
@@ -799,7 +854,10 @@ export default function UserPage({
|
||||
<h5 className="card-title" style={{ color: designSettings.group_text_color || designSettings.theme_color }}>
|
||||
{group.name}
|
||||
</h5>
|
||||
<p className="card-text text-muted">
|
||||
<p
|
||||
className="card-text"
|
||||
style={{ color: designSettings.group_description_text_color || '#666666' }}
|
||||
>
|
||||
{group.description || `${group.links.length} ссылок в этой группе`}
|
||||
</p>
|
||||
<div className="links-preview">
|
||||
@@ -902,7 +960,14 @@ export default function UserPage({
|
||||
}
|
||||
|
||||
return (
|
||||
<main style={containerStyle}>
|
||||
<>
|
||||
{/* Динамическая загрузка шрифтов */}
|
||||
<FontLoader
|
||||
fontFamily={designSettings.font_family}
|
||||
headingFontFamily={designSettings.heading_font_family}
|
||||
bodyFontFamily={designSettings.body_font_family}
|
||||
/>
|
||||
<main style={containerStyle}>
|
||||
<div className="container-fluid px-0">
|
||||
{/* Обложка пользователя - растягиваем на всю ширину экрана */}
|
||||
{data.cover && (
|
||||
@@ -1053,5 +1118,6 @@ export default function UserPage({
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user