diff --git a/Build/Sources/Sass/module/_page.scss b/Build/Sources/Sass/module/_page.scss index f4ce1ffe31c235d07153401cfe4f0aeb99090b10..526bae0cdb5e566a9188ca0db02f1894fa78b862 100644 --- a/Build/Sources/Sass/module/_page.scss +++ b/Build/Sources/Sass/module/_page.scss @@ -16,6 +16,8 @@ html { // Variables // :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; @@ -45,14 +47,13 @@ html { } .t3-grid-container { - overflow: hidden; + 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); } -.t3-grid-container-inner { - margin: calc(var(--pagemodule-grid-spacing) * -1); -} - .t3-grid-cell { border-radius: var(--pagemodule-grid-cell-border-radius); background-color: var(--pagemodule-grid-cell-bg); @@ -127,6 +128,12 @@ html { margin: var(--pagemodule-grid-spacing); } +.t3-page-lang-label { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + // // Content elements // diff --git a/typo3/sysext/backend/Classes/View/BackendLayout/BackendLayout.php b/typo3/sysext/backend/Classes/View/BackendLayout/BackendLayout.php index 2dd122c7fd020278a0e9de36226afa95095bb514..dd499041c87087770615628d740adb1551a4e194 100644 --- a/typo3/sysext/backend/Classes/View/BackendLayout/BackendLayout.php +++ b/typo3/sysext/backend/Classes/View/BackendLayout/BackendLayout.php @@ -193,6 +193,16 @@ class BackendLayout return $this->structure['usedColumns'] ?? []; } + public function getColCount(): int + { + return $this->structure['colCount'] ?? 0; + } + + public function getRowCount(): int + { + return $this->structure['rowCount'] ?? 0; + } + /** * @return array */ diff --git a/typo3/sysext/backend/Classes/View/BackendLayoutView.php b/typo3/sysext/backend/Classes/View/BackendLayoutView.php index da8d2049eea7b150a57b6718846432764096099f..d468162c7a981489019dc17cf3458aa76337c931 100644 --- a/typo3/sysext/backend/Classes/View/BackendLayoutView.php +++ b/typo3/sysext/backend/Classes/View/BackendLayoutView.php @@ -345,6 +345,8 @@ class BackendLayoutView implements SingletonInterface $backendLayoutData['__items'] = []; $backendLayoutData['__colPosList'] = []; $backendLayoutData['usedColumns'] = []; + $backendLayoutData['colCount'] = (int)($backendLayoutData['__config']['backend_layout.']['colCount'] ?? 0); + $backendLayoutData['rowCount'] = (int)($backendLayoutData['__config']['backend_layout.']['rowCount'] ?? 0); // create items and colPosList if (!empty($backendLayoutData['__config']['backend_layout.']['rows.'])) { diff --git a/typo3/sysext/backend/Classes/View/Drawing/BackendLayoutRenderer.php b/typo3/sysext/backend/Classes/View/Drawing/BackendLayoutRenderer.php index 63a3321b7e006557538306264e0bb924112abdf1..9fbed714e3fc4ba457811f886b24fbf1df804f5d 100644 --- a/typo3/sysext/backend/Classes/View/Drawing/BackendLayoutRenderer.php +++ b/typo3/sysext/backend/Classes/View/Drawing/BackendLayoutRenderer.php @@ -120,7 +120,9 @@ class BackendLayoutRenderer $context = $localizedContext; } } - $view->assign('grid', $this->getGridForPageLayoutContext($context)); + $grid = $this->getGridForPageLayoutContext($context); + $view->assign('grid', $grid); + $view->assign('gridColumns', array_fill(1, $grid->getContext()->getBackendLayout()->getColCount(), null)); } $rendered = $view->render('PageLayout/PageLayout'); @@ -151,6 +153,7 @@ class BackendLayoutRenderer } $view->assign('grid', $unusedGrid); + $view->assign('gridColumns', null); $rendered .= $view->render('PageLayout/UnusedRecords'); } } diff --git a/typo3/sysext/backend/Resources/Private/Partials/PageLayout/Grid.html b/typo3/sysext/backend/Resources/Private/Partials/PageLayout/Grid.html index 6e95c669ad6eb6606c7ff872f70bdaf237c65f96..1026367a1f68d8be6c970c0d795be9b6e3529fb9 100644 --- a/typo3/sysext/backend/Resources/Private/Partials/PageLayout/Grid.html +++ b/typo3/sysext/backend/Resources/Private/Partials/PageLayout/Grid.html @@ -1,6 +1,13 @@ <div class="t3-grid-container"> <div class="t3-grid-container-inner"> <table class="t3-page-columns t3-grid-table t3js-page-columns"> + <f:if condition="{gridColumns}"> + <colgroup> + <f:for each="{gridColumns}" as="tmpColumn"> + <col span="1" style="width: calc(100% / {gridColumns -> f:count()})"> + </f:for> + </colgroup> + </f:if> <f:for each="{grid.rows}" as="row"> <tr> <f:for each="{row.columns}" as="column"> diff --git a/typo3/sysext/backend/Resources/Public/Css/backend.css b/typo3/sysext/backend/Resources/Public/Css/backend.css index 9ad4f9ae91b560bdb7fd4ac40a4d3641bd086a3c..c37950d5f159509ba666bdbc02b548ba93ae3152 100644 --- a/typo3/sysext/backend/Resources/Public/Css/backend.css +++ b/typo3/sysext/backend/Resources/Public/Css/backend.css @@ -4348,10 +4348,9 @@ td.permission-column-group{padding-left:0;width:200px;white-space:nowrap} .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-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-box-shadow:0 1px 2px 1px rgba(0, 0, 0, .15);--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} +: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-box-shadow:0 1px 2px 1px rgba(0, 0, 0, .15);--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:hidden;margin-bottom:var(--typo3-spacing)} -.t3-grid-container-inner{margin:calc(var(--pagemodule-grid-spacing) * -1)} +.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)} .t3-grid-cell{border-radius:var(--pagemodule-grid-cell-border-radius);background-color:var(--pagemodule-grid-cell-bg);padding:calc(var(--pagemodule-grid-inner-spacing) - var(--pagemodule-grid-spacing)) 0} .t3-grid-cell-restricted{background-color:var(--pagemodule-grid-cell-restricted-bg)} .t3-page-column-unused{background-color:var(--pagemodule-grid-column-unused-bg)} @@ -4368,6 +4367,7 @@ html{scroll-behavior:smooth} } .t3-page-column-header-icons:hover{opacity:1} .t3-page-lang-copyce{margin:var(--pagemodule-grid-spacing)} +.t3-page-lang-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .t3-page-ce{display:block;position:relative;margin:var(--pagemodule-grid-spacing) var(--pagemodule-grid-inner-spacing);transition:height .4s ease-out;overflow:hidden} .t3-page-ce.active-drag{z-index:4500} .t3-page-ce[data-dragdrop-clone] .t3-page-ce-element{-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:.25}