Meta Issue:#1870944: [Meta] Mobile friendly admin pages

Problem/Motivation

Relook at vertical tabs on admin pages in NARROW screens
Admin URLs:

  1. admin/config/content/formats/filtered_html
  2. admin/config/people/accounts
  3. admin/structure/block/manage/%/%

Proposed resolution

To be determined.

Remaining tasks

To be determined.

CommentFileSizeAuthor
#4 verticaltabs.png469.61 KBshyamala
Vertical tabs in format configuration page.png480.4 KBshyamala

Comments

shyamala’s picture

shyamala commented
Issue summary: View changes

added admin/config/people/accounts

henrijs.seso’s picture

henrijs.seso commented

Proposed resolution would be to turn vertical tabs into accordion while in narrow.

nod_’s picture

nod_
Primary language French
Location Lille
commented
Component: CSS » javascript
Status: Active » Postponed (maintainer needs more info)

Open the page in a narrow screen don't resize it after loading, it will avoid vtabs and will use collaspsible details elements.

Ideal would be to turn on and off the vtabs dynamically but that's a pain to do. Let me know what you want to do with it.

echoz’s picture

echoz commented

Nice! I just want to note here that my patch at #1872606: Single Column admin pages, details summary causes scrollbar resolves the horizontal scrollbar caused by the erroneous 100% width on the details summary at narrow viewport.

shyamala’s picture

shyamala commented
Status: Postponed (maintainer needs more info) » Closed (works as designed)
StatusFileSize
new verticaltabs.png469.61 KB

Works beautifully when loaded in small screens. (not resized)
Attached image,

kevinsiji’s picture

kevinsiji commented
Status: Closed (works as designed) » Active

Reloading will disable the vertical tab, but switching the orientation is not disabling the vertical tab. There should be some way to disable vertical tab while switching the orientation to small width.

Note: Not tested on a real tablet, but tested in chrome "Overrides/Device metrics" of the developer tab.

nod_’s picture

nod_
Primary language French
Location Lille
commented
Status: Active » Closed (works as designed)

That's a "feature" :þ

Hang out around #1812298: Handle mobile orientation change for JS widgets to address your issue.

nod_’s picture

nod_
Primary language French
Location Lille
commented
Issue summary: View changes

Added admin/structure/block/manage/%/%