craftcms / craftcms/cms

UI problem in nested entries

Open
#5,053 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug severity:normal ux :smile:
Dominant language
PHP
Stars
3.6k
Forks
705
Avg merge
1d 5h
Merged PRs (30d)
134

Description

Description

When working on medium or small screen, the entries from a structured list in the CP are difficult to manipulate.
The problem occurs in the latest version of every majors browsers (Chrome, Safari, Firefox…)

Large screens

When displaying in large screen, the nested entries are very easy to figure out and to manipulate. Nested entry level 1, 2 and 3 are clearly identifiable here.

large-screens

Medium screens (like MacBook)

In a medium size screen, the "open" and "closed" marks are very hard to distinguish and there is no way to know the indent level of an entry.
Clients never find by themselves that the "open" and "close" marks are interactive.

medium-screens--like-macbook-

Small screens

Nested entries can't be opened or closed in a small screen.

small-screens

Additional info
  • Craft version: Craft Pro 3.3.7
  • PHP version: 7.2.16
  • Database driver & version: MySQL 5.7.27
  • Plugins & versions:
    Activity Log 1.0.1
    Control Panel CSS 2.2.0
    Default Dashboard 1.0.5
    Embedded Assets 2.0.12
    Imager v2.3.0
    inflexions-backup 1.3.5
    Migration Manager 3.0.20.1
    Redactor 2.4.0
    Redirect plugin for Craft 3 1.0.23
    SEOmatic 3.2.27

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing structured-list entries in the Control Panel on medium and small screens with Chrome, Safari, and Firefox, using the supplied screenshots as the visual reference. Done means nested levels are distinguishable and the open/closed controls remain discoverable and usable at those screen sizes.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, php
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.