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

style(ui): use full-width slim chevron toggle; keep IconButton square for actions

Browse Source
This commit is contained in:
Gigi
2025-10-03 01:02:52 +02:00
parent 9b245b3d29
commit 974cecb85f
2 changed files with 33 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/components/BookmarkItem.tsx
View File

@@ -99,13 +99,14 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onS
</div>
))}
{extractedUrls.length > 3 && (
<IconButton
icon={urlsExpanded ? faChevronUp : faChevronDown}
ariaLabel={urlsExpanded ? 'Collapse URLs' : 'Expand URLs'}
title={urlsExpanded ? 'Collapse URLs' : 'Expand URLs'}
<button
className="expand-toggle"
onClick={() => setUrlsExpanded(v => !v)}
size={32}
/>
aria-label={urlsExpanded ? 'Collapse URLs' : 'Expand URLs'}
title={urlsExpanded ? 'Collapse URLs' : 'Expand URLs'}
>
<FontAwesomeIcon icon={urlsExpanded ? faChevronUp : faChevronDown} />
</button>
)}
</div>
)}
@@ -123,33 +124,33 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onS
)}
{contentLength > 210 && (
<IconButton
icon={expanded ? faChevronUp : faChevronDown}
ariaLabel={expanded ? 'Collapse' : 'Expand'}
title={expanded ? 'Collapse' : 'Expand'}
<button
className="expand-toggle"
onClick={() => setExpanded(v => !v)}
size={32}
/>
aria-label={expanded ? 'Collapse' : 'Expand'}
title={expanded ? 'Collapse' : 'Expand'}
>
<FontAwesomeIcon icon={expanded ? faChevronUp : faChevronDown} />
</button>
)}
<div className="bookmark-meta">
{eventNevent ? (
<IconButton
icon={getKindIcon(bookmark.kind)}
ariaLabel="Open event in search"
title="Open event in search"
<a
href={`https://search.dergigi.com/e/${eventNevent}`}
variant="ghost"
size={32}
/>
target="_blank"
rel="noopener noreferrer"
className="kind-icon-link"
title="Open event in search"
>
<span className="kind-icon">
<FontAwesomeIcon icon={getKindIcon(bookmark.kind)} />
</span>
</a>
) : (
<IconButton
icon={getKindIcon(bookmark.kind)}
ariaLabel="Event kind"
title="Event kind"
variant="ghost"
size={32}
/>
<span className="kind-icon">
<FontAwesomeIcon icon={getKindIcon(bookmark.kind)} />
</span>
)}
<span>
<a

7
src/index.css
View File

@@ -542,11 +542,16 @@ body {
}
.expand-toggle {
margin-top: 0.25rem;
margin: 0.25rem 0;
background: transparent;
border: none;
color: #888;
cursor: pointer;
width: 100%;
height: 22px; /* half of default icon button */
display: flex;
align-items: center;
justify-content: center;
}
.expand-toggle:hover {