till/managarten
1
0
Fork 0
mirror of https://github.com/Memo-2023/mana-monorepo.git synced 2026-05-23 09:46:42 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

fix(ui): full-width draggable header bar on PageShell

Browse source 
- Drag handle bar spans full width (not just the icon)
- Entire bar is draggable with grab cursor
- Subtle background color differentiates it from content (border-bottom)
- Hover/active states for visual feedback
- DotsSixVertical icon rotated 90° (horizontal grip lines)
- Dark mode support

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Till JS 2026-04-03 13:20:53 +02:00
parent d7b146a186
commit e8a4b984f3
1 changed files with 30 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

44
apps/manacore/apps/web/src/lib/components/page-carousel/PageShell.svelte
View file

@ -113,8 +113,8 @@
? `height: ${heightPx}px; min-height: 0;` ? `height: ${heightPx}px; min-height: 0;`
: ''}" : ''}"
> >
<div class="drag-handle-bar"> <div class="drag-handle-bar" draggable="true">
<span class="drag-handle" draggable="true"><DotsSixVertical size={14} /></span> <span class="drag-handle-icon"><DotsSixVertical size={14} /></span>
</div> </div>
<!-- Header --> <!-- Header -->
@ -245,29 +245,45 @@
.drag-handle-bar { .drag-handle-bar {
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: 0.25rem 0 0; align-items: center;
padding: 0.375rem 0;
cursor: grab;
background: rgba(0, 0, 0, 0.02);
border-bottom: 1px solid rgba(0, 0, 0, 0.04);
transition: background 0.15s;
} }
.drag-handle { .drag-handle-bar:hover {
background: rgba(0, 0, 0, 0.04);
}
.drag-handle-bar:active {
cursor: grabbing;
background: rgba(0, 0, 0, 0.06);
}
:global(.dark) .drag-handle-bar {
background: rgba(255, 255, 255, 0.02);
border-bottom-color: rgba(255, 255, 255, 0.04);
}
:global(.dark) .drag-handle-bar:hover {
background: rgba(255, 255, 255, 0.05);
}
:global(.dark) .drag-handle-bar:active {
background: rgba(255, 255, 255, 0.08);
}
.drag-handle-icon {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 32px;
height: 14px;
color: #d1d5db; color: #d1d5db;
cursor: grab; transform: rotate(90deg);
border-radius: 0.25rem;
transition: color 0.15s; transition: color 0.15s;
} }
.drag-handle:hover { .drag-handle-bar:hover .drag-handle-icon {
color: #9ca3af; color: #9ca3af;
} }
.drag-handle:active { :global(.dark) .drag-handle-icon {
cursor: grabbing;
}
:global(.dark) .drag-handle {
color: #3f3b38; color: #3f3b38;
} }
:global(.dark) .drag-handle:hover { :global(.dark) .drag-handle-bar:hover .drag-handle-icon {
color: #6b7280; color: #6b7280;
} }