Problem/Motivation

Recent interviews and research exposed pain points around Drupal's admin experience of looking and feeling dated. With Claro look&feel update the Available updates page needs some work to adapt Seven designs to the new Design System.
Current look:
Seven maintenance

Proposed resolution

Redesign this page and its components according to the new design system and implement it.

Design:
Claro design

Remaining tasks

  • Design
  • Patch

User interface changes

Specs: https://www.figma.com/file/OqWgzAluHtsOd5uwm1lubFeH/Drupal-Design-system...

API changes

-

CommentFileSizeAuthor
#27 interdiff.txt885 byteseffulgentsia
#25 3085212-24-REROLL.patch7.73 KBlauriii
#24 3085212-24-REROLL.patch7.72 KBbnjmnm
#22 interdiff_20-22.txt1.34 KBkomalk
#22 3085212-22.patch9.25 KBkomalk
#22 before-patch.png138.09 KBkomalk
#22 after-patch.png149.18 KBkomalk
#21 Maintenance-Page-Design.png50.71 KBdyannenova
#21 maintenance-page-screenshot.png49.93 KBdyannenova
#20 interdiff_18-20.txt1.56 KBkomalk
#20 3085212-20.patch9.14 KBkomalk
#7 Screen Shot 2020-01-28 at 16.30.01.png355.16 KBlauriii
#18 3085212-18.patch9.09 KBlauriii
#16 claro_maintenance_specs.png204.2 KBsaschaeggi
#4 Available updates | D8 Contrib 2019-10-22 12-17-33.png132.25 KBkbasarab
#16 claro_maintenance_design.png40.85 KBsaschaeggi
#3 Status report | D8 Contrib 2019-10-22 12-13-22.png130.72 KBkbasarab
#3 Status report | D8 Contrib 2019-10-22 12-12-27.png173.47 KBkbasarab
#15 seven_maintenance.png72.97 KBsaschaeggi

Comments

ckrina created an issue. See original summary.

huzooka’s picture

huzooka
Primary language Hungarian
Location Hungary 🇭🇺🇪🇺
commented
Project: Claro » Drupal core
Version: 8.x-1.x-dev » 8.9.x-dev
Component: Needs design » Claro theme
kbasarab’s picture

kbasarab commented
StatusFileSize
new Status report | D8 Contrib 2019-10-22 12-12-27.png173.47 KB
new Status report | D8 Contrib 2019-10-22 12-13-22.png130.72 KB

Current status report screenshots:

## Available Updates Page

Available Updates Page

## Status Report

Current Status Report Header

## Status Report Table Design

Status Report Table

New Design System Files: https://www.figma.com/file/OqWgzAluHtsOd5uwm1lubFeH/Drupal-Design-system

kbasarab’s picture

kbasarab commented
StatusFileSize
new Available updates | D8 Contrib 2019-10-22 12-17-33.png132.25 KB
huzooka’s picture

huzooka
Primary language Hungarian
Location Hungary 🇭🇺🇪🇺
commented

Re #3, #4:

This issue is about the maintenance page.

igonzalo’s picture

igonzalo commented

I think this issue is not clear enough, in the title it is specified that maintenance page should be redesign but in Problem/Motivation the page that should be redesign is Available updates.

Please clarify it. Thanks

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
StatusFileSize
new Screen Shot 2020-01-28 at 16.30.01.png355.16 KB

Here's a screenshot of the maintenance page in Seven.

Jongruk Timmanee’s picture

Jongruk Timmanee commented
Assigned: Unassigned » Jongruk Timmanee

I'm planning to work on the designs

Jongruk Timmanee’s picture

Jongruk Timmanee commented

This is where I got so far.
Please feel free to make comments 😇

https://www.figma.com/file/OqWgzAluHtsOd5uwm1lubFeH/Drupal-Design-system...

Jongruk Timmanee’s picture

Jongruk Timmanee commented
Assigned: Jongruk Timmanee » Unassigned
ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
commented
Issue tags: +Needs design

Version: 8.9.x-dev » 9.1.x-dev

Drupal 8.9.0-beta1 was released on March 20, 2020. 8.9.x is the final, long-term support (LTS) minor release of Drupal 8, which means new developments and disruptive changes should now be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Title: Redesign Maintenance page » [PP-1] Redesign maintenance page
Status: Active » Postponed

This is blocked on #3085219: Installer is not very usable in Claro to ensure that the designs are consistent.

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Title: [PP-1] Redesign maintenance page » Redesign maintenance page
Status: Postponed » Active

We don't want to postpone this on the installer issue anymore, because it was removed from the stable blockers. However, we still need a design before we can start implementing this.

saschaeggi’s picture

saschaeggi
he/him
commented
Issue summary: View changes
StatusFileSize
new seven_maintenance.png72.97 KB
saschaeggi’s picture

saschaeggi
he/him
commented
Issue summary: View changes
StatusFileSize
new claro_maintenance_design.png40.85 KB
new claro_maintenance_specs.png204.2 KB
saschaeggi’s picture

saschaeggi
he/him
commented
Issue summary: View changes
Issue tags: -Needs design

Design is updated and it can be worked on now.

Quick specs:
Claro specs

=> get the latest specs from here: https://www.figma.com/file/OqWgzAluHtsOd5uwm1lubFeH/Drupal-Design-system...

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Status: Active » Needs review
StatusFileSize
new 3085212-18.patch9.09 KB

Started implementing this

dyannenova’s picture

dyannenova
she/her
commented
Status: Needs review » Needs work

This looks close. The text inside of the layout container needs a max width of 512px, and the border radius should be 8px.

komalk’s picture

komalk commented
Status: Needs work » Needs review
StatusFileSize
new 3085212-20.patch9.14 KB
new interdiff_18-20.txt1.56 KB

Worked on #19.

dyannenova’s picture

dyannenova
she/her
commented
Status: Needs review » Needs work
StatusFileSize
new maintenance-page-screenshot.png49.93 KB
new Maintenance-Page-Design.png50.71 KB

#20 fixed the border radius, but instead of limiting the text width it limits the entire layout container. In the spec, the layout container has a max width of 940px and the text area inside has a max width of 512px.

Patch
Screenshot of patched page

Goal
Screenshot of design specification

komalk’s picture

komalk commented
Status: Needs work » Needs review
StatusFileSize
new after-patch.png149.18 KB
new before-patch.png138.09 KB
new 3085212-22.patch9.25 KB
new interdiff_20-22.txt1.34 KB

@DyanneNova Thanks for the review.
Limiting the max-width of the layout container to 940px and the text area inside it max-width of 512px.

dyannenova’s picture

dyannenova
she/her
commented
Status: Needs review » Reviewed & tested by the community

This looks good to go now. Thanks @komalkolekar!

bnjmnm’s picture

bnjmnm
he/him
Primary language English
Location Ann Arbor, MI
commented
StatusFileSize
new 3085212-24-REROLL.patch7.72 KB

Reroll

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
StatusFileSize
new 3085212-24-REROLL.patch7.73 KB

Another reroll 🎢

  • effulgentsia committed 6d4a206 on 9.1.x 
    Issue #3085212 by komalkolekar, lauriii, saschaeggi, DyanneNova, ckrina...
effulgentsia’s picture

effulgentsia commented
Status: Reviewed & tested by the community » Fixed
StatusFileSize
new interdiff.txt885 bytes

Looks good! I pushed this to 9.1.x, but I had to also apply this interdiff, which just re-orders properties in the compiled CSS to match how the compiler currently orders them.

effulgentsia’s picture

effulgentsia commented

Removing issue credit from myself. #27 is trivial, and I didn't credit myself in the commit message either.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.