Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
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 | 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 |
Comments
Comment #1
JohnAlbinAdding "mobile-novice" tag.
Comment #2
kbasarab CreditAttribution: kbasarab commentedPatch for just removing the sidebar first portion.
Comment #3
ZenDoodles CreditAttribution: ZenDoodles commentedComment #4
Bojhan CreditAttribution: Bojhan commentedCould this have some screens?
Comment #5
mcjim CreditAttribution: mcjim commentedReviewed 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
LewisNymanI'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 commentedLooks ok to me,
Comment #8
mcjim CreditAttribution: mcjim commentedNice.
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 commentedAs 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
Comment #10
mcjim CreditAttribution: mcjim commentedOnly 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 commentedComment #12
mcjim CreditAttribution: mcjim commentedTweaked 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 commentedLooks good to me.
Comment #14
webchickAwesome work, all! :D
Committed and pushed to 8.x. Thanks!
Comment #15
webchickHm. 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.
Comment #16
mcjim CreditAttribution: mcjim commentedOK, I'll get to work on that over the weekend.
Comment #17
webchickMarked #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 HojtsyOk, 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 HojtsyComment #20
mcjim CreditAttribution: mcjim commentedAttached patch needs refinement, ultimately, from a responsive perspective, but at least solves the regression for the time being.
It does the following:
if ($sidebar_first)
statement.Comment #21
mcjim CreditAttribution: mcjim commentedComment #22
aspilicious CreditAttribution: aspilicious commentedScreenshots would be nice :)
Comment #23
mcjim CreditAttribution: mcjim commentedNew 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 commentedScreenshots look ok :) thnx
Comment #25
matason CreditAttribution: matason commentedTested, works for me, marking as RTBC.
Comment #26
galooph CreditAttribution: galooph commentedAll looks good to me.
Comment #27
webchickAwesome, 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.
Comment #29
xjmComment #29.0
xjmNode $sidebar_first insanity.