Page MenuHomePhabricator

Make profile menu full-height
ClosedPublic

Authored by epriestley on Jan 14 2016, 1:56 AM.
Tags
None
Referenced Files
Unknown Object (File)
Sun, Mar 24, 8:44 PM
Unknown Object (File)
Fri, Mar 22, 7:20 PM
Unknown Object (File)
Thu, Mar 21, 11:16 AM
Unknown Object (File)
Thu, Mar 21, 2:21 AM
Unknown Object (File)
Wed, Mar 20, 9:58 PM
Unknown Object (File)
Sat, Mar 16, 6:38 PM
Unknown Object (File)
Wed, Mar 13, 5:05 PM
Unknown Object (File)
Mon, Mar 11, 10:41 AM
Subscribers
None

Details

Summary

Ref T10054. This makes the profile menu full-height. It uses two pieces of dark magic:

  • calc(), which allows you to do math in CSS.
  • The vh unit, which is CSS for "viewport height".

Apparently this kind of stuff just works now? CSS got good at some point?

Test Plan
  • Page looks correct in Safari, Chrome, Firefox.
  • Checked caniuse.com for vh and calc(), saw they're supported?

Diff Detail

Repository
rP Phabricator
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

epriestley retitled this revision from to Make profile menu full-height.
epriestley updated this object.
epriestley edited the test plan for this revision. (Show Details)
epriestley added a reviewer: chad.

Most of this is just shuffling the footer around so we can put it after the content (instead of after the whole menu) when rendering a profile menu.

Then the rest is magic.

webroot/rsrc/css/phui/phui-profile-menu.css
7

This is the magic.

Also:

  • this rule only activates on desktop; and
  • if it doesn't work for some reason, everything still looks mostly OK, the menu just won't be as tall as the window on pages with a small amount of content.

im flagging this for later when someone says it doesn't work on Android on a 2G connection in the outback.

chad edited edge metadata.
This revision is now accepted and ready to land.Jan 14 2016, 9:07 PM
This revision was automatically updated to reflect the committed changes.