Design review: update.php & "Task List" styling

[jenlampton]

Is the current look / feel for the updater what we want?

The task list shown in the sidebar during the installer does not match the rest of Seven, both in iconography and color scheme. We should update it to match.

From #2804, which I am closing as dupe

---

PR by @jenlampton: backdrop/backdrop#1987
PR by @quicksketch: backdrop/backdrop#1989

[docwilmot]

Actually, now that youve mentioned it, this particular page Ive not liked; the indentation seems too much. And there's no lead in to the numbered items, like "before you continue, do these things:"

[klonos]

I might like it better with the "continue" button to the right because it feels more natural or I guess that's what I'm used to form "next" type buttons. I don't mind the way it is now though.

@jenlampton Are you referring to the overall design of this page? I think it is the same as the installer. Right?

[Dinornis]

• Move the steps from the left column to the top
• Change the indentation of the list
• Provide links to referred pages (maintenance etc.)
• Include a Cancel button

[klonos]

Re: the 2nd item ("Put your site into maintenance mode"), we are doing such a better job in the project installer with the checkbox to do just that without disrupting the task at hand:

It would be perfect if we could add links/buttons to the tasks of creating a db dump and backing up the system, that when clicked download a .zip file of these things. In fact, this is how this should ideally work:

1. There would be a separate "Backup" task that's added to the steps between "Verify" requirements and "Overview".
2. That page would have two checked by default checkboxes: one "Make a backup of the current database" and a second "Make a backup of the config files".
3. There would be two buttons: one "Skip backup" (gray, secondary button) and one "Create backups" (blue, primary button).
4. If the user would select to make backups, there would be a progress bar (if the checkboxes were kept ticked)
5. At the end of the backup process, there would either be a "Backups successfully created" message and a section with two links to download the created backup .zips, or if something went wrong and backups were not created, then a "Backups could not be created. You will have to do that manually" message with instructions or links to documentation.

[jenlampton]

Tagging @quicksketch since I think he was working on this in #2804 for 1.8. Closing that other issue as a duplicate of this one.

[jenlampton]

Feedback from the other issue:

I love the new progress bar, but I don't like the green background in the sidebar. In 1.7 we removed all the light/dark green styling from reports pages, and I'd hate to see it get added back. Can we make the sidebar on the installer match the new reports pages instead of what was replaced? Something like this?

[jenlampton]

How's this?

[quicksketch]

I updated the styling slightly to vertically center the new checkmarks, and extended the "active" task item's background to the width of the entire task list.

This issue includes a lot more suggestions than just updating the CSS, so I've incorporated the easy ones into a PR as well.

• Added Cancel links to the landing page and "Run updates" page.
• Added/fixed links to the handbook on upgrades.
• Reduced the margin on the recommended steps list.
• Added introductory text before the recommended steps list.
• Reworded text in places.

update.php:

RTL update.php:

Project Browser:

Updated PR: backdrop/backdrop#1989

[jenlampton]

From @docwilmot in GItter:

Looks good, definite improvement, all links work, including cancel, handbook, maintenance page. Nav list updates by page as it should. Still getting a horizontal scrollbar on the first "Verify requirements" page, though that wasnt in the issue list AFAICT. RTBC.

[quicksketch]

Super, merged backdrop/backdrop#1989 into 1.x for 1.8.0.

[klonos]

There is a small issue with the wrapping of the list items. Nothing that a display: inline-block; can't fix 😄

PR: backdrop/backdrop#2015

Before:

After:

[klonos]

@quicksketch re-open the issue? ...file a new one?

[jenlampton]

Re-opening for a follow-up commit.

[opi]

backdrop/backdrop#2015 reviewed and tested, so RTBC for me. As this issue is tagged as "status:fixed", should we open a separate issue ?
The initial install step looks really weird without this fix, and makes a bad first impression to backdrop :/

[jenlampton]

Let's change the status back to RTBC.

…

On Sep 28, 2017 4:01 AM, "opi" ***@***.***> wrote: backdrop/backdrop#2015 <backdrop/backdrop#2015> reviewed and tested, so RTBC for me. As this issue is tagged as "status:fixed", should we open a separate issue ? The initial install step looks really weird without this fix, and makes a bed first impression to backdrop :/ [image: capture d ecran de 2017-09-28 13-01-08 - 1] <https://user-images.githubusercontent.com/159548/30963285-2ffaf5fa-a44d-11e7-8ba0-8ce2ead3500c.png> — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub <#991 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAYSR87XJZzgSwPt6cphhD-dfXvapLfKks5sm3yggaJpZM4FAaa0> .

[opi]

backdrop/backdrop#2015 is already reviewed.

[opi]

[up] @quicksketch any chance to get this oneliner merged ?

[quicksketch]

Thanks and sorry for the delay. Merged backdrop/backdrop#2015 into 1.x and 1.8.x! Thanks @klonos and @opi!