Closed
Bug 1111003
Opened 10 years ago
Closed 10 years ago
Move Sign-in button
Categories
(Webtools Graveyard :: Air Mozilla, defect)
Tracking
(Not tracked)
RESOLVED
FIXED
People
(Reporter: peterbe, Assigned: anuragchaudhury)
References
Details
Attachments
(3 files, 5 obsolete files)
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.
Assignee | ||
Comment 1•10 years ago
|
||
Sample with persona in nav main
Assignee | ||
Comment 2•10 years ago
|
||
Without persona
Assignee | ||
Comment 3•10 years ago
|
||
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
Assignee | ||
Updated•10 years ago
|
Attachment #8535953 -
Flags: feedback?(peterbe)
Reporter | ||
Comment 4•10 years ago
|
||
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.
Assignee | ||
Comment 5•10 years ago
|
||
Attachment #8535953 -
Attachment is obsolete: true
Attachment #8535953 -
Flags: feedback?(peterbe)
Assignee | ||
Comment 6•10 years ago
|
||
the persona sign in on the navbar (dark theme)
Attachment #8535951 -
Attachment is obsolete: true
Attachment #8536685 -
Attachment is obsolete: true
Assignee | ||
Comment 7•10 years ago
|
||
Normal sign in without the sign in on the sidebar
Attachment #8536690 -
Flags: feedback?(peterbe)
Assignee | ||
Comment 8•10 years ago
|
||
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?
Reporter | ||
Comment 9•10 years ago
|
||
That's a good screenshot.
Can you make one now that uses the Persona button too?
Assignee | ||
Updated•10 years ago
|
Attachment #8536688 -
Flags: feedback?(peterbe)
Assignee | ||
Comment 10•10 years ago
|
||
Hey Peter. I already did a Persona one. I just attached the feedback with that.
Reporter | ||
Comment 11•10 years ago
|
||
(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.
Reporter | ||
Comment 12•10 years ago
|
||
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-
Reporter | ||
Comment 13•10 years ago
|
||
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.
Attachment #8536690 -
Flags: feedback?(peterbe)
Assignee | ||
Comment 14•10 years ago
|
||
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.
Attachment #8536688 -
Attachment is obsolete: true
Attachment #8536861 -
Flags: feedback?(peterbe)
Assignee | ||
Comment 15•10 years ago
|
||
Just realized that I had changed the text-transform for the entire nav there, so updated it.
Attachment #8536861 -
Attachment is obsolete: true
Attachment #8536861 -
Flags: feedback?(peterbe)
Attachment #8536864 -
Flags: feedback?(peterbe)
Reporter | ||
Comment 16•10 years ago
|
||
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
Flags: needinfo?(richard)
Reporter | ||
Comment 17•10 years ago
|
||
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.
Attachment #8536864 -
Flags: feedback?(peterbe)
Comment 18•10 years ago
|
||
I love it!
Great work Anurag!
Updated•10 years ago
|
Flags: needinfo?(richard)
Reporter | ||
Comment 19•10 years ago
|
||
(In reply to Richard A Milewski[:richard] from comment #18)
> I love it!
>
> Great work Anurag!
Which one do you prefer?
Reporter | ||
Comment 20•10 years ago
|
||
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
Assignee | ||
Comment 21•10 years ago
|
||
Comment 22•10 years ago
|
||
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
Reporter | ||
Comment 23•10 years ago
|
||
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
Closed: 10 years ago
Resolution: --- → FIXED
Comment 24•10 years ago
|
||
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
Updated•4 years ago
|
Product: Webtools → Webtools Graveyard
You need to log in
before you can comment on or make changes to this bug.
Description
•