feat: move timestamp to footer next to type icon

- Move timestamp from header to footer positioned next to type icon
- Create bookmark-footer-right container for timestamp and type icon
- Hide empty bookmark-header since timestamp is now in footer
- Update footer layout: author (left), timestamp + type icon (right)
- Maintain proper spacing and alignment for all elements
This commit is contained in:
Gigi
2025-10-25 01:41:40 +02:00
parent a48308d57d
commit ae0471946e
2 changed files with 24 additions and 18 deletions

View File

@@ -135,18 +135,6 @@ export const CardView: React.FC<CardViewProps> = ({
)}
<div className="card-text-content">
<div className="bookmark-header">
{getInternalRoute() ? (
<Link
to={getInternalRoute()!}
className="bookmark-date-link"
title="Open in app"
onClick={(e) => e.stopPropagation()}
>
{formatDate(bookmark.created_at ?? bookmark.listUpdatedAt)}
</Link>
) : (
<span className="bookmark-date">{formatDate(bookmark.created_at ?? bookmark.listUpdatedAt)}</span>
)}
</div>
{/* Display title for articles or bookmarks with titles */}
@@ -207,9 +195,23 @@ export const CardView: React.FC<CardViewProps> = ({
{getAuthorDisplayName()}
</Link>
</div>
<span className="bookmark-type">
<FontAwesomeIcon icon={contentTypeIcon} className="content-type-icon" />
</span>
<div className="bookmark-footer-right">
{getInternalRoute() ? (
<Link
to={getInternalRoute()!}
className="bookmark-date-link"
title="Open in app"
onClick={(e) => e.stopPropagation()}
>
{formatDate(bookmark.created_at ?? bookmark.listUpdatedAt)}
</Link>
) : (
<span className="bookmark-date">{formatDate(bookmark.created_at ?? bookmark.listUpdatedAt)}</span>
)}
<span className="bookmark-type">
<FontAwesomeIcon icon={contentTypeIcon} className="content-type-icon" />
</span>
</div>
</div>
</div>
</div>

View File

@@ -165,9 +165,7 @@
}
.card-content .bookmark-header {
margin-bottom: 0.5rem;
display: flex;
justify-content: flex-end;
display: none;
}
.card-content .bookmark-title {
@@ -208,6 +206,12 @@
align-items: center;
}
.card-content .bookmark-footer-right {
display: flex;
align-items: center;
gap: 0.75rem;
}
.card-content .bookmark-footer .bookmark-type {
font-size: 0.9rem;
display: flex;