Page MenuHomePhabricator

Solidify PHUITwoColumnView as a page layout
ClosedPublic

Authored by chad on Feb 29 2016, 9:10 PM.
Tags
None
Referenced Files
F14445623: D15366.id37055.diff
Thu, Dec 26, 12:36 PM
Unknown Object (File)
Mon, Dec 23, 1:01 AM
Unknown Object (File)
Mon, Dec 23, 1:01 AM
Unknown Object (File)
Mon, Dec 23, 1:01 AM
Unknown Object (File)
Mon, Dec 23, 1:01 AM
Unknown Object (File)
Sat, Dec 21, 4:02 PM
Unknown Object (File)
Wed, Dec 18, 1:26 AM
Unknown Object (File)
Wed, Dec 18, 1:26 AM
Subscribers
Tokens
"Love" token, awarded by nateguchi2.

Details

Reviewers
epriestley
Commits
Restricted Diffusion Commit
rPfe7e288cf558: Solidify PHUITwoColumnView as a page layout
Summary

Rolls out a new "Object Page" design with PHUITwoColumnView. This is reasonably polished, but wanted to post it up for you now for feedback before chasing down minor bugs. This implements TwoColumn in the following applications:

  • Ponder
  • Paste
  • Slowvote
  • Countdown
  • Projects
  • Profile
  • Passphrase

This helped track down display issues and inconsistencies and make sure the layout was flexible for different pages.

Test Plan

Test each of the applications on mobile, tablet, and desktop breakpoints.

Screen Shot 2016-02-29 at 1.30.34 PM.png (1×2 px, 442 KB)

Screen Shot 2016-02-29 at 1.30.26 PM.png (1×2 px, 419 KB)

Screen Shot 2016-02-29 at 1.30.16 PM.png (1×2 px, 554 KB)

Screen Shot 2016-02-29 at 1.30.09 PM.png (1×2 px, 650 KB)

Screen Shot 2016-02-29 at 1.29.58 PM.png (1×2 px, 414 KB)

Screen Shot 2016-02-29 at 1.29.55 PM.png (1×2 px, 459 KB)

Screen Shot 2016-02-29 at 1.29.50 PM.png (1×2 px, 470 KB)

Diff Detail

Repository
rP Phabricator
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

chad retitled this revision from to Solidify PHUITwoColumnView as a page layout.
chad updated this object.
chad edited the test plan for this revision. (Show Details)
chad added a reviewer: epriestley.
epriestley edited edge metadata.

This feels great to me overall.

Some minor stuff / initial reactions:

  • The "Authored by: ..." / "Asked by: ..." line feels needlessly prominent to me, particularly in applications other than Ponder (it's a little more relevant there, I guess?). For post-EditEngine objects at least, the first transaction is always "<author> created this <whatever>.", which seems to serve this need pretty well. This feels particularly silly (same information twice):

Screen Shot 2016-02-29 at 1.23.00 PM.png (536×1 px, 73 KB)

Maybe just get rid of it? Or get rid of it everywhere but Ponder? But not sure it's even useful there. It mostly feels odd to me that this information gets so much visual priority when it feels like it isn't a core part of any of these objects' identities. This would also resolve the great question of PHUIHeadThingView, which I don't really have a great name for either (PHUIAttributionView?).

  • The way "Subscribers", "Projects" and "Tokens" show up above the object content on mobile (particularly for objects like Passphrase) is a little unfortunate, but I don't see a way to fix that without Javascript. We could maybe try to refine how they fold (e.g., fold them into some click-to-disclose element?), or we can have JS zoom shift them around the page. Not a big deal for v0, I think.
  • In Passphrase, credentials with descriptions render oddly (not enough padding):

Screen Shot 2016-02-29 at 1.26.20 PM.png (284×1 px, 37 KB)

  • After some experience on profiles, I've found these variable-width property list labels harder to read and less visually pleasing (the layout feels random/ragged to me) than fixed-width, right-aligned labels like the ones we currently have:

Screen Shot 2016-02-29 at 1.24.10 PM.png (292×1 px, 38 KB)

I'd like to keep the labels right-aligned if there isn't some greater force behind this.

  • Looks like subscribers/projects/tokens aren't super refined yet, but they generally feel good to me. I'm fully onboard with moving relevant actions down there in context if you still want to give that a shot.
  • When the durable column is open, the space left for content starts to feel a little bit on the cramped side to me (since it's consumed by the durable column, then by the edit actions). But maybe we could narrow the durable column slightly and/or eat away at the margin between the actions and the column if the column was open, or maybe we should push the tablet breakpoint up a bit, or maybe make the edit menu slightly narrower, or maybe this would just feel fine in actual use and we don't need to do anything.
  • Gradient on grey buttons looks good to me, planning to bring that everywhere?
  • The way you got this stuff into the column is super cheating but also very clever. I can fix that properly before we bring this to, e.g., Maniphest. That should make it easier to bring actions inline, too.
src/applications/celerity/postprocessor/CelerityDefaultPostprocessor.php
194–195

(We don't actually use this anywhere anymore, do we?)

webroot/rsrc/css/application/paste/paste.css
5

pour one out for this great class name

webroot/rsrc/css/phui/phui-two-column-view.css
5–23

Now needless?

This revision is now accepted and ready to land.Feb 29 2016, 9:48 PM

For 'Authored by' can we have Timeline special case these stories for a different UI and not hide under previous stories?

yes but I have to write Javascript ;_;

Or, rather:

  • different UI is easy;
  • never hiding needs JS updates so the paging logic loads "the previous page, except not the first entry if there are no previous pages", which is doable but more of a pain.

You can't make an omelette without JavaScript.

I kinda still like it tucked into the gutter. It's not vital info, but we do show it on Maniphest, Differential for example and I find it useful there. For example if I find you opened a task, I think about it as being more concrete than any other user. Also, digging around to find the Timeline start seems unfun, especially in Differential which may be off the page. I'd like to still show "Author/Date" somewhere consistently, which could also be the sidebar? Thoughts? (I kinda like the gutter, haha).

chad edited edge metadata.
  • fix lots of minor ponder visual issues
  • fix spacing around property lists
  • fix column direction on profile mobile
  • put property lists back to original layouts
chad marked 3 inline comments as done.
  • squash buggypoos
  • better scoping

I think I got all the bugs out that you found, and a few others as well. I've left in the gutter head things for now, we can see if its terrible for a few days, I hardly notice it now, but mostly I just want it somewhere consistent and above the fold.

Also, whaaaattt

.device .project-view-home .phui-two-column-row {
  display: flex;
  flex-direction: column-reverse;
}

crazytown.

Sounds good, I'm definitely fine with trying it.

well i borked up that land somehow.

Ugly, but seems to have landed ok.

What did you actually do? Something we can fix?

my branch lost it's arc revision. I could have set it, but just git pushed instead not thinking arc is the one that squashes merges.

Alright. I'm going to clean this up and force-push it since it's only been live for a couple of minutes.

Sorry! I’ll… go finish my morning tea.

This revision was automatically updated to reflect the committed changes.

I think I cleaned things up, should be live now.