diff --git a/app/components/open_project/common/main_menu_toggle_component.sass b/app/components/open_project/common/main_menu_toggle_component.sass index df9c97121a18..be09a35ae16e 100644 --- a/app/components/open_project/common/main_menu_toggle_component.sass +++ b/app/components/open_project/common/main_menu_toggle_component.sass @@ -57,7 +57,7 @@ @media only screen and (max-width: $breakpoint-lg) // Special logic for those pages that already use the new layout and have the content-bodyRight filled (so basically, the split screen opened full height on mobile) - #content:has(#content-bodyRight > *) + @include split-pane-active #menu-toggle--expand-button top: 60px .op-wp-breadcrumb diff --git a/frontend/src/assets/sass/backlogs/_master_backlog.sass b/frontend/src/assets/sass/backlogs/_master_backlog.sass index c153a3f1966e..32adfe2af8c0 100644 --- a/frontend/src/assets/sass/backlogs/_master_backlog.sass +++ b/frontend/src/assets/sass/backlogs/_master_backlog.sass @@ -33,27 +33,20 @@ $op-backlogs-header--points-min-width-narrow: 2rem .controller-backlogs\/backlog.action-details @include extended-content--bottom -.op-backlogs-header, -.op-sprint-header - display: grid - grid-template-columns: 1fr minmax($op-backlogs-header--points-min-width, max-content) auto - align-items: center - - &--actions - margin-left: var(--stack-gap-normal) + #content-body + padding-right: 0 - &--menu - margin-left: var(--stack-gap-normal) - -.op-backlogs-header - grid-template-areas: "collapsible points menu" - - &--points - margin-left: var(--stack-gap-normal) - font-variant-numeric: tabular-nums + // Base layout restores padding-right: 1rem on #content-body when the + // split pane is open (specificity 0,3,0,0). Override it back to 0. + @include split-pane-active + #content-body + padding-right: 0 .op-sprint-header + display: grid + grid-template-columns: 1fr minmax($op-backlogs-header--points-min-width, max-content) auto grid-template-areas: "collapsible actions menu" + align-items: center &--actions, &--menu @@ -90,7 +83,7 @@ $op-backlogs-header--points-min-width-narrow: 2rem container-name: backlogsListsContainer container-type: inline-size -.op-backlogs-container, .op-sprint-planning-container +.op-sprint-planning-container display: flex flex-direction: row gap: var(--stack-gap-normal) @@ -99,7 +92,7 @@ $op-backlogs-header--points-min-width-narrow: 2rem overflow: hidden -.op-backlogs-lists, .op-sprint-planning-lists +.op-sprint-planning-lists display: flex flex-direction: column gap: var(--stack-gap-normal) @@ -107,65 +100,26 @@ $op-backlogs-header--points-min-width-narrow: 2rem min-height: 0 overflow-y: auto overflow-x: hidden - -.op-sprint-planning-lists padding-top: var(--stack-padding-normal) padding-bottom: var(--stack-padding-normal) -//------------------ Header form responsive styling ----------------------- -// Note: Using hardcoded values because Sass doesn't interpolate variables in -// @container query conditions. -// Note: 1102px is twice the small breakpoint plus the 16px gap. Since we show two boxes next to each other, -// we thus assure that the form wraps at the small breakpoint. -@container backlogsListsContainer (min-width: 1102px) - .op-backlogs-header-form - .FormControl-spacingWrapper - flex-direction: row - column-gap: 0.5rem - flex-wrap: wrap - - & > :first-child - flex: 1 1 33% - -@container backlogsListsContainer (min-width: 1550px) - .op-backlogs-header-form - .FormControl-spacingWrapper - & > :first-child - flex-basis: 25% - -//------------------ Header responsive styling ----------------------- -// Note: 1143px is matching the the breakpoint we use within PVC for the container query. -// Thus the layout switches at the exact same point. -@container backlogsListsContainer (max-width: 1443px) - .op-backlogs-header - grid-template-rows: 1fr auto - grid-template-areas: "collapsible points menu" "collapsible . . " - align-items: baseline - - &--menu - align-self: flex-start - // Unfortunately, the invisible button style bites us here again. - margin-top: -6px - - //------------------ Sprint planning divider (side-by-side only) ---- @container backlogsListsContainer (min-width: 655px) - .op-sprint-planning-lists:not(:last-child) - border-right: 1px solid var(--borderColor-default) + .op-sprint-planning-lists padding-right: var(--stack-gap-normal) + &:not(:last-child) + border-right: 1px solid var(--borderColor-default) + //------------------ Mobile responsive styling ----------------------- @container backlogsListsContainer (max-width: 654px) - .op-backlogs-header - grid-template-columns: 1fr minmax($op-backlogs-header--points-min-width-narrow, max-content) auto - .op-backlogs-points-label display: none .op-backlogs-story grid-template-columns: 1fr minmax($op-backlogs-header--points-min-width-narrow, max-content) auto - .op-backlogs-container, .op-sprint-planning-container + .op-sprint-planning-container height: unset overflow: auto flex-direction: column diff --git a/frontend/src/global_styles/layout/_base_mobile.sass b/frontend/src/global_styles/layout/_base_mobile.sass index 1c3ce5eaa6aa..9075f79adbed 100644 --- a/frontend/src/global_styles/layout/_base_mobile.sass +++ b/frontend/src/global_styles/layout/_base_mobile.sass @@ -80,7 +80,7 @@ // Hide the header, when the content-bodyRight is shown, because it has it's own header. // Otherwise, the sticky header would lay on top of the split screen - #content:has(#content-bodyRight > *) + @include split-pane-active page-header, sub-header display: none @@ -107,7 +107,7 @@ #main grid-template-columns: auto - #content:has(#content-bodyRight > *) + @include split-pane-active grid-template-columns: 1fr auto // As soon as the split screen has content (so basically when its opened), it takes the available whole space diff --git a/frontend/src/global_styles/openproject/_mixins.sass b/frontend/src/global_styles/openproject/_mixins.sass index 8d088d8e9818..a6c4abca4d1b 100644 --- a/frontend/src/global_styles/openproject/_mixins.sass +++ b/frontend/src/global_styles/openproject/_mixins.sass @@ -263,6 +263,10 @@ $scrollbar-size: 10px .work-packages--filters-optional-container margin-right: 15px +@mixin split-pane-active + #content:has(#content-bodyRight > *) + @content + @mixin modifying--placeholder border: 1px dashed var(--accent-color) pointer-events: none