Created attachment 8535823 [details] 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.
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
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.
Created attachment 8536685 [details] persona_sign.png
Created attachment 8536688 [details] persona_dark_nav.png the persona sign in on the navbar (dark theme)
Created attachment 8536690 [details] sign_in_nav.png Normal sign in without the sign in on the sidebar
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?
That's a good screenshot. Can you make one now that uses the Persona button too?
Hey Peter. I already did a Persona one. I just attached the feedback with that.
(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 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.
Attachment #8536688 - Flags: feedback?(peterbe) → feedback-
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.
Created attachment 8536861 [details] 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.
Created attachment 8536864 [details] persona_nav_rev2.png Just realized that I had changed the text-transform for the entire nav there, so updated it.
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 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.
I love it! Great work Anurag!
(In reply to Richard A Milewski[:richard] from comment #18) > I love it! > > Great work Anurag! Which one do you prefer?
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?
Assignee: nobody → anuragchaudhury
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
This has been merged and deployed on prod. Perhaps next one to work on is: https://bugzilla.mozilla.org/show_bug.cgi?id=1104806
Status: NEW → RESOLVED
Last Resolved: 4 years ago
Resolution: --- → FIXED
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
You need to log in before you can comment on or make changes to this bug.