Uses common CSS spacing, tweaks some colors, increases viewport size to very limits.
Details
- Reviewers
epriestley - Commits
- Restricted Diffusion Commit
rP45b827c66e8a: Touch up Pholio
Test large and small images, various breakpoints. Able to more easily review mocks.
Diff Detail
- Repository
- rP Phabricator
- Branch
- pholio-css
- Lint
Lint Passed - Unit
No Test Coverage - Build Status
Buildable 1090 Build 1090: [Placeholder Plan] Wait for 30 Seconds
Event Timeline
webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js | ||
---|---|---|
171–173 | This seems premature -- it means the thumbs and stage will never fit in the same viewport, and you will always have to scroll to access the thumbs, right? |
I don't find the thumbs useful, I can just push left or right on the keyboard and cycle through them. I'd rather have the space to properly review the pixels. I think in the unbeta mocks, the thumbs are hidden by default (available on click).
How do you imagine the stage scaling? That mock seems like it makes the "not enough pixels of mock" problem much worse, by requiring far more space at the bottom. If the mock was rotated 90 degrees, it would need to be scaled way way down to fit.
One thing I don't like about the current approach, that mock, and this (earlier?) one:
...is that we're basically letting you browse a 2D array of images (left/right = different thumbs, up/down = history) but not giving you any kind of visual/spatial element to help figure out what's going on or what the 2D landscape look slike. In the thumbs-are-vertical mock, it seems especially confusing (left/right move you up/down, and up/down move you on an invisible history dimension?).
What if we separated out the thumbs completely into a spatial element, sort of a visual representation of the Differential history table:
(With numbers for inline comments.) ...and made that a totally separate element, under the theory that most browsing will just use the keyboard and jumping to a specific image is basically a separate operation. So we don't even try to fit it on screen, but put it below, give it plenty of space, and throw away the thumbs action.
I think we can throw away the arrow buttons too, or replace them with a very tiny pixel art version of the map which shows where you are relative to everything else.
Then maybe we scale the stage dynamically and accept that the description will sometimes not be visible? That is, if the mock is about the same aspect ratio as the browser window, it will just take up all of the pixels.
Basically, I think ~all the feedback on Pholio has been "the mock should have more pixels", so let's just try an approach where it has the most possible pixels and see what the next round of feedback is?
I think the next iteration of this removes, reduces, or separates the thumbs, so this is fine, it's just weird for the stage to explicitly scale to a size to put the thumbs just out of reach.
There may be no value in the thumbs. One thing Dribbble does is just a next and previous thumb, we could fit that in the right sidebar easily, and not even have it if it's only one image
Dribbble also has a maximum image size of like 400x300 though, right? I think they're solving a very different problem.
Your approach seems reasonable in that it at least provides additional information / context for the image above (history). I would maybe always have the most recent on the top and cap the height of the entire area so it maybe only shows 1.5 or 2.5 rows and a scrollable height?