UI Improvements Planning Issue : People Section

[CleverFool77]

Description

The basic Card UI of people section is already on halfway.
Now the further improvements are left.
As we were told during proposal that we should start off with easier ones first. And they should be given beginning of time in timeline. So we will start off with people section first which is the easiest.
The final UI for the people's page :

@gautamig54 We will add checklists here

card ui of users

• Vertical to horizontal cards @CleverFool77
• Add tags on cards @CleverFool77
• Add ellipsis which contains the user details as shown in the design @gautamig54

location

• Add user's location. @gautamig54

search by

• Add search by various places option below maps.

others

• Make the map sticky.
• position map on the top instead of bottom, in the mobile view @CleverFool77
• Fix overflow of tags @CleverFool77

[gautamig54]

@CleverFool77 Let's first start with the questions page as was mentioned by @jywarren.
Also, The six pages mentioned earlier only need to be redesigned?
We have the blog page remaining as well. The task was divided amongst lot of us, but since we are suppose to work towards UI implementation, can we complete the blog2 page as well?

[CleverFool77]

Hi @gautamig54 Actually, People section has most of the part done.
So, I was thinking of completing the section one by one.
But yeah if it was suggested by @jywarren , We can go with questions page first.
I'll open a new issue for questions page and break them into parts.
regarding blog2, I'll go and look into the matter that How much parts is already done.
I have some project evaluations and other pending stuff of this semester, So I won't fully active till 18th of May. Thanks for the patience.
And @gautamig54 It would be great if you could check out the other issue #5708 that I've opened. I have added some points in checklists.
Once again. Thanks !!!

[jywarren]

Hi, all! I was thinking, based on the new style guide that is rapidly coming to completion, what if we focused on 2 things: first, looking for any remaining Bootstrap 4 issues to fix, and 2nd, implementing the "content card" sections of the style guide and moving them into a common area like app/views/content/_person.html.erb, app/views/content/_post.html.erb and app/views/content/_topic.html.erb? Then they can be re-used all across the site.

[CleverFool77]

Hi @jywarren
This looks like great Idea.
But I wanted to ask that How should I divide the work in todos and milestones which was mentioned by siddharth in one of the issues of planning.
I'm bit confused regarding the process.

[jywarren]

Well, it sounded like people wanted to try using Projects, or planning issues with checkboxes and lists. You could do either. The main thing is to move a lot of the items from your proposals into GitHub somewhere so they can be updated as you go and boxes checked and issues closed bit by bit. Milestones are another way to manage this. I don't really have a strong preference as long as each team can coordinate between them, and others across the community can keep up to date on your overall progress. Make sense?

[gautamig54]

@CleverFool77 You are right! Completing people's sections seems like a great start. I have updated the issue. Also, I was thinking if we could add a search feature here. It seems relevant and necessary to add search feature. What do you think about it?

[CleverFool77]

Hi @gautamig54
Which search are you talking about ?
I'm not clear regarding that.
Thanks !!!!!

[gautamig54]

Search feature as in where anyone can search for a member on the page. Like we have a search feature on tags page. You get it @CleverFool77 ??

[gautamig54]

@CleverFool77 I also see a change in the margins due to which there is a change in card design from vertical to horizontal.

What do think about this? Should we change that as well?

[CleverFool77]

Let's discuss regarding search feature with @jywarren .
@gautamig54 Actually regarding card design. There were two designs. So I went for vertical for now.
But now as we are adding new features. I'll fix it. I have added it in checklist.

[gautamig54]

@CleverFool77 So you will be changing the margins as well??
I will get started with adding the user's location.

[CleverFool77]

Hi @gautamig54
I guess you have to wait a bit as first #5740 need to get reviewed and merged. How about doing the work in Questions Page like me.
As I told you earlier. I'm taking two issues sideways. As some parts or portions of some issues are dependent on each other and it might make us to stop for a while as we are unable to move further.
Thanks !!!

[gautamig54]

Yes @CleverFool77. Even I will follow the same strategy and work on two tasks simultaneously. I will implement the Add location option as it is not related to the cards design.

[CleverFool77]

Hi @gautamig54
yes, you can start off with location as it doesn't seem related.
thanks !!!

[gautamig54]

Also, alignment of the left and right column is required.

[CleverFool77]

Thanks for mentioning @gautamig54 I guess people text went out of column grid. That's why it wasn't algined.
I'll fix it.
Thanks !!

[CleverFool77]

Oh I just went through it and realised that it's due to margin-top in map. I'll fix it. Thanks !!!

Fixed UI

I've updated it in horizontal cards PR #5740

[gautamig54]

@jywarren I was going through the style guide and found a new design for the /people page.

Is this the updated design for the people's page?
cc: @CleverFool77

[CleverFool77]

@CleverFool77 the tags are exceeding the card boundaries. Can you check this.

Hmmm @gautamig54 @jywarren Any suggestions How should we deal with it ?

• Restricting tagname maybe ?
• add ellipses at overflow maybe ?

[jywarren]

Hi Gautami! The new design is not totally done yet. One thing I heard from people was that they prefer a smaller map which expands when you click it, so the page is not as overwhelmed by the map. It's not a huge change, really, but I'd love to hear your thoughts on it.

…

On Wed, May 29, 2019, 8:34 PM Gautami Gupta ***@***.***> wrote: @jywarren <https://github.com/jywarren> I was going through the style guide and found a new design for the /people page. [image: Screen Shot 2019-05-30 at 6 04 37 AM] <https://user-images.githubusercontent.com/35326753/58600058-90f71180-82a0-11e9-9ee7-98781e565935.png> Should we redesign the page according to this design? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#5707?email_source=notifications&email_token=AAAF6J3EUGRCGAE6DXW7Z5LPX4OGZA5CNFSM4HMISW22YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODWRAFUA#issuecomment-497156816>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAAF6J6RVHTHDNHH7I4Q23DPX4OGZANCNFSM4HMISW2Q> .

[CleverFool77]

Hi @jywarren
This thing about small map which expands looks cool idea. Because we usually don't prefer a big map spanning over the huge area on page rather a small open which we can span when we specifically want to look over it.
I guess we should implement this

[gautamig54]

Yes @jywarren even I think smaller map is a better idea. It takes up half the page, due to which the space below the map is wasted. It will help optimising the page. We can definitely go with this!

[gautamig54]

@CleverFool77 I played around a bit with font-size and padding. How do the cards look now?

[jywarren]

ok, glad we have some consensus on small map design! One question I had was, when you expand it, should it open to cover the whole page, or should it direct you to a new page at, for example, publiclab.org/maps (although at the location and with the same layers showing?)

[gautamig54]

How about a modal, not covering the entire page?

[jywarren]

Hm, can we make a mockup of what that might look like? Thanks!

…

On Tue, Jun 4, 2019 at 5:21 PM Gautami Gupta ***@***.***> wrote: How about a modal, not covering the entire page? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#5707?email_source=notifications&email_token=AAAF6J2CFWBAOOCX4DXNVZTPY3MC5A5CNFSM4HMISW22YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODW55DYA#issuecomment-498848224>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAAF6J2CVNM3GI5YJVXAKWTPY3MC5ANCNFSM4HMISW2Q> .

[gautamig54]

How about something like this @jywarren @CleverFool77
The modal will open up on clicking the map. People can zoom in and out the map on the modal itself.

[gautamig54]

@CleverFool77 regarding the exceeding of the tags from the card, I think adding ellipsis at overflow is a better option than restricting the tag name.

[jywarren]

I think the modal idea has promise. Why don't we take this approach: we start by simply sending people to a common map page at a fixed url. But we continue to prototype modal and other means of loading a map without reloading a page, and refine that gradually as it would be a bit more complex. This will also give us time to do more user testing. And, if we send to a fixed url we can do so to a specific location using the url hash approach. Visit publiclab.org/maps to see how the location hash works... It uses the # character.

…

On Thu, Jun 6, 2019, 12:50 PM Gautami Gupta ***@***.***> wrote: @CleverFool77 <https://github.com/CleverFool77> regarding the exceeding of the tags from the card, I think adding ellipsis at overflow is a better option than restricting the tag name. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#5707?email_source=notifications&email_token=AAAF6J5MLJHJHPRDDHXR6YTPZFS4VA5CNFSM4HMISW22YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODXD6Y6A#issuecomment-499641464>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAAF6J3F3ZU3QRRCCIWW4JLPZFS4VANCNFSM4HMISW2Q> .

[gautamig54]

Great work with the tags overflow @CleverFool77. It will be good if you could display the the entire tag on hover over the tags. What say?

[stale]

Hi 😄, this issue has been automatically marked as stale because it has not had recent activity. Don't worry you can continue to work on this and ask @publiclab/reviewers to add "work in progress" label 🎉 . Otherwise, it will be closed if no further activity occurs in 5 days -- but you can always re-open it if you like! 💯 Thank you for your contributions 🙌 🎈.

[jywarren]

This is basically done! Thanks, all!