Consistent save zones (and mobile-friendly too) #1598

Like!

I've done an initial commit that brings this to the article write panel. Will expand to the forms, pages, styles panels soon. Probably some padding fixes to be done too (it's close to the iOS bottom UI chrome in my iPhone right now).

Forms, pages and styles now also has the same save zone behaviour as the write panel.

I need to finalise the CSS for the bottom-aligned save zone on mobile in Hive admin themes and probably refactor the alert message area (which has been on my radar for a while now). So this could/will change a bit more in due course.

Also, do we bring this to the preferences panel too? Not sure.

1/ The source code order on the Forms / Pages / Styles around the “Save” button is not great - the “export to disk” checkbox comes after the submit button. A more logical order for keyboard users, AT, etc has it before the submit (as it is currently, TXP 4.8.x). At present you move it visually before the submit for smaller screens, you could just flip your MQ @media (min-width: your-breakpoint-value) {}.

2/ The icon-only mode for the actions after the Save button on smaller screens is a bit obscure or lacks clarity. I am sure I would not be the only one who would have to think twice about the meaning of each (also, showing the icons on larger screens gives a sense of separation between each link-button and some more depth).

BTW - What I have done, for a iPhone user on highly personalised copy of Sandspace is pinning only the Save button (the .txp-save block) for small screens on the Write panel. The action links just sit in their (logical) flow. Works well for her, when editing the meta-data fields, the Save button is immediately visible, after dismissing the virtual keyboard, ditto when busy in the main textarea. IIRC, I tried to pin the Save widget to the top (never covered by the keyboard) but that mostly a nuisance. Assuming not much changes from your current proposal I will go that way for the future of Sandspace.

@phiw13

1. Yep seems fair, I'll look into changing that.
2. Obviously we are using icons here because we can't control the size of text that appears here (because of localization) but I agree it's not perfect at the moment. I did actually think of removing those actions entirely in mobile view - but thought the icons would be a fair compromise for anyone that already knows these actions. Maybe restoring the icons on desktop view is enough to create the connection between the two.

@phiw13 I've just fixed item 1 on your list. Will consider item 2 when I am back onto this save layout structure in due course. Thanks!

I've just fixed item 1 on your list.

Excellent. this is much more AT user friendly.

For the polishing todo list: when you have a moment – and you think the HTML construct for the “Save” spinner is stable, you’ll want to check the tagbuilder dialog. The spinner thingie now dangles somewhere in the middle of the panel instead of adjacent to the Save button

The spinner thingie now dangles somewhere in the middle of the panel instead of adjacent to the Save button

Fixed, thanks for the report.

Are you able to jump back on this issue sometime please @philwareham? I really like the approach. Think it's just the margins or padding or... something that needs a bit of love, but it's above my paygrade.

Yeah, I'll relook at this very soon.