aljaz/boris
1
1
Fork 0
mirror of https://github.com/dergigi/boris.git synced 2026-01-06 00:14:48 +01:00
Code Issues Packages Projects Releases Wiki Activity

refactor: make compact list view even more compact

Browse Source 
- Move all elements to a single horizontal line
- Reduce text preview from 100 to 60 characters
- Decrease padding and font sizes
- Fix row height to 28px for consistent spacing
- Improve text truncation with ellipsis
This commit is contained in:
Gigi
2025-10-03 09:49:07 +02:00
parent 99c6a4c23b
commit 288b96d614
3 changed files with 34 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/BookmarkItem.tsx
View File

@@ -81,7 +81,7 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onS
if (viewMode === 'compact') {
return (
<div key={`${bookmark.id}-${index}`} className={`individual-bookmark compact ${bookmark.isPrivate ? 'private-bookmark' : ''}`}>
<div className="compact-header">
<div className="compact-row">
<span className="bookmark-type-compact">
{bookmark.isPrivate ? (
<>
@@ -92,25 +92,21 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onS
<FontAwesomeIcon icon={faBookmark} className="bookmark-visibility public" />
)}
</span>
<div className="compact-content">
{bookmark.content && (
<div className="compact-text">
<ContentWithResolvedProfiles content={bookmark.content.slice(0, 100) + (bookmark.content.length > 100 ? '…' : '')} />
</div>
)}
<div className="compact-meta">
<span className="bookmark-date-compact">{formatDate(bookmark.created_at)}</span>
{hasUrls && (
<button
className="compact-read-btn"
onClick={(e) => { e.preventDefault(); onSelectUrl?.(extractedUrls[0]) }}
title={firstUrlClassification?.buttonText}
>
<FontAwesomeIcon icon={getIconForUrlType(extractedUrls[0])} />
</button>
)}
{bookmark.content && (
<div className="compact-text">
<ContentWithResolvedProfiles content={bookmark.content.slice(0, 60) + (bookmark.content.length > 60 ? '…' : '')} />
</div>
</div>
)}
<span className="bookmark-date-compact">{formatDate(bookmark.created_at)}</span>
{hasUrls && (
<button
className="compact-read-btn"
onClick={(e) => { e.preventDefault(); onSelectUrl?.(extractedUrls[0]) }}
title={firstUrlClassification?.buttonText}
>
<FontAwesomeIcon icon={getIconForUrlType(extractedUrls[0])} />
</button>
)}
</div>
</div>
)