grav-plugin-admin

grav-plugin-admin copied to clipboard

When the browser window size is small enough to render the hamburger menu:

the sidebar menu is hidden, but still active. I cannot click any element on the page, but instead I click something and if I'm hovering one of the hidden menu items, one of them is clicked (e.g. I randomly clicked, and got logged out because I clicked the invisible "Logout" link.

Also happening when the text size is increased enough to trigger this layout.

Adding class="hidden" on #admin-sidebar works, need to find out if this can be added via JS or it's best to do it via CSS directly.

What resolution does this occur at? Testing at 360x640 (portrait and landscape) with Chrome's Device Emulator, my biggest problem is that once the hamburger-menu is clicked, it cannot be hidden again - it pops back up, forcing me to navigate to Pages -> Home (edit) again, thus inevitably discarding any changes made (.gif).

I can, however, edit and format content without issue, apart from the Editor-toolbar flowing uncomfortably:

Interesting, I cannot replicate it any more.

I got this result with Grav v1.1.17 and Admin v1.2.14. Though admittedly Samsung S3 is a rather small viewport to emulate, but some newer phones appear to use roughly the same viewport dimensions.

Oh I was referring to the original issue described.

I noticed some strange event handling with the hamburger icon, in the device emulation. Sometimes it's triggered 2 times, but not always.

@OleVik Do you still have these issues?

By and large, yes. On Core 1.7.0-rc.19, Admin v1.10.0-rc.19. the hamburger icon competes with the normal menu. They do not appear to operate from the same utility, so the hamburger-icon loads and the regular menu waits for the DOM to load before hiding:

This solves itself when the DOM loads, but they should be synchronous. The hamburger-icon also competes with the navigation-bar, though thankfully it's z-indexed above it. From a UI/UX-standpoint, a lot is lost from this, as I lose access to the three first buttons because the navigation-bar does not scale. The fourth and fifth is inaccessible behind the hamburger-icon, and also serves to obscure it. The title and path, and redundant "Save location", is also hidden.

It would be a better approach to tie them together, such that the entire navigation-bar is reduced at low widths and placed in dropdowns - or better yet, flexibly placed in a new row.

You could tack onto this that on Core 1.7.10 with Admin 1.10.10, the login is still inaccessible. On a viewport of 673x608:

There is no scrollbar, because of overflow: hidden; applied to the body. Only keyboard-navigation works.

@w00fz @rhukster I think that with the next version of admin we should take a mobile-first approach and make sure that the admin works from a modern phone/tablet. :)

That's a given

Until then, could we have overflow back, so it's at least possible to scroll through the interface? Not all viewports conform to 1920x1080 or higher, some are wonkier.

@w00fz was this closed by a specific commit or release?

By accident.

I'll add to this. On mobile (on real device only, can't repro in devtools), the save button seem to disappear sometimes but I'm still not able to reproduce it. Here's a screenshot from a customer. Triggering a dialog (by switching to Expert mode), then canceling re-renders the page properly.

I'd say most small entrepreneurs want to be able to edit content on the fly without having to actually go sit in front of a computer for an hour so responsiveness is critical (at least for my base).

I took a peak and the whole thing is full of absolute positioning and translates. At that point, I think the best thing would be a redesign of that part. I ended up at least making the top buttons not overlap the burger and shrinking a bunch of things.

That's all the time I can spare today but I'd maybe like to try my hand at rewriting this part.

any chance of a PR? :)

any chance of a PR? :)

I simply added the CSS in the admin from the mytheme.php file for now. I can paste my stuff here when I'm done playing around. Could probably package everything into a PR sometimes this week.

@rhukster If I have your permission to get rid of the weird burger and font-awesome icons, I'll block a whole day and rebuild the top bar. 😄

the burger is to toggle the sidebar, so the functionality is not something we can lose. Same with the icons, we can't lose the functionality but if we can get them in some other way (dropdown, etc) then i'm fine with that.

the burger is to toggle the sidebar, so the functionality is not something we can lose. Same with the icons, we can't lose the functionality but if we can get them in some other way (dropdown, etc) then i'm fine with that.

Of course! By "getting rid" I meant "redesign". Anyway, I'll try to squeeze this sometime this week.