Project

General

Profile

Actions

Task #103380

open

UX: Backend Page Module - improve visual topology to distinguish between Page, Page-Column and Content-Element

Added by Ayke Halder 2 months ago. Updated about 1 month ago.

Status:
Under Review
Priority:
Should have
Assignee:
-
Category:
Backend User Interface
Target version:
Start date:
2024-03-12
Due date:
% Done:

0%

Estimated time:
TYPO3 Version:
13
PHP Version:
Tags:
UX
Complexity:
Sprint Focus:

Description

In the Page Module identical spacing and backgrounds do not give a clear visual clue or guidance to the eye to distinguish the elements Page, Page-Column and Content-Element on first sight.

Identical spacing is in use for
  • Page to Page-Columns and in between Page-Columns (blue arrows)
  • Page-Column to Content-Elements (green arrows)
  • Content-Element to inner Content (orange arrows)
And the background colors are not unique:
  • Page: white
  • Page-Column: gray
  • Content-Elements: white again

Example: Page Module – current state

Especially on a multi-column page-layout with multiple CEs this becomes cluttered for an editor not working daily in the TYPO3 backend:

Design idea: reduce spacing for Page-Columns

By reducing the spacing of the Page-Columns, it looks more like one page seperated into gray input areas (= Page-Columns).

Instead of gray boxes put on top of the page:
– Page-Column spacing doubled for simulation purpose.–

Example: Page Module – with reduced Page-Column spacing

Reduced spacing of the Page-Columns makes the page with its columns become the background.

No change on the design of Content-Elements:
The Content-Elements are put on top - as highlighted by the "drop-shadow below CEs.


Files


Related issues 3 (3 open0 closed)

Related to TYPO3 Core - Bug #103386: UX: Backend Page Module - remove dotted gray line around the whole pageUnder Review2024-03-13

Actions
Related to TYPO3 Core - Task #95229: The colPos of the page module are visually clutteredAccepted2021-09-15

Actions
Related to TYPO3 Core - Feature #103539: UX: Backend Page Module - hide CEs buttons and simplify new content buttons to declutter viewUnder Review2024-04-05

Actions
Actions #1

Updated by Ayke Halder 2 months ago

  • Related to Bug #103386: UX: Backend Page Module - remove dotted gray line around the whole page added
Actions #2

Updated by Ayke Halder 2 months ago · Edited

The grid-column-styles are also used on Page Module translation-view. (And might also be used in workspaces?)

In translation-view the column-spacing (border-spacing-x) must stay as is or even be upsized. The row-spacing (border-spacing-y) should be reduced.

So this is some major change.

Actions #3

Updated by Ayke Halder about 2 months ago

  • Related to Task #95229: The colPos of the page module are visually cluttered added
Actions #4

Updated by Gerrit Code Review about 2 months ago

  • Status changed from New to Under Review

Patch set 1 for branch main of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/83672

Actions #5

Updated by Gerrit Code Review about 2 months ago

Patch set 2 for branch main of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/83672

Actions #6

Updated by Gerrit Code Review about 2 months ago

Patch set 3 for branch main of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/83672

Updated by Ayke Halder about 2 months ago

Grid with different spacings (new)

--pagemodule-grid-spacing: .5rem;
--pagemodule-grid-inner-spacing: 1.375rem;
--pagemodule-element-spacing: .625rem;
--pagemodule-element-inner-spacing: 1rem;

Grid with identical spacings (TYPO3 as-is)

--pagemodule-grid-spacing: 1rem;
--pagemodule-grid-inner-spacing: 1rem;
--pagemodule-element-spacing: 1rem;
--pagemodule-element-inner-spacing: 1rem;

Actions #8

Updated by Ayke Halder about 2 months ago

  • Related to Feature #103539: UX: Backend Page Module - hide CEs buttons and simplify new content buttons to declutter view added
Actions #9

Updated by Ayke Halder about 1 month ago

  • Tags set to UX
Actions

Also available in: Atom PDF