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

refactor: move quote icon to top-left corner and make it smaller

Browse Source 
- Position quote icon absolutely in top-left corner (0.5rem, 0.5rem)
- Reduce font size from 1.2rem to 0.85rem
- Add opacity: 0.7 to make it more subtle
- Remove quote icon from document flow
- Update content padding to be uniform (3rem 1rem)
- Remove gap from highlight-item since content is only in-flow element
- Clean up mobile styles for quote icon
This commit is contained in:
Gigi
2025-10-13 15:25:10 +02:00
parent b1f951daf5
commit 3459179310
2 changed files with 7 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/HighlightItem.tsx
View File

@@ -314,6 +314,10 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
</CompactButton>
</div>
<div className="highlight-quote-icon">
<FontAwesomeIcon icon={faQuoteLeft} />
</div>
{relayIndicator && (
<CompactButton
className="highlight-relay-indicator"
@@ -325,10 +329,6 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
/>
)}
<div className="highlight-quote-icon">
<FontAwesomeIcon icon={faQuoteLeft} />
</div>
<div className="highlight-content">
<blockquote className="highlight-text">
{highlight.content}

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

@@ -100,7 +100,7 @@
.empty-hint { font-size: 0.875rem; color: #666; margin-top: 0.5rem; }
.highlights-list { overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 1rem; }
.highlight-item { background: #1e1e1e; border-left: 1px solid #333; border-right: 1px solid #333; padding: 0; display: flex; gap: 0.75rem; transition: border-color 0.2s ease; position: relative; }
.highlight-item { background: #1e1e1e; border-left: 1px solid #333; border-right: 1px solid #333; padding: 0; display: flex; transition: border-color 0.2s ease; position: relative; }
.highlight-item:hover { border-color: #646cff; }
.highlight-item:hover .highlight-header,
.highlight-item:hover .highlight-footer { border-color: #646cff; }
@@ -130,13 +130,12 @@
.highlight-item.level-nostrverse .highlight-header,
.highlight-item.level-nostrverse .highlight-footer { border-color: color-mix(in srgb, var(--highlight-color-nostrverse, #9333ea) 60%, #333); }
.highlight-quote-icon { color: #646cff; font-size: 1.2rem; flex-shrink: 0; padding: 3rem 0 3rem 1rem; }
.highlight-quote-icon { position: absolute; top: 0.5rem; left: 0.5rem; color: #646cff; font-size: 0.85rem; opacity: 0.7; z-index: 10; }
.highlight-relay-indicator { position: absolute; bottom: 0.5rem; left: 0.5rem; opacity: 0.7; z-index: 10; }
.highlight-relay-indicator:hover { opacity: 1; }
/* Mobile: Larger touch targets and better spacing */
@media (max-width: 768px) {
.highlight-quote-icon { min-width: 100px; }
.highlight-relay-indicator { padding: 8px; min-width: var(--min-touch-target); min-height: var(--min-touch-target); }
.compact-button { padding: 0.5rem; min-width: var(--min-touch-target); min-height: var(--min-touch-target); }
}
@@ -146,7 +145,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: 3rem 1rem 3rem 0; }
.highlight-content { flex: 1; display: flex; flex-direction: column; gap: 0.75rem; padding: 3rem 1rem; }
.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; }