aljaz/boris
1
1
Fork 0
mirror of https://github.com/dergigi/boris.git synced 2025-12-26 19:14:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

refactor: create highlight-header for timestamp positioning

Browse Source 
- Add highlight-header container for timestamp
- Position header absolutely in top-right corner
- Remove padding-right workaround from highlight-content
- Use pointer-events to allow timestamp click while preventing header clicks
- Cleaner structure prevents any text overlap naturally
This commit is contained in:
Gigi
2025-10-13 14:45:21 +02:00
parent cf47ceb74b
commit 397c956e87
2 changed files with 13 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/HighlightItem.tsx
View File

@@ -304,13 +304,15 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
onClick={handleItemClick}
style={{ cursor: onHighlightClick ? 'pointer' : 'default' }}
>
<CompactButton
className="highlight-timestamp"
title={new Date(highlight.created_at * 1000).toLocaleString()}
onClick={(e) => e.stopPropagation()}
>
{formatDateCompact(highlight.created_at)}
</CompactButton>
<div className="highlight-header">
<CompactButton
className="highlight-timestamp"
title={new Date(highlight.created_at * 1000).toLocaleString()}
onClick={(e) => e.stopPropagation()}
>
{formatDateCompact(highlight.created_at)}
</CompactButton>
</div>
<div className="highlight-quote-icon">
<FontAwesomeIcon icon={faQuoteLeft} />

6
src/styles/layout/highlights.css
View File

@@ -111,7 +111,9 @@
.compact-button:disabled { opacity: 0.5; cursor: not-allowed; }
.compact-button:disabled:hover { background: none; color: #888; transform: none; }
.highlight-timestamp { position: absolute; top: 0.5rem; right: 0.75rem; font-size: 0.75rem; font-weight: 500; white-space: nowrap; }
.highlight-header { position: absolute; top: 0; right: 0; padding: 0.5rem 0.75rem; display: flex; align-items: center; justify-content: flex-end; pointer-events: none; }
.highlight-header .compact-button { pointer-events: auto; }
.highlight-timestamp { font-size: 0.75rem; font-weight: 500; white-space: nowrap; }
/* Level colors in sidebar items */
.highlight-item.level-mine { border-color: color-mix(in srgb, var(--highlight-color-mine, #ffff00) 60%, #333); box-shadow: 0 0 0 1px color-mix(in srgb, var(--highlight-color-mine, #ffff00) 25%, transparent); }
@@ -134,7 +136,7 @@
.highlight-item.level-friends .highlight-quote-icon { color: var(--highlight-color-friends, #f97316); }
.highlight-item.level-nostrverse .highlight-quote-icon { color: var(--highlight-color-nostrverse, #9333ea); }
.highlight-content { flex: 1; display: flex; flex-direction: column; gap: 0.75rem; padding-right: 3.5rem; }
.highlight-content { flex: 1; display: flex; flex-direction: column; gap: 0.75rem; }
.highlight-text { margin: 0; padding: 0; font-style: italic; color: #ddd; line-height: 1.6; border-left: none; font-size: 0.95rem; }
.highlight-comment { margin-top: 0.5rem; padding: 0.75rem; background: rgba(100, 108, 255, 0.1); border-left: 3px solid #646cff; border-radius: 4px; font-size: 0.875rem; color: #ddd; line-height: 1.5; }