medium screen Entries selection needs improvement

[narration-sd]

Description

I've hit this before (#2151), but let's go at it from a different angle, as this bit me hard again last night:

• pictures if not source code appear more effective as stories
• letting you suggest what to do appears better than proposing

Steps to reproduce

1. Be on a medium-width screen -- a pad or phone, perhaps, but here as I often encounter the problem, by having a non-floating debug panel open on a laptop's browser. You just need to have the hamburger menu showing.

2. Be on an entries listing screen, as here:

3. Click the hamburger to start navigating to another Section's entries. Looks good, contrasting, nice and clear in the Craft way:

4. Now click Entries, as you would.... Boom. You get no contrast, a white area seeming to list only the Section you were previously on -- thus no way to change to another desired Section.

In fact, you appear to be (and are) right back where you had been when the sequence started:

5. Still not having noticed the tiny, out of line of vision clue there actually is, you in Zork/Adventure sense, not to say exasperation, try clicking the Section title.

Boom again....

Now you get what you were after, the listing of Entry Sections, so you can set the list of Entries you want.

Still, I must add, with the no-longer-very-relevant previous Section in smaller print at the top:

6. Yes, the previous section name is in some sense relevant, but not really, as once you arrive here, that section is nicely listed and highlighted among the other choices.

It seems this nice highlighting with contrast list, minus the irrelevant extras above and also below it, points to a very easy solution to the problems??

7. I wasn't going to suggest anything, but in interests of even less time wasted, I guess I am...at least possible direction one could go...

• ditch the invisble pull-down which that top subpanel actually is, with its tiny off-axis arrow the only clue
• just show the nice contrast-highlighted menu, when hamburger-Entries clicks are made.
• if you click what you have, you just get back to view where you were again. Otherwise you go to the selection, same presentation

8. I originally couched this in a 'perhaps for glasses-wearers' and even ageist ways, but really that's not so. Visual perception as you may know is only acute at center, and particularlly follows attention. When you are using the hamburger, or looking at left edge titles, you really aren't seeing some little thing over to the right at all.

Maybe on a vertical phone, but not a vertical or horizontal tablet, or narrow/double-paneled laptop screen.

8. Ok? Really trying here, Brandon.

Additional info

PHP version 7.1.11 Database driver & version MySQL 5.7.20 Image driver & version GD 7.1.11 Craft edition & version Craft Pro 3.0.0-RC6 dev latest Yii version 2.0.13.1 Twig version 2.4.4 Guzzle version 6.2.1 Imagine version 0.7-dev Plugins yes

[narration-sd]

p.s. where I back away again from the suggested solution is to say, no, of course it isn't 'simple'.

No solution is, nor any I've ever done in design myself. You might know I fully appreciate that.

We do tend to say it, when the first flash of insight comes. But again, it never is, even when the only load turns out to occur in the consideration. Because that is what is never simple.

[brandonkelly]

I don’t think we should always show the nav when there’s no room to have it be alongside the content, but we can at least increase the contrast of the dropdown button a bit:

Or we could increase it by a lot:

I could go either way. Kindof like the look of the latter, but it looks a little awkward when it’s expanded (hard to tell the difference between the button and the selected option). But we could fix that by either changing the button’s active styles, or the selected dropdown option’s styles, when in this mobile view.

[brandonkelly]

We couldn’t make the darker version work, unfortunately, so we ended up with this:

Know that’s not what you’re asking for, but hopefully the center-aligned text coupled with increased text contrast, helps make the button stand out a bit more.

[narration-sd]

Brandon, it's a great improvement ✅

Have just been playing with it at sizes/phone sims, and this design with its aspects really gets rid of the eye-tricking problem, which is the fundamental - great.

Aesthetically do have some thought of what using an intermediate font size (24px - 18/20px? - 14px, combined with moving the text-and-arrowmark to the left like the other titles might do.

Not sure how much trouble that might be, esp. across platforms. Also it's sort of preferring a general style vs. more specifically phone, on phones.

The greyscale values you've got do work, even on my non-IPS laptop, another checkmark.

Basically, it's quite a trick to make this mult-layer hierarchy work 'transparently' when going from two-dimensional presentation space to one-d, for sure.