Page MenuHomePhabricator
Differential D15017

Make profile menu full-height
ClosedPublic
Actions

Authored by epriestley on Jan 14 2016, 1:56 AM.
Tags
None
Referenced Files
F14356739: D15017.diff
Thu, Dec 19, 11:44 PM
F14352285: D15017.id.diff
Thu, Dec 19, 1:28 PM
F14352284: D15017.diff
Thu, Dec 19, 1:28 PM
Unknown Object (File)
Mon, Dec 16, 6:46 PM
Unknown Object (File)
Sun, Dec 15, 8:44 AM
Unknown Object (File)
Wed, Dec 11, 7:07 AM
Unknown Object (File)
Mon, Dec 9, 10:57 AM
Unknown Object (File)
Fri, Dec 6, 8:55 PM
View All Files
Subscribers
None

Details

Reviewers
chad
Maniphest Tasks
T10054: Define product direction for Project/Profile UIs
Commits
Restricted Diffusion Commit
rPc019f76283ce: Make profile menu full-height
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
Branch
pmenu3
Lint
Lint Passed
Unit
Tests Passed
Build Status
Buildable 10103
Build 12245: Run Core Tests
Build 12244: arc lint + arc unit

Event Timeline

epriestley updated this revision to Diff 36269.Jan 14 2016, 1:56 AM
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.
epriestley added a task: T10054: Define product direction for Project/Profile UIs.
Herald edited edge metadata. · View Herald TranscriptJan 14 2016, 1:56 AM
epriestley added a comment.Jan 14 2016, 1:57 AM

Screen Shot 2016-01-13 at 5.56.52 PM.png (1×1 px, 233 KB)

epriestley added a comment.Jan 14 2016, 1:58 AM

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.

epriestley added a comment.Jan 14 2016, 1:59 AM

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.
chad edited edge metadata.Jan 14 2016, 2:08 AM

wut

epriestley added a comment.Jan 14 2016, 2:11 AM

ya i kno rite

chad added a comment.Jan 14 2016, 2:12 AM

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

chad accepted this revision.Jan 14 2016, 9:07 PM
chad edited edge metadata.
This revision is now accepted and ready to land.Jan 14 2016, 9:07 PM
Closed by commit rPc019f76283ce: Make profile menu full-height (authored by epriestley, committed by epriestley). · Explain WhyJan 15 2016, 5:12 PM
This revision was automatically updated to reflect the committed changes.

Revision Contents
Changeset List

PathSize
resources/
celerity/
6 lines
src/
applications/
celerity/
postprocessor/
2 lines
view/
layout/
40 lines
page/
17 lines
webroot/
rsrc/
css/
phui/
26 lines

Diff 36269

View Options

resources/celerity/map.php

Loading...
View Options

src/applications/celerity/postprocessor/CelerityDefaultPostprocessor.php

Loading...
View Options

src/view/layout/AphrontSideNavFilterView.php

Loading...
View Options

src/view/page/PhabricatorStandardPageView.php

Loading...
View Options

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

Loading...
Phabricator · Built by Phacility