From fa1762e733581d790f8d8a49a3b87b725ff1f7cb Mon Sep 17 00:00:00 2001
From: Benjamin Franzke <ben@bnf.dev>
Date: Tue, 23 Apr 2024 10:26:02 +0200
Subject: [PATCH] [BUGFIX] Make CE actions clickable after edit or visibility
toggle
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
When a content element (CE) gets edited or the visibility is toggled,
the page module is reloaded with an anchor in the URL to scroll to the
content element that was updated.
After #103381 it was not possible anymore to click the "+ Content"
button above such CE. The reason is that a pseudo element
`:target:before` is generated with a specific height and margin to
overcome the height of the floating module docheader, overlaying the
CE action button.
In the patch mentioned before, `overflow: hidden` was removed to make
the `box-shadow` of the CE visible, finally causing this bug.
To solve this issue the pseudo element add it #97036 is replaced by the
CSS option scroll-padding-top. It incorperates the maximum docheader
size plus a slight margin that is slightly lower than the grid margin –
but not equal to – to move shadows of adjacent elements out of sight.
Resolves: #103672
Related: #103381
Related: #97036
Releases: main, 12.4
Change-Id: I8d5c9eadd45e5507e39b1fb728de65d31c1d6689
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/83998
Tested-by: Benjamin Franzke <ben@bnf.dev>
Tested-by: Ayke Halder <mail@ayke-halder.de>
Tested-by: core-ci <typo3@b13.com>
Reviewed-by: Ayke Halder <mail@ayke-halder.de>
Reviewed-by: Willi Wehmeier <wwwehmeier@gmail.com>
Tested-by: André Buchmann <andy.schliesser@gmail.com>
Tested-by: Willi Wehmeier <wwwehmeier@gmail.com>
Reviewed-by: André Buchmann <andy.schliesser@gmail.com>
Reviewed-by: Benjamin Franzke <ben@bnf.dev>
---
Build/Sources/Sass/component/_module.scss | 1 +
Build/Sources/Sass/component/_root.scss | 1 +
Build/Sources/Sass/module/_page.scss | 14 --------------
.../backend/Resources/Public/Css/backend.css | 6 ++----
4 files changed, 4 insertions(+), 18 deletions(-)
diff --git a/Build/Sources/Sass/component/_module.scss b/Build/Sources/Sass/component/_module.scss
index f582db62d0bc..9a1e8de64681 100644
--- a/Build/Sources/Sass/component/_module.scss
+++ b/Build/Sources/Sass/component/_module.scss
@@ -40,6 +40,7 @@
// Use overflow-y: auto to ensure ckeditor dropdowns
// do not conflict with height: 100% on <body>
overflow-y: auto;
+ scroll-padding-top: calc(var(--module-docheader-height) + .75rem);
}
.module-dark {
diff --git a/Build/Sources/Sass/component/_root.scss b/Build/Sources/Sass/component/_root.scss
index 982fa3f3c46e..181748910f41 100644
--- a/Build/Sources/Sass/component/_root.scss
+++ b/Build/Sources/Sass/component/_root.scss
@@ -5,6 +5,7 @@
//
:root {
color-scheme: only light;
+ scroll-behavior: smooth;
// General
--typo3-font-family-sans-serif: #{$font-family-sans-serif};
diff --git a/Build/Sources/Sass/module/_page.scss b/Build/Sources/Sass/module/_page.scss
index 5b9cd68a03c1..52e4718850a7 100644
--- a/Build/Sources/Sass/module/_page.scss
+++ b/Build/Sources/Sass/module/_page.scss
@@ -1,17 +1,3 @@
-//
-// Fix scroll behavior with local anchor in page module.
-//
-html {
- scroll-behavior: smooth;
-}
-
-:target:before {
- content: "";
- display: block;
- height: 80px;
- margin: -80px 0 0;
-}
-
//
// Variables
//
diff --git a/typo3/sysext/backend/Resources/Public/Css/backend.css b/typo3/sysext/backend/Resources/Public/Css/backend.css
index b7cbd489d748..0e562e4feb04 100644
--- a/typo3/sysext/backend/Resources/Public/Css/backend.css
+++ b/typo3/sysext/backend/Resources/Public/Css/backend.css
@@ -2790,7 +2790,7 @@ button[aria-expanded=true]:not(:disabled) .modulemenu-indicator:after{transform:
.scaffold-modulemenu-expanded .modulemenu-action{margin-inline-start:0;width:100%}
.scaffold-modulemenu-expanded .modulemenu-indicator{display:block!important}
.scaffold-modulemenu-expanded .modulemenu-name{position:static;margin:0;margin-inline-start:1em;width:auto;height:auto}
-:root{color-scheme:only light;--typo3-font-family-sans-serif:Verdana,Arial,Helvetica,sans-serif;--typo3-font-family-monospace:SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;--typo3-font-family:var(--typo3-font-family-sans-serif);--typo3-font-family-code:var(--typo3-font-family-monospace);--typo3-spacing:1rem;--typo3-color-scheme:auto;--typo3-header-font-family:"Source Sans 3",sans-serif;--typo3-shadow-2:0 1px 2px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.2)),0 1px 2px light-dark(rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.28));--typo3-shadow-4:0 2px 4px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.2)),0 2px 4px light-dark(rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.28));--typo3-shadow-8:0 4px 8px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.2)),0 4px 8px light-dark(rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.28));--typo3-shadow-16:0 8px 16px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.2)),0 8px 16px light-dark(rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.28));--typo3-shadow-28:0 14px 28px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.2)),0 14px 28px light-dark(rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.28));--typo3-shadow-64:0 0 4px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.2)),0 32px 64px light-dark(rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.28));--typo3-component-color:light-dark(#000, #fff);--typo3-component-primary-color:light-dark(#0078e6, #66aef0);--typo3-component-secondary-color:light-dark(#666666, #999999);--typo3-component-match-highlight-color:inherit;--typo3-component-match-highlight-bg:rgba(234, 92, 0, .33);--typo3-component-bg:light-dark(#fff, rgb(30, 30, 30));--typo3-component-link-color:light-dark(#0078e6, #66aef0);--typo3-component-link-hover-color:light-dark(#1a86e9, #80bcf3);--typo3-component-font-size:12px;--typo3-component-line-height:1.5;--typo3-component-border-radius:4px;--typo3-component-border-width:1px;--typo3-component-border-color:light-dark(rgb(215, 215, 215), rgb(51, 51, 51));--typo3-component-padding-y:.75rem;--typo3-component-padding-x:1rem;--typo3-component-box-shadow:var(--typo3-shadow-2);--typo3-component-box-shadow-strong:var(--typo3-shadow-4);--typo3-component-box-shadow-tooltip:var(--typo3-shadow-8);--typo3-component-box-shadow-flyout:var(--typo3-shadow-16);--typo3-component-box-shadow-dialog:var(--typo3-shadow-28);--typo3-component-box-shadow-window:var(--typo3-shadow-64);--typo3-component-hover-color:var(--typo3-component-color);--typo3-component-hover-bg:light-dark(#f2f8fe, rgb(51, 51, 51));--typo3-component-hover-border-color:light-dark(#d9ebfb, rgb(90, 90, 90));--typo3-component-focus-color:var(--typo3-component-color);--typo3-component-focus-bg:light-dark(#f2f8fe, #003c73);--typo3-component-focus-border-color:light-dark(#3393eb, #00488a);--typo3-component-active-color:#fff;--typo3-component-active-bg:light-dark(#3393eb, #0066c4);--typo3-component-active-border-color:light-dark(#3393eb, #0060b8);--typo3-component-disabled-color:rgb(115, 115, 115);--typo3-component-disabled-bg:transparent;--typo3-component-disabled-border-color:transparent;--typo3-component-spacing:2rem;--typo3-list-item-padding-y:.5rem;--typo3-list-item-padding-x:.75rem;--typo3-list-item-hover-color:var(--typo3-component-hover-color);--typo3-list-item-hover-bg:var(--typo3-component-hover-bg);--typo3-list-item-hover-border-color:var(--typo3-component-hover-border-color);--typo3-list-item-focus-color:var(--typo3-component-focus-color);--typo3-list-item-focus-bg:var(--typo3-component-focus-bg);--typo3-list-item-focus-border-color:var(--typo3-component-focus-border-color);--typo3-list-item-active-color:var(--typo3-list-item-focus-color);--typo3-list-item-active-bg:var(--typo3-list-item-focus-bg);--typo3-list-item-active-border-color:var(--typo3-list-item-focus-border-color);--typo3-list-item-disabled-color:var(--typo3-component-disabled-color);--typo3-list-item-disabled-bg:var(--typo3-component-disabled-bg);--typo3-list-item-disabled-border-color:var(--typo3-component-disabled-border-color);--typo3-legend-font-weight:600;--typo3-input-color:#333;--typo3-input-color-placeholder:rgb(187, 187, 187);--typo3-input-bg:#fefefe;--typo3-input-border-width:var(--bs-border-width);--typo3-input-border-color:rgb(187, 187, 187);--typo3-input-border-radius:0.125rem;--typo3-input-box-shadow:var(--bs-box-shadow-inset);--typo3-input-focus-color:#333;--typo3-input-focus-bg:#fefefe;--typo3-input-focus-border-color:#80bcf3;--typo3-input-focus-box-shadow:0 0 0 0.25rem rgba(0, 120, 230, 0.25);--typo3-input-disabled-bg:var(--bs-secondary-bg)}
+:root{color-scheme:only light;scroll-behavior:smooth;--typo3-font-family-sans-serif:Verdana,Arial,Helvetica,sans-serif;--typo3-font-family-monospace:SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;--typo3-font-family:var(--typo3-font-family-sans-serif);--typo3-font-family-code:var(--typo3-font-family-monospace);--typo3-spacing:1rem;--typo3-color-scheme:auto;--typo3-header-font-family:"Source Sans 3",sans-serif;--typo3-shadow-2:0 1px 2px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.2)),0 1px 2px light-dark(rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.28));--typo3-shadow-4:0 2px 4px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.2)),0 2px 4px light-dark(rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.28));--typo3-shadow-8:0 4px 8px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.2)),0 4px 8px light-dark(rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.28));--typo3-shadow-16:0 8px 16px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.2)),0 8px 16px light-dark(rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.28));--typo3-shadow-28:0 14px 28px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.2)),0 14px 28px light-dark(rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.28));--typo3-shadow-64:0 0 4px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.2)),0 32px 64px light-dark(rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.28));--typo3-component-color:light-dark(#000, #fff);--typo3-component-primary-color:light-dark(#0078e6, #66aef0);--typo3-component-secondary-color:light-dark(#666666, #999999);--typo3-component-match-highlight-color:inherit;--typo3-component-match-highlight-bg:rgba(234, 92, 0, .33);--typo3-component-bg:light-dark(#fff, rgb(30, 30, 30));--typo3-component-link-color:light-dark(#0078e6, #66aef0);--typo3-component-link-hover-color:light-dark(#1a86e9, #80bcf3);--typo3-component-font-size:12px;--typo3-component-line-height:1.5;--typo3-component-border-radius:4px;--typo3-component-border-width:1px;--typo3-component-border-color:light-dark(rgb(215, 215, 215), rgb(51, 51, 51));--typo3-component-padding-y:.75rem;--typo3-component-padding-x:1rem;--typo3-component-box-shadow:var(--typo3-shadow-2);--typo3-component-box-shadow-strong:var(--typo3-shadow-4);--typo3-component-box-shadow-tooltip:var(--typo3-shadow-8);--typo3-component-box-shadow-flyout:var(--typo3-shadow-16);--typo3-component-box-shadow-dialog:var(--typo3-shadow-28);--typo3-component-box-shadow-window:var(--typo3-shadow-64);--typo3-component-hover-color:var(--typo3-component-color);--typo3-component-hover-bg:light-dark(#f2f8fe, rgb(51, 51, 51));--typo3-component-hover-border-color:light-dark(#d9ebfb, rgb(90, 90, 90));--typo3-component-focus-color:var(--typo3-component-color);--typo3-component-focus-bg:light-dark(#f2f8fe, #003c73);--typo3-component-focus-border-color:light-dark(#3393eb, #00488a);--typo3-component-active-color:#fff;--typo3-component-active-bg:light-dark(#3393eb, #0066c4);--typo3-component-active-border-color:light-dark(#3393eb, #0060b8);--typo3-component-disabled-color:rgb(115, 115, 115);--typo3-component-disabled-bg:transparent;--typo3-component-disabled-border-color:transparent;--typo3-component-spacing:2rem;--typo3-list-item-padding-y:.5rem;--typo3-list-item-padding-x:.75rem;--typo3-list-item-hover-color:var(--typo3-component-hover-color);--typo3-list-item-hover-bg:var(--typo3-component-hover-bg);--typo3-list-item-hover-border-color:var(--typo3-component-hover-border-color);--typo3-list-item-focus-color:var(--typo3-component-focus-color);--typo3-list-item-focus-bg:var(--typo3-component-focus-bg);--typo3-list-item-focus-border-color:var(--typo3-component-focus-border-color);--typo3-list-item-active-color:var(--typo3-list-item-focus-color);--typo3-list-item-active-bg:var(--typo3-list-item-focus-bg);--typo3-list-item-active-border-color:var(--typo3-list-item-focus-border-color);--typo3-list-item-disabled-color:var(--typo3-component-disabled-color);--typo3-list-item-disabled-bg:var(--typo3-component-disabled-bg);--typo3-list-item-disabled-border-color:var(--typo3-component-disabled-border-color);--typo3-legend-font-weight:600;--typo3-input-color:#333;--typo3-input-color-placeholder:rgb(187, 187, 187);--typo3-input-bg:#fefefe;--typo3-input-border-width:var(--bs-border-width);--typo3-input-border-color:rgb(187, 187, 187);--typo3-input-border-radius:0.125rem;--typo3-input-box-shadow:var(--bs-box-shadow-inset);--typo3-input-focus-color:#333;--typo3-input-focus-bg:#fefefe;--typo3-input-focus-border-color:#80bcf3;--typo3-input-focus-box-shadow:0 0 0 0.25rem rgba(0, 120, 230, 0.25);--typo3-input-disabled-bg:var(--bs-secondary-bg)}
[data-color-scheme=auto]{color-scheme:light dark}
[data-color-scheme=dark]{color-scheme:only dark}
[data-color-scheme=light]{color-scheme:only light}
@@ -3021,7 +3021,7 @@ a.dropdown-toggle{text-decoration:none}
.diff-item-result ins{color:#107c10;background-color:#dbebdb;text-decoration:none}
.diff-item-result.diff-item-result-inline{white-space:normal}
:root{--module-bg:#fff;--module-color:inherit;--module-dark-bg:#333;--module-dark-color:#ccc;--module-docheader-height:67px;--module-docheader-zindex:300;--module-docheader-padding-y:5px;--module-docheader-padding-x:24px;--module-docheader-padding:var(--module-docheader-padding-y) var(--module-docheader-padding-x);--module-docheader-spacing-y:4px;--module-docheader-spacing-x:8px;--module-docheader-spacing:var(--module-docheader-spacing-y) var(--module-docheader-spacing-x);--module-docheader-bg:#eee;--module-docheader-border:#c3c3c3;--module-docheader-bar-height:26px;--module-docheader-scroll-offset:calc(-1 * (var(--module-docheader-bar-height) + var(--module-docheader-padding-y)));--module-body-padding-y:24px;--module-body-padding-x:24px;--module-body-padding:var(--module-body-padding-y) var(--module-body-padding-x)}
-.module{height:100%;width:100%;background-color:var(--module-bg);color:var(--module-color);overflow-y:auto}
+.module{height:100%;width:100%;background-color:var(--module-bg);color:var(--module-color);overflow-y:auto;scroll-padding-top:calc(var(--module-docheader-height) + .75rem)}
.module-dark{--module-color:var(--module-dark-color);--module-bg:var(--module-dark-bg)}
.module-loading-indicator{position:fixed;min-height:5px;width:100%;z-index:999999}
.module-loading-indicator.nprogress-custom-parent{position:fixed;top:0}
@@ -4375,8 +4375,6 @@ td.permission-column-group{padding-inline-start:0;width:200px;white-space:nowrap
.localconf-item-body{padding:1rem}
.localconf-item-body>:first-child{margin-top:0}
.localconf-item-body>:last-child{margin-bottom:0}
-html{scroll-behavior:smooth}
-:target:before{content:"";display:block;height:80px;margin:-80px 0 0}
:root{--pagemodule-grid-border-radius:5px;--pagemodule-grid-border-color:rgba(0, 0, 0, .15);--pagemodule-grid-spacing:1rem;--pagemodule-grid-inner-spacing:1rem;--pagemodule-grid-cell-header-size:1em;--pagemodule-grid-cell-border-radius:4px;--pagemodule-grid-cell-bg:#f2f2f2;--pagemodule-grid-cell-restricted-bg:#fcf1e2;--pagemodule-grid-column-unused-bg:#fcf1e2;--pagemodule-element-spacing:1rem;--pagemodule-element-bg:#fff;--pagemodule-element-border-radius:2px;--pagemodule-element-warning-bg:#fcf1e2;--pagemodule-element-warning-border-color:#f6dab1;--pagemodule-element-hidden-bg:#f2f2f2;--pagemodule-dropzone-bg:#fcf1e2;--pagemodule-dropzone-possible-bg:#dbebdb}
.t3-grid-table{border-collapse:separate;border-spacing:var(--pagemodule-grid-spacing);min-width:100%;table-layout:fixed}
.t3-grid-container{overflow-y:hidden;overflow-x:auto;border-radius:var(--pagemodule-grid-border-radius);border:1px dotted var(--pagemodule-grid-border-color);margin-bottom:var(--typo3-spacing)}
--
GitLab