871727 - Webmaker.org: Make Details Page Implementation

Status: RESOLVED FIXED

(Webmaker Graveyard :: webmaker.org, defect)

Description

[Dale Karp (:daleee)]

Implementing the design found here: https://bugzilla.mozilla.org/show_bug.cgi?id=871658

Comment 1

[Ross Bruniges [:boozeniges]]

Check in with the Webmaker team - I think this page has to be implemented as part of popcorn maker.

I believe this page is the one that we want to apply these epic improvements too - https://github.com/mozilla/popcorn.webmaker.org/blob/master/views/embed-shell.jade

Comment 2

[David Humphrey (:humph)]

Indeed, you'll want to work in the embed-shell.jade file as Ross points out.  One thing I want to try and see us do is alter how we publish this embed-shell page so it happens through Thimble vs. Popcorn Maker.  Probably this wants another bug, but the idea would be that we use the Thimble publish machinery to create this page, and have Popcorn Maker only publish the inner iframe doc.  The advantage to this is that we'd give users the ability to alter what we produce.

CC'ing Pomax for thoughts.

Comment 3

[Dale Karp (:daleee)]

As per today's discussions & feedback from Dave & Cassie, this is my first pass at the implementation on a static page:

http://dk-webmaker.herokuapp.com/make/loller

Currently missing
* BG textures
* Share icons (tried extracting both from Photoshop but I'm afraid I'm not familiar enough with the tool to get it right)

Current GH branch: https://github.com/daliuss/webmaker.org/tree/t871727-make-details
Current rebased diff against master: https://github.com/daliuss/webmaker.org/commit/58fb02e6b2851a921391d38bde260a7e8b154e49

Looking for design feedback primarily at the moment, although code feedback is always welcome!

Comment 4

[Dale Karp (:daleee)]

Attachment: http://dk-webmaker.herokuapp.com/make/loller

Design review: http://dk-webmaker.herokuapp.com/make/loller

Comment 5

[Brett Gaylor [:brett]]

Will leave the design review to Cassie, but gotta say: looking great.

Comment 6

[Ross Bruniges [:boozeniges]]

Instead of the show/hide approach am wondering if we might be able to utilise an 'off-canvas' one that slides the margin-top of the details pane up and down and uses CSS-transitions for the animation. It could make the display of it smoother.

Am guessing the HTML is rather proof of concept still so will leave off comments on that :)

Comment 7

[Ross Bruniges [:boozeniges]]

You could use something like this (the colours are very wrong) for the BG gradient:

background: colour: grey;
background-image: repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(255,255,255,.5) 2px, rgba(255,255,255,.5) 10px);

Comment 8

[Cassie McDaniel [:cassiemc]]

Lookin' good Dale! Nice placeholder image.

When you get in let's go over how you cut those images in photoshop. Seems to be a white line around the webmaker logo, so just want to double check, and I can show you how to cut the remix/share icons.

A few more things:
* The top bar should go all the way across the page.
* The top bar should not have a dropshadow on the sides (likely solved by the above)
* The details arrow is wrong; use the one from the design.
* There should be a dropshadow vertically below the bar, but on top of the Make.
* "Made with Webmaker" should be smaller text than "Details". Should be the same size as in the righthand buttons.
* "Made with" is the wrong colour. Should be light grey, #787878
* The thin white rule below the top bar should be 1px, not 2.

Expanded view
* like Ross's idea of getting this a smoother transition
* body text seems wrong weight. Should be Regular, not Light.
* You can put the actual icon in for Popcorn. I can help you cut them for the other tools.
* Margins around the thumbnail image in "remixed from" should be equal on L, R, and bottom. Right now it seems there is less space on the R, and more space on the bottom.
* Border around profile icon should be the same as on the website pages. #b5b5b5
* the " | " between English and Español should be #9b9b9b and slightly smaller.
* Español should be a link, if the Spanish version of that Make exists.
* "1 month ago" "Built with" "Languages" "3 remixes by" "Remixed from" and "English" should all be #787878

I need to get you a mock for what the Share looks like. Do you have any tools you've worked with before that I should base this functionality on?

Let's do another pass once you've gotten through this! Hope this helps :)

Comment 9

[Dale Karp (:daleee)]

Thanks Ross & Cassie. I'll get on those changes.

Although I am not familiar with the off-canvas method.. do you mean using a canvas element?

And yes, the HTML/CSS will be cleaned up a bit before I ask for code review.

Comment 10

[Ross Bruniges [:boozeniges]]

:daleee - no canvas required!

http://coding.smashingmagazine.com/2013/01/15/off-canvas-navigation-for-responsive-website/

The example here is based off horizontals but I think we should be able to get similar results with verticals too...

Comment 11

[Dale Karp (:daleee)]

Made most changes except for:

* Icons
* BG Gradient
* Fixing show/hide, which I shall do after the design changes are complete (quite shortly)

http://dk-webmaker.herokuapp.com/make/loller

Comment 12

[Dale Karp (:daleee)]

Thanks Ross, I shall implement that!

Comment 13

[David Humphrey (:humph)]

Dale, there's an odd reflow/layout issue when I expand the details pane in the one you hosted there.  It puts the image all the way left, then when the height is known, it snaps it over to the right.  It's pretty jarring.

Comment 14

[Dale Karp (:daleee)]

@Dave, this is the issue Ross brought up above. It's the last thing (barring another design review) I *should* have to do before this is done.

Comment 15

[Dale Karp (:daleee)]

Attachment: http://dk-webmaker.herokuapp.com/make/loller

Current live demo: http://dk-webmaker.herokuapp.com/make/loller
Current branch: https://github.com/daliuss/webmaker.org/tree/t871727-make-details
Diff vs master: https://github.com/daliuss/webmaker.org/commit/b0abd955b533106ce542751f4c3e40a7e928cc1e

This pass is mostly complete design-wise. The only thing missing, as far as I can tell.

- Off-canvas transitions for 'make details' instead of $.show()/$.hide()
- HTML & CSS clean up

I am having two strange problems that have to do with the share/remix button on the make-bar at the top.

1) In Chrome, they both start at the same XY coordinates. On Chrome, the second button has a higher Y value by like 1 or 2px. 
eg: http://i.imgur.com/5t6IA4K.png

2) 75% of the time, the same social icons in the bar are correctly positioned on page load. The other 25%, they decide to render outside of the bar: 
eg: http://i.imgur.com/dctj80E.png

I'm not sure what's causing either of these issues. Any help would be appreciated!

Comment 16

[Ross Bruniges [:boozeniges]]

Comment on attachment 750067 [details]
http://dk-webmaker.herokuapp.com/make/loller

Dale - can you please open up a pull request to the master branch on the mozilla repo so that I can comment on specific lines of the code, will make the review rather easier to understand.

In regard to point 1 I solved things by changing display: inline-block to using floats.

Not been able to reproduce point 2 but not sure if having display-inline block and float right on the same element is a great idea. When it happens are you able to use the inspector to see what's possibly pushing it down? Feels like one of the elements is acting wider than it should be.

Additionals:

- the movement :humph mentioned is rather annoying, I think it's going to be something to do with the content having no-calculated width when it's hidden and the browser taking some time to recalcuate where it should be. As you mention if you can get the 'off-canvas' stuff working that may help.
- the down arrow next to details isn't appearing in Firefox
- did you have a problem with the background gradient? I see there is a bg-image in there. Which is fine, but if I can help you out please shout as the least  http requests we can send the better!

Comment 17

[Dale Karp (:daleee)]

Hey Ross, thanks for the comments

- Fixed up/down arrow not appearing in Firefox
- Opened PR: https://github.com/mozilla/webmaker.org/pulls

Thanks, I'll that fix for issue #1, maybe that will fix #2 as well.

I'm going to work on implementing off-canvas tomorrow morning when I get in to fix that weird movement on expanding/collapsing the details pane.

As for the BG gradient, yeah it looked a bit odd when I used that CSS and after fiddling with it for a while, I realized just getting a texture would be quicker & easier. The file itself is just a few bytes so I thought it would be okay to do. If required, I can go back and tweak the CSS until we can replicate the same effect.

Comment 18

[Cassie McDaniel [:cassiemc]]

Good progress, Dale. Few things from design perspective.

Collapsed view
* gradient below the bar should be transparent. I agree with Ross, we should try to get this working in css.
* blue boxes in remix and share buttons not perfectly aligned (share is 1px lower)
* text in the blue boxes also seems misaligned. The "share" text needs to go up 1px; the "remix" text needs to go up probably 2; the boxes should look identical in terms of text size and spacing/padding.
* ultimately those share and remix buttons need to be clickable. I still need to work through the UX here.
* move both remix and share buttons up a pixel. They should have equal vertical spacing above and below.
* Link the logomark (m in the circle) to webmaker as well.

Expanded view
* gradient on top of the bar should not be there
* Movement: I'm in agreement with Dave/Ross. Seems a bit jerky, and would be better coming in from the top.
* user avatar should also link to daleee's profile
* "Remixed from daleee" thumbnail should be clickable back to the original project.
* I suggest "popcorn" link to the tools overview page, which is in progress.

Overall:
I think it would be nice if you clicked anywhere in the bar (other than what is a link) to expand it. Makes it nice and easy to use. Alternately, when the bar is expanded, clicking anywhere inside that view (ie. anywhere on the stripes that is not a link) will re-collapse it.

Comment 19

[Dale Karp (:daleee)]

Hey Cass, thanks for the review!

I'm not sure what you mean by gradient, so perhaps you can show me tomorrow?
Working on misaligned blue boxes, will align the contents within though.
I'll make those items links to "#", like the others, for now (except for the ones that link to existing pages).

As for the expanding/collapsing comment... I get what you're saying but I'm not sure how well that would work from a usability standpoint. If everything but the links on the bar is also a link, I would personally find that very confusing. Also, it would diminish the effect of having a link stand out in it's blue colour. Likewise for collapsing. I'm just thinking on paper (or screen) here, so I could be wrong.

Comment 20

[Ross Bruniges [:boozeniges]]

I'm with Dale on the clicking anywhere to close stuff - super bad for people with motor impairment and for mobile users who might accidentally click when they mean to scroll that's going to be a nightmare. Let's keep things simple here and as un-confusing as possible.

Dale - I think a lot of the share/remix button alignment problems can be solved if you go to replacing the icon images with a background image. As the remix image is 3px higher than the share one (15px v 12px) it's physical height is causing all sorts of problems.

I'll see if I can get the CSS background looking OK (note it might not look EXACTLY the same as the image version but it will be close enough) and we can touch base on the off-canvas stuff if needed later.

Comment 21

[Ross Bruniges [:boozeniges]]

Sorry Dale - I rather over-estimated the readyness for browsers to support that syntax I provided. 

http://dabblet.com/gist/5590365

Both firebox and safari are a bit buggy - note the random thicker line and it totally falls to pieces in Chrome whenever the line is thinner than 5px. I'm going to see if I can find any news from our and other CSS engine devs to see if there are fixes for this coming.

So let's stick with our background-image solution for now. It works very well!

Comment 22

[Ross Bruniges [:boozeniges]]

Hmm - so looping back in on the work happening in https://bugzilla.mozilla.org/show_bug.cgi?id=862361

Should we switch the bars we're using around?

As it currently stands it looks like we're using the 'user-bar' where I think for this we should be using the app bar?

Comment 23

[Cassie McDaniel [:cassiemc]]

(In reply to Ross Bruniges [:boozeniges] from comment #20)
> I'm with Dale on the clicking anywhere to close stuff - super bad for people
> with motor impairment and for mobile users who might accidentally click when
> they mean to scroll that's going to be a nightmare. Let's keep things simple
> here and as un-confusing as possible.

I'd still like the entire bar to be clickable, and same for closing. Maybe not the stripey area.

Comment 24

[Cassie McDaniel [:cassiemc]]

(In reply to Dale Karp (:daleee) from comment #19)
> Hey Cass, thanks for the review!
> 
> I'm not sure what you mean by gradient, so perhaps you can show me tomorrow?

Hopefully this clears things up: http://cl.ly/P0yH

Re. the bottom gradient being transparent, I think I was seeing it as if it overlapped the image and had a white background – but I think that was wrong, there's just a bit of a gap between the bar and the image. If you moved the image down a bit more, with say a margin-top 10px, that should help.
 
> As for the expanding/collapsing comment... I get what you're saying but I'm
> not sure how well that would work from a usability standpoint. If everything
> but the links on the bar is also a link, I would personally find that very
> confusing. Also, it would diminish the effect of having a link stand out in
> it's blue colour. Likewise for collapsing. I'm just thinking on paper (or
> screen) here, so I could be wrong.

When I was using it, that's what I wanted to do with it. Felt right to me. I agree with Ross though, not necessary for MVP.

Comment 25

[Cassie McDaniel [:cassiemc]]

(In reply to Ross Bruniges [:boozeniges] from comment #22)
> Hmm - so looping back in on the work happening in
> https://bugzilla.mozilla.org/show_bug.cgi?id=862361
> 
> Should we switch the bars we're using around?
> 
> As it currently stands it looks like we're using the 'user-bar' where I
> think for this we should be using the app bar?

Ross explained his main concern was that it should be the blue/grey background; buttons and content would stay as proposed in the design. We agreed to keep the designs we have for now; there may be further streamlining we can do in a second pass.

Comment 26

[Dale Karp (:daleee)]

Attachment: http://dk-webmaker.herokuapp.com/make/loller

- Animation is currently broken, after that's fixed we should be ready to go

Comment 27

[Ross Bruniges [:boozeniges]]

Dale - am wondering if this section might be causing the broken animations...

.js-details .make-bar {
  -webkit-transform: translate3d(0, 0, 0) !important;
  -moz-transform: translate3d(0, 100%, 0) !important;
  -ms-transform: translate3d(0, 0, 0) !important;
  -o-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
} 

Big difference between the -moz and other values might explain why firefox works but nothing else does?

Comment 28

[Cassie McDaniel [:cassiemc]]

Design looks great, ++ Dale! I still want a wider click area on the bar. And - as Dale and I discussed yesterday - clicking outside the details area (as opposed to within it, similar to lightbox functionality) to close it. When I'm looking at a lot of projects and project details one after the other, making the 'reveal details' action fast and easy is pretty imperative.

One weird thing I noticed in trying to get back to this bug in the browser was that when you click "back" you have to cycle through all the show/hides that I clicked. Is that something we can control? Would be better to ignore those clicks, imo.

Comment 29

[Dale Karp (:daleee)]

- Last fixes in
- HTML & LESS cleaned up

Ready to go?

Comment 30

[Dale Karp (:daleee)]

Attachment: PR for latest Heroku build

Comment 31

[Cassie McDaniel [:cassiemc]]

Comment on attachment 750864 [details]
http://dk-webmaker.herokuapp.com/make/loller

I still see a bit of jerkiness on the transition – the project title and the "Remixed from daleee" jerks from the side a few pixels upon open and close, in Firefox 21 for mac. But, I did see it didn't happen on Dale's browsers.

I think this is ready, from design perspective. We will need to come back to the share and remix buttons to hook up the functionality.

Comment 32

[inactivate account for kate]

Comment on attachment 751087 [details] [review]
PR for latest Heroku build

I left a lot of nits, feel free to file new tickets or ignore things like changing icons to font-awesome, etc. that take a long time to fix. Also, I noticed your JS was inline and unfortunately won't get linted (right?), it would be nice to solve that eventually.

I'm assuming the actual functionality of filling things in with makeAPI will be done in another ticket?

One more thing not in the PR, you need to deal with floats in the make-bar so that this doesn't happen:
http://dl.dropbox.com/u/29163874/Screenshots/is.png

Either set min-width or at least hide overflow

Comment 33

[Dale Karp (:daleee)]

Attachment: https://github.com/mozilla/webmaker.org/pull/19

Addressed most (but not all... sue me!) nits. Still left some hacky things in as the page currently works and I don't want to break anything by 'fixing' it ATM.

This PR isn't meant to actually land on moz/webmaker.org, it's just opened there to take advantage of GH's line commenting features so don't mind the Travis warnings.

Comment 34

[Dale Karp (:daleee)]

Currently being integrated into Webmaker apps by Matt.