On mobile, plugin menu occludes content

AI 生成的摘要

On mobile, plugin menu occludes content

A discussion is ongoing about the mobile user experience of the admin area. barryvan reports an issue where the plugin menu overlaps content on mobile devices, sharing a screenshot of the problem. cpradio mentions that the admin area is not designed to be mobile-friendly and is best accessed via desktop or tablet. However, codinghorror notes that flag handling is an exception and should work well on mobile.

To address the issue, sam invites others to improve the mobile admin stylesheet by adding a pr-welcome tag. Meanwhile, barryvan shares a custom CSS solution that fixes the problem on his own site, displaying the result in a second screenshot.

This is, of course, not a huge issue; I understand that using advanced plugins on a phone is likely not the best idea. :wink:

This is on a pinned-to-home Chrome tab on a Sony Xperia Z5 Premium (inhale) with the display scaling tweaked to have a lower dppx ratio; not sure of CSS pixel dimensions, sorry.

2 个赞

The admin area isn’t mobile friendly and is really meant to only be utilized via desktop/tablet.

3 个赞

With the exception of flag handling which should work well on mobile.

1 个赞

I am putting a pr-welcome on this in case anyone feels like improving the mobile admin stylesheet.

2 个赞

I’ve not had a chance to put together a PR for this, but I’ve fixed it on my own site with custom CSS for now:

.admin-nav {
    position: static;
    float: none;
    width: 100%;
    font-size: 80%;
    margin: 0;
}

.admin-nav .nav-stacked {
    display: flex;
    flex-wrap: wrap;
}

.nav-stacked li {
    padding: 0;
    margin: 0;
}

.nav-stacked li a {
    padding: 5px 10px;
    font-size: 100%;
    line-height: auto;
}

.nav-stacked .active > a::after, .nav-stacked li > a.active::after {
    content: none;
}

.admin-detail {
    padding: 0;
}

…which produces something like this:

5 个赞