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

feat: add view mode switching for bookmarks with compact list view

Browse Source 
- Add ViewMode type with options: compact, cards, large
- Add view mode toggle buttons in SidebarHeader
- Implement compact list view rendering in BookmarkItem
- Add CSS styles for compact view with condensed layout
- Cards view remains the default and current style
This commit is contained in:
Gigi
2025-10-03 09:44:39 +02:00
parent 5727a38a7e
commit 99c6a4c23b
6 changed files with 221 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
src/index.css
View File

@@ -107,7 +107,19 @@ body {
background: #1a1a1a;
border: 1px solid #333;
border-radius: 8px;
margin-bottom: 0.5rem;
}
.view-mode-controls {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: #1a1a1a;
border: 1px solid #333;
border-radius: 8px;
margin-bottom: 1rem;
justify-content: center;
}
.profile-avatar {
@@ -588,6 +600,10 @@ body {
gap: 1rem;
}
.bookmarks-grid.bookmarks-compact {
gap: 0.5rem;
}
.individual-bookmark {
background: #2a2a2a;
padding: 1.25rem;
@@ -605,6 +621,88 @@ body {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
/* Compact view styles */
.individual-bookmark.compact {
padding: 0.5rem 0.75rem;
background: transparent;
border-bottom: 1px solid #333;
border-radius: 0;
box-shadow: none;
}
.individual-bookmark.compact:hover {
background: #2a2a2a;
transform: none;
box-shadow: none;
}
.compact-header {
display: flex;
align-items: flex-start;
gap: 0.75rem;
}
.bookmark-type-compact {
display: flex;
align-items: center;
gap: 0.25rem;
color: #646cff;
font-size: 0.9rem;
flex-shrink: 0;
padding-top: 0.25rem;
}
.compact-content {
flex: 1;
min-width: 0;
}
.compact-text {
color: #ccc;
font-size: 0.9rem;
line-height: 1.4;
margin-bottom: 0.25rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.compact-meta {
display: flex;
align-items: center;
gap: 0.5rem;
justify-content: space-between;
}
.bookmark-date-compact {
font-size: 0.75rem;
color: #666;
}
.compact-read-btn {
background: #28a745;
color: white;
border: none;
padding: 0.25rem 0.5rem;
border-radius: 4px;
cursor: pointer;
font-size: 0.8rem;
display: flex;
align-items: center;
justify-content: center;
min-width: 28px;
height: 24px;
transition: background-color 0.2s ease;
}
.compact-read-btn:hover {
background: #218838;
}
.compact-read-btn:active {
transform: translateY(1px);
}
.bookmark-header {
display: flex;
justify-content: space-between;