Make "in maintenance" Seven use a responsive design [#1661814]

Problem/Motivation

When you set the default theme to use Seven and turn on maintenance mode, Seven's ".in-maintenance" styling kicks in for non-admin users. It currently uses a desktop-first layout which doesn't look good in smaller device viewports.

The current layout is pretty basic:

body.in-maintenance #sidebar-first {
  float: left; /* LTR */
  width: 200px;
}
body.in-maintenance #content {
  float: right; /* LTR */
  width: 550px;
  padding-right: 20px; /* LTR */
  clear: none;
}
body.in-maintenance #page {
  overflow: auto;
  width: 770px;
  margin: 0 auto;
  padding-top: 2em;
}
body.in-maintenance #branding h1 {
  width: 770px;
  margin: 0 auto;
  float: none;
}
body.in-maintenance .form-radios .form-type-radio {
  padding: 2px 0;
}
body.in-maintenance div.form-item:after {
  content: "";
  display: none;
  clear: none;
}
body.in-maintenance .form-submit {
  display: block;
}
body.in-maintenance #logo {
  margin-bottom: 1.5em;
  max-width: 180px;
}

Proposed resolution

We need to convert the desktop-only layout to use a mobile-first, responsive design.

Remaining tasks

Design how the layout should look at various viewport sizes.
Remove all traces of $sidebar_first from maintenance-page.tpl.php because Seven doesn't have a region named sidebar first and it usage is currently preventing the logo from appearing.
Write the patch to the CSS.

User interface changes

None.

API changes

None.

Comment	File	Size	Author
#23	seven-responsive_maintenance-1661814-23.patch	2.75 KB	mcjim
#23
#23	1661814-23-Installer-320x480.png	41.48 KB	mcjim
#23	1661814-23-Installer-600x800.png	65.87 KB	mcjim
#23	1661814-23-Installer-1024x768.png	83.22 KB	mcjim
#23	1661814-23-Installer-IE8.png	77.17 KB	mcjim
#23	1661814-23-Maintenance-320x480.png	30.87 KB	mcjim
#23	1661814-23-Maintenance-480x320.png	31.03 KB	mcjim
#23	1661814-23-Maintenance-1024x768.png	35.23 KB	mcjim
#20	seven-responsive_maintenance-1661814-20.patch	2.05 KB	mcjim
#20
#13	320x480 portrait.png	16.05 KB	h4rrydog
#13	480x320 landscape.png	16.16 KB	h4rrydog
#13	1280xXXX landscape.png	13.93 KB	h4rrydog
#12	seven-responsive_maintenance-1661814-12.patch	1.96 KB	mcjim
#12
#9	seven-responsive_maintenance-1661814-9.patch	1.46 KB	Ken Hawkins
#9
#8	Screen Shot 2012-08-20 at 14.16.59.png	79.79 KB	mcjim
#6	seven-responsive_maintenance-1661814-5.patch	1.47 KB	LewisNyman
#6
#6	Screen Shot 2012-08-20 at 13.26.53.png	30.17 KB	LewisNyman
#2	1661814-sidebar_first-2.patch	724 bytes	kbasarab
#2

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

JohnAlbin

he/they/他

English

Taipei, Taiwan

CreditAttribution: JohnAlbin commented 27 June 2012 at 05:25

Issue tags:

+mobile-novice

Adding "mobile-novice" tag.

Comment #2

kbasarab CreditAttribution: kbasarab commented 3 August 2012 at 19:00

File	Size
1661814-sidebar_first-2.patch	724 bytes

Patch for just removing the sidebar first portion.

Comment #3

ZenDoodles CreditAttribution: ZenDoodles commented 17 August 2012 at 17:11

Status:

Active

» Needs review

Comment #4

Bojhan CreditAttribution: Bojhan commented 18 August 2012 at 00:21

Could this have some screens?

Comment #5

mcjim CreditAttribution: mcjim commented 20 August 2012 at 11:31

Status:

Needs review

» Needs work

Reviewed patch in #2, which works great, fixing the logo issue.

@johnalbin @bojhan Are there any guidelines/examples for designing the layouts that could help with that task?

Comment #6

LewisNyman

he/him

CreditAttribution: LewisNyman commented 20 August 2012 at 11:31

Status:

Needs work

» Needs review

File	Size
Screen Shot 2012-08-20 at 13.26.53.png	30.17 KB
seven-responsive_maintenance-1661814-5.patch	1.47 KB

I've taken the above patch and adapted the CSS so it is now fully fluid. Also at Bojhan's request here is a shot!

Comment #7

Bojhan CreditAttribution: Bojhan commented 20 August 2012 at 12:00

Looks ok to me,

Comment #8

mcjim CreditAttribution: mcjim commented 20 August 2012 at 12:18

File	Size
Screen Shot 2012-08-20 at 14.16.59.png	79.79 KB

Nice.

Just one thing:
Because #branding has padding on the left, at smaller sizes the logo will look out of line as it sits flush to the side of the screen.
#content has padding on the right and not the left, but, regardless, #logo is not contained within #content.
Should we move #logo into #content and match the layout used for #branding? Or add padding to #logo at the smaller screen sizes?

Comment #9

Ken Hawkins CreditAttribution: Ken Hawkins commented 24 August 2012 at 11:56

File	Size
seven-responsive_maintenance-1661814-9.patch	1.46 KB

As we add padding on the right for body.in-maintenance #content (20px) I say it stands to reason we do the same for body.in-maintenance #logo.

That is

body.in-maintenance #logo {
  float: left;
  padding: 0 20px;
}

Comment #10

mcjim CreditAttribution: mcjim commented 24 August 2012 at 12:19

Assigned:

Unassigned

» mcjim

Only thing is, the padding pushes the logo out of line at larger browser sizes.
I'll see if I can come up with an alternative.

Comment #11

mcjim CreditAttribution: mcjim commented 24 August 2012 at 12:20

Status:

Needs review

» Needs work

Comment #12

mcjim CreditAttribution: mcjim commented 24 August 2012 at 13:29

Assigned:	mcjim	» Unassigned
Status:	Needs work	» Needs review

File	Size
seven-responsive_maintenance-1661814-12.patch	1.96 KB

Tweaked patch in #9 so that the logo remains in-line with the h1 regardless of page width or language direction.

Comment #13

h4rrydog CreditAttribution: h4rrydog commented 24 August 2012 at 15:55

Status:

Needs review

» Reviewed & tested by the community

File	Size
1280xXXX landscape.png	13.93 KB
480x320 landscape.png	16.16 KB
320x480 portrait.png	16.05 KB

Looks good to me.

320x480 portrait.png

480x320 landscape.png

1280xXXX landscape.png

Comment #14

webchick

she/they

English

Vancouver 🇨🇦

CreditAttribution: webchick commented 28 August 2012 at 07:46

Status:

Reviewed & tested by the community

» Fixed

Awesome work, all! :D

Committed and pushed to 8.x. Thanks!

Comment #15

webchick

she/they

English

Vancouver 🇨🇦

CreditAttribution: webchick commented 30 August 2012 at 22:01

Title:	Make "in maintenance" Seven use a responsive design	» Regression: Seven's responsive maintenance mode template makes installer look crappy
Category:	task	» bug
Status:	Fixed	» Active

Hm. Sorry to re-open, but this introduced some pretty serious visual regressions in the installer for desktop screen sizes that I don't think we can ship with.

Alignment of items before/after the Drupal logo are off.

Drupal head overlaps progress bar.

Comment #16

mcjim CreditAttribution: mcjim commented 31 August 2012 at 08:09

Assigned:

Unassigned

» mcjim

OK, I'll get to work on that over the weekend.

Comment #17

webchick

she/they

English

Vancouver 🇨🇦

CreditAttribution: webchick commented 31 August 2012 at 16:35

Marked #1765788: Sidebar missing from installer as a duplicate.

But basically, we need to have a sidebar there. That's what includes all of the steps of the installer and where you're at currently.

Comment #18

Gábor Hojtsy

he/him

Hungarian

Hungary

CreditAttribution: Gábor Hojtsy commented 31 August 2012 at 16:35

Ok, I submitted #1765788: Sidebar missing from installer on the same bug, I guess it should be marked a duplicate. We also lost all the steps displayed in the installer, that is quite a major UX blow. Now only the positioning of the page content...

Comment #19

Gábor Hojtsy

he/him

Hungarian

Hungary

CreditAttribution: Gábor Hojtsy commented 31 August 2012 at 16:35

Title:

Regression: Seven's responsive maintenance mode template makes installer look crappy

» Regression: Seven's responsive maintenance mode template makes installer look crappy, lost step display

Comment #20

mcjim CreditAttribution: mcjim commented 31 August 2012 at 17:49

File	Size
seven-responsive_maintenance-1661814-20.patch	2.05 KB

Attached patch needs refinement, ultimately, from a responsive perspective, but at least solves the regression for the time being.
It does the following:

reinstates $sidebar_first in maintenance-page.tpl.php as this is used by the installer
fixes the missing logo on the normal maintenance pages by not including the logo within the if ($sidebar_first) statement.
changes the px widths to max-widths for #content and #sidebar-first and adds % widths (this is the part that could do with refinement in particular)

Comment #21

mcjim CreditAttribution: mcjim commented 31 August 2012 at 17:51

Status:

Active

» Needs review

Comment #22

aspilicious CreditAttribution: aspilicious commented 31 August 2012 at 19:36

Screenshots would be nice :)

Comment #23

mcjim CreditAttribution: mcjim commented 1 September 2012 at 07:05

Assigned:

mcjim

» Unassigned

File	Size
1661814-23-Maintenance-1024x768.png	35.23 KB
1661814-23-Maintenance-480x320.png	31.03 KB
1661814-23-Maintenance-320x480.png	30.87 KB
1661814-23-Installer-IE8.png	77.17 KB
1661814-23-Installer-1024x768.png	83.22 KB
1661814-23-Installer-600x800.png	65.87 KB
1661814-23-Installer-320x480.png	41.48 KB
seven-responsive_maintenance-1661814-23.patch	2.75 KB

New and improved! :-)

Worked on the patch in #20, adding a breakpoint at 768px so that both the installer and maintenance pages make more sense on smaller screens.
Screenshots (lots, sorry, but as we now know, this patch affects both the installer and maintenance page) attached.

Comment #24

aspilicious CreditAttribution: aspilicious commented 1 September 2012 at 07:58

Screenshots look ok :) thnx

Comment #25

matason CreditAttribution: matason commented 14 September 2012 at 17:33

Status:

Needs review

» Reviewed & tested by the community

Tested, works for me, marking as RTBC.

Comment #26

galooph CreditAttribution: galooph commented 14 September 2012 at 22:14

All looks good to me.

Comment #27

webchick

she/they

English

Vancouver 🇨🇦

CreditAttribution: webchick commented 15 September 2012 at 19:39

Title:	Regression: Seven's responsive maintenance mode template makes installer look crappy, lost step display	» Regression: Make "in maintenance" Seven use a responsive design
Status:	Reviewed & tested by the community	» Fixed

Awesome, thanks so much for the quick turnaround on this!

Committed and pushed to 8.x. Thanks! :D

Restoring title and marking fixed, although I'm not sure whether to interpret #20 as this still being "needs work." It smooshes down for me in smaller screen size, but I'm not equipped to review the CSS and know if it's doing so sensibly or not.