1111003 - Move Sign-in button

Status: RESOLVED FIXED

(Webtools Graveyard :: Air Mozilla, defect)

Description

[Peter Bengtsson [:peterbe]]

Attachment: Maybe like this?

At the moment we put the "Sign-in" button near the top of the right-hand sidebar. If we're going to remove or drop the side-bar we're potentially make it very hard to find the Sign-in button. 

E.g. We're thinking of making the video window much larger and make the content currently in the sidebar appear somehow below. Like a footer.

Let's move the Sign-in function to the top nav. 

We can either use the cute little orange/grey Persona button or we can use the same font as the other links in the top nav. 

First step would be to move the Persona sign-in button up there and see how it looks. If it looks good, we'll go with that. Alternatively we try the same font as the rest of the top nav. 

An advantage with using the Persona sign-in button is that it's a "brand" (kinda) and something people might recognize and not miss.

Comment 1

[Anurag Chaudhury]

Attachment: persona_sign.png

Sample with persona in nav main

Comment 2

[Anurag Chaudhury]

Attachment: normal_sign.png

Without persona

Comment 3

[Anurag Chaudhury]

Hey Peter,

Let me know what you think. I personally thought the persona sign in looks pretty decent but the normal "sign in" feels more consistent with the other buttons.

I also wanted to add that MDN's website has an interesting layout. All the nav buttons + the persona sign in + search are in the top section of the page, and the content is throughout the breadth of the page. Air Mozilla's content is all sort of centrally aligned. Since, the idea is inclined towards making the video window larger, if the content is spread out like in MDN, with the right sidebar essentially to the far right. Just thought of mentioning it . :D

Comment 4

[Peter Bengtsson [:peterbe]]

1. If we are to put the "Sign-in" in the top nav, we should stop having it in the sidebar. 

2. Why is your Persona sign-in button in the screenshot orange?? :)

3. Note the MDN uses a cute button for the sign-in. 

4. I'd love to see another screenshot where you simply move the Persona button up into the top nav bar. 

5. I'd love for Air Mozilla to have an entirely new design which uses more width. Perhaps with the right media queries we could do that too. Thus being able to have wider video windows AND the sidebar there. However, unless you are on a wide screen the sidebar might sooner or later have to make way for a bigger "main area" so whatever we do we'll have to move that Sign-in button so it's accessible without having to scroll. 

6. Please please when you're building your prototype, check how it works on smartphone device screens.

Comment 5

[Anurag Chaudhury]

Attachment: persona_sign.png

Comment 6

[Anurag Chaudhury]

Attachment: persona_dark_nav.png

the persona sign in on the navbar (dark theme)

Comment 7

[Anurag Chaudhury]

Attachment: sign_in_nav.png

Normal sign in without the sign in on the sidebar

Comment 8

[Anurag Chaudhury]

1. I was playing with the theme settings, so it turned out orange :D. 
2. Yeah I noticed their button is different and it has the github sign in integrated as well.
3. I checked with the smartphone view,should I attach a screenshot?

Comment 9

[Peter Bengtsson [:peterbe]]

That's a good screenshot. 
Can you make one now that uses the Persona button too?

Comment 10

[Anurag Chaudhury]

Hey Peter. I already did a Persona one. I just attached the feedback with that.

Comment 11

[Peter Bengtsson [:peterbe]]

(In reply to Anurag Chaudhury from comment #10)
> Hey Peter. I already did a Persona one. I just attached the feedback with
> that.

Oh. This one? https://bug1111003.bugzilla.mozilla.org/attachment.cgi?id=8536688
Something seems to have gone wrong there. The button is huge all of a sudden. And the little white semi-circle over "HOME" is now hovering below the top.

Comment 12

[Peter Bengtsson [:peterbe]]

Comment on attachment 8536688 [details]
persona_dark_nav.png

I'm guessing this was a mistake as the CSS seems to have gone wrong on this one.

Comment 13

[Peter Bengtsson [:peterbe]]

Comment on attachment 8536690 [details]
sign_in_nav.png

Thanks for doing that one. It's good material for making a decision. 
Now, if we can get the Persona button right we can better compare.

Comment 14

[Anurag Chaudhury]

Attachment: persona_nav_revised.png

Fixed the css. There was some padding,text changes from the other css files which was affecting the button. For an initial mockup, I just put the override in an inline style but if you guys decide to go with this, we can just put it as a more specific selector in the css file, I believe.

Comment 15

[Anurag Chaudhury]

Attachment: persona_nav_rev2.png

Just realized that I had changed the text-transform for the entire nav there, so updated it.

Comment 16

[Peter Bengtsson [:peterbe]]

Richard, what do you think?
https://bugzilla.mozilla.org/attachment.cgi?id=8536690&action=edit
or 
https://bugzilla.mozilla.org/attachment.cgi?id=8536864&action=edit

Comment 17

[Peter Bengtsson [:peterbe]]

Comment on attachment 8536864 [details]
persona_nav_rev2.png

This is great by the way. 

I think this is the design to go for. Just wanted to hear what Richard had to say.

Comment 18

[Richard A Milewski[:richard]]

I love it!

Great work Anurag!

Comment 19

[Peter Bengtsson [:peterbe]]

(In reply to Richard A Milewski[:richard] from comment #18)
> I love it!
> 
> Great work Anurag!

Which one do you prefer?

Comment 20

[Peter Bengtsson [:peterbe]]

Anurag,

I talked to Richard and he agrees that moving the whole Persona icon like https://bug1111003.bugzilla.mozilla.org/attachment.cgi?id=8536864 would be best. 
Can you make a PR with that?

Comment 21

[Anurag Chaudhury]

https://github.com/mozilla/airmozilla/pull/148

Comment 22

[[github robot]]

Commit pushed to master at https://github.com/mozilla/airmozilla

https://github.com/mozilla/airmozilla/commit/0b63fea6e7a017177697e60c2f5356ac35b04455
Bug 1111003 - persona button and really specific css

Comment 23

[Peter Bengtsson [:peterbe]]

This has been merged and deployed on prod. 

Perhaps next one to work on is: https://bugzilla.mozilla.org/show_bug.cgi?id=1104806

Comment 24

[[github robot]]

Commits pushed to master at https://github.com/mozilla/airmozilla

https://github.com/mozilla/airmozilla/commit/e4cbbcfcd79d2c8e1205c406a7d7e1a09f07a933
Bug 1111003 - CSS update for mobile

https://github.com/mozilla/airmozilla/commit/223c137376ecf0060cbe82924b845b57ecf967f9
Merge pull request #151 from anurag90x/Bug#1111003Update

Bug#1111003 update