Plots2: Improve the profile dropdown on navbar
Description
Currently to go to users profile , one has to click on the profile option on navbar. This doesn't open up to profiles page though. However leads to another dropdown where user profile can be selected. This is misleading as the drop down has various other options as well one being profile.
Current Behavior
Expected Behavior
Maybe something like this where we show just the username on navbar and clicking this opens all the other options like profile, edit profile etc.
ananyaarun
All 18 comments
This is for discussion regarding this. @publiclab/plots2-reviewers any suggestions or comments ?
I feel its misleading to have to see a profile option in the profile dropdown.
- Either clicking on profile should directly take us to users profile page. Other options like subscriptions and edit etc can be present on the users profile page instead of dropdown.
- Else it would be good to change the dropdown to show username instead of profile and have the option to navigate to user profile in this dropdown.
I'd like to take this up if approved and change the present profile dropdown to the one shown in expected behavior :)
ananyaarun
on 14 Mar 2019
@ananyaarun Now there is a open PR on hover dropdown menu. So I guess this is not that necessary in my opinion. But maybe we can go for Account instead of Profile in Navbar.
CleverFool77
on 14 Mar 2019
I'm interested in working on this :)
Thanks.
CleverFool77
on 14 Mar 2019
@CleverFool77 Hey, since i have already made the change in my local , you mind if i continue working on this ? Was waiting for approval from reviewers before opening my PR.
Thanks :)
ananyaarun
on 14 Mar 2019
I thought you asked for suggestions so haven't worked on it . But yeah if you have already started working on it, then keep working :+1: . If you need any suggestions, you can ask here :wink: .
CleverFool77
on 14 Mar 2019
@CleverFool77 Sure !! :raised_hands:
ananyaarun
on 14 Mar 2019
Adding username on navbar sounds good to me. Let's confirm from @jywarren and then you can continue. Thanks @ananyaarun!
grvsachdeva
on 15 Mar 2019
Ah, the only issue I could think of is that the username is not of a consistent length, and could affect the folding of the navbar at different widths.
What if we changed it for a "person" icon from FontAwesome? https://fontawesome.com/v4.7.0/icons/
Then it would more generally refer to "profile/user stuff" without the expectation of a Profile page exactly. And it would make more space on the navbar. Could this work?
jywarren
on 15 Mar 2019
@jywarren , Thats a valid point regarding length of username. I'll change it to the icon and see how it looks and maybe add a screenshot here ? Thanks for the feedback :)
ananyaarun
on 15 Mar 2019
@jywarren @gauravano How does this look ?
ananyaarun
on 15 Mar 2019
oh cool -- but is that a fontawesome icon? In fontawesome, icons are
actually text characters and so they wouldn't push down the bottom of the
navbar; they'd just appear in-line. I think there might be one like <i
class="fa fa-user"></i> -- they're displayed inside <i> tags, like this:
Does that make sense?
Thanks!
On Fri, Mar 15, 2019 at 1:16 PM Ananya Arun notifications@github.com
wrote:
@jywarren https://github.com/jywarren @gauravano
https://github.com/gauravano How does this look ?[image: profile]
https://user-images.githubusercontent.com/32260628/54449432-0c522800-4774-11e9-94b3-4ee5f0f0bc8e.png—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/5074#issuecomment-473371021,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AABfJ8mDCf29vA4N1uj4cdA_jBN_QwEzks5vW9U-gaJpZM4b02J7
.
jywarren
on 15 Mar 2019
One icon doesn't match up that well in the navbar of texts. Maybe we can try an icon with text like facebook does?
And did you change the alignment of navbar. It looks shifted towards top with respect to the icon.
CleverFool77
on 15 Mar 2019
This might be a bad suggestion but what if we restrict user to put up username name text to be shown beside fav-icon with 8 characters. It won't be original username rather a username to be shown here on navbar.
CleverFool77
on 15 Mar 2019
@jywarren Yes it is a fontawesome icon. I know what the problem is. I gave it a size of 2x as the original one looked too small.
like this -
As you can see the alignment of navbar got extended due to the inc in size.
Any thoughts on this size problem ?
ananyaarun
on 15 Mar 2019
@CleverFool77 , Do you feel the current profile icon looks odd ? Also i feel adding a username name text and restricting it to 8 would unnecessarily confuse a new user when they are trying to create an account.
ananyaarun
on 15 Mar 2019
Oh, this looks quite nice though, i think it's good! I don't see the
alignment issue, can you offer more detail?
On Fri, Mar 15, 2019 at 2:28 PM Ananya Arun notifications@github.com
wrote:
@jywarren https://github.com/jywarren Yes it is a fontawesome icon. I
know what the problem is. I gave it a size of 2x as the original one looked
too small.
like this -
[image: profilenew]
https://user-images.githubusercontent.com/32260628/54453780-08c39e80-477e-11e9-9e75-0b4685377990.png
As you can see the alignment of navbar got extended due to the inc in size.
Any thoughts on this size problem ?—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/5074#issuecomment-473395700,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AABfJzeLEgqGGZ1c1J3UhfrkfOf1EdOwks5vW-YkgaJpZM4b02J7
.
jywarren
on 15 Mar 2019
Sure, So fontawesome icon has a default size which would look like this
To make it a little bigger i used the next available size which is basically 33% inc . (then 2x 3x 4x etc follow but that would be too big!)
Now while using the 2x size i initially did, the navbar's height inc slightly as in this screen shot
Personally i feel the 33% inc would do (second pic) This doesent inc height on Navbar as well :)
ananyaarun
on 15 Mar 2019
OK, that sounds good!
On Fri, Mar 15, 2019 at 2:36 PM Ananya Arun notifications@github.com
wrote:
Sure, So fontawesome icon has a default size which would look like this
[image: profilenew]
https://user-images.githubusercontent.com/32260628/54454072-a74fff80-477e-11e9-8d12-8640b007dd6b.pngTo make it a little bigger i used the next available size which is
basically 33% inc . (then 2x 3x 4x etc follow but that would be too big!)[image: bestsize]
https://user-images.githubusercontent.com/32260628/54454264-13326800-477f-11e9-9e94-2b854b54b7b4.pngNow while using the 2x size i initially did, the navbar's height inc
slightly as in this screen shot[image: profile]
https://user-images.githubusercontent.com/32260628/54454316-30ffcd00-477f-11e9-9ef8-b2d6c339f213.pngPersonally i feel the 33% inc would do (second pic) This doesent inc
height on Navbar as well :)—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/5074#issuecomment-473398446,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AABfJ1paRalMZg0z4H4-Hc3u-5WDzdYUks5vW-gSgaJpZM4b02J7
.
jywarren
on 15 Mar 2019
Related issues
![first-timers[bot] picture](https://avatars.githubusercontent.com/in/4832?v=4&s=40)
first-timers[bot]
·
3Comments
noi5e
·
3Comments
RuthNjeri
·
3Comments
milaaraujo
·
3Comments
shapironick
·
3Comments
Most helpful comment
Adding username on navbar sounds good to me. Let's confirm from @jywarren and then you can continue. Thanks @ananyaarun!