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
Unknown Object (File)
Fri, Jan 24, 11:12 AM
Unknown Object (File)
Fri, Jan 24, 11:12 AM
Unknown Object (File)
Fri, Jan 24, 11:12 AM
Unknown Object (File)
Tue, Jan 21, 4:00 PM
Unknown Object (File)
Tue, Jan 21, 3:37 PM
Unknown Object (File)
Tue, Jan 21, 12:07 PM
Unknown Object (File)
Tue, Jan 21, 10:25 AM
Unknown Object (File)
Dec 24 2024, 8:27 AM
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