From 2efe738eb6e89d90ebbbac17f259eda9f8118c25 Mon Sep 17 00:00:00 2001
From: Benjamin Kott <benjamin.kott@outlook.com>
Date: Wed, 5 Jul 2023 22:49:29 +0200
Subject: [PATCH] [BUGFIX] Set column width for table grids in page module
The backend layout representation in the backend implements a table
based layout. While the columns spanning was interpreted correctly,
the definition of how wide a column is in the defined grid was missing,
causing the cells to take up an unexpected amount of space.
Resolves: #101041
Resolves: #100961
Related: #97306
Related: #94629
Releases: main, 12.4
Change-Id: I8ab426e0c6e136135bf1bcf6bcc0368f76d4f4b0
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/79827
Tested-by: core-ci <typo3@b13.com>
Tested-by: Benjamin Kott <benjamin.kott@outlook.com>
Reviewed-by: Benjamin Kott <benjamin.kott@outlook.com>
---
Build/Sources/Sass/module/_page.scss | 17 ++++++++++++-----
.../View/BackendLayout/BackendLayout.php | 10 ++++++++++
.../backend/Classes/View/BackendLayoutView.php | 2 ++
.../View/Drawing/BackendLayoutRenderer.php | 5 ++++-
.../Private/Partials/PageLayout/Grid.html | 7 +++++++
.../backend/Resources/Public/Css/backend.css | 6 +++---
6 files changed, 38 insertions(+), 9 deletions(-)
diff --git a/Build/Sources/Sass/module/_page.scss b/Build/Sources/Sass/module/_page.scss
index f4ce1ffe31c2..526bae0cdb5e 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 2dd122c7fd02..dd499041c870 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 da8d2049eea7..d468162c7a98 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 63a3321b7e00..9fbed714e3fc 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 6e95c669ad6e..1026367a1f68 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 9ad4f9ae91b5..c37950d5f159 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}
--
GitLab