Olivero's system maintenance is not styled.

Note that we attempt to load a nonexistent maintenance_page library. This library can be created (with appropriate CSS files), and then styled.

Current styling:

New styling:

https://www.figma.com/file/r8uq72Q9weTMVsNUFZKEYH/D9-Theme-Master?node-i...

CommentFileSizeAuthor
#41 interdiff-38-41.txt818 bytesrikki_iki
#41 3194560-41.patch11.34 KBrikki_iki
#38 interdiff-37.38.txt1.8 KBmherchel
#38 3194560-38.patch11.34 KBmherchel
#37 interdiff_35-37.txt3.85 KBkostyashupenko
#37 3194560-37.patch11.08 KBkostyashupenko
#35 3194560-35.patch6.98 KBmherchel
#34 Site under maintenance (Desktop).png140.65 KBmherchel
#33 after.png49.02 KBrinku jacob 13
#33 before.png76.75 KBrinku jacob 13
#32 3194560.32.patch1.59 KBsakthivel m
#29 BP 3194560.png296.71 KBchetanbharambe
#29 AP 3194560.png187.77 KBchetanbharambe
#28 intediff-27-29.txt475 bytessakthivel m
#28 3194560.29.patch1.59 KBsakthivel m
#27 3194560.27.patch1.59 KBsakthivel m
#26 3194560.26.patch1.65 KBsakthivel m
#25 3194560.25.patch1.67 KBsakthivel m
#24 site-maintenance.mp4535.8 KBsakthivel m
#19 3194560_after.png306.23 KBhinal05
#19 3194560_before.png299.26 KBhinal05
#18 After_apply_patch.png187.16 KBvikashsoni
#18 Before_appiy_patch.png185.91 KBvikashsoni
#15 3194560-14.patch1.02 KBgauravvvv
#13 3194560-13.patch1.02 KBgauravvvv
#10 Before--patch-1.jpg392.76 KBranjith_kumar_k_u
#10 After--patch-mobile.jpg82.94 KBranjith_kumar_k_u
#10 After--patch-desktop.jpg390.37 KBranjith_kumar_k_u
#9 3194560-9.patch903 bytesgauravvvv
#8 3194560-8.patch1.01 KBgauravvvv
#6 Screenshot 2021-02-06 at 20.14.08.png122.09 KBgauravvvv
#6 3194560-6.patch420 bytesgauravvvv
#5 Site_under_maintenance___Drupal.png33.91 KBmherchel
Site_under_maintenance___Olivero_and_Maintenance_mode___Olivero.png76.69 KBmherchel

Comments

mherchel created an issue. See original summary.

zetagraph’s picture

zetagraph commented

Taking a stab at this.

zetagraph’s picture

zetagraph commented

Should the maintenance page have a header, footer, menus, other common theme elements? What should be rendered on it, besides the: “Site is under maintenance”, anything?

gauravvvv’s picture

gauravvvv commented

If we show the header and footer on the maintenance page, the user will still not able to go to that page because of maintenance mode. Keep it helpful and simple, we can use site branding on this page. @zetagraph

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Issue summary: View changes
StatusFileSize
new Site_under_maintenance___Drupal.png33.91 KB

Bartik's maintenance page looks fine. We should do something similar (if not the same).

As long as it's not horrible, I'm happy 😝

Bartik's maintenance page:

gauravvvv’s picture

gauravvvv commented
StatusFileSize
new 3194560-6.patch420 bytes
new Screenshot 2021-02-06 at 20.14.08.png122.09 KB

I have provided the patch for the above solution you provided. Adding an after patch screenshot for reference.

gauravvvv’s picture

gauravvvv commented
Status: Active » Needs review
gauravvvv’s picture

gauravvvv commented
StatusFileSize
new 3194560-8.patch1.01 KB
gauravvvv’s picture

gauravvvv commented
StatusFileSize
new 3194560-9.patch903 bytes
ranjith_kumar_k_u’s picture

ranjith_kumar_k_u commented
StatusFileSize
new After--patch-desktop.jpg390.37 KB
new After--patch-mobile.jpg82.94 KB
new Before--patch-1.jpg392.76 KB

The last patch applied cleanly,
Before patch
before patch

After patch Desktop
after patch

After Patch Mobile
after patch mobile

These are the changes

gauravvvv’s picture

gauravvvv commented
Status: Needs review » Needs work
gauravvvv’s picture

gauravvvv commented

Looking into it.

gauravvvv’s picture

gauravvvv commented
StatusFileSize
new 3194560-13.patch1.02 KB

I have fixed the above issue for responsive screens too. Please review.

gauravvvv’s picture

gauravvvv commented
Status: Needs work » Needs review
gauravvvv’s picture

gauravvvv commented
StatusFileSize
new 3194560-14.patch1.02 KB
zetagraph’s picture

zetagraph commented

Just a thought. Maybe it makes sense to remove the repeating background pattern (drop) from the maintenance page and keep it clean/white? Or maybe decrease the contrast of the repeating background pattern further? The small grey text might be a bit hard to read and not sure if it passes the accessibility contrast checks.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Issue tags: +FLDC2021
vikashsoni’s picture

vikashsoni commented
StatusFileSize
new Before_appiy_patch.png185.91 KB
new After_apply_patch.png187.16 KB

Applied patch #15 and it works fine. After the patch " 3194560-14.patch " the layout of maintenance page is good. Apply the screenshot

hinal05’s picture

hinal05 commented
StatusFileSize
new 3194560_before.png299.26 KB
new 3194560_after.png306.23 KB

Applied patch #15 and it's working fine.

hinal05’s picture

hinal05 commented
Status: Needs review » Reviewed & tested by the community

Status: Reviewed & tested by the community » Needs work

The last submitted patch, 15: 3194560-14.patch, failed testing. View results

gauravvvv’s picture

gauravvvv commented
Status: Needs work » Reviewed & tested by the community
lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Status: Reviewed & tested by the community » Needs review
Issue tags: +Needs subsystem maintainer review

Would be good to get review from the maintainers on the designs. I'm also a bit concerned about having the pattern as a background for text since it makes text harder to read.

sakthivel m’s picture

sakthivel m commented
Status: Needs review » Needs work
StatusFileSize
new site-maintenance.mp4535.8 KB

After the patch applied facing the bottom scrolling issue in desktop and mobile.

I have attached issue video here.

sakthivel m’s picture

sakthivel m commented
Status: Needs work » Needs review
StatusFileSize
new 3194560.25.patch1.67 KB

#25 Please review the patch

sakthivel m’s picture

sakthivel m commented
StatusFileSize
new 3194560.26.patch1.65 KB
sakthivel m’s picture

sakthivel m commented
StatusFileSize
new 3194560.27.patch1.59 KB
sakthivel m’s picture

sakthivel m commented
StatusFileSize
new 3194560.29.patch1.59 KB
new intediff-27-29.txt475 bytes
chetanbharambe’s picture

chetanbharambe commented
Status: Needs review » Reviewed & tested by the community
StatusFileSize
new AP 3194560.png187.77 KB
new BP 3194560.png296.71 KB

Verified and tested patch #28.
Patch applied successfully and looks good to me.

Testing Steps:
# Goto: Appearance
# Apply Olivero Theme
# Go to configuration - > Click on maintenance mode under development -> Click on the checkbox "Put site into maintenance mode"
# Save Configuration
# Go to Incognito window and check the results for "Site under maintenance" and it should be shown as expected.

Looks good to me.
Can be a move to RTBC
Please refer attached screenshots for Before and After patch

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Status: Reviewed & tested by the community » Needs review

Discussed with @mherchel and he said he'd like to provide some feedback on this. Moving to needs review make the status more accurate.

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

sakthivel m’s picture

sakthivel m commented
StatusFileSize
new 3194560.32.patch1.59 KB

Just Re-roll the patch 9.3.x,

Fixed the custom command failed.

rinku jacob 13’s picture

rinku jacob 13 commented
StatusFileSize
new before.png76.75 KB
new after.png49.02 KB

patch #32 successfully applied for drupal 9.3.x-dev. thanks@Sakthivel M

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Issue summary: View changes
Status: Needs review » Needs work
Issue tags: -FLDC2021, -Needs subsystem maintainer review
StatusFileSize
new Site under maintenance (Desktop).png140.65 KB

I tasked @jwitkowski79 with designs. Updating the summary with links and an image.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
StatusFileSize
new 3194560-35.patch6.98 KB

Initial work attached. This patch still has errors in the JS console that need to be resolved.

gauravvvv’s picture

gauravvvv commented

Page title have extra margin-top compared to other pages, Is it intentional @mherchel?

kostyashupenko’s picture

kostyashupenko
Primary language English
Location Omsk
commented
Status: Needs work » Needs review
StatusFileSize
new 3194560-37.patch11.08 KB
new interdiff_35-37.txt3.85 KB

Fixed js errors

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
StatusFileSize
new 3194560-38.patch11.34 KB
new interdiff-37.38.txt1.8 KB

Thanks for the work on the JS!

There was one additional error, plus I'm resolving the cspell error by removing the unneeded CSS ID from the template.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented

Tugboat link for the patch above is at https://3194560-maintenance-page-yxwkoozxssibqj2ymsrplhfcfsm9en2y.tugboa...

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Issue tags: +olivero stable should have
rikki_iki’s picture

rikki_iki commented
StatusFileSize
new 3194560-41.patch11.34 KB
new interdiff-38-41.txt818 bytes

Absolute nit, but the text-content class is missing, so the text isn't serif like the design :)
Rerolled patch from #38 to include it.

Otherwise looks great at all breakpoints.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Status: Needs review » Reviewed & tested by the community

Thats a good catch!

Verified that the .text-content CSS class is added in the correct place and everything looks good. Thanks!

Applying change to the Tugboat preview at https://3194560-maintenance-page-yxwkoozxssibqj2ymsrplhfcfsm9en2y.tugboa...

gábor hojtsy’s picture

gábor hojtsy
he/him
Primary language Hungarian
Location Hungary
commented
Status: Reviewed & tested by the community » Fixed

Thanks all! Committed 7e4e5c8 and pushed to 9.3.x.

  • 7e4e5c8 committed on 9.3.x 
    Issue #3194560 by Sakthivel M, Gauravmahlawat, mherchel, rikki_iki,...
nod_’s picture

nod_
Primary language French
Location Lille
commented
Issue tags: +JavaScript

Status: Fixed » Closed (fixed)

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