feat(collections/board): keep title of the column always visible

This commit is contained in:
Elian Doran 2025-10-06 18:10:54 +03:00
parent b1638e1ffc
commit c820b5caa4
No known key found for this signature in database
2 changed files with 37 additions and 27 deletions

View File

@ -88,7 +88,6 @@ export default function Column({
onDragOver={isAnyColumnDragging ? handleColumnDragOver : handleDragOver} onDragOver={isAnyColumnDragging ? handleColumnDragOver : handleDragOver}
onDragLeave={handleDragLeave} onDragLeave={handleDragLeave}
onDrop={handleDrop} onDrop={handleDrop}
onWheel={handleScroll}
style={{ style={{
display: !isVisible ? "none" : undefined display: !isVisible ? "none" : undefined
}} }}
@ -120,6 +119,7 @@ export default function Column({
)} )}
</h3> </h3>
<div className="board-column-content" onWheel={handleScroll}>
{(columnItems ?? []).map(({ note, branch }, index) => { {(columnItems ?? []).map(({ note, branch }, index) => {
const showIndicatorBefore = dropPosition?.column === column && const showIndicatorBefore = dropPosition?.column === column &&
dropPosition.index === index && dropPosition.index === index &&
@ -148,6 +148,7 @@ export default function Column({
<AddNewItem api={api} column={column} /> <AddNewItem api={api} column={column} />
</div> </div>
</div>
) )
} }

View File

@ -24,10 +24,13 @@
border: 2px solid transparent; border: 2px solid transparent;
border-radius: 8px; border-radius: 8px;
padding: 0.5em; padding: 0.5em;
padding-bottom: 0;
background-color: var(--accented-background-color); background-color: var(--accented-background-color);
transition: border-color 0.2s ease; transition: border-color 0.2s ease;
overflow-y: auto; overflow-y: auto;
max-height: 100%; max-height: 100%;
display: flex;
flex-direction: column;
} }
.board-view-container .board-column.drag-over { .board-view-container .board-column.drag-over {
@ -37,7 +40,7 @@
.board-view-container .board-column h3 { .board-view-container .board-column h3 {
font-size: 1em; font-size: 1em;
margin-bottom: 0.75em; margin: 0;
padding: 0.5em 0.5em 0.5em 0.5em; padding: 0.5em 0.5em 0.5em 0.5em;
border-bottom: 1px solid var(--main-border-color); border-bottom: 1px solid var(--main-border-color);
cursor: grab; cursor: grab;
@ -98,6 +101,12 @@
cursor: pointer; cursor: pointer;
} }
.board-view-container .board-column > .board-column-content {
flex-grow: 1;
overflow: scroll;
padding-bottom: 0.5em;
}
.board-view-container .board-column h3:hover .edit-icon, .board-view-container .board-column h3:hover .edit-icon,
.board-view-container .board-note:hover .edit-icon { .board-view-container .board-note:hover .edit-icon {
opacity: 1; opacity: 1;