diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index 7041c8c1..3f40a269 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -899,6 +899,19 @@ html[data-bs-theme="dark"] .shadow-xl {
box-shadow: var(--shadow-card) !important;
}
+html[data-bs-theme="dark"] .tasks-board-column-header,
+html[data-bs-theme="dark"] .tasks-board-subcolumn-header {
+ box-shadow: none !important;
+}
+
+html[data-bs-theme="dark"] .tasks-board-column-header-sticky {
+ background: var(--surface-elevated);
+}
+
+html[data-bs-theme="dark"] .tasks-board-group-header-sticky {
+ background: var(--surface-elevated);
+}
+
/* Скрытые полосы прокрутки везде */
* {
@@ -1001,35 +1014,66 @@ html[data-bs-theme="dark"] .shadow-xl {
--tasks-board-stack-gap: 0.5rem;
--tasks-board-column-header-height: 4rem;
--tasks-board-subcolumn-header-height: 4rem;
+ --tasks-board-group-header-stack-height: calc(
+ var(--tasks-board-column-header-height, 4rem)
+ + var(--tasks-board-stack-gap, 0.5rem)
+ + var(--tasks-board-subcolumn-header-height, 4rem)
+ + 1rem
+ + 1px
+ );
}
- .tasks-board-column-header {
+ .tasks-board-column-header-sticky {
position: sticky;
top: 0;
z-index: 30;
+ padding-bottom: var(--tasks-board-stack-gap, 0.5rem);
+ background: var(--background);
+ }
+
+ .tasks-board-column-header-sticky-standalone {
+ padding-bottom: 0;
+ }
+
+ .tasks-board-column-header {
min-height: var(--tasks-board-column-header-height, 4rem);
background: var(--surface-elevated);
}
- .tasks-board-subcolumn-header-row {
+ .tasks-board-group-header-sticky {
position: sticky;
- top: calc(
- var(--tasks-board-column-header-height, 4rem)
- + var(--tasks-board-stack-gap, 0.5rem)
- );
- z-index: 20;
+ top: 0;
+ z-index: 30;
+ background: var(--background);
+ }
+
+ .tasks-board-subcolumn-header-row {
min-height: var(--tasks-board-subcolumn-header-height, 4rem);
+ }
+
+ .tasks-board-subcolumn-header-surface::after {
+ position: absolute;
+ right: -1px;
+ bottom: -0.75rem;
+ left: -1px;
+ height: 0.75rem;
+ border: 1px solid transparent;
+ border-top: 0;
+ border-radius: 0 0 0.75rem 0.75rem;
+ pointer-events: none;
+ background: transparent;
+ content: "";
+ }
+
+ .tasks-board-column-group[data-content-bottom-reached="true"] .tasks-board-subcolumn-header-surface::after {
+ border-color: var(--border-subtle);
+ border-top-color: transparent;
background: var(--surface-secondary);
}
.tasks-board-lane-header {
position: sticky;
- top: calc(
- var(--tasks-board-column-header-height, 4rem)
- + var(--tasks-board-subcolumn-header-height, 4rem)
- + var(--tasks-board-stack-gap, 0.5rem)
- + var(--tasks-board-stack-gap, 0.5rem)
- );
+ top: var(--tasks-board-group-header-stack-height, calc(9.5rem + 1px));
z-index: 15;
background: var(--surface-secondary);
}
@@ -1043,4 +1087,5 @@ html[data-bs-theme="dark"] .shadow-xl {
height: 3.9375rem;
content: "";
}
+
}
diff --git a/frontend/src/app/tasks/page.tsx b/frontend/src/app/tasks/page.tsx
index 1b15a4f9..295368f2 100644
--- a/frontend/src/app/tasks/page.tsx
+++ b/frontend/src/app/tasks/page.tsx
@@ -1009,11 +1009,12 @@ function BoardColumn({
isDragging ? "opacity-70" : ""
}`}
>
-
+
{contentVisible ?
@@ -1363,6 +1367,8 @@ function BoardColumnGroup({
onColumnMount,
contentVisible,
onToggleContentVisibility,
+ subcolumnHeaders,
+ subcolumnGridTemplate,
hideOnMobile = false,
}: {
column: TaskColumn;
@@ -1379,6 +1385,8 @@ function BoardColumnGroup({
onColumnMount: (columnId: number, node: HTMLElement | null) => void;
contentVisible: boolean;
onToggleContentVisibility: () => void;
+ subcolumnHeaders: ReactNode;
+ subcolumnGridTemplate: string;
hideOnMobile?: boolean;
}) {
const {
@@ -1408,14 +1416,15 @@ function BoardColumnGroup({
}}
className={`${hideOnMobile ? "hidden xl:flex" : "flex"} tasks-board-column-group min-w-0 flex-col ${isDragging ? "opacity-70" : ""}`}
>
-
-
+
+
+ {contentVisible ? (
+
+
+ {subcolumnHeaders}
+
+
+ ) : null}
{contentVisible ? (
-
+
{children}
) : null}
@@ -1550,7 +1570,7 @@ function BoardColumnRowView({
-
+