Project

General

Profile

Actions
Copy link

Feature #82959

open

Improve the appearance of tabs in mobile devices using "priority navigation" pattern

Added by Riccardo De Contardi about 7 years ago. Updated over 6 years ago.

Status:
New
Priority:
Could have
Assignee:
-
Category:
Backend User Interface
Target version:
-
Start date:
2017-11-09
Due date:
% Done:

0%

Estimated time:
PHP Version:
Tags:
Complexity:
Sprint Focus:

Description

Mine is a suggestion for the next versions of TYPO3 (10?):

When you edit a page or a content element, the various infos are grouped in tabs; in mobile devices; they currently stack (which is fine, it works well).

My suggestion is to improve this using a pattern called "priority navigation"; you will find here an example: https://codepen.io/Dreamdealer/pen/waVzmK, but if you search for it you will for sure find others.

The concept is that when there is not enough space, the tabs "collapse" in a dropdown, e.g.

|General|Metadata|Appearance|Behaviour|Resources|Language|Access|Categories|

will become for example in smaller screens:

|General|Metadata|Appearance|Behaviour|More+|

all the other items will be in the More+ dropdown

Files

Download all files
Bildschirmfoto 2018-03-10 um 14.00.45.png (121 KB) Bildschirmfoto 2018-03-10 um 14.00.45.png 1.1 Edit page properties tabs Dirk Jüttner, 2018-03-12 02:13
Bildschirmfoto 2018-03-10 um 14.01.14.png (146 KB) Bildschirmfoto 2018-03-10 um 14.01.14.png 1.2 'Edit page properties' accordion and general is open Dirk Jüttner, 2018-03-12 02:17
Bildschirmfoto 2018-03-10 um 14.01.54.png (130 KB) Bildschirmfoto 2018-03-10 um 14.01.54.png 1.3 'Edit page properties' accordion and language is open Dirk Jüttner, 2018-03-12 02:18
Bildschirmfoto 2018-03-10 um 14.02.40.png (305 KB) Bildschirmfoto 2018-03-10 um 14.02.40.png 2.1 'Edit Record' tabs (with error message) Dirk Jüttner, 2018-03-12 02:22
Bildschirmfoto 2018-03-10 um 14.03.13.png (291 KB) Bildschirmfoto 2018-03-10 um 14.03.13.png 2.2 'Edit Record' accordion and general is open (with error message) Dirk Jüttner, 2018-03-12 02:25
Bildschirmfoto 2018-03-10 um 14.03.42.png (215 KB) Bildschirmfoto 2018-03-10 um 14.03.42.png 2.3 'Edit Record' accordion and open options (with error message) Dirk Jüttner, 2018-03-12 02:29
Bildschirmfoto 2018-03-10 um 14.07.17.png (115 KB) Bildschirmfoto 2018-03-10 um 14.07.17.png 3.1 'Link Browser' tabs Dirk Jüttner, 2018-03-12 02:29
Bildschirmfoto 2018-03-12 um 01.59.22.png (145 KB) Bildschirmfoto 2018-03-12 um 01.59.22.png 3.2 'Link Browser' accordion and open Dirk Jüttner, 2018-03-12 02:34
Actions
Copy link Download all files
 #1

Updated by Dirk Jüttner over 6 years ago

Three examples for tabs to accordion are added as screenshots.
1 Pagemodul
1.1 'Edit page properties' tabs
1.2 'Edit page properties' accordion and open general
1.3 'Edit page properties' accordion and open language
2 Listmodul
2.1 'Edit Record' tabs (with error message)
2.2 'Edit Record' accordion and open general (with error message)
2.3 'Edit Record' accordion and open options (with error message)
3 Pagemodul/Link Browser (Modal)
3.1 'Link Browser' tabs
3.2 'Link Browser' accordion and open

On google drive are two clickable dummies for point 1 and 2. Pleace ask Mona for the link, I think it's not open for all.

Actions
Copy link

Also available in: Atom PDF